LINADesign SystemAlt
    BasicsBrand VoiceComponentsExamples

    1. Color Tokens

    Forest & Gold palette. All tokens defined in lina-design-system/tokens-alt.css, scoped under .ds-alt. Values are bare HSL channels.

    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

    Four named accent colors: Teal, Green, Gold (Amber), and Orange.

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

    Gradients

    Primary → Gold (Brand gradient)from-primary to-spectrum-amber
    Hazy Icon Background.hazy-gradient

    2. Typography

    Font Families

    DM Sans — Primary Sans

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

    Libre Baskerville — Serif / Display

    For editorial accents and display headings. font-serif

    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 — Forest & Gold brand gradient.

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

    Spacing Scale

    Same 4px base spacing scale as the main design system.

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

    3. Shadows

    Light mode uses neutral shadows. Dark mode uses green-tinted glows for visibility on forest-green backgrounds.

    Shadow Scale

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

    4. Liquid Glass (Glassmorphism)

    Same glass recipe as the main design system, now rendered in the Forest & Gold palette.

    Glass Recipe

    Card / Panel

    bg-card/60 backdrop-blur-xl

    Glass card with forest-green tinted backgrounds.

    Navbar / Header

    bg-background/80 backdrop-blur-md

    Sticky header bar with cream (light) or deep green (dark) tint.

    Pop-up / Dialog

    bg-background border border-border

    Modals use a solid-ish background for readability.

    Glow Shadow

    Selected / Active

    glow-shadow

    Hover me

    hover:glow-shadow

    Dual-tone forest-green + gold glow for interactive depth.