Efniv0.1

Foundations

Color

Semantic tokens are the only names components should know. Primitives exist to feed them — never reference primitives directly.

Background

  • bg-canvas

    --color-bg-canvas

    Page background

  • bg-surface

    --color-bg-surface

    Cards, panels, popovers

  • bg-muted

    --color-bg-muted

    Subdued fills, inactive states

  • bg-hover

    --color-bg-hover

    Hover states

  • bg-inverse

    --color-bg-inverse

    Contrast surfaces, tooltips

Text

  • text-primary

    --color-text-primary

    Body, headings

  • text-secondary

    --color-text-secondary

    Support copy

  • text-tertiary

    --color-text-tertiary

    Metadata, disabled

  • text-brand

    --color-text-brand

    Emphasis, links

Brand

  • brand

    --color-brand

    Primary actions

  • brand-hover

    --color-brand-hover

    Hovered primary

  • brand-soft

    --color-brand-soft

    Tinted brand backgrounds

  • focus-ring

    --color-focus-ring

    Focus outlines

Lines

  • border-default

    --color-border-default

    Rules, dividers, card edges, and control borders

Status

Each family has four steps — strong, base, soft, softest. Use base for fills, soft for tinted backgrounds.

  • status-success

    strong
    base
    soft
    softest

  • status-error

    strong
    base
    soft
    softest

  • status-warning

    strong
    base
    soft
    softest

  • status-away

    strong
    base
    soft
    softest

  • status-info

    strong
    base
    soft
    softest

Tags

Categorical palette. No meaning — users assign hues to labels, projects, priorities, whatever they want. Each hue has four roles for building a chip: surface (fill), border, text, solid (filled). Named by hue — the one place naming-by-color is correct.

  • amber

    amber
    surface
    border
    text
    solid

  • bronze

    bronze
    surface
    border
    text
    solid

  • cyan

    cyan
    surface
    border
    text
    solid

  • fuchsia

    fuchsia
    surface
    border
    text
    solid

  • gray

    gray
    surface
    border
    text
    solid

  • indigo

    indigo
    surface
    border
    text
    solid

  • lime

    lime
    surface
    border
    text
    solid

  • purple

    purple
    surface
    border
    text
    solid

  • rose

    rose
    surface
    border
    text
    solid

  • teal

    teal
    surface
    border
    text
    solid

Primitives

Reference only. Names describe the value, not the job. Semantic tokens above alias these.

ref/gray

— Near-neutral

0
50
100
200
300
400
500
600
700
800
900
950

ref/violet

— Mission Board accent

50
100
200
300
400
500
600
700
800
900
950

ref/blue

— Info status

50
100
200
300
400
500
600
700
800
900
950

ref/brass

— Ravn company color, alternate

50
100
200
300
400
500
600
700
800
900
950

ref/green

— Success

50
100
200
300
400
500
600
700
800
900
950

ref/red

— Error

50
100
200
300
400
500
600
700
800
900
950

ref/orange

— Warning

50
100
200
300
400
500
600
700
800
900
950

ref/yellow

— Away

50
100
200
300
400
500
600
700
800
900
950