Exaflair
Powered by intelligence, driven by flair.
The brand as a living reference. Every value on this page comes from brand/tokens.css; if it looks right here, it is right in code. Click any color to copy its hex.
- Typeface
- Montserrat, five weights
- Palette
- Two oranges, white, almost black
- Grounds
- #111111 dark, #F1F1F1 light
- Accent budget
- One or two orange moments per screen
Four colors. One of them does the talking.
Tangerine is the accent and the only saturated color on a screen. Yellow Orange is a second tier for hover, highlights and warm tints. Everything else is white, almost black, and the greys between them.
Burnt orange and off-white are sampled from the kit's images, not stated in it. The greys are ours, derived from Almost Black for UI surfaces and borders. Tangerine on white is about 2.9:1 contrast: fine for large text and fills, not for body copy. On Almost Black it is about 7:1.
Montserrat, and nothing else.
One family in five weights carries the whole brand. Headlines in Medium and SemiBold with tight leading; body in Light and Regular. Bold is for the rare moment that needs it.
Where scale meets talent
Where scale meets talent
Where scale meets talent
Where scale meets talent
Where scale meets talent
Exa brings the scale
Exa brings the scale of a quintillion
Flair adds the finesse with intelligence built in
Flair adds the finesse with intelligence built in
Plug in product minds, AI-boosted builders, and systems that scale
Plug in product minds, AI-boosted builders, and systems that scale without the overheads.
Plug in product minds, AI-boosted builders, and systems that scale without the overheads.
Bootstrap or scale with our vetted talent powered by industry-leading AI workflows.
Eyebrows, labels, captions
Exaflair
Powered by intelligence · driven by flair
X and F. One stroke stays orange.
Two lockups, horizontal and stacked. On light grounds the F and second X stroke are Almost Black; on dark grounds they are White; on an orange field the X stroke goes black and the F white. Up to mid-grey use the light version, from mid-grey down use the dark one.
PNG · brand/logos/png/
- horizontal-light.png 6100×1765 · solid
- horizontal-dark.png 6100×1765 · solid
- horizontal-orange.png 6100×1765 · solid
- horizontal-light-transparent.png transparent
- horizontal-dark-transparent.png transparent
- horizontal-mono-transparent.png one color
- stacked-light.png 3000×3000 · solid
- stacked-dark.png 3000×3000 · solid
- stacked-orange.png 3000×3000 · solid
- stacked-light-transparent.png transparent
- stacked-dark-transparent.png transparent
- stacked-mono-transparent.png one color
Vector · brand/logos/vector/
- exaflair-logo-black.svg stacked · for light
- exaflair-logo-black.pdf stacked · for light
- exaflair-logo-black.eps 2.2 MB
- exaflair-logo-white.svg stacked · for dark
- exaflair-logo-white.pdf stacked · for dark
- exaflair-logo-white.eps 2.2 MB
Vector files exist for the stacked lockup only. The kit does not state clear space or minimum size; until it does, keep at least the monogram's height clear on every side and do not set the horizontal lockup below 120px wide.
A 4px grid and four corners.
Spacing steps are multiples of 4px so layouts line up without thinking about it. Radii stay modest: the kit's cards and swatches are softly rounded, never pill-shaped except for chips.
Spacing
Radius
Link the tokens, use the variables.
Every design in this repo loads the same stylesheet. Light is the default; add data-theme="dark" to <html> or let the OS decide.
<!-- in designs/<slug>/index.html --> <link rel="stylesheet" href="../../brand/tokens.css"> /* then */ body { background: var(--bg); color: var(--text); font-family: var(--font-sans); } h1 { font-size: var(--text-3xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); } .cta { background: var(--accent); color: var(--on-accent); border-radius: var(--radius-full); } .hero{ background: var(--gradient-brand); }