name: little-orrery-design
version: alpha
description: >
  A gouache-painted children's astronomy book imprint rendered as a warm,
  storybook landing page. The surface is hand-painted paper cream (#F4ECDA) set
  against a deep midnight-navy (#16183A) cosmos; tangerine (#FF6A2B), aqua
  (#1FB6C4), and marigold (#F4B92E) act as the three orbiting "planet" accents.
  The type story pairs an engraved serif display face (Cinzel Decorative /
  Cinzel) for magical section headings with the rounded, friendly Fredoka for
  sub-display and UI, and Quicksand for body. Signature moves: a full-bleed
  looping-cosmos hero with revolving orbital rings and a CSS starfield, squared
  plaque buttons with an engraved gold keyline, a 3D cursor-tilt book shelf, a
  sticky-stacked scaling classroom panel sequence, and a dashed-spine events
  timeline. Geometry is soft and rounded — pill filters, 12–18px card radii,
  circular portraits — but buttons stay deliberately squared (5px).
colors:
  # Surface
  night: '#16183A'      # deep cosmos navy — hero, catalog, footer surfaces
  paper: '#F4ECDA'      # painted paper cream — page background (body)
  cream: '#F6EFE0'      # warm off-white — text on dark, button labels
  # Text
  ink: '#1A1B33'        # primary text on light surfaces
  ink-soft: 'rgba(26,27,51,.78)'   # lead/body paragraphs on paper
  ink-muted: 'rgba(26,27,51,.6)'   # captions, intros, tags on paper
  cream-muted: 'rgba(246,239,224,.65)' # muted text on dark surfaces
  # Brand / Accents (the three orbiting "planets")
  tangerine: '#FF6A2B'  # primary brand accent — CTAs, accent words, tags
  tangerine-hover: '#ec5a1d' # primary button hover fill
  aqua: '#1FB6C4'        # secondary accent — pills hover, aqua accent words
  marigold: '#F4B92E'    # tertiary accent — prices, gold keyline, stars, focus highlights
  # Hairlines
  hairline-cream: 'rgba(246,239,224,.18)' # dividers on dark
  hairline-ink: 'rgba(26,27,51,.1)'       # card shadow tint
  # Gradient / Glow
  ultramarine: '#1B34D8' # orbiting planet p1 core
  hero-sky: 'radial-gradient(circle at 50% 42%, #1e2356 0%, #16183A 72%)' # CSS cosmos fallback
typography:
  display:
    fontFamily: "'Cinzel Decorative','Cinzel',serif"
    fontSize: clamp(1.9rem,5vw,4.3rem)
    fontWeight: 700
    lineHeight: 1.16
    letterSpacing: 0.012em
  subdisplay:
    fontFamily: "'Fredoka',sans-serif"
    fontSize: clamp(2.2rem,4.4vw,3.6rem)
    fontWeight: 700
    lineHeight: 0.95
  eyebrow:
    fontFamily: "'Fredoka',sans-serif"
    fontSize: 0.72rem
    fontWeight: 500
    letterSpacing: 0.28em
    textTransform: uppercase
  button:
    fontFamily: "'Fredoka',sans-serif"
    fontSize: 0.78rem
    fontWeight: 600
    letterSpacing: 0.14em
    textTransform: uppercase
  body:
    fontFamily: "'Quicksand',sans-serif"
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.6
rounded:
  none: 0px      # classroom panels (full-bleed)
  btn: 5px       # plaque buttons — deliberately squared
  card: 12px     # book covers, see-all tile
  event: 18px    # event timeline cards
  pill: 999px    # filter pills, tags, circular logo/portraits
spacing:          # base unit 4px; wrap padding 32px, section padding 96px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 18px
  xl: 32px
  section: 96px
components:
  btnPrimary:
    backgroundColor: '{colors.tangerine}'
    textColor: '{colors.cream}'
    typography: '{typography.button}'
    rounded: '{rounded.btn}'
    padding: '14px 26px'
    border: 'inset 0 0 0 1.5px rgba(244,185,46,.7) engraved gold keyline'
    elevation: '0 10px 26px rgba(255,106,43,.3)'
  btnText:
    backgroundColor: 'transparent'
    textColor: 'currentColor'
    typography: '{typography.button}'
    rounded: '{rounded.btn}'
    padding: '13px 22px'
    border: 'inset 0 0 0 1px currentColor'
  pill:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.ink}'
    rounded: '{rounded.pill}'
    padding: '10px 20px'
    activeBackground: '{colors.tangerine}'
    hoverBackground: '{colors.aqua}'
  bookCover:
    rounded: '{rounded.card}'
    aspectRatio: '2/3'
    elevation: '0 14px 34px rgba(0,0,0,.34)'
    tilt: 'rotateX/rotateY toward cursor + translateZ on hover'
  eventCard:
    backgroundColor: '#fff'
    rounded: '{rounded.event}'
    padding: '26px 30px'
    elevation: '0 10px 30px rgba(22,24,58,.1)'
  newsletterInput:
    backgroundColor: 'transparent'
    textColor: '{colors.cream}'
    typography: '{typography.subdisplay}'
    border: 'bottom 2px solid rgba(246,239,224,.3)'
    focusBorder: '{colors.marigold}'
motion:
  ease: 'cubic-bezier(.16,.84,.44,1)'
  spring: 'cubic-bezier(.34,1.56,.64,1)'
  twinkle: 'starfield opacity 0.5↔1 over 6s ease-in-out infinite'
  spin: 'orbital rings rotate 360deg, 64s/44s(reverse)/30s linear infinite'
  bob: 'scroll cue bobs 7px vertically, 2.4s infinite'
  heroReveal: 'headline lines slide up (translateY 116%→0) 1s, staged copy fade-in with delays'
  bookTilt: '3D cursor parallax across shelf, transform .3s; hover translateZ +50px scale 1.02'
  stickyStack: 'classroom panels sticky-pin, scale down 4% as next covers, blur(10px)→0 lock-in'
  spineDraw: 'events spine scaleY 0→1 on scroll; portrait parallax'
  countUp: 'newsletter join number counts 0→84,000 over 1600ms cubic ease-out'
icons:
  library: inline SVG (social) + CSS clip-path stars/sparkles
  style: solid fills, no stroke
  sizes: { social: 18px, star: 1em, marker: 30px }
  color: '{colors.cream}'

Little Orrery

little-orrery-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Little Orrery is a gouache-painted children's astronomy book imprint, and the page reads like a storybook spread. The body sits on hand-painted paper cream (--paper #F4ECDA) dusted with faint radial color washes; the hero, catalog, and footer flip to a deep cosmos navy (--night #16183A) with the same painted texture. Three accent colors behave like orbiting planets throughout: tangerine (#FF6A2B) carries the brand and CTAs, aqua (#1FB6C4) is the cool secondary, and marigold (#F4B92E) is the gold that edges every button, sets the prices, and shapes the clip-path stars. The type story is the signature contrast: magical section headings are set in the engraved serif Cinzel Decorative (falling back to Cinzel), while sub-display moments, UI, and the logo use the rounded, friendly Fredoka, and body copy runs in Quicksand. The signature moves are cinematic: a full-bleed looping-cosmos video hero backed by a CSS starfield and three revolving orbital rings; squared plaque buttons (5px) with an engraved gold keyline; a 3D book shelf that tilts toward the cursor; a sticky-stacked classroom sequence whose panels scale and blur-lock as you scroll; and a dashed-spine events timeline that draws itself in. Geometry is otherwise soft and rounded — pills, 12–18px cards, circular portraits — which makes the squared buttons feel like engraved brass plaques.

Colors

Surface. The page background is --paper #F4ECDA, a warm painted cream, applied via body.paper-tex with three faint radial gouache washes in marigold, aqua, and tangerine at 3.5–5% opacity. Dark sections (hero, catalog, footer) use --night #16183A via night-tex, the same painted-wash treatment at slightly higher opacity. --cream #F6EFE0 is the warm off-white used for text on dark and for button labels.

Text. Primary text on light is --ink #1A1B33. Leads use rgba(26,27,51,.78), captions/intros/tags use rgba(26,27,51,.6). On dark surfaces text is --cream, with muted copy at rgba(246,239,224,.65).

Brand / Accents. Tangerine --tangerine #FF6A2B is the primary brand color — primary buttons, accent headline words (.tang), price tags. Its hover fill is #ec5a1d. Aqua --aqua #1FB6C4 is the secondary — pill hover, aqua accent words, focus outlines, default book cover fill. Marigold --marigold #F4B92E is the gold accent — the engraved button keyline, prices, clip-path stars, focus highlight, and footer join number.

Hairlines. Dividers on dark use rgba(246,239,224,.18); event cards carry a soft tinted shadow rgba(22,24,58,.1).

Gradient / Glow. The hero falls back to a CSS cosmos when the video is absent: a layered radial sky radial-gradient(circle at 50% 42%, #1e2356 0%, #16183A 72%) with aqua/tangerine nebula washes, a twinkling starfield, and orbiting planets (p1 core #1B34D8). Planet and accent glows use colored box-shadow blooms.

Typography

Three Google Fonts families are loaded via one @import link: Cinzel Decorative (400/700/900), Cinzel (500–900), Fredoka (400–700), and Quicksand (400–700). Display headings use Cinzel Decorative with Cinzel as the metric-compatible fallback — note Cinzel Decorative has no italic, so accent words stay upright and color carries the emphasis. Fredoka (the .disp class) is the rounded sub-display / UI face used for the logo, buttons, eyebrows, big numbers, and card titles. Quicksand is the body face.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(1.9rem,5vw,4.3rem)	700	1.16	.012em	Cinzel Decorative section headings, hero H1
subdisplay	clamp(2.2rem,4.4vw,3.6rem)	700	0.95	—	Fredoka big numbers, card titles, prices
eyebrow	0.72rem	500	—	.28em	uppercase Fredoka eyebrows/labels
button	0.78rem	600	—	.14–.16em	uppercase Fredoka button labels
body	1rem	400	1.6	—	Quicksand paragraphs

Layout

Base spacing unit is 4px; the content .wrap is max-width:1240px with 32px horizontal padding (20px on mobile). Sections breathe at 96px vertical padding. The page is a vertical scroll narrative: a 100svh hero, a 3-column catalog grid (repeat(3,1fr), 30px gap, dropping to 2 then 1 column), a 400vh sticky-stacked classroom section of four pinned full-height panels, a left-spined events timeline (padding-left:84px), and a footer with a 2-column newsletter block over a 5-column link grid. The hero composition layers a CSS sky, revolving orbit rings, the cosmos video, a center-weighted legibility scrim, and centered content. Whitespace is generous and storybook-calm.

Elevation & Depth

Depth is built from soft colored shadows, engraved keylines, and real 3D transforms rather than flat cards. Primary buttons carry an inset gold keyline plus a tangerine drop-glow (0 10px 26px rgba(255,106,43,.3), deepening on hover). Book covers float on 0 14px 34px rgba(0,0,0,.34) and tilt in 3D toward the cursor (perspective:1500px), lifting translateZ(+50px) scale(1.02) on hover. Event cards use a low soft shadow 0 10px 30px rgba(22,24,58,.1). The classroom panels stack with position:sticky, scaling down 4% and blurring (blur(10px)→0) as the next panel locks over them. Planets and stars glow via colored box-shadow blooms.

Shapes

The radius story is mostly soft with one deliberate hard accent. Buttons are squared at 5px — engraved-plaque geometry that reads as brass against the warm paper. Book covers and the see-all tile use 12px; event cards use 18px. Filter pills, tags, portraits, the logo dot, and social icons are fully round (999px / 50%). Classroom panels are flush full-bleed (0). Stars and sparkles are CSS clip-path polygons.

Components

• btn-primary — tangerine fill, cream uppercase Fredoka label, 5px radius, 14px 26px padding, inset gold keyline rgba(244,185,46,.7) + tangerine glow; hover darkens to #ec5a1d and lifts -3px. Labels: "Browse Books", "Explore the Universe →", "Request a Classroom Quote", "Subscribe ✦".
• btn-text — transparent, inset 0 0 0 1px currentColor outline, uppercase Fredoka, 5px radius, leading clip-path star. Label: "Watch the trailer".
• pill — cream fill / ink text, 999px, 10px 20px; active = tangerine, hover = aqua. Labels: "All books", "Ages 3–5", "Constellations".
• book card — 2/3 cover at 12px radius over accent fill, hover "peek" overlay (rgba(22,24,58,.7)), Fredoka title, italic byline, rounded tag chip, marigold price.
• event card — white, 18px radius, 3-column grid (date / body / author), soft shadow; big Fredoka day number colored per-event, circular portraits with paper border in stacks.
• newsletter input — transparent, bottom border 2px rgba(246,239,224,.3), Fredoka 1.15rem, marigold focus underline. Placeholder "you@stargazer.com".
• logo dot — 38px navy circle with three small offset dots (marigold, cream, tangerine) — a tiny orrery.

Motion

Easing is --ease cubic-bezier(.16,.84,.44,1) with a --spring cubic-bezier(.34,1.56,.64,1) available. The hero reveals on load: headline lines slide up (translateY(116%)→0, 1s, staggered), then eyebrow/sub/CTAs/proof fade in with staged delays. A scroll choreography slow-zooms the cosmos video (scale 1→1.12) and fades/lifts the hero content as the catalog rises. The catalog shelf tilts in 3D toward the cursor and z-separates on scroll. Section headings reveal with clip-path wipes and skew-correct entrances via IntersectionObserver. The classroom panels sticky-pin and scale/blur-lock. The events spine draws itself (scaleY 0→1) with portrait parallax. The footer join number counts up 0→84,000 over 1600ms (cubic ease-out). Decorative loops: twinkle (6s starfield), spin (orbit rings 64/44/30s), bob (scroll cue). Footer shapes parallax on scroll. prefers-reduced-motion is wired via a reduce flag (currently hard-set to false).

Iconography

There is no icon font. UI iconography is inline SVG for the four social glyphs (Instagram, YouTube, Pinterest, RSS) at 18px, filled cream on circular rgba(246,239,224,.12) chips that turn marigold on hover. Decorative "stars" and sparkles are CSS clip-path polygons in marigold (and per-event accent colors), sized 1em inline or 30px as timeline markers. Arrows and checks are plain Unicode glyphs (↓, →, ✓, ★, ✦).

Do's and Don'ts

• Do keep buttons squared at 5px with the engraved gold keyline — that contrast against the otherwise-rounded geometry is the signature.
• Do set magical section headings in Cinzel Decorative and let accent color (tangerine/aqua) carry emphasis, since the face has no italic.
• Do treat tangerine / aqua / marigold as the three orbiting planets — one primary, one cool secondary, one gold detail; don't add a fourth hue.
• Do keep the painted-paper warmth: cream/navy surfaces with faint radial gouache washes, never flat pure white pages.
• Don't use harsh black text — body is --ink #1A1B33, never #000.
• Don't flatten the depth: book covers should tilt and float, panels should scale-lock; removing the 3D/sticky moves loses the cosmos feel.
• Don't square off the pills, portraits, or logo dot — those stay fully round.

Known Gaps

• The hero's primary background is a remote hero.mp4/hero.png cosmos asset; the documented hero-sky gradient + orbit/starfield is the CSS fallback that shows when the asset is missing, not the final rendered video.
• Several radial painted-texture washes use sub-5% opacity tints; exact stop positions are read from the CSS but their visual contribution is subtle.
• prefers-reduced-motion handling exists in code but the reduce flag is hard-coded to false, so reduced-motion paths are authored but inactive.
• Spacing scale (xs–xl) is inferred from the recurring padding/gap values; the HTML uses many one-off pixel values rather than a strict token scale.