Scholium Wines

Design system

Visual language reference for Scholium Wines — type, color, spacing, and components. Toggle dark / light using the menu in the top-right corner.

Demo text is editable — click any underlined sample to try your own copy.

Type scale

Avenir Next — all sizes fluid via clamp(), viewport 320px → 1440px

Display

--text-display · 3.5 → 5.5rem

Heading 1

--text-h1 · 2.5 → 3.5rem

Heading 2

--text-h2 · 1.75 → 2.25rem

Heading 3

--text-h3 · 1.5 → 1.875rem

Heading 4

--text-h4 · 1.25 → 1.5rem

Body large — The wine carries a distinctive mineral character drawn from the volcanic soils of the vineyard.

--text-body-lg · 1.125 → 1.25rem

Body — Fermented with native yeasts and aged in neutral French oak, this wine expresses the full complexity of the vintage with restraint and precision.

--text-body · 1 → 1.125rem

Small — Bottled without fining or filtration. Contains sulfites.

--text-sm · 0.875 → 0.95rem

Meta — 2021 · Chardonnay · Napa Valley

--text-meta · 0.75 → 0.8125rem

Character set

All characters at body size — edit any row to test rendering

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Uppercase

a b c d e f g h i j k l m n o p q r s t u v w x y z

Lowercase

0 1 2 3 4 5 6 7 8 9

Numerals

. , : ; ! ? ‘ ’ “ ” ( ) [ ] / - – — & @ # % $ * + = < >

Punctuation & symbols

The quick brown fox jumps over the lazy dog.

Pangram — Avenir Next

The quick brown fox jumps over the lazy dog.

Pangram — Spectral italic

Typography components

A standfirst introduces the piece — larger, more deliberate. It sets tone before the body begins.

.standfirst

A lede is the secondary intro — still elevated above body, drawing the reader further in without the weight of a standfirst.

.lede

Secondary text — used for metadata, captions, and supplemental information that supports but does not compete with the main content.

.secondary

Eyebrow label

.eyebrow — muted, uppercase, tracked

Eyebrow on dark

.eyebrow[data-tone="hero"] — always light, for use over dark or image backgrounds

Blockquote

The vine remembers every drought and every flood. Winemaking is simply listening well enough to say nothing that is not already there.

Duncan McNabb, Scholium Project

blockquote + cite — Spectral italic, left border in --color-accent

Body text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body text — The Scholium Project is a producer of handcrafted wines from some of California's most distinctive sites. Each wine is a response to its place and its vintage, made with minimal intervention and bottled without fining or filtration.

A second paragraph. Strong text carries weight. Italic text is used for titles, citations, and foreign terms. Links use the accent color. Spectral italic is available via font-family: var(--font-family-alt).

Monospace for tokens, handles, and terminal commands. Small text for footnotes or legal copy.

  • Chardonnay, Napa Valley
  • Syrah, Suisun Valley
  • Chenin Blanc, Clarksburg
  1. Harvest
  2. Fermentation
  3. Bottling

Fancy numbers

  1. Native yeast fermentation in open-top vessels
  2. Extended maceration for structure and complexity
  3. Aged in neutral French oak for eighteen months
  4. Bottled unfined and unfiltered at the estate

.fancy-numbers ol.fancier

Color palette

Raw palette tokens are fixed values. Semantic aliases below respond to the theme toggle.

Neutrals

  • --wild-sand
    #f5f5f1

  • --cararra
    #ecede6

  • --snow-drift
    #e3e5da

  • --gin
    #dadcce

Browns

  • --olive-haze
    #8e876f

  • --coffee
    #6e6856

  • --camouflage
    #504937

  • --cocoa-brown
    #302a1b

  • --void
    #110e0b

Reds / oranges

  • --apricot
    #e98d72

  • --japonica
    #d46c55

  • --mojo
    #be4a37

  • --tabasco
    #a82714

Greens

  • --green
    #005a00

  • --fern
    #004200

  • --fir
    #002900

  • --moss
    #001100

Semantic aliases

These respond to the theme toggle — toggle dark / light to see them update.

  • --color-bg

  • --color-surface

  • --color-text

  • --color-muted

  • --color-accent

  • --color-line

Spacing scale

All structural spacing tokens are fluid via clamp(). Bars show the token value at the current viewport width.

--space-2xs · 0.375 → 0.5rem
--space-xs · 0.5 → 0.75rem
--space-sm · 0.75 → 1rem
--space-md · 1 → 1.5rem
--space-lg · 1.5 → 2rem
--space-xl · 2 → 3rem
--space-2xl · 3 → 4.5rem
--space-3xl · 4.5 → 6.5rem

Card

.product-card

Auto-grid

Resize the viewport — columns reflow automatically with no media queries.

data-grid-min="sm" — 14rem minimum column width

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

data-grid-min="md" — 20rem minimum column width

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

data-grid-min="lg" — 26rem minimum column width

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Borders

--border-style-thin · 1px solid olive-haze (dark) / camouflage (light)

--border-style-thick · 4px solid

Focus ring example

--border-style-focus · 1px dotted apricot

hr — 1px solid via --border-style-thin

Line heights

Tight leading for display type and large headings

--leading-tight · 1.05

Heading leading — open enough for medium-size text

--leading-heading · 1.12

Body leading — generous for comfortable reading at length. The vine remembers every drought and every flood.

--leading-body · 1.58