Style guide – all text and images are placeholders and will be replaced before launch. Text sources: Wikipedia (Cave bear),donsmaps.com.

Style guide · Cave Wear

The Cave Bear

Cave bears were comparable in size to, or larger than, the largest modern-day bears.

Colours

Type scale

Every size lives in a CSS variable in global.css. Change one value there and it updates on the website and on this page. The "now" line shows the real size on your current screen width.

Ursus spelaeus

H1 – Barlow Condensed Bold 700

48 → 128px (fluid) · line-height 0.9

uppercase · letter-spacing 0 · max 12ch

now: –

h1 · --font-display · --text-h1 · --tracking-h1 · --measure-h1

font-family: var(--font-display);
font-size: var(--text-h1);
font-weight: 700;
line-height: 0.9;
text-transform: uppercase;

Used for: One per page – hero headline or page title.

The bear of the caves

H2 – Geist ExtraBold 800

32/40px → 48/56px

letter-spacing −0.02em

now: –

h2 · --text-h2 · --leading-h2 · --tracking-h2

font-size: var(--text-h2);
line-height: var(--leading-h2);
font-weight: 800;

Used for: Starts a section.

The cave bear is a prehistoric species of bear that lived in Europe and Asia during the Pleistocene.

Lead – Geist Light 300

24/32px → 32/40px

Weathered Bone · max 40ch

now: –

.lead · --text-lead · --leading-lead · --measure-lead

<p class="lead">…</p>
font-size: var(--text-lead);
font-weight: 300;

Used for: Introduces a section, right below the H2.

Almost entirely herbivorous

H3 – Geist ExtraBold 800

24/32px (all screens)

letter-spacing −0.01em

now: –

h3 · --text-h3 · --leading-h3 · --tracking-h3

font-size: var(--text-h3);
line-height: var(--leading-h3);
font-weight: 800;

Used for: Cards, product names, sub-parts of a section.

Hibernation

H4 – Label style

14/20px (all screens)

uppercase · letter-spacing 0.14em

now: –

h4 · same as .label

/* no own size – uses the Label style */

Used for: Small headings, e.g. footer columns or inside cards.

Heinrichshöhle, Hemer

H5 – Label style

14/20px (all screens)

uppercase · letter-spacing 0.14em

now: –

h5 · same as .label

/* no own size – uses the Label style */

Used for: Same look as H4 – use rarely.

Dechenhöhle, Iserlohn

H6 – Label style

14/20px (all screens)

uppercase · letter-spacing 0.14em

now: –

h6 · same as .label

/* no own size – uses the Label style */

Used for: Same look as H4 – use rarely.

The common and scientific name for the species comes from their remains having been found largely in caves. Despite their name, they did not actually live in caves but only used them for hibernation.

Body – Geist Regular 400

16/24px → 18/28px

max 65ch

now: –

p · --text-body · --leading-body · --measure-body

font-size: var(--text-body);
line-height: var(--leading-body);
max-inline-size: var(--measure-body);

Used for: All reading text.

Up to 2 m long · males 350–600 kg

Small – Geist Regular 400

14/20px (all screens)

Weathered Bone

now: –

.small · --text-small · --leading-small

<p class="small">…</p>
font-size: var(--text-small);
line-height: var(--leading-small);

Used for: Prices, details, captions, notes.

Pleistocene · Europe and Asia

Label – Geist Medium 500

14/20px (all screens)

uppercase · letter-spacing 0.14em

now: –

.label · --text-small · --tracking-wide

<p class="label">…</p>
letter-spacing: var(--tracking-wide);
text-transform: uppercase;

Used for: Small titles above headings, footer labels, tags.

Products

Nav link – Geist Medium 500 (active: Bold 700)

16/24px (all screens) · 48px touch area

uppercase · letter-spacing 0.04em

now: –

.nav-link (Header.astro) · --tracking-nav

font-size: 1rem;
font-weight: 500;
line-height: var(--space-6);
letter-spacing: var(--tracking-nav);

Used for: Header navigation. Active page: bold + Egret.

Read more

Button text – Geist Medium 500

16/24px · button 48px high (compact: 14/20px, 40px high)

sentence case · no extra letter-spacing

now: –

.button (global.css)

font-size: 1rem;
font-weight: 500;
line-height: var(--space-6);

Used for: Every button. See "Button system" below.

How it works together

Spacing

Every space is a multiple of 4px. Only these values are used.

Spacing scale

Corners

Default is sharp (0). Same element type = same radius.

How a section is built

Label

12px · --space-3

H2 – The bear of the caves

24px · --space-6

Lead – a prehistoric species of bear.

24px · --space-6

Body – their remains were found largely in caves.

16px · --space-4 (between paragraphs)

Body – they used caves for hibernation.

32px · --space-8
Button

Example section · Prehistoric giant

Built for the long cave winter

The cave bear (Ursus spelaeus) is a prehistoric species of bear that lived in Europe and Asia during the Pleistocene.

Unlike brown bears, cave bears are thought to have been almost entirely or exclusively herbivorous. It was a powerful animal, and could eat both animal and vegetable materials, though it was apparently mostly vegetarian.

Reassessment of fossils in 2019 indicate that the cave bear probably died out 24,000 years ago. Remains have been found in caves such as the Heinrichshöhle in Hemer and the Dechenhöhle in Iserlohn. Read more on Wikipedia.

Card

A product card shape: 4:5 image, H3, small details.

Ursus spelaeus

Up to 2 m long · males 350–600 kg

Links and buttons

Text links

Inside running text, a link is Wild Honey and semi-bold, without underline: cave paintings show that ancient humans encountered cave bears – seedonsmaps.com.

Hover: Amber Gold. Keyboard focus: 2px Wild Honey outline.

Button system

One loud button per section, quieter ones around it. Shown in real situations below. Decided 22 Oct 2026.

1 · The roles

Primary

Wild Honey, filled. The one main action – max. one per section.

Secondary on photos

Smoked glass, Egret text. Wherever a button sits on an image.

Secondary on dark

Wild Honey outline. The alternative next to a primary.

Learn more

Tertiary

Text link with arrow. Extra info, "see all".

2 · On a photo – hero or banner

Primary + glass. The glass lets the photo through, so it doesn't fight the image.

Built for the wild

Gear for the unpredictable.

3 · Product card

Card in smoked glass (card rule), sharp corners (card radius still open). Primary "Add to bag" + outline "Size guide" in the compact 40px size.

Product name

PLACEHOLDER · technique · price

4 · Plain dark section

Primary + text link. On a flat dark background there is nothing to blur, so no glass here.

Follow the journey

Not released yet

Real news only – the launch, a vote on the next product, a big announcement.

Our story

5 · Icon buttons

Round (a real circle), neutral on dark. For close, bag, menu.

6 · Rules in short