Capell brand tokens

Design tokens for Capell’s Structured Clarity direction: blue primary actions, quiet neutral surfaces, Inter typography, and soft tonal depth.

Files

File	Purpose
`design-tokens.css`	Full CSS custom properties — light and dark mode, all tokens
`tailwind-theme.css`	Tailwind v4 `@theme` block + utility classes

Usage

In your marketing site’s main CSS file:

@import 'path/to/design-tokens.css';
@import 'path/to/tailwind-theme.css';

Or copy the @theme block directly into resources/css/app.css.

Colour palette at a glance

Brand (never changes between modes)

Token	Hex	Name
`--color-primary`	`#4648D4`	Primary Blue
`--color-primary-hover`	`#6063EE`	Active Blue
`--color-accent-cyan`	`#515F74`	Slate Accent
`--color-accent-indigo`	`#C0C1FF`	Inverse Blue

Dark mode (default)

Token	Hex	Use
`--color-bg`	`#1B1B23`	Page background
`--color-surface`	`#24242C`	Cards, panels
`--color-surface-raised`	`#303038`	Elevated cards, code blocks
`--color-border`	`#767586`	Borders, dividers
`--color-text`	`#F2EFFB`	Body text
`--color-text-muted`	`#C7C4D7`	Secondary text

Light mode

Token	Hex	Use
`--color-bg`	`#FCF8FF`	Page background
`--color-surface`	`#F5F2FE`	Cards, panels
`--color-surface-raised`	`#EFECF8`	Elevated cards
`--color-border`	`#C7C4D7`	Borders, dividers
`--color-text`	`#1B1B23`	Body text
`--color-text-muted`	`#464554`	Secondary text

Dark mode toggle

Tailwind darkMode strategy: class. The dark class is applied to <html> by Alpine.js and persisted to localStorage. A tiny inline <script> in <head> reads localStorage before first paint to prevent flash.

<script>
    if (
        localStorage.getItem('theme') === 'dark' ||
        (!localStorage.getItem('theme') &&
            window.matchMedia('(prefers-color-scheme: dark)').matches)
    ) {
        document.documentElement.classList.add('dark')
    }
</script>

Default can be set per product surface. Public marketing pages should prefer the light palette unless the surrounding page already uses a dark shell.