Skip to content
tourstandtravelstemplate
Get started

tourstandtravelstemplate: theme and typography

Colors

Every token, in every theme

Each panel below is pinned to one theme, so they sit side by side whichever theme the page is in. Add a theme to the config and it gets a panel of its own.

Light (light colour scheme)

  • background

    #FFFFFF

  • foreground

    #0F172A

  • card

    #FFFFFF

  • card-foreground

    #0F172A

  • popover

    #FFFFFF

  • popover-foreground

    #0F172A

  • primary

    #10B981

  • primary-foreground

    #022C22

  • secondary

    #D1FAE5

  • secondary-foreground

    #064E3B

  • muted

    #ECFDF5

  • muted-foreground

    #475569

  • accent

    #ECFDF5

  • accent-foreground

    #064E3B

  • destructive

    #DC2626

  • destructive-foreground

    #FFFFFF

  • border

    #E2E8F0

  • input

    #64748B

  • ring

    #059669

  • link

    #047857

  • highlight

    #FACC15

  • highlight-foreground

    #0F172A

  • inverse

    #064E3B

  • inverse-foreground

    #FFFFFF

  • inverse-muted

    #A7F3D0

Dark (dark colour scheme)

  • background

    #03201A

  • foreground

    #F1F5F9

  • card

    #0B2E26

  • card-foreground

    #F1F5F9

  • popover

    #0B2E26

  • popover-foreground

    #F1F5F9

  • primary

    #10B981

  • primary-foreground

    #022C22

  • secondary

    #064E3B

  • secondary-foreground

    #D1FAE5

  • muted

    #064E3B

  • muted-foreground

    #CBD5E1

  • accent

    #0B2E26

  • accent-foreground

    #F1F5F9

  • destructive

    #F87171

  • destructive-foreground

    #450A0A

  • border

    #1C4A3F

  • input

    #5E8F80

  • ring

    #34D399

  • link

    #34D399

  • highlight

    #FACC15

  • highlight-foreground

    #0F172A

  • inverse

    #064E3B

  • inverse-foreground

    #FFFFFF

  • inverse-muted

    #A7F3D0

Typography

Two fonts, one type scale

Each class sets the size, line height, letter spacing and weight in one go. Headline sizes are fluid: they grow smoothly with the screen.

font-display

'Bricolage Grotesque', 'Bricolage Grotesque Fallback'

Headings and big statements

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

font-sans

'Geist', 'Geist Fallback'

Body text: the page default

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

  • text-display

    Size
    clamp(3.5rem, min(1.5rem + 8vw, 15vh), 9rem)
    Line height
    0.9
    Letter spacing
    -0.045em
    Weight
    800

    Big ideas.

  • text-h1

    Size
    clamp(2.5rem, 1.75rem + 3.25vw, 4.5rem)
    Line height
    1.05
    Letter spacing
    -0.035em
    Weight
    700

    The page's one main heading

  • text-h2

    Size
    clamp(2rem, 1.5rem + 2.25vw, 3.25rem)
    Line height
    1.1
    Letter spacing
    -0.03em
    Weight
    700

    A section heading

  • text-h3

    Size
    clamp(1.5rem, 1.25rem + 1vw, 2rem)
    Line height
    1.2
    Letter spacing
    -0.02em
    Weight
    600

    A sub-heading or card title

  • text-h4

    Size
    1.25rem
    Line height
    1.35
    Letter spacing
    -0.01em
    Weight
    600

    A small heading

  • text-lead

    Size
    clamp(1.125rem, 1rem + 0.5vw, 1.375rem)
    Line height
    1.6
    Letter spacing
    inherit
    Weight
    inherit

    An intro paragraph under a heading: a little larger, to ease readers into the section.

  • text-body

    Size
    1rem
    Line height
    1.7
    Letter spacing
    inherit
    Weight
    inherit

    Normal text, the page default. The quick brown fox jumps over the lazy dog.

  • text-small

    Size
    0.875rem
    Line height
    1.5
    Letter spacing
    inherit
    Weight
    inherit

    Captions, notes and fine print.

  • text-eyebrow

    Size
    0.8125rem
    Line height
    1.2
    Letter spacing
    0.16em
    Weight
    600

    A label above a heading