The Living Styleguide

Spec-Page Design System · Slideshow Theme · a full-viewport snap-deck

Slideshow · deck

Foundations

Neutrals plus one bold signature color chosen per page. Presentation-scale type. The signature runs everything: fields, buttons, cursive, accents.

Signature palette · pick by feeling (default vermilion)

	Vermilion #E8452A · ink #C63A1E	Warm, confident, timeless. The classy default.
	True Red #E4002B · ink #C10024	Louder, urgent, high-energy.
	Electric Cobalt #2B4FE8 · ink #2340C4	Modern, technical, trustworthy.
	Deep Teal #0E9E96 · ink #0B7D77	Calm, sophisticated, unexpected.
	Royal Violet #7A3FF2 · ink #6A32D8	Creative, premium, design-forward.
	Plum / Magenta #C21F6B · ink #A81A5C	Rich, fashion-adjacent, confident.
	Emerald #0E9F57 · ink #0B8248	Fresh, natural, optimistic.

Neutrals

Paper

#FFFFFF

Warm-white

#F7F5F1

Ink

#16181D

Contrast · default vermilion

white on vermilion	3.95 (large only)
ink #16181D on white	17.76
signature-ink on white	5.22

Type · presentation scale (Fraunces serif, hero to 130px)

Design that feels considered.

Components

The two theme-defining components: the self-writing cursive hero and the snap-deck itself. Both are live below.

Design that feels effortless

Self-writing cursive

The signature motion

Great Vibes accent word draws itself on, left-to-right, pen-tip tracking the edge. Writes on load, on slide-enter, and on demand.

Reveal, not a true stroke-trace — scales to any word. True tracing needs per-word SVG vectors.

.script{clip-path:inset(0 100% 0 0)}
.script.writing{
  animation:write 2.2s
  cubic-bezier(.7,0,.3,1) forwards}
@keyframes write{to{
  clip-path:inset(0 0 0 0)}}

Slide one

Full-screen presence.

Slide two

One color. Room to breathe.

Slide three

Snap locks each slide in place.

Snap deck

Full-viewport panels

Scroll and it advances one full slide, never halfway. Scroll inside the frame to feel it. Dots are color-aware.

Nav: dots + arrows + keyboard (↑↓ PgUp/Dn Space Home/End), all off one observer.

.deck{scroll-snap-type:y mandatory}
.panel{height:100vh;
  scroll-snap-align:start;
  scroll-snap-stop:always}

Not used here

The brush highlight and Anti AI-Slop stamp belong to the editorial themes and are not used in the slideshow. Shared with the base: the three type families and the writing voice.

Created for you, with ❤️ by Robert Evans · The AI Design Architect