name: lamplight-press-design
version: alpha
description: >
  A storybook-publisher landing page built like a hand-bound picture book. Warm
  cream paper (`#F4E9D0`) dotted with a printed halftone texture is the surface;
  deep plum ink (`#3A2C5C`) does all the line-work, type, and 2px borders, with
  pumpkin (`#E08244`), crimson (`#C23D3D`) and mint (`#A8D6B8`) as the spot
  colors. The signature moves are paper craft: open-book hero spreads with a
  perspective fold and gradient spine, clip-path "hand-cut" torn edges, washi
  tape, ribbon-pulled book spines, speech bubbles, and hard offset
  drop-shadows. Type pairs serif Fraunces (display, often italic) with Inter
  (body). Geometry is deliberately imperfect — asymmetric organic border-radii
  and slight rotations on every card.
colors:
  # Surface
  cream: '#F4E9D0'        # primary paper surface (.paper), buttons-on-dark text, light cards
  cream-2: '#EFE0BE'      # secondary warm paper — newsletter panel, some flap cards, light spines
  # Brand / Ink
  ink: '#3A2C5C'          # deep plum: all text, every 2px border, offset shadows, dark sections
  # Spot / Accent
  pumpkin: '#E08244'      # orange accent: headline word, pumpkin button, satchel, chips, stars
  crimson: '#C23D3D'      # red accent: crimson button, ribbons, accent headline word, badges
  mint: '#A8D6B8'         # soft green: right hero page, mint cards, chips, section eyebrows on dark
  # Section variants / one-offs
  flap-brown: '#c46a30'   # satchel flap fill (darker pumpkin)
  spine-violet: '#5B4685' # decorative book-spine fill on shelf
  spine-sage: '#7A9D6D'   # decorative book-spine fill on shelf
  spine-blue: '#3F587A'   # decorative book-spine fill on shelf
  spine-rust: '#8B3A3A'   # decorative book-spine fill on shelf
  shelf-top: '#8b5e3c'    # wooden shelf board gradient top
  shelf-bottom: '#6b4528' # wooden shelf board gradient bottom
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: 92px          # hero h1; section h2 ~text-7xl, h3 ~text-5xl
    fontWeight: 900
    lineHeight: 0.88
  display-italic:
    fontFamily: "'Fraunces', serif"
    fontSize: 32px          # .italic-d — italic accent words, captions, quotes
    fontWeight: 300
    fontStyle: italic
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 16px
    fontWeight: 400
  eyebrow:
    fontFamily: "'Inter', sans-serif"
    fontSize: 11px
    fontWeight: 500
    letterSpacing: 3px      # tracking-[.25em]/[.3em], uppercase section labels & page numbers
    textTransform: uppercase
  chip:
    fontFamily: "'Inter', sans-serif"
    fontSize: 12px
    fontWeight: 600
    letterSpacing: 1px      # tracking-[.08em]
    textTransform: uppercase
rounded:                    # organic, asymmetric — no single token; representative values
  sm: 4px                   # book spines, shelf board
  card: '24px 36px 26px 32px'   # flap/newsletter cards — multi-value organic corners
  btn: '30px 26px 28px 24px'    # buttons — uneven pill corners
  page: '40px 60px'         # book-page outer corners (rounded-l-[40px_60px])
  full: 9999px              # nav pills, chips, avatars, dots
spacing:                    # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 48px
  '3xl': 112px              # section py-28
components:
  navPill:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.body}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.full}'
    padding: '8px 16px'     # px-4 py-2
    note: 'Sign in button; pumpkin Subscribe uses btn-pumpkin'
  buttonCrimson:
    backgroundColor: '{colors.crimson}'
    textColor: '{colors.cream}'
    typography: '{typography.body}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.btn}'
    shadow: '4px 4px 0 {colors.ink}'  # 6px 6px on hover, translate(-2px,-2px)
    padding: '16px 28px'    # px-7 py-4
  buttonPumpkin:
    backgroundColor: '{colors.pumpkin}'
    textColor: '{colors.ink}'
    border: '2px solid {colors.ink}'
    rounded: '24px 30px 22px 28px'
    shadow: '4px 4px 0 {colors.ink}'
    padding: '8px 16px'
  chip:
    backgroundColor: '{colors.mint}'   # also overridden to cream/pumpkin/crimson inline
    textColor: '{colors.ink}'
    typography: '{typography.chip}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.full}'
    shadow: '2px 2px 0 {colors.ink}'
    padding: '4px 14px'
  flapCard:
    backgroundColor: '{colors.cream}'  # variants: mint / cream-2 / pumpkin / crimson
    textColor: '{colors.ink}'
    border: '2px solid {colors.ink}'
    shadow: '6px 6px 0 {colors.ink}'
    rotation: '-2deg to +2deg'         # each card slightly rotated, often topped with washi tape
  bookPage:
    backgroundColor: '{colors.cream}'  # right page uses paper-mint
    border: '2px solid {colors.ink}'
    rounded: '{rounded.page}'
    shadow: 'drop-shadow 0 18px 18px rgba(58,44,92,.35)'  # .fold-shadow
    transform: 'perspective(1400px) rotateY(±8deg)'
  bubble:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.ink}'
    typography: '{typography.display-italic}'
    border: '2px solid {colors.ink}'
    rounded: '22px 28px 24px 26px'
    shadow: '4px 4px 0 {colors.ink}'   # with a rotated square tail
  popImage:
    border: '3px solid {colors.ink}'
    clipPath: 'organic polygon (hand-cut edge)'
    shadow: '0 30px 40px -10px rgba(58,44,92,.35)'  # .pop-shadow
  satchel:
    backgroundColor: '{colors.pumpkin}'
    border: '2px solid {colors.ink}'
    rounded: '18px 18px 22px 22px / 14px 14px 28px 28px'
    shadow: '6px 6px 0 {colors.ink}'   # floating cart, bottom-right fixed
  emailInput:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.ink}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.full}'
    padding: '12px 20px'    # px-5 py-3, focus:bg-white
motion:
  popUp: 'GSAP from scale .4, y 60, rotate -6, opacity 0; duration 1.2; elastic.out(1,0.6); ScrollTrigger top 85%'
  flapCard: 'GSAP from y 40, opacity 0, rotateX -40 (top origin); duration .8; back.out(1.6); staggered .05s; top 90%'
  spineBook: 'GSAP from y 80, opacity 0; duration .6; staggered .04s; power3.out; top 95%'
  bubble: 'GSAP from scale .6, opacity 0; duration .7; back.out(2); top 88%'
  spineHover: 'CSS — ribbon opacity 0→1 & height 60→120px; spine translateY(-10px) rotate(-1deg); .3s'
  buttonHover: 'CSS — translate(-2px,-2px), shadow grows 4px→6px offset'
  navLink: 'CSS — wavy SVG underline fades/slides in on hover; .3s'
icons:
  library: 'Tabler Icons (webfont, ti)'
  style: outline
  sizes: { sm: 16px, md: 18px, lg: 20px, xl: 24px }
  color: '{colors.ink}'
  note: 'Decorative 5-point stars are inline SVG filled with pumpkin/crimson/ink'

Lamplight Press

lamplight-press-design · alpha

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

Overview

Lamplight Press ("Foxglove & Folio") is a fictional independent picture-book publisher, and the page is built to feel like one of its books. The whole surface is warm cream paper (#F4E9D0, .paper) printed with a two-layer halftone of tiny dots, with a deep plum ink (#3A2C5C) doing every line: text, the ubiquitous 2px borders, and the hard offset drop-shadows. The signature move is paper craft taken literally — the hero is an open book whose two pages fold inward on perspective(1400px) rotateY(±8deg) around a gradient "spine," illustrations are clipped with irregular clip-path polygons to look hand-cut, sections divide with torn-top/torn-bottom SVG-masked rough edges, cards wear washi-tape strips and tilt a degree or two, and the library is a row of book spines that drop a crimson ribbon when you hover. Spot color comes from pumpkin (#E08244), crimson (#C23D3D) and mint (#A8D6B8). Type pairs Fraunces (a high-contrast serif, used black for display and light-italic for asides) against Inter for body and uppercase eyebrows. Nothing is perfectly square — radii are organic multi-value corners and almost everything is rotated slightly off-axis. The result is cozy, crafted, and storybook-surreal.

Colors

Surface. cream #F4E9D0 is the main paper (.paper), overlaid with two radial-gradient dot textures (plum at 6%, brown at 8% opacity). cream-2 #EFE0BE is a warmer second paper used on the newsletter panel and several flap cards. Dark sections (.paper-ink) use ink #3A2C5C as a full background with cream text.

Ink / brand. ink #3A2C5C is the single structural color — every border is 2px solid ink (illustrations use 3px), every offset shadow is solid ink, and nearly all text is ink. On dark sections it flips to cream.

Spot accents. pumpkin #E08244 (the pumpkin button, satchel cart, chips, the "dark." headline word, decorative stars), crimson #C23D3D (the crimson button, ribbons, badges, the "moon."/"slow," accent words), and mint #A8D6B8 (the right hero page, mint flap cards and chips, eyebrow labels on dark sections).

One-offs. Decorative book spines on the shelf use literal hex fills (#5B4685 violet, #7A9D6D sage, #3F587A blue, #8B3A3A rust) plus the brand colors. The shelf board is a wood gradient #8b5e3c → #6b4528; the satchel flap is #c46a30. Shadows are rgba(58,44,92,…) (ink at low alpha).

Typography

Two families, both via Google Fonts. Fraunces ('Fraunces', serif, optical sizing on) is the display/quote face — used at weight 900 for headlines and weight 300 italic (.italic-d) for accent words, captions, quotes, and addresses. Inter ('Inter', sans-serif) is body text, UI, eyebrows, and chips. No mono face. If substituting, Fraunces and Inter are both open-source on Google Fonts so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	92px (hero) / ~72px h2 / ~48px h3	900	0.88–0.92	tight	Headlines
display-italic	18–32px	300	snug	—	Accent words, quotes, captions
body	16px (sm 14px)	400–600	normal	—	Paragraphs, nav, buttons
eyebrow	10–11px	500	—	0.25–0.3em	Uppercase labels, page numbers
chip	12px	600	—	0.08em	Pill chip labels

Layout

Base unit 4px on a standard Tailwind scale; sections are max-w-[1280px] centered with px-8 and tall vertical rhythm (py-24/py-28). The page is a sequence of full-width bands that alternate surface: cream .paper, mint .paper-mint, and dark .paper-ink. Dominant primitives are the open-book spread (two col-span-6 pages folding around a center .spine), 12-column grids for flap rows and split content, and absolutely-positioned free-floating compositions (the authors "pinboard" scatters five tilted photo-and-speech-bubble units across a 700px canvas; pop-up illustrations, floating watches, moons, and stars are absolutely placed inside pages). Whitespace is generous and the energy comes from rotation and overlap rather than density.

Elevation & Depth

Depth is hard, illustrative, not soft UI. The hallmark is the offset solid shadow: 4px 4px 0 ink on buttons/bubbles/chips (growing to 6px 6px 0 on hover), 6px 6px 0 ink on flap cards and the satchel. Illustrations get .pop-shadow (0 30px 40px -10px rgba(58,44,92,.35) plus a small 0 8px 0 -4px ledge) to look like they pop off the page. Book pages use .fold-shadow (drop-shadow(0 18px 18px …) drop-shadow(0 4px 0 …)) so the fold casts a real shadow. Book spines have inset highlight/shadow edges. There is no glass/blur glow; depth is paper, ink, and offset.

Shapes

Imperfection is the system. Book pages use asymmetric elliptical corners (rounded-l-[40px_60px]). Buttons, bubbles, flap/newsletter cards, and the satchel all use four-value organic border-radius (e.g. 30px 26px 28px 24px, 22px 28px 24px 26px) so no corner matches another. Chips, nav buttons, avatars, the email input, and dots are full pills (9999px). Illustrations are clipped with hand-drawn clip-path polygons (torn-paper silhouettes). Section seams are rough: torn-top/torn-bottom SVG masks and a scallop-top half-circle mask above the footer. Book spines and the shelf board keep small 4px radii.

Components

• Nav pill — transparent fill, 2px ink border, full radius, px-4 py-2; "Sign in". Paired pumpkin "Subscribe".
• Button (crimson) — crimson fill, cream text, 2px ink border, organic radius 30px 26px 28px 24px, 4px 4px 0 ink shadow, px-7 py-4; e.g. "Open the Catalogue".
• Button (pumpkin) — pumpkin fill, ink text, same border/shadow, radius 24px 30px 22px 28px; "Subscribe", "Add to Satchel".
• Chip — mint fill (often overridden cream/pumpkin/crimson), 2px ink border, full pill, 2px 2px 0 ink shadow, uppercase 12px; e.g. "read-aloud", "in stock", "hardcover · $24".
• Flap card — cream/mint/cream-2/pumpkin/crimson fill, 2px ink border, 6px 6px 0 ink shadow, rotated 1–2°, usually with a washi-tape strip; event cards, press blurbs, meta flaps.
• Book page — paper/paper-mint, 2px ink border, 40px 60px organic corners, fold-shadow, rotateY(±8deg) perspective; the hero and featured spread.
• Speech bubble — cream fill, 2px ink border, organic radius, 4px 4px 0 ink shadow, rotated square tail; author quotes.
• Washi tape — diagonal striped translucent strip with dashed side borders, absolutely placed over card tops.
• Book spine — colored vertical bar (62px × ~280–312px), vertical Fraunces title, inset edge shadows; hover drops a crimson ribbon and lifts/tilts the spine.
• Satchel cart — fixed bottom-right pumpkin square with a flap, ink shopping-bag icon, crimson count badge "3".
• Email input — cream fill, 2px ink border, full pill, px-5 py-3, focus turns white.

Motion

GSAP + ScrollTrigger drive entrance animations with a paper-spring feel. Pop-up illustrations rise and scale in on elastic.out(1,0.6) (1.2s). Flap cards flip down on rotateX(-40) with back.out(1.6), staggered. Book spines slide up staggered (power3.out); bubbles pop with back.out(2). CSS hover motion: book spines lift translateY(-10px) rotate(-1deg) while their ribbon grows; buttons nudge translate(-2px,-2px) and grow their offset shadow; nav links reveal a wavy SVG underline. All timings are 0.3–1.2s.

Iconography

Tabler Icons via webfont (ti ti-*), outline style, in ink (cream on dark sections). Sizes run 16–24px (text-base → text-3xl). Used for UI affordances — ti-book-2, ti-player-play, ti-shopping-bag, ti-feather, ti-lock, ti-award, ti-mail-opened, social brand icons in the footer. Separately, decorative 5-point stars are hand-coded inline <svg> filled with pumpkin/crimson/ink, scattered as ornament rather than UI.

Do's and Don'ts

• Do keep ink #3A2C5C as the only line color — 2px borders, offset shadows, and text.
• Do use hard offset solid shadows (Npx Npx 0 ink), never soft blurred UI shadows.
• Do rotate cards a degree or two and use organic multi-value border-radii so nothing reads as a perfect rectangle.
• Do pair Fraunces (black display / light-italic asides) with Inter body and uppercase tracked eyebrows.
• Do lean on paper-craft devices: torn edges, washi tape, ribbons, clip-path hand-cut images, the book-fold spine.
• Don't introduce gradients beyond the paper dot-texture, spine fade, and the wooden shelf.
• Don't flatten the palette — cream is the surface, ink is structure, and pumpkin/crimson/mint stay as spot accents.
• Don't make illustrations rectangular or borderless; they need the 3px ink border and a clip-path silhouette.
• Don't straighten everything onto a rigid grid — the free-floating, slightly-off-axis composition is the character.

Known Gaps

• Headline sizes come from Tailwind utility classes (text-7xl/text-5xl etc.); only the hero 92px is an explicit value — the table lists approximate rem-derived px for the others.
• The rounded tokens are representative samples; the design uses many bespoke four-value radii inline rather than a fixed scale.
• Paper/grain textures are inline SVG/radial-gradient data URIs; described by intent, not reproduced pixel-for-pixel.
• Spacing scale is inferred from Tailwind classes actually used (4px base), not declared in a :root.