LINADesign System
    BasicsBrand VoiceComponentsExamples

    1. Color Tokens

    All tokens are defined in lina-design-system/tokens.css and consumed via CSS custom properties. Values are bare HSL channels so opacity modifiers work: hsl(var(--primary) / 0.5).

    Core Palette

    Primary--primary
    Primary FG--primary-foreground
    Background--background
    Foreground--foreground
    Muted--muted
    Muted FG--muted-foreground
    Card--card
    Accent--accent
    Destructive--destructive
    Border--border
    Input--input
    Ring--ring

    Spectrum Accent Colors

    A fixed palette of four named accent colors used for data visualisation, status indicators, and gradient stops. Available as Tailwind utilities: bg-spectrum-teal, text-spectrum-amber, etc.

    Teal--spectrum-teal
    Green--spectrum-green
    Amber--spectrum-amber
    Orange--spectrum-orange

    Gradients

    Primary → Amber (Brand gradient)from-primary to-spectrum-amber
    Hazy Icon Background.hazy-gradient
    Section Background Haze.hazy-section-gradient

    2. Typography

    Font Families

    Inter — Primary Sans

    Used for all UI text, headings, and body copy. font-sans

    Outfit — Display / Accent

    Available for editorial accents and display headings. font-display

    IBM Plex Mono — Monospace

    For code snippets, technical labels. font-mono

    Type Scale

    H1Page Headline
    H2Section Headline
    H3Card / Sub-section Title
    H4Small Heading
    BodyBody text — The quick brown fox jumps over the lazy dog.
    SmallSupporting / meta text
    XSLabel / Overline

    Branded Text (LINA gradient)

    LINA — always rendered with the brand gradient in headlines.

    bg-gradient-to-r from-primary to-spectrum-amber bg-clip-text text-transparent

    Spacing Scale

    All spacing is based on a 4px base unit. Use Tailwind spacing utilities (p-4, gap-6, etc.) — avoid arbitrary pixel values.

    TokenValueCommon use
    space-14pxIcon padding, tight gaps
    space-28pxBetween label and input
    space-312pxInternal card padding (compact)
    space-416pxDefault element gap
    space-624pxSection internal spacing
    space-832pxBetween major UI blocks
    space-1248pxSection-to-section on web
    space-1664pxHero / page-level vertical rhythm

    3. Shadows

    Seven shadow sizes sourced from CSS variables in lina-design-system/tokens.css. Use the Tailwind utilities: shadow-sm, shadow-md, etc. In light mode shadows are neutral black-alpha. In dark mode they become cyan glows for visibility.

    Shadow Scale

    shadow-2xs--shadow-2xs
    shadow-xs--shadow-xs
    shadow-sm--shadow-sm
    shadow-md--shadow-md
    shadow-lg--shadow-lg
    shadow-xl--shadow-xl
    shadow-2xl--shadow-2xl

    Usage Guidelines

    TokenCommon use
    shadow-2xs / shadow-xsSubtle lift — badges, chips, input focus rings
    shadow-smAccordion cards, tooltips, secondary panels
    shadow-mdDefault card elevation — feature tiles, stat cards
    shadow-lgModals, dropdowns, floating panels
    shadow-xl / shadow-2xlHero elements, full-screen overlays

    4. Liquid Glass (Glassmorphism)

    The default container aesthetic is liquid glass — semi-transparent backgrounds with a heavy backdrop blur, thin low-opacity borders, and coloured glow shadows for depth.

    Glass Recipe

    Card / Panel

    bg-card/60 backdrop-blur-xlborder border-border/20

    Used for stat cards, selection cards, feature tiles, and all dashboard panels.

    Navbar / Header

    bg-background/80 backdrop-blur-mdborder-b border-border

    Sticky header bar uses a lighter blur to keep content readable while scrolling.

    Pop-up / Dialog

    bg-background border border-borderOverlay: bg-black/80

    Modals and dropdown menus use a solid-ish background behind blur so text stays crisp.

    Glow Shadow

    Selected / Active

    glow-shadow

    Hover me

    hover:glow-shadow

    Dual-tone cyan + amber glow replaces solid borders for interactive depth. In dark mode the glow intensifies for visibility.