name: cosmobooks-design
version: alpha
description: >
  Cosmobooks is a painterly-astronomy children's-book storefront painted on a
  deep midnight-navy canvas (`#0C1A32`) lit by three playful "voltages" — a hot
  watercolor orange (`#FF6B35`), a lime spark (`#A8E63A`), and a gold star
  (`#F5C842`). The display face is the high-contrast didone Abril Fatface; body
  copy runs in friendly rounded Nunito; every label, badge, date and kicker is
  set in the monospace B612 Mono, uppercase and widely tracked. Signature moves:
  a fixed twinkling star field behind everything, a 4x4 hero photo grid that
  settles in from a scattered state, a bento catalog grid, a horizontal pin-scroll
  preview strip, and a center-axis author-events timeline that draws itself on
  scroll. Geometry is split: media tiles and cards are perfectly sharp (radius 0)
  while every button, pill and input is a full 100px pill.
colors:
  # Brand / Voltages
  accent-orange: '#FF6B35'   # primary CTA fill, logo accent, active pills, links, prices, timeline dot 1
  accent-lime:   '#A8E63A'   # secondary spark — kickers, genre tags, timeline dot 2 + corner accent
  accent-gold:   '#F5C842'   # tertiary — hero stat numbers, age badges, timeline dot 3
  # Surface
  bg-primary:    '#0C1A32'   # page background (deep midnight navy)
  bg-secondary:  '#1A2E5A'   # classroom photo backing, deeper panels
  surface:       '#1D3464'   # cards, pills, inputs, tile fallbacks
  # Text
  text-primary:  '#F5F0E0'   # warm cream — headings + body on dark
  text-muted:    '#8BAAD4'   # dusty blue — secondary/meta/footer text
  text-on-light: '#2A3F6A'   # navy body text on the cream classroom panel
  # Hairlines
  hairline:      'rgba(139,170,212,0.1)'  # section dividers, footer borders
  border-pill:   'rgba(139,170,212,0.2)'  # idle pill / input borders
  # Gradient / Decorative
  panel-purple:  '#1A0A2E'   # preview panel 2 background
  panel-teal:    '#0A1A20'   # preview panel 3 background
typography:
  display:
    fontFamily: "'Abril Fatface', serif"
    fontSize: clamp(3.5rem, 12vw, 10rem)
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: -0.02em
  heading:
    fontFamily: "'Abril Fatface', serif"
    fontSize: clamp(2rem, 5vw, 3.5rem)
    fontWeight: 400
    lineHeight: 1.1
  body:
    fontFamily: "'Nunito', sans-serif"
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.6
  body-strong:
    fontFamily: "'Nunito', sans-serif"
    fontSize: 1rem
    fontWeight: 700
  label:
    fontFamily: "'B612 Mono', monospace"
    fontSize: 0.75rem
    fontWeight: 400
    letterSpacing: 0.2em
    textTransform: uppercase
rounded:
  none: 0px      # all media tiles, cards, badges
  pill: 100px    # buttons, filter pills, inputs, nav CTA
  overlay: 16px  # hero glass overlay box
  full: 9999px   # star dots, timeline event dots (50%)
spacing:          # base unit ~ 8px; rem-based scale used throughout
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  '2xl': 80px    # section vertical padding (8rem ≈ 128px also used)
components:
  navCta:
    backgroundColor: '{colors.accent-orange}'
    textColor: '#ffffff'
    typography: '{typography.body-strong}'
    rounded: '{rounded.pill}'
    padding: '0.6rem 1.5rem'
  btnPrimary:
    backgroundColor: '{colors.accent-orange}'
    textColor: '#ffffff'
    typography: '{typography.body-strong}'
    rounded: '{rounded.pill}'
    padding: '0.85rem 2.2rem'
    border: '2px solid {colors.accent-orange}'
  btnOutline:
    backgroundColor: 'transparent'
    textColor: '{colors.text-primary}'
    typography: '{typography.body-strong}'
    rounded: '{rounded.pill}'
    padding: '0.85rem 2.2rem'
    border: '2px solid rgba(245,240,224,0.5)'
  filterPill:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-muted}'
    typography: '{typography.label}'
    rounded: '{rounded.pill}'
    padding: '0.5rem 1.2rem'
    border: '1px solid {colors.border-pill}'
    activeBackground: '{colors.accent-orange}'
  bookTile:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.none}'
    padding: '1.4rem'
    hoverUnderline: '3px {colors.accent-orange}'
  ageBadge:
    backgroundColor: '{colors.accent-gold}'
    textColor: '{colors.bg-primary}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '0.25rem 0.6rem'
  newsletterInput:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-primary}'
    typography: '{typography.body}'
    rounded: '{rounded.pill}'
    padding: '0.85rem 1.5rem'
    border: '1px solid rgba(139,170,212,0.3)'
    focusBorder: '{colors.accent-orange}'
  eventDot:
    backgroundColor: '{colors.accent-orange}'
    rounded: '{rounded.full}'
    border: '3px solid {colors.accent-orange}'
    glow: '0 0 0 4px rgba(255,107,53,0.2)'
motion:
  starTwinkle: 'keyframe twinkle, opacity pulse over 2–6s ease-in-out infinite, randomized per-star delay'
  heroReveal: 'overlay + stats fade in via opacity 600ms ease after 600ms JS timeout; staged delays 1.2s / 1.6s'
  heroTileSettle: 'scattered (translate/rotate, opacity 0) -> settled via transform 900ms cubic-bezier(0.2,0.8,0.2,1)'
  heroTileDrift: 'scroll-linked parallax translateY (sy * 0.03) per RAF loop'
  wordReveal: 'catalog heading words: blur(8px)+translateY(12px) -> clear, 500ms ease, 80ms stagger via IntersectionObserver'
  letterWindup: 'events heading: letter-spacing 0.6em -> -0.01em over 800ms ease + opacity 600ms'
  previewPin: 'horizontal pin-scroll, strip translateX 0 -> -200vw over 400vh sticky scroll range'
  classroomReveal: 'photo clip-path inset wipe (top->down) 900ms cubic-bezier(0.4,0,0.2,1); text lines slide translateX(60px)->0, staggered delays'
  timelineDraw: 'timeline-line scaleY 0->1 scroll-linked; event cards clip-path inset wipe 700ms cubic-bezier(0.4,0,0.2,1) revealed at thresholds'
  buttonHover: 'translateY(-1px/-2px) + background darken, transform/background 200ms ease'
  cardHover: 'book-tile img scale(1.04), siblings dim to 0.6 + scale(0.99) via :has(), bottom accent bar scaleX 0->1'
icons:
  library: none (no icon font; decorative typographic + CSS shapes only)
  style: 'typographic glyphs (oversized " quote mark, ✦ star char) and CSS-drawn shapes (triangle pointers, L-corner accents, dots)'
  color: '{colors.accent-orange}'

Cosmobooks

cosmobooks-design · alpha

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

Overview

Cosmobooks is a children's astronomy-book storefront with a storybook-at-night mood. The whole page sits on deep midnight navy (--bg-primary: #0C1A32) with a fixed, JS-generated star field of 120 twinkling white dots floating behind every section. Onto that dark canvas it throws three saturated, playful voltages: a hot watercolor orange (#FF6B35) that owns all the calls-to-action, the logo accent, active pills, links and prices; a lime spark (#A8E63A) for kickers, genre tags and accent corners; and a gold star (#F5C842) for hero stats and age badges — the three reappear together as the gradient of the events timeline. The type story is a deliberate three-way contrast: the dramatic high-contrast didone Abril Fatface for every headline (hero clamp(3.5rem,12vw,10rem)), the warm rounded Nunito for body and buttons, and the monospace B612 Mono — uppercase, tracked out to 0.2em — for every label, badge, date and kicker, which gives the whole thing a "field-notes-from-space" tone. Geometry is split in two: all media (hero photo grid, book tiles, event cards, badges) is razor-sharp at radius 0, while every interactive control (buttons, filter pills, inputs) is a fully rounded 100px pill. The signature structural moves are a scattering 4x4 hero photo grid, a bento catalog, a 300vw horizontal pin-scroll preview strip, a clip-path-wiping cream classroom split, and a self-drawing center-axis events timeline.

Colors

Brand / voltages. --accent-orange #FF6B35 is the primary voltage: every button fill (.btn-primary, .btn-dark, .nav-cta, .newsletter-btn), the active/hover filter pill, link/price color, the first timeline dot, and the span in the "Cosmobooks" logo; hover darkens it to #e85820/#ff5520. --accent-lime #A8E63A is the second spark — section kickers, .book-genre tags, the second timeline dot and the bottom-right L-corner accent on preview images. --accent-gold #F5C842 is the third — hero stat numbers, the .book-age-badge fill, the third timeline dot.

Surface. --bg-primary #0C1A32 is the page; --bg-secondary #1A2E5A backs the classroom photo; --surface #1D3464 fills cards, pills, inputs and tile fallbacks. The three preview panels use bespoke deep backgrounds: navy #0C1A32, purple #1A0A2E, teal #0A1A20.

Text. --text-primary #F5F0E0 is a warm cream used for headings and body on dark; --text-muted #8BAAD4 is a dusty blue for meta, captions and footer links. On the one light surface — the cream classroom panel (background is --text-primary) — body text flips to navy #2A3F6A and headings to --bg-primary.

Hairlines. Dividers are rgba(139,170,212,0.1) (section/footer borders); idle pill and input borders are rgba(139,170,212,0.2–0.3).

Gradient. The timeline line is linear-gradient(to bottom, orange, gold, lime). Overlays use navy rgba scrims: the hero vignette layers a radial rgba(12,26,50,0.7) falloff with a vertical gradient, and book tiles carry a linear-gradient(to top, rgba(12,26,50,0.95) … transparent) legibility scrim.

Typography

Three Google Fonts, imported in one @import: Abril Fatface (display didone, single weight 400), Nunito (rounded sans, 300/400/600/700 + italic), and B612 Mono (monospace, 400/700 + italic). All are open-source and load directly from Google Fonts — no substitution needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(3.5rem, 12vw, 10rem)	400	0.9	-0.02em	Hero title (Abril Fatface)
heading	clamp(2rem, 5vw, 3.5rem)	400	1.1	—	Section headings (Abril Fatface)
book-title	clamp(1.1rem, 2vw, 1.6rem)	400	1.15	—	Book card titles
preview-quote	clamp(1.8rem, 3.5vw, 3rem)	400 italic	1.25	—	Pull-quotes
body	1rem	400	1.6	—	Body copy (Nunito)
body-strong	1rem	700	—	—	Button labels (Nunito)
label	0.65–0.8rem	400/700	—	0.1–0.2em, uppercase	Kickers, badges, dates, meta, footer (B612 Mono)
stat-num	2–3rem	400	1	—	Hero & classroom stat numbers (Abril Fatface)

Layout

Base unit is effectively 8px, expressed in rem across the scale (0.5/0.7/1.2/2/3 rem etc.); section vertical padding runs 8rem top. Content columns cap at max-width: 1200px centered. The page is a vertical stack of full-bleed sections, each a distinct composition: a 100vh hero with a background video + 4x4 photo grid + centered glass title box + bottom stat row; a catalog bento grid (repeat(3,1fr), first tile spans 2 cols, second spans 2 rows) above filter pills; a 400vh preview wrapper holding a position:sticky viewport whose 300vw strip pin-scrolls horizontally through three split (quote / image) panels; a two-column classroom split (cream text side + clip-path-revealed photo, 80vh); a 300vh events wrapper with a sticky center-axis timeline whose cards alternate left/right around an 18px dot column; then a centered newsletter band and a 4-column footer. Whitespace is generous and dark, letting the saturated accents and cream type carry the energy. On mobile (≤768px) the bento and footer collapse to single/two columns and the pinned horizontal/timeline sections fall back to natural vertical flow.

Elevation & Depth

The system is mostly flat — depth comes from layered translucent navy scrims and glows rather than soft drop shadows. The hero overlay box uses glass: background rgba(12,26,50,.55) + backdrop-filter: blur(4px). The hero title carries a soft text-shadow 0 2px 40px rgba(0,0,0,0.6). The only true "shadow" is the colored glow ring around each timeline event dot (box-shadow: 0 0 0 4px rgba(255,107,53,0.2), with lime/gold variants). Book tiles and cards have no box-shadow; separation comes from the surface fill, the gradient scrim, and a hover accent bar that wipes in along the bottom edge.

Shapes

A deliberate two-mode radius story. Everything that holds an image or sits as a content block is perfectly sharp (border-radius: 0): hero tiles, book tiles, age badges, event cards, preview images. Everything interactive is a full pill at 100px: nav CTA, primary/outline/dark buttons, filter pills, newsletter input and button. The two exceptions are the hero glass overlay box at a soft 16px and circles (50%) for star dots and timeline event dots. The sharp-media / pill-controls contrast is the geometric signature.

Components

• Nav CTA — orange fill, white text, Nunito 700, 100px pill, padding 0.6rem 1.5rem; nav bar is fixed with a top-fading navy gradient and pointer-events: none except on its children.
• Primary button (.btn-primary / .btn-dark / .newsletter-btn) — orange fill + 2px orange border, white text, 100px pill, 0.85rem 2.2rem; hover darkens to #e85820 and lifts translateY(-2px). Label: "Explore Books".
• Outline button (.btn-outline) — transparent, cream text, 2px rgba(245,240,224,0.5) border, 100px pill; hover brightens the border. Dark variant (.btn-outline-dark) uses navy border/text on the cream panel.
• Filter pill — surface fill, muted-blue text, B612 Mono uppercase, 1px rgba(139,170,212,0.2) border, 100px pill, 0.5rem 1.2rem; active/hover flips to orange fill + white text. Labels: "All", "Ages 3–5", "Solar System".
• Book tile — surface fill, sharp corners, full-bleed cover image with a bottom-up navy gradient scrim, content over it (padding 1.4rem): gold age badge (top-right), lime genre tag, Abril title, mono meta with orange price, Nunito desc; hover scales the image 1.04, wipes in a 3px orange bottom bar, and dims sibling tiles to 0.6 via :has().
• Age badge — gold fill, navy text, B612 Mono 700 uppercase, sharp, padding 0.25rem 0.6rem. Label: "Ages 6–9".
• Newsletter input — surface fill, cream text, 1px rgba(139,170,212,0.3) border, 100px pill, 0.85rem 1.5rem; focus border turns orange. Placeholder "your@email.com" in muted blue.
• Event card — surface fill, sharp, 0.7rem 1.2rem padding, with a CSS triangle pointer toward the center axis; mono date (color-coded orange/lime/gold), Abril event name, italic Nunito author, mono venue. Reveals by horizontal clip-path wipe.
• Event dot — 18px circle, accent fill + matching 3px border + soft colored glow ring; alternates orange / lime / gold down the timeline.

Motion

Heavily animated, mostly scroll-driven through a single RAF update() loop plus several IntersectionObservers. The background star field twinkles continuously (@keyframes twinkle, 2–6s, randomized delay/opacity per star). On load the hero overlay and stat row fade in (opacity 600ms, staged 1.2s/1.6s delays). Hero tiles can settle from a scattered translate/rotate state via 900ms cubic-bezier(0.2,0.8,0.2,1) and drift with scroll parallax. The catalog heading does a per-word blur+rise reveal (500ms, 80ms stagger); the events heading does a letter-spacing wind-up (0.6em → -0.01em, 800ms). The preview strip pin-scrolls horizontally (translateX 0 → -200vw) across a 400vh range. The classroom photo reveals via a top-down clip-path inset wipe (900ms) while text lines slide in from the right. The events timeline line draws itself (scaleY 0 → 1) and cards wipe in by clip-path at scroll thresholds. All buttons use 200ms ease transform/background hovers. (An empty /* REDUCED MOTION */ comment block exists but no prefers-reduced-motion rules are implemented.)

Iconography

No icon font or SVG icon set is used. "Icons" are typographic and CSS-drawn: oversized Abril Fatface " quote marks (8rem, orange at 0.3 opacity) on preview panels, a ✦ star character in the footer, CSS-border triangle pointers on event cards, CSS-border L-shaped corner accents (orange top-left, lime bottom-right) on preview images, the hover underline bar on book tiles, and circular dots for the star field and timeline. Accent color for these decorative marks is primarily --accent-orange, with lime/gold for paired accents.

Do's and Don'ts

• Do keep the page on deep navy with the fixed star field behind everything — it is the brand's atmosphere.
• Do reserve orange for actions/links, and use lime + gold as the supporting pair (kickers/tags, badges/stats).
• Do keep the sharp-media / pill-control split: never round image tiles or badges, never square a button or pill.
• Do set every label, date, badge and kicker in B612 Mono, uppercase, tracked out — it carries the "space field notes" voice.
• Don't add drop shadows to cards; depth is from navy scrims and the colored dot glows only.
• Don't introduce a fourth accent color or mix the three voltages randomly — they have fixed roles.
• Don't set headlines in anything but Abril Fatface or body in anything but Nunito.

Known Gaps

• The hero .hero-tile scatter/settle CSS classes exist but the markup ships the background as a <video> plus vignette; the 4x4 tile grid is authored in CSS/JS but not populated with tiles in this HTML, so the "scattering grid" is described from the CSS intent.
• No prefers-reduced-motion rules are implemented despite the placeholder comment.
• Spacing scale is inferred from the rem values actually used (0.25–8rem); the 2xl token approximates the heavy 8rem section padding.
• Section background hex values for preview panels (#1A0A2E, #0A1A20) and the on-light text color (#2A3F6A) are literal inline values, not CSS variables.