Live App →
Developers

Design System

Typography, colour tokens, themes, and Tailwind variants for the Sentinel platform.

For Developers

Design System

Sentinel’s design system is built on Tailwind CSS with semantic tokens that support dark mode, audience-tinted accents, and premium financial-services aesthetics.

Typography

Font Stack

Role Font Weights Fallback
Body DM Sans 400, 500, 600, 700 system-ui, sans-serif
Headings Cormorant Garamond 500, 600, 700 Georgia, serif
Code IBM Plex Mono 400, 500 JetBrains Mono, monospace

Scale

Token Size Line Height Letter Spacing Usage
hero clamp(2.5rem, 5.5vw, 4.5rem) 1.02 -0.03em Home hero
h1 2.5rem 1.25 -0.025em Page titles
h2 1.75rem 1.25 -0.015em Section headings
h3 1.25rem 1.3 -0.01em Subsection
h4 0.8rem 1.4 0.08em Labels, uppercase
body 15.5px 1.75 0.005em Paragraphs
small 0.82rem 1.5 0 Captions, meta
code 0.82em 1.65 0 Inline code

Colour Tokens

Dark Mode (Default)

Token Value Usage
--bg-primary #07080b Page canvas
--bg-secondary #0e1014 Cards, sections
--bg-tertiary #14171d Sidebar, sunken
--bg-elevated #1a1e26 Hover, modal
--text-primary #f2f3f7 Headings, primary body
--text-secondary #b0b3bd Body, descriptions
--text-tertiary #6b6e78 Meta, disabled
--text-accent #93c5fd Links, active states
--border-light rgba(255,255,255,0.08) Subtle dividers
--border-medium rgba(255,255,255,0.13) Cards, inputs
--border-strong rgba(255,255,255,0.20) Focus, active

Audience Accents

Audience Primary Glow
Wealth Managers Gold #d4a853 shadow-glow-gold
Partners Green #10b981 shadow-glow-green
Developers Blue #60a5fa shadow-glow-blue

Tailwind Configuration

Key extensions in tailwind.config.ts:

{
  theme: {
    extend: {
      colors: {
        canvas: 'var(--bg-primary)',
        surface: 'var(--bg-secondary)',
        elevated: 'var(--bg-elevated)',
        'ink-primary': 'var(--text-primary)',
        'ink-secondary': 'var(--text-secondary)',
        'ink-tertiary': 'var(--text-tertiary)',
        accent: 'var(--text-accent)',
        gold: '#d4a853',
      },
      fontFamily: {
        sans: ['DM Sans', 'system-ui', 'sans-serif'],
        serif: ['Cormorant Garamond', 'Georgia', 'serif'],
        mono: ['IBM Plex Mono', 'JetBrains Mono', 'monospace'],
      },
      borderRadius: {
        sm: '6px',
        md: '12px',
        lg: '20px',
        pill: '999px',
      },
      boxShadow: {
        'elev-sm': '0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.6)',
        'elev-md': '0 4px 12px -2px rgba(0,0,0,0.6), 0 12px 32px -8px rgba(0,0,0,0.5)',
        'glow-gold': '0 0 0 1px rgba(212,168,83,0.25), 0 20px 60px -20px rgba(212,168,83,0.35)',
      },
    },
  },
}

Component Patterns

Cards

<div className="bg-surface border border-border-light rounded-md p-6
                transition-all duration-300 ease-out-expo
                hover:-translate-y-1 hover:border-border-strong hover:shadow-elev-md">
  {/* Card content */}
</div>

Buttons

Variant Classes
Primary bg-gradient-to-br from-indigo-500 to-cyan-500 text-white font-semibold rounded-sm px-6 py-3 shadow-lg hover:-translate-y-0.5
Secondary bg-transparent border border-border-medium text-ink-primary font-semibold rounded-sm px-6 py-3 hover:bg-white/5
Ghost text-accent font-medium hover:text-ink-primary transition-colors

Badges

<span className="inline-flex items-center gap-1.5 px-3 py-1
                   bg-white/5 border border-border-medium rounded-pill
                   text-xs font-semibold uppercase tracking-widest text-accent">
  Badge
</span>

Dark / Light Mode

Sentinel defaults to dark mode. Light mode is toggled via data-theme="light" on <html>.

// Toggle
document.documentElement.setAttribute('data-theme', isLight ? 'light' : 'dark');

All semantic tokens recompute automatically. Component code should never hardcode hex values.