expl-theme — style guide

Kitchensink

Every typography style, color token, component, section variant and utility the theme exposes. Use this page to verify your design system is wired up correctly and to spot visual regressions after theme updates.

Typography

Display

Display 1 — The quick brown fox

Display 2 — The quick brown fox

Headings (h1–h6)

Heading 1 — lorem ipsum dolor sit amet

Heading 2 — lorem ipsum dolor sit amet

Heading 3 — lorem ipsum dolor sit amet

Heading 4 — lorem ipsum dolor sit amet

Heading 5 — lorem ipsum dolor sit amet
Heading 6 — lorem ipsum dolor sit amet

Body

Lead — weighted intro paragraph used at the top of articles to draw the reader in.

Body large — lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Body (default) — lorem ipsum dolor sit amet, consectetur adipiscing elit.

Body small — lorem ipsum dolor sit amet, consectetur adipiscing elit.

Body xs — lorem ipsum dolor sit amet, consectetur adipiscing elit.

Subtitle

Subtitle — renders h4 scale

Links & inline

Regular paragraph with an inline link, strong emphasis, italic emphasis and inline code.

Lists

  • Unordered list item one
  • Unordered list item two
  • Unordered list item three
    • Nested item one
    • Nested item two
  1. Ordered list item one
  2. Ordered list item two
  3. Ordered list item three

Blockquote

“A pull quote set apart from the running text. Typography should feel intentional, not incidental.”

— Jan Tschichold

Marketing tag

Marketing tag with an inline link sitting over a background image.

Colors — raw ramps

Each ramp defined in oklch. These are the primitives — don't reference them directly in components, use semantic tokens below.

brand

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

grey

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

error

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

warning

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

success

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

Colors — semantic tokens

These are what components actually consume. They re-map inside [data-style] scopes.

Backgrounds

--bg
--surface

Text

Sample text

--text

Sample text

--lead

Sample text

--heading

Sample text

--display

Sample text

--link

Sample text

--link-hover

Borders

--border
--border-active
--border-muted

Section styles ([data-style])

Same markup, four modes. Semantic tokens (--bg, --text, --heading, --link…) re-map inside the [data-style] scope.

default (no attribute)

Heading on this surface

Body copy with an inline link and strong emphasis.

Solid Ghost

subtle

Heading on this surface

Body copy with an inline link and strong emphasis.

Solid Ghost

bold

Heading on this surface

Body copy with an inline link and strong emphasis.

Solid Ghost

full

Heading on this surface

Body copy with an inline link and strong emphasis.

Solid Ghost

Buttons

Solid

Solid brand Solid dark Solid light

Ghost

Ghost brand Ghost dark Ghost light

Text

Text brand Text dark Text light

With arrow modifier

Read more Read more Read more

Small

Small brand Small ghost

On data-style="bold"

Solid Ghost light Text light

On data-style="full"

Solid light Ghost light Text light

Forms

Rendered via Gravity Forms (form id 1). Covers default, focus, error and success states for every input type registered.

"*" indicates required fields

This field is for validation purposes and should be left unchanged.
Consent*

"*" indicates required fields

This field is for validation purposes and should be left unchanged.
Consent*

"*" indicates required fields

This field is for validation purposes and should be left unchanged.
Consent*

Article blocks

default

Card title

Short paragraph of body copy describing what this card is about. Keep it tight and scannable.

Read more

subtle

Card title

Short paragraph of body copy describing what this card is about. Keep it tight and scannable.

Read more

bold

Card title

Short paragraph of body copy describing what this card is about. Keep it tight and scannable.

Read more

Spacing scale

Scale uses clamp() from --spacing-32 onward so larger values scale fluidly with viewport.

--spacing-4
--spacing-8
--spacing-10
--spacing-12
--spacing-16
--spacing-20
--spacing-24
--spacing-32
--spacing-40
--spacing-48
--spacing-56
--spacing-64
--spacing-72
--spacing-80
--spacing-96
--spacing-120
--spacing-144
--spacing-160
--spacing-192
--spacing-240
--spacing-288
--spacing-320

Border radius

--radius-none
--radius-xs
--radius-sm
--radius-md
--radius-lg
--radius-xl
--radius-2xl
--radius-3xl
--radius-4xl
--radius-5xl
--radius-full

Shadows

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

Icons (FontAwesome tokens)

Rendered via --fa-var-* custom properties + --font-icon.

fa-arrow-right
fa-arrow-left
fa-arrow-up
fa-arrow-down
fa-chevron-right
fa-chevron-left
fa-chevron-up
fa-chevron-down
fa-plus
fa-minus
fa-check
fa-times
fa-bars
fa-calendar
fa-upload
fa-globe
fa-spinner

Transitions & easing

Hover a swatch below to see the token's duration + easing in action.

ease-in

--ease-in

ease-out

--ease-out

ease-in-out

--ease-in-out

Utilities

.sr-only

There is a screen-reader-only string right here (this text is visually hidden but announced by screen readers) — visually invisible, audible to AT.

Aspect ratio (mixin)

Elements below use the @include aspect-ratio() mixin via a demo wrapper.

3 : 2
16 : 9
1 : 1
4 : 5

Font weights

--font-weight-light The quick brown fox jumps over the lazy dog

--font-weight-normal The quick brown fox jumps over the lazy dog

--font-weight-semibold The quick brown fox jumps over the lazy dog

--font-weight-bold The quick brown fox jumps over the lazy dog