Style Guide

Tokens extracted from https://linoxa.webflow.io/. Edit assets/css/tokens.css to rebrand.

Colors

Brand & semantic

--color-1

#00000000

used 28×

--color-2

--color-text

#00000033

used 26×

--color-3

--color-bg

#FFFFFF

used 25×

--color-4

--color-surface

#FFFFFF33

used 25×

--color-5

--color-border

#0000001A

used 21×

--color-6

#0F1E3600

used 20×

--color-7

--color-primary

#0F1E36

used 17×

--color-8

#FFFFFF00

used 16×

Typography

Heading font — `var(--font-heading)`

--text-5xl · 3rem

The quick brown fox

--text-3xl · 1.875rem

The quick brown fox jumps over the lazy dog

--text-xl · 1.25rem

The quick brown fox jumps over the lazy dog

Body font — `var(--font-body)`

--text-base · 1rem

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. Sphinx of black quartz, judge my vow. How vexingly quick daft zebras jump!

--text-sm · 0.875rem

Smaller body text for captions, footnotes, and metadata.

Buttons

Link

Forms

Label

Message

Choice

Cards

Flat card

Borders only, no shadow. var(--color-border)

Elevated card

Shadow, no border. var(--shadow-md)

Shadows

--shadow-sm

--shadow-md

--shadow-lg