Design Guidelines
Buttons, logos, active states, and interaction patterns. The rules that keep every surface coherent.
Button system · Logo by surface · Purple hierarchy · Active states · Do's & don'ts
Button system
Every button decision flows from one question: what surface is the button sitting on? The surface determines the fill. There are three contexts.
Light surface
White page, white card, surface bg. Use high-contrast dark ink — not purple — so the button reads as an action, not a brand element.
Primary
bg-ink-strong hover:bg-ink text-white
Secondary
border-surface-border text-ink/70 hover:text-ink
Branded card
White card floating on a dark brand surface. The CTA should echo the brand — use primary-950 so the button connects to the surround.
Primary
bg-primary-950 hover:bg-primary-800 text-white
Secondary
border-primary-950/25 hover:border-primary-950/50 text-ink
Dark surface
Button sits directly on dark bg (not inside a white card). Use white as the primary fill.
Primary
bg-white hover:bg-white/93 text-primary-950
Secondary
border-white/30 hover:border-white/55 text-white/85
| Surface | Primary fill | Hover | White text color |
|---|---|---|---|
| White page / light card | bg-ink-strong | hover:bg-ink | n/a (text is white) |
| White card on dark brand bg | bg-primary-950 | hover:bg-primary-800 | n/a (text is white) |
| Dark section / hero / footer | bg-white | hover:bg-white/93 | text-primary-950 |
Why not primary-600 for buttons?
Purple is Corbez's identity color, not an action color. On light surfaces, an electric violet button dilutes the brand — the color appears so often it loses authority. Dark ink reads as action; purple reads as identity. Linear, Vercel, and Stripe all use near-black or white for primary CTAs, not their brand hue.
Logo by surface
The Corbez logo exists in three color ways. The choice is mechanical — it depends entirely on the background the logo sits on.
corbez-logo-ink.svg
Use on: white, surface, surface-raised, light cards, dashboard sidebar, auth pages, onboarding, email headers on white bg
fill: #2E1065 (primary-950)
corbez-logo-white.svg
Use on: primary-950 hero, footer, dark nav, any background darker than #6B7280
fill: #FFFFFF
corbez-logo-purple.svg
Deprecated. Do not use. Replaced by ink version sitewide — the medium electric violet (#8D75E6) is brand mark only, not logo color.
| Location | File |
|---|---|
| Landing navbar (on primary-950) | corbez-logo-white.svg |
| Footer (on primary-950) | corbez-logo-white.svg |
| Dashboard sidebar (white bg) | corbez-logo-ink.svg |
| Auth pages — login, register | corbez-logo-ink.svg |
| Onboarding flows | corbez-logo-ink.svg |
| Mobile topbar (white bg) | corbez-logo-ink.svg |
| Email headers on white bg | corbez-logo-ink.svg |
One purple
Corbez uses a single authoritative deep brand purple. primary DEFAULT and primary-950 are the same value: #2E1065. Lighter tints (25–400) exist for surfaces only — never as solid fills.
primary DEFAULT = primary-950 = #2E1065
WCAG AAA on white (16.8:1) · The only solid purple fill
Use for:
- · Hero and footer backgrounds
- · CTA button fills (bg-primary or bg-primary-950)
- · Active tab underlines (border-b-2 border-primary-950)
- · Active filter pills (bg-primary-950 text-white)
- · Sidebar active nav (bg-primary-950/8 text-primary-950)
- · Step number circles and icon containers
- · Spinner arcs (border-b-2 border-primary-950)
- · Logo fill — corbez-logo-ink.svg (#2E1065)
Tints — surfaces only:
- · primary-100 / primary-50 — card backgrounds, badge fills
- · primary-200 — card borders, dividers on tinted surfaces
- · primary-400 — decorative accents, disabled highlights
- · primary/8 opacity — subtle active state washes
- · Never use 600/700 as solid fills — decorative tints only
| Token | Job | Never |
|---|---|---|
| primary (DEFAULT) | Identity accent — subtle labels, icon colors, decorative accents | Solid fill (bg-primary = jarring electric violet on screen) |
| primary-950 | Authority fill — dark surfaces, CTA on cards, active states | Body text (too heavy, unnecessary) |
| ink-strong | Action fill — CTA buttons on pure light surfaces | On white card over dark branded bg (use primary-950 instead) |
Active & selected states
All active and selected states use primary-950. No electric violet. This applies to every interactive pattern: nav, tabs, filter pills, step circles, toggles.
Sidebar nav
bg-primary-950/8 text-primary-950 font-semibold
Tabs
border-b-2 border-primary-950 text-primary-950
Filter pills
bg-primary-950 text-white (active)
Step circles
Step 1 = bg-primary-950
Toggle switch
bg-primary-950 (on) / bg-surface-border (off)
Persona pills
bg-primary-950 text-white shadow-sm (active)
Do's and don'ts
These rules were established during the brand color system audit and represent real decisions that were made and corrected.
bg-ink-strong hover:bg-ink text-white
Primary CTA on a white page or light card surface.
bg-primary text-white
Electric violet as a solid fill. Reads as jarring medium violet, not a brand moment.
bg-primary-950 hover:bg-primary-800 text-white
Primary CTA on a white card floating on a dark brand surface (hero, footer, CTA section).
bg-ink-strong on white card on dark bg
Three incompatible darkness levels. Use bg-primary-950 instead so the button connects to the brand surround.
bg-white text-primary-950 hover:bg-white/93
White button on any dark surface. Text must be primary-950 — deep brand purple, not electric violet.
bg-white text-primary (on dark surface)
Electric violet text on white button on dark background — jarring. Use text-primary-950.
corbez-logo-ink.svg on all light surfaces
fill:#2E1065 (primary-950). The ink logo is the deep brand purple, not generic black.
corbez-logo-purple.svg
Deprecated. Removed from all pages. Never use the medium violet logo variant.
border-b-2 border-primary-950 text-primary-950
Active tab underline. Deep, authoritative, on-brand.
border-b-2 border-primary text-primary
Electric violet tab underline. Creates visual noise; was corrected in the brand audit.
bg-primary-950/8 text-primary-950 font-semibold
Sidebar active nav item. Subtle tint, deep text, clear without being loud.
bg-primary/10 text-primary (active nav)
Old default. Electric violet tint + electric violet text on white sidebar = off-brand.
Back to
Brand Guidelines →