The Antithesis of Nonchalance
The living brand system. One repo, one set of tokens, one source of truth for every deck, carousel, page, and proposal we put our name on.
Click a color to copy its hex. Download a logo from the suite.
The living brand system. One repo, one set of tokens, one source of truth for every deck, carousel, page, and proposal we put our name on.
Click a color to copy its hex. Download a logo from the suite.
Our name defines us. We stand as the antithesis of nonchalance, unified by a commitment to genuinely care about every detail of our work and the success of our clients.
The Structured Flow is our operational DNA. It is how we integrate vibrant, imaginative creativity, our flow, with robust, insightful strategy, our structure. The most impactful results are born when inspired thinking is purposefully channeled.
You see it in the logo. The hexagon is the structure: a stable strategic framework, precision, reliability. The fluid internal lines are the flow: energetic creativity, adaptability, innovation. The gradients are the visual breath connecting the two.
All of it expresses one promise. We care, a lot.
Seven colors. The dark surface carries roughly sixty percent of every composition. Accents appear as gradient components, single-word type accents, or isolated highlights. They are never a full background on their own.
Type on the surface it is actually approved for. The ratio is measured from these hex values. A fail stays a fail.
| Color | Approved | Previous (logo SVGs) | Changed |
|---|---|---|---|
| Ember Red | #E31517 | #E3171B | yes |
| Clarity Sky | #83CAEA | #84CAEA | yes |
| Cobalt | #2A4999 | #2C4B9A | yes |
| Vibrant Spark | #E9E21D | #E8E122 | yes |
| Periwinkle | #C0BCDF | #C0BCDF | no |
| Core Onyx | #181818 | #1E1E20 | yes |
| Canvas Light | #F8F4F3 | #F8F4F3 | no |
The most distinctive element of the brand. Organic, grained, photographic. They read like light refraction or matter in motion. The dark always dominates.
Left is --chalant-gradient, the flat CSS ramp. Right is
gradient-onyxbackground-3.jpg from the library. Same colors, and they are not the
same thing. The CSS version has hard stops and no grain. That difference is the whole rule.
Negative tracking at every size. Medium, not Regular, is the dominant weight across the site. Display and H1 frequently mix weight inside one line.
Contemporary sans serif carrying our modern clarity and subtle tech vibe. Derived from Space Mono, its details give distinctive character in display sizes while staying clean and neutral at small text sizes. Its sturdy, rational structure with unique quirks is the Structured Flow in letterform.
SpaceGrotesk-VariableFont_wght.ttf
Variable, wght 300 to 700, self-hosted. Florian Karsten.
No 800 or 900 exists. Do not spec one.
Low-contrast geometric sans serif chosen for simplicity, readability, and a clean appearance. Built for performance at text sizes so our messaging stays effortlessly legible. It gives an unobtrusive foundation that lets the creative work command attention.
DMSans-VariableFont_opsz,wght.ttf plus italic
Variable, wght 100 to 1000,
opsz 9 to 40, self-hosted. Colophon Foundry.
Keep font-optical-sizing: auto on.
assets/fonts/. No CDN. Drag to see the real axis.The hexagon is the structure. The waves inside are the flow. The wordmark is always lowercase. Clear space on all sides is at least half the hexagon height.
Sixty-two gradients and twenty-one glass elements, pulled from Drive and living in the repo. Every tile links to the full-resolution file. Grain is the default. Reach for no-grain only when grain would fight the footage behind it.
Decks are 1920 by 1080 with a 64px safe margin. Carousels are 1080 by 1350. Internal slides carry a persistent five-column header bar at roughly 67px. Covers and section dividers omit it.
Gradient fills the frame. Small centered logo at top, large centered title, DM Sans subtitle. No header bar.
Dark dominates 70 to 80 percent. Ribbon wave across the bottom edge. The workhorse internal layout.
Gradient bleeds in from one side as an atmospheric light source. Organic, never geometric.
Headline left at one-third to one-half width, content right, divided by a 1px off-white rule.
Title at top, cards or table filling the lower portion. Used for data-heavy slides.
One word or short phrase on near-black, often with gradient text fill. No header, nothing else.
Dotted leader lines connect labels to values. Gradient ribbon anchors the bottom.
Both tables are measured off four live chalant.us pages by character count and computed style, not invented. If you are unsure, this is the answer.
If a human reads it in sentences, it is DM Sans.
If they scan it, it is Space Grotesk. When torn, pick Space Grotesk.
| Setting | Font | Wt | Size |
|---|---|---|---|
| Hero headline | Space Grotesk | 700 | 88-205 |
| Section heading | Space Grotesk | 700 | 40-63 |
| Subhead | Space Grotesk | 500 | 20-39 |
| Nav, UI, button label | Space Grotesk | 500 | 16 |
| Small label, meta | Space Grotesk | 400 | 14 |
| Stat number | Space Grotesk | 400 | 88 |
| Body copy | DM Sans | 500 | 15-18 |
| Bold phrase in body | DM Sans | 700 | = body |
| Long-form light | DM Sans | 300 | 15-18 |
| Caption, footnote | DM Sans | 400 | 12-14 |
Body is DM Sans 500, not 400. On the two case studies, body-size weight 500 accounts for 2,805 and 2,698 characters against 36 and 34 at weight 400. Medium is the body weight in this brand.
Accents live in gradients, not in type.
If you are about to colour a word, the honest default is: don't.
| Styling | Use | |
|---|---|---|
| Page background | Surface base | #000000 |
| Card, raised section | Surface raised | #05080C |
| Heading and body text | Canvas Light | #F8F4F3 |
| Secondary text | Text muted | #AAA9AD |
| Primary CTA fill | Canvas Light | #F8F4F3 |
| Secondary CTA fill | Clarity Sky | #83CAEA |
| Utility button | Surface raised | #05080C |
| One emphasis glyph | Vibrant Spark | #E9E21D |
| Indicator dot | Ember Red | #E31517 |
| Divider hairline | Canvas Light 12% | 12% |
| Everything else | Put it in a gradient | |
Across four live pages, accent colour appears on text exactly twice, both a single + glyph in Vibrant Spark. Cobalt and Periwinkle appear as flat colour nowhere. They exist only inside gradients.
Always a full pill, 100px to 150px radius. There is no square button in this brand. One primary per screen. If two things look primary, neither is.
Three files do the work. BRAND.md carries the rules in prose,
chalant.tokens.json carries them as data, and chalant.tokens.css
drops straight into any web project.
chalant-brand/ ├── index.html this page, the human-facing system ├── BRAND.md agent-readable rules, read this first ├── tokens/ │ ├── chalant.tokens.css CSS custom properties, drop-in │ ├── chalant.tokens.json structured tokens for tooling │ └── tailwind.config.js Tailwind theme extension └── assets/logos/ 40 production SVGs
<!-- Any web project -->
<link rel="stylesheet" href="tokens/chalant.tokens.css">
.hero {
background: var(--surface-base);
color: var(--text-primary);
font-family: var(--font-display);
letter-spacing: var(--track-display);
}
# Any coding agent Read BRAND.md and tokens/chalant.tokens.json before designing. Use only the tokens defined there. Do not invent colors or type sizes.