Brand Guidelines
Colors
The Semji theme uses a semantic color system: you reference roles like primary or base-200 — not raw hex — so components stay consistent and the whole UI re-themes from one place. Each swatch shows its resolved Light & Dark value and a live WCAG contrast badge for its -content pairing; click any value or chip to copy it.
Semantic, not hardcoded
Use bg-primary over bg-[#FF4D64] — for consistency, easy theming and scale.
Every color has a “content” pair
text-primary-content is the foreground meant to sit on bg-primary (like MUI’s contrastText). The “Aa” chips + badges prove it.
One theme, two modes
Brand & surface roles resolve per theme (semji / semji-dark) — both values are shown. Extended palettes are fixed.
Naming grammar
Learn the pattern once and you can predict every token.
bg-primarya role/filltext-primary-contentthe foreground that sits on that fillbase-100 → 200 → 300surfaces by elevation / contrast orderink-*the text-tone ramp (darkest → lightest)-softa low-emphasis tint (badge-soft, btn-soft)bg-primary/10opacity modifier (10%)Brand & action colors
The four core roles. Each is a fill you place its -content foreground on.
Primary
Primary actions, links, focus & active nav — the Semji pink.
The single main action on a view, links, focus rings.
Fill large areas or use for body text.
Secondary
Secondary actions and supporting accents.
Secondary buttons and supporting emphasis.
Compete with the primary action.
Accent
Tertiary brand highlight (petrol-teal).
Highlight or categorize sparingly (tags, hints).
Use as a default button color.
Neutral
Dark chrome, neutral buttons & high-contrast surfaces.
Dark chrome, neutral/dark buttons, contrast bars.
Use as a page background.
Surfaces & text
Backgrounds from lightest to the dark hairline/shadow tint, plus body text.
Base 100
Cards & raised surfaces.
Cards, popovers, raised surfaces.
Use as the page background (use base-200).
Base 200
App / page background.
The app/page background behind cards.
Place low-contrast text directly on it.
Base 300
Borders, hairlines & shadow tint — intentionally dark, never a text surface.
Borders, dividers, shadow tint (shadow-base-300/X).
Use as a surface fill or place text on it — it is a tint, not a surface.
Base content
Primary text on base surfaces (ink).
Body & heading text on base surfaces.
Place on a colored fill (use that color’s -content).
State colors
Feedback colors for alerts, badges and validation.
Info
Neutral, informational messages.
Informational banners and badges.
Signal success or errors.
Success
Successful completion of an action.
Confirm completed actions; positive validation.
Use for neutral info or as a brand color.
Warning
Caution or important notices.
Caution, pending, attention-needed states.
Use for hard/destructive errors.
Error
Errors & destructive actions.
Destructive actions, failures, invalid input.
Use for non-actionable information.
Opacity & emphasis
Two orthogonal axes layered on any color: an opacity modifier and the soft / outline emphasis variants.
Opacity modifier — bg-primary/NN
10%20%30%40%60%80%100%Muted-text ladder — text-base-content/NN
Primary text — text-base-content
Secondary text — text-base-content/70
Tertiary / muted — text-base-content/50
Disabled — text-base-content/30
Button treatments (orthogonal to color) — solid / soft / outline / text / gradient / wave
Click “Wave” to see the press ripple.
Badge variants — solid / soft / outline
Extended brand palettes
Non-semantic utilities for richer brand work — fixed across themes. Each ramp step lists its job.
Eggplant ramp
Score & AI accents — score = content score · ai = AI/agent surfaces (not a decorative pop)
Blue
Ink ramp (text & icons)
Using colors
Any color works with every Tailwind color prefix — here each one is shown live on primary, not just labelled.
bg-primarytext-primaryborder-primaryring-primaryfill-primarystroke-primaryshadow-primaryoutline-primarydivide-primaryfrom-primaryvia-primaryto-primary