wood-book-style-guide

1 CSS Tokens

All design decisions are expressed as CSS custom properties on :root. Reference tokens by var(--wb-*) — never hard-code hex values.

Brand Colors

--wb-ink #2A1F15

--wb-ink-soft #4A382A

--wb-walnut #3A2715

--wb-bone #F5EBD7

--wb-paper #FAF5EA

--wb-bg #F7F1E5

--wb-bg-soft #EFE6D2

--wb-cream #E8DCC2

--wb-caramel #A87544

--wb-caramel-deep #7E5530

--wb-honey #D4A777

--wb-amber-bg #EBD8B6

--wb-sage #7A8B5C

--wb-sage-deep #5A6A3F

--wb-sage-bg #E0E6D0

--wb-oxblood #8B3A3A

--wb-oxblood-deep #6B2A2A

--wb-oxblood-bg #F2D8D8

Text Helpers

--wb-text-muted — Secondary descriptions, labels (62% opacity) --wb-text-subtle — Captions, meta text (45% opacity) --wb-text-faint — Hints, placeholders (28% opacity)

Borders

--wb-line

--wb-line-soft

--wb-line-deep

Spacing Scale

--wb-space-1 · 4px

--wb-space-2 · 8px

--wb-space-3 · 12px

--wb-space-4 · 16px

--wb-space-5 · 24px

--wb-space-6 · 32px

--wb-space-7 · 48px

--wb-space-8 · 64px

Radius Scale

sm
6px

md
10px

lg
14px

xl
20px

pill

<div style="border-radius:var(--wb-radius-lg);">...</div>

2 Typography

Fraunces (serif) for display and italic accents. Manrope (sans) for body, labels, UI. Never hard-code font families — use tokens.

.wb__text-eyebrow — 11px · 700 · +0.22em

HANDCRAFTED WITH INTENTION

.wb__display — Fraunces 400 · -0.02em

The story behind every page.

.wb__display at 32px

A keepsake that lasts generations.

.wb__display at 24px

Made from real moments.

.wb__display-italic — Fraunces italic 500

As warm as the wood it's named for.

.wb__text-script — Fraunces italic 400

Written with love, printed to last.

Text color helpers

.wb__text-muted — secondary descriptions .wb__text-subtle — captions, meta labels .wb__text-faint — hints, placeholders .wb__text-caramel — accent highlight .wb__text-sage — nature accent

<h2 class="wb__display" style="font-size:48px;">
  The story behind <em class="wb__display-italic">every page.</em>
</h2>
<p class="wb__text-eyebrow">HANDCRAFTED WITH INTENTION</p>

3 Buttons

Base class .wb__button combined with a variant modifier. All variants support --sm, --lg, --full, and disabled.

Variants — Light Background

Inverse — Dark Background

Size Modifiers

Full Width + Disabled

<button class="wb__button wb__button--primary">Order Now →</button>
<button class="wb__button wb__button--secondary">See Examples</button>
<button class="wb__button wb__button--inverse">Learn More</button>
<button class="wb__button wb__button--primary wb__button--full">Add to Cart →</button>

4 Cards

Base class .wb__card with optional modifiers. Image hover zoom via .wb__card-image img.

Core Variants

.wb__card (default)

The Oak Edition

20 spreads · Hardcover

.wb__card--lg

The Walnut Edition

40 spreads · Premium

.wb__card--cream

The Cream Card

Warm bone background

.wb__card--ink

The Ink Card

Dark walnut surface

Edge + Shadow Modifiers

--edge-caramel

Left caramel border

--edge-sage

Left sage border

--shadow-caramel

4px flat caramel shadow

--shadow-sage

4px flat sage shadow

--ghost

Dashed border, transparent

<article class="wb__card">
  <div class="wb__card-image">
    <img src="photo.jpg" alt="...">
  </div>
  <div class="wb__card-body">
    <p class="wb__card-title">The Oak Edition</p>
    <p class="wb__card-meta">20 spreads · Hardcover</p>
  </div>
</article>

5 Badges & Pills

Eyebrow pills for section labels, category badges for filters, and a wax-seal for premium moments.

Pills (.wb__pill)

Crafted to Last New Arrival Eco Friendly Limited Run Hand Made

Category Badges (.wb__badge-category)

Anniversary Family Bestseller New

Wax Seal (.wb__badge-seal)

★ Verified

No.1 Best Seller

<span class="wb__pill">Crafted to Last</span>
<span class="wb__pill wb__pill--ink">New Arrival</span>
<span class="wb__badge-category wb__badge-category--caramel">New</span>
<div class="wb__badge-seal">★<small>Verified</small></div>

6 Banners

Full-width announcement strips. Use .wb__banner-accent for the bold copy and .wb__banner-sep for separators.

<div class="wb__banner wb__banner--ink">
  <span class="wb__banner-accent">Free Shipping</span>
  <span class="wb__banner-sep">·</span>
  <span>on orders over $80</span>
</div>

7 Form Elements

Inputs inherit the Fraunces italic voice. Quantity steppers, variant grids, and checkboxes all use warm walnut tokens.

Text Input

Family Name

Quantity Stepper

1

Variant Grid

Checkbox

Include gift message Add protective sleeve

<input class="wb__input" type="text" placeholder="THE LE FAMILY HOME">

<div class="wb__quantity">
  <button class="wb__quantity-btn">−</button>
  <span class="wb__quantity-value">1</span>
  <button class="wb__quantity-btn">+</button>
</div>

<label class="wb__check">
  <input type="checkbox">
  <span class="wb__check-box"></span>
  <span class="wb__check-label">Include gift message</span>
</label>

8 Layout

Section themes, container, responsive grids. All grids collapse to 1 column at 980px.

Section Color Themes

.wb__section--cream · var(--wb-bone)

.wb__section--paper · var(--wb-paper)

.wb__section--soft · var(--wb-bg-soft)

.wb__section--ink · var(--wb-walnut)

.wb__section--caramel · var(--wb-caramel)

.wb__section--sage · var(--wb-sage)

Grid Utilities

.wb__grid-2

Col 1

Col 2

.wb__grid-3

Col 1

Col 2

Col 3

.wb__grid-4

1

2

3

4

Horizontal Scroll (.wb__hscroll)

Item 1

Item 2

Item 3

Item 4

Item 5

<section class="wb__section wb__section--cream">
  <div class="wb__container">
    <div class="wb__grid-3">...</div>
  </div>
</section>

9 Animations

13 utility animation classes. All use transform + opacity only. All respect prefers-reduced-motion.

.wb__anim-breathe

Gentle lift — 3.6s

.wb__anim-sway

Handcrafted

Gentle sway — 5s

.wb__anim-shine

Shimmer sweep — 4s

.wb__anim-stamp

★New

One-shot entrance

.wb__anim-drift

&

Shape drift — 18s

.wb__anim-marquee

Ticker — 50s loop

.wb__anim-pop

200+

Scale reveal — 0.6s

.wb__anim-fadeup

Scroll trigger

JS + .is-visible

.wb__anim-slide-left

Step 1

Step 2

Step 3

Stagger with delay

.wb__anim-bounce

✓

Success state

.wb__anim-grain

Reveal

Clip-path wipe — 1.4s

.wb__anim-pulse-dot

In stock now

Live indicator — 2s

<button class="wb__button wb__button--primary wb__anim-breathe">Order Now →</button>
<span class="wb__anim-pulse-dot"></span> In stock now
<div class="wb__anim-fadeup">Scroll-triggered content</div>

10 Grain Backgrounds

Pure CSS wood grain via repeating-linear-gradient and radial-gradient. Each class uses a ::before pseudo-element — direct children are auto-lifted above the overlay.

.wb__bg-grain

Sawn lines · bone

.wb__bg-grain-dark

Honey lines · walnut

.wb__bg-linen

45° crosshatch · paper

.wb__bg-paper

Fiber dots · bg

.wb__bg-knot

Corner knots · bone

.wb__bg-vignette

Center spotlight · bg

.wb__bg-split

Caramel + sage corners

.wb__bg-pan (animated)

Scrolling grain · 14s

<section class="wb__bg-grain">
  <div class="wb__container">...</div>
</section>

11 Order Timeline

Three-step order tracking. Step states: --done (sage ✓), --active (caramel), pending (default). Lines use --filled and --gradient variants.

Ordered May 3

2

Printing May 5–6

3

Delivered May 10

<div class="wb__timeline">
  <div class="wb__timeline-step wb__timeline-step--done">
    <div class="wb__timeline-circle"></div>
    <span class="wb__timeline-label">Ordered</span>
    <span class="wb__timeline-date">May 3</span>
  </div>
  <div class="wb__timeline-line wb__timeline-line--filled"></div>
  <div class="wb__timeline-step wb__timeline-step--active">
    <div class="wb__timeline-circle">2</div>
    <span class="wb__timeline-label">Printing</span>
    <span class="wb__timeline-date">May 5–6</span>
  </div>
  <div class="wb__timeline-line wb__timeline-line--gradient"></div>
  <div class="wb__timeline-step">
    <div class="wb__timeline-circle">3</div>
    <span class="wb__timeline-label">Delivered</span>
    <span class="wb__timeline-date">May 10</span>
  </div>
</div>

12 Compare Slider

Drag the handle to reveal before/after. Uses clip-path and setPointerCapture for smooth touch+mouse support. No external library.

Live Demo — drag the handle

Before

After

Class Reference

Class	Role
`.wb__compare`	Wrapper + aspect-ratio
`.wb__compare-img--before`	Base layer, z-index 1
`.wb__compare-img--after`	Clipped layer, JS controlled
`.wb__compare-handle`	Drag handle, z-index 4
`.wb__compare-label`	BEFORE / AFTER pill

<div class="wb__compare" data-compare>
  <div class="wb__compare-img wb__compare-img--before">
    <img src="before.jpg" alt="Before">
    <span class="wb__compare-label wb__compare-label--before">Before</span>
  </div>
  <div class="wb__compare-img wb__compare-img--after">
    <img src="after.jpg" alt="After">
    <span class="wb__compare-label wb__compare-label--after">After</span>
  </div>
  <div class="wb__compare-handle">
    <div class="wb__compare-btn">...</div>
  </div>
</div>

Your cart.

Wood Book Design System

1 CSS Tokens

2 Typography

The story behind every page.

A keepsake that lasts generations.

Made from real moments.

3 Buttons

4 Cards

5 Badges & Pills

6 Banners

7 Form Elements

8 Layout

9 Animations

Reveal

10 Grain Backgrounds

11 Order Timeline

12 Compare Slider

Country/region

1 CSS Tokens

2 Typography

The story behind every page.

A keepsake that lasts generations.

Made from real moments.

3 Buttons

4 Cards

5 Badges & Pills

6 Banners

7 Form Elements

8 Layout

9 Animations

Reveal

10 Grain Backgrounds

11 Order Timeline

12 Compare Slider