Brand guidelines
The Bland system.
One palette, one type scale, one set of surfaces. Everything below is enforced — by the pre-commit hook, by CI tests, and by the brand reviewer agent. If code and this page disagree, this page wins.
01 · Color
One palette.
Surfaces and ink do the heavy lifting. Three impact accents do the moments. A small editorial palette handles category color on blog, integrations, and voices. Utility tints back callouts and chips. That's the whole system.
Hex values and names align with the product app (CINTELLILABS/FRONTEND) so the brand reads as one across surfaces.
Tier 1 · Surfaces
Page hierarchy.
Three grounds, three layers. The page defaults to White. Cards default to Fog. Fog-dark backs section bands like the final CTA. Footer is pure Dark.
White
--color-white
- L0 — page background
- L2 — cards nested inside a Fog panel
White card nested in a Fog panel.
Fog
--color-fog
- L1 — every card, panel, box, callout
- Footer of editorial pages
- Hover tint on quiet rows
Fog panel on a white page.
Fog-dark
--color-fog-dark
- Section bands (Final CTA, page bookends)
- Dense table header background
- Disabled-state fills
Border-soft
--color-border-soft
- Soft dividers inside white documents
- Card edges on white pages
- Quiet horizontal rules
Tier 2 · Ink
Text and borders.
One off-black plus muted dark levels. No pure black anywhere. Dark (#151515) is the floor.
Dark
--color-dark
- Headings (H1–H4)
- Body text default
- Footer ground
- Solid icons
Voice agents that resolve high-volume calls 24/7.
Secondary
--color-secondary
- Body text muted (captions, attributions)
- Section overlines / eyebrows
- Inactive nav items
Trusted by 250+ teams across enterprise.
Border
--color-border
- Default card borders
- Input borders (rest state)
- Table dividers
Border-emphasis
--color-border-emphasis
- Hover state for bordered cards
- Active inputs
- Pull-quote left rule
Tier 3 · Impact accents
Gold, Red, Green.
The three colors that get to be loud. One per viewport on homepage, product, pricing, and conversion surfaces.
Gold
--color-gold
- Book a demo (terminal CTA)
- Final CTA section background
- Focus ring
- KnowledgeBase pulse
Red
--color-red
- Errors and validation failures
- Urgency moments
- Guardrails fail-state
- Latency-warning bar
Green
--color-green
- Success states / positive metrics
- Live pulse on homepage feed
- Strategy blog category
- Telephony integration tag
Tier 4 · Editorial
Grounded category colors.
Earthier extended palette for blog categories, integration tags, voice personas, animation accents. Allowed on editorial surfaces only — never on the homepage, product pages, or conversion CTAs.
Indigo
--color-indigo
- Announcement bar
- Blog category: Product
- Integration category: CRM
- KnowledgeBase animation pulse
Purple
--color-purple
- Editorial deep moments (long-reads, essays)
- Case studies hero accents
- Code syntax keyword tokens
Gold-700
--color-gold-700
- Blog category: Case studies
- Integration category: Scheduling
- Voice persona: Nat
- Bronze tag color
Tier 5 · Utility tints
Quiet callout backgrounds.
Each is the same hue at 8–12% opacity over the underlying ground. Drawn only from the impact + editorial palette — no bright-tint specials.
Green-tint
--color-green-tint
- Success callout background
- "Up" trend chips
- Strategy category chip background
Red-tint
--color-red-tint
- Warning callout background
- Failed-state chip background
- Error input background
Gold-tint
--color-gold-tint
- Accent callout background
- Hover state for Gold buttons
- Highlighted row tint on tables
Dark-8
--color-dark-8
- Inline code chip background
- Hover tint on neutral buttons
- Quiet row stripe in dense tables
02 · Surface hierarchy
Page is white. Boxes are fog.
L0 — Page
White
The ground every page starts on. body + every section that isn't deliberately panelled.
The page itself.
L1 — Panel
Fog with soft border
Anything that wants to read as a box, card, callout, or container.
A panel on the page.
L2 — Nested
White inside a fog panel
Cards nested in a Fog L1 panel lift back to White with a soft border.
A nested white card.
03 · Type
Nine slots.
Söhne (Klim) across the system. Every off-scale value (18, 17, 15, 13, 22, 26, 28) collapses to the nearest of the nine slots below.
Tracking is locked at -0.04em on headings and -0.02em elsewhere.
Display
96px · 300 · -0.02em
text-display
Atmospheric stat. One moment per page.
H1
64px · 600 · -0.04em
text-h1
Page hero only.
H2
48px · 600 · -0.04em
text-h2
Section headlines.
H3
32px · 600 · -0.04em
text-h3
Subsection headlines, large card titles.
H4
24px · 600 · -0.04em
text-h4
Tile titles, small headings inside cards.
Body
20px · 400 · -0.02em
text-body
Primary body, subheads, descriptions.
Body-sm
16px · 400 · -0.02em
text-body-sm
Secondary body, tile descriptions.
UI
14px · 500 · -0.01em
text-button
Buttons, captions, attributions, picker chips, nav.
Eyebrow
11px · 500 · +0.08em
text-overline
Overlines. UPPERCASE. Tiles / cards only.
04 · Weight
Four weights.
Halbfett
600
The quick brown fox.
Ceiling. All headings. H1 → H4.
Kräftig
500
The quick brown fox.
Buttons, eyebrows, nav, body emphasis, captions.
Buch
400
The quick brown fox.
Body, Body-sm, paragraph copy, descriptions.
Leicht
300
The quick brown fox.
Atmospheric. Display 96 only. The lead number on Latency.
05 · Spacing
Section padding + layout.
Section padding
Choose by intent.
Bookend
64px / 64px
LogoStrip, hero bottom, exit bookend.
Canonical
96px / 96px
Default for almost every section.
Atmospheric
144px / 144px
Latency, single-claim moments. Use sparingly.
Layout tokens
Frame, margin, card.
Content width
--content-width
1280px
Max content width. Page margins live outside this.
Page margin
--margin
80 / 40 / 20
Page outer margin. Desktop / tablet / mobile.
Card padding
--card-padding
32px
40px for hero/feature cards, 28px for compact panels.
Card gap
--card-gap
16px
Gap between cards in a grid or row.
06 · Radii
Two surface radii. Zero pills.
Surface
6px
Cards, buttons, panels, sticky surfaces. The site default.
Small badge
4px
Eyebrow chips, FDE badge, tile CTAs.
Pill
999px
KILLED. Not used. Replace with a 6px rounded-rect.
07 · Anti-patterns
What we don't do.
No dark backgrounds.
Solid Dark backgrounds break the system. Use Dark as ink, not ground. The footer is the only sanctioned full-bleed Dark surface — every other section stays on White or Fog with borders.
No colored top stripes on cards.
A 1–2px colored line at the top of a card as a category indicator reads as an AI tell. Use a proper colored pill chip instead.
No colored left-borders.
Colored left-border accents are not a brand pattern. The only exception is the Norm demo phase bubbles.
No bright purples / magentas / violets.
The brand stays earthier and grounded. Deep Purple (#5E007E) survives for narrow editorial use. Bright Violet, Magenta, and Rose are retired from the system.
No type weights above 600.
Halbfett 600 is the ceiling. No 700, no 800. The hero H1 sits at the ceiling — never heavier.
No section eyebrows above an H2.
Section titles stand on their own. An eyebrow above an H2 reads as committee deck, not Bland. Eyebrows are allowed inside bento cards / tiles only.
No hardcoded hex.
Every color resolves to a token. Hex literals in TSX or CSS are caught by the brand pre-commit hook.
No pills (999px radius).
Pill-shaped buttons or badges are not the brand. Use 4px or 6px rounded rectangles.
If a topic isn't on this page, it isn't locked yet. Voice, photography, motion, decks, illustration, generative art, logo system, and responsive scales are deliberately out of scope. When you hit one of those, stop — flag Kal.