name: dreambell-design
version: alpha
description: >
  An editorial app-store showcase for "Vesper" — a literary alarm app — staged
  as five iPhone mockups on a near-black ink surface (#14110C). The system runs
  on a warm "Lucid Dawn" palette of cream, peach, violet and gold, with gold
  (#D4B548) as the recurring voltage. The type story is a contrast pairing:
  Fraunces serif in light italic for display and story titles, Inter for body,
  and JetBrains Mono for the all-caps editorial labels. Signature moves are the
  magazine masthead (giant italic headline, "Issue Nº 07"), the device frames
  with double-ring shadow, the multiply-blended giant clock numerals, frosted
  glass controls, and soft drifting/glowing animations.
colors:
  # Surface
  ink: '#14110C'            # page background, device hardware ring, dark cards, tab bars
  cream: '#F0E8D2'          # primary light screen surface, light text on dark
  peach: '#F2C6A8'          # warm screen-surface tint, gradient top, dawn glow
  peach-deep: '#E8B89A'     # mid stop of the wake-screen dawn gradient
  # Brand / Voltage
  gold: '#D4B548'           # primary accent — labels, toggles-on, active tab, dials, progress
  violet: '#6A3E8A'         # secondary accent — story chapter labels, dropcaps, sleep gradient top
  violet-deep: '#4A2A65'    # mid stop of sleep-mode gradient
  violet-night: '#2A1840'   # bottom of sleep gradient, dial inner well
  # Text (on light cream/peach screens)
  ink-90: 'rgba(20,17,12,0.90)'  # near-black body on light screens (text-[#14110C]/80–90)
  ink-60: 'rgba(20,17,12,0.60)'  # muted body / secondary on light screens
  ink-45: 'rgba(20,17,12,0.45)'  # faint captions on light screens
  # Text (on ink / dark screens)
  cream-60: 'rgba(240,232,210,0.60)'  # muted body on dark
  cream-40: 'rgba(240,232,210,0.40)'  # faint labels on dark
  # Hairlines
  hairline-dark: 'rgba(240,232,210,0.18)'  # divider lines on the ink page (header/footer rules)
  hairline-light: 'rgba(20,17,12,0.12)'    # card borders on light screens
  # Glass
  glass-cream: 'rgba(240,232,210,0.35)'    # frosted swipe / search pill / cards (+ backdrop-blur)
  glass-ink: 'rgba(20,17,12,0.92)'         # dark frosted tab bars
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: 88px
    fontWeight: 300
    lineHeight: 0.9
    letterSpacing: -0.02em
  story-title:
    fontFamily: "'Fraunces', serif"
    fontSize: 32px
    fontWeight: 300
    lineHeight: 1.05
  numeral:
    fontFamily: "'Fraunces', serif"
    fontSize: 140px
    fontWeight: 300
    lineHeight: 0.85
    letterSpacing: -0.06em
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
  label:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.3em
    textTransform: uppercase
rounded:
  sm: 12px      # rounded-xl mini-stat tiles
  md: 18px      # carousel cards
  lg: 22px      # alarm cards / book plate
  xl: 44px      # phone frame
  full: 9999px  # pills, toggles, knobs, chips, tab bars
spacing:        # base unit 4px; common steps below
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 32px
  2xl: 48px
components:
  device-frame:
    backgroundColor: '{colors.cream}'
    rounded: '{rounded.xl}'
    elevation: '0 40px 80px -20px rgba(20,17,12,0.35), 0 0 0 10px #14110C, 0 0 0 11px #2a241c'
    size: '320 x 680px'
  primary-button:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.gold}'
    rounded: '{rounded.full}'
    size: '56px circle (play) / 40px (add)'
  toggle-on:
    backgroundColor: '{colors.gold}'
    knobColor: '{colors.cream}'
    rounded: '{rounded.full}'
    elevation: '0 2px 6px rgba(20,17,12,0.25)'
  alarm-card:
    backgroundColor: '{colors.glass-cream}'
    border: '1px {colors.hairline-light}'
    rounded: '{rounded.lg}'
    padding: '16px'
    elevation: '0 8px 20px -10px rgba(106,62,138,0.25)'
  chip:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.gold}'
    typography: '{typography.label}'
    rounded: '{rounded.full}'
    padding: '4px 10px'
  tab-bar:
    backgroundColor: '{colors.glass-ink}'
    textColor: '{colors.cream}'
    activeBackgroundColor: '{colors.gold}'
    activeTextColor: '{colors.ink}'
    rounded: '{rounded.full}'
    size: '260 x 48px'
  progress-bar:
    trackColor: 'rgba(20,17,12,0.15)'
    fillColor: '{colors.gold}'
    height: '2px'
motion:
  drift: 'translateY -8px↔8px, 7s ease-in-out infinite (floating clock, birds, art)'
  glow: 'opacity .55↔.85, 5s ease-in-out infinite (sleep radial glow, live dots)'
  sweep: 'gold gradient sheen translateX -100%→250%, 2.4s ease-in-out infinite'
  pulse: 'Tailwind animate-pulse on alarm/status dots'
icons:
  library: inline SVG (hand-drawn)
  style: thin outline, 1–2px strokes; some filled glyphs (play/pause)
  stroke: 1.2-2px
  sizes: { sm: 12px, md: 14px, lg: 22px }
  color: '{colors.ink} on light · {colors.gold} on dark'

Dreambell (Vesper)

dreambell-design · alpha

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

Overview

Dreambell is the showcase page for "Vesper," a literary alarm app, presented as a printed magazine spread — "Vol. III, Issue Nº 07" — laid over a deep ink field (#14110C). The page opens with an editorial masthead: a giant Fraunces headline in light italic ("A clock that dreams for you.") set against a mono kicker and a right-aligned issue number, all separated by faint cream hairlines. Below, five 320×680 iPhone frames sit in a horizontally-scrolling gallery, each rendering a screen of the app on the warm "Lucid Dawn" palette — cream #F0E8D2, peach #F2C6A8, violet #6A3E8A and gold #D4B548. Gold is the voltage: it carries labels, active states, toggles, dials and progress. The signature moves are the device frames' double-ring hardware shadow, multiply-blended giant clock numerals in Fraunces, frosted-glass swipe controls and tab bars, hand-drawn SVG ornaments (birds, a ladder, a clock, stars), and slow drift/glow animations. A colophon footer prints the palette swatches, the type pairing, and a founding quote.

Colors

Surface. The page is ink #14110C — also used for the device hardware ring, the dark play/add buttons, dark tab bars, and the notch. Screens sit on cream #F0E8D2 (the dominant light surface and the light-text color on ink) and peach #F2C6A8, with #E8B89A (peach-deep) as a mid gradient stop. The wake screen is a peach→gold dawn gradient; the sleep screen is a violet descent #6A3E8A → #4A2A65 → #2A1840.

Brand / Voltage. Gold #D4B548 is the accent everywhere: mono labels, the "on" toggle, the active tab pill, the timer dial ring (conic gradient), the progress fill, chip text, and small glyph buttons. Violet #6A3E8A is the secondary accent — story chapter labels, the drop-cap, the schedule weekday highlights, a feature card, and the sleep gradient top.

Text. On light screens text is ink at varying opacity: rgba(20,17,12,0.90) for body, /0.60 muted, /0.45 faint captions. On dark screens text is cream: solid #F0E8D2, /0.60 muted, /0.40 faint.

Hairlines. Page dividers use rgba(240,232,210,0.18); card borders on light screens use rgba(20,17,12,0.10–0.12).

Glass. Frosted surfaces (swipe control, search pill, glass alarm cards) are rgba(240,232,210,0.35–0.90) with backdrop-filter: blur(10–14px); dark tab bars use rgba(20,17,12,0.92).

Typography

Three Google Fonts via @import. Fraunces (serif, optical sizing on, with SOFT 50, WONK 1 variation and -0.02em tracking) is the display and editorial face — used in light weight, frequently italic, for the masthead, story titles, giant clock numerals and pull quotes. Inter is the body sans. JetBrains Mono carries every small all-caps label with wide 0.2–0.35em tracking. A .tab-num utility enables tabular numerals (tnum) with -0.06em tracking for clock figures.

Token	Size	Weight	Line-height	Tracking	Usage
display	88px	300	0.9	-0.02em	Masthead headline (Fraunces italic)
numeral	140px	300	0.85	-0.06em	Giant wake-screen clock
story-title	32px	300	1.05	-0.02em	Story plate title
body	15px	400	1.6	—	Subhead / excerpt (Inter)
label	10px	400	—	0.3em	All-caps mono labels (JetBrains Mono)

Layout

Base unit 4px. The page is a centered max-w-[1480px] column with px-12 gutters. Structure: (1) editorial header — flex row of masthead + issue number over a hairline, then a mono index row; (2) the phone gallery — a horizontally scrolling flex row (gap-10, min-w-max) of five device frames, each captioned below; (3) a 12-column colophon footer (palette / typography / quote). Inside each 320×680 frame, content is absolutely positioned at fixed top offsets, giving each screen a precise editorial composition. Whitespace is generous and the dark field lets the warm screens glow.

Elevation & Depth

The hero depth move is the device frame shadow: a soft drop 0 40px 80px -20px rgba(20,17,12,0.35) plus two hard rings simulating hardware — 0 0 0 10px #14110C, 0 0 0 11px #2a241c. Cards lean on hairline borders rather than shadows, except the active alarm card which gets a violet-tinted lift 0 8px 20px -10px rgba(106,62,138,0.25). Frosted glass (backdrop-blur) creates layering for swipe controls, the search pill and tab bars. The sleep dial has an inset shadow inset 0 0 30px rgba(0,0,0,0.5), and its knob glows with 0 0 12px #D4B548. A subtle .grain radial-dot texture sits on the story screen.

Shapes

Soft and rounded throughout. The phone frame is 44px; alarm cards and the book plate are ~22px/20px; carousel cards 18px; mini-stat tiles 12px. Pills are fully round (9999px): chips, toggles, knobs, swipe control, search pill, and the 260px tab bars. Giant numerals and italic serif lend an organic, editorial softness against the hard rounded geometry.

Components

• Device frame — #F0E8D2/gradient fill, 44px radius, double-ring hardware shadow, 320×680; a top notch (#14110C, 90×24, 14px radius).
• Primary button — ink fill, gold glyph, full-round; 56px play / 40px add.
• Toggle (on) — gold track, cream knob with 0 2px 6px shadow; off is rgba(20,17,12,0.15).
• Alarm card — frosted cream (0.3–0.7 alpha), hairline border, 22px radius, 16px padding; active variant carries the violet lift shadow.
• Chip / filter — full-round, ink+gold (active) or hairline-bordered (inactive); mono 9px all-caps. Labels: "All", "Surreal", "Sea", "★".
• Tab bar — 260×48 full-round glass bar; inactive items at 50% opacity, the active item a gold pill with ink text. Tabs: Wake / Schedule / Dreams / Sleep.
• Progress bar — 2px ink/15 track, gold fill + gold thumb dot.
• Sleep dial — 176px conic-gradient gold ring, dark inner well with inset shadow, glowing knob, tick marks; centered "25m / drift, slowly".
• Search pill — frosted, blurred, hairline; italic Fraunces placeholder "search your dreams…" + gold count "47".

Motion

Three @keyframes: drift (vertical float ±8px, 7s) on the floating clock, birds and hero art (staggered with negative animation-delay); glow (opacity .55↔.85, 5s) on the sleep radial wash and live status dots; sweep (a gold sheen sliding -100%→250%, 2.4s) authored as a .sweep::after shimmer. Tailwind animate-pulse marks alarm/status dots. All are slow, ambient, looping — matched to the app's drowsy theme.

Iconography

All icons are inline hand-drawn SVG — thin outlines (1.2–2px strokes) for the clock, birds, ladder, search, chevrons, plus, moon and stars, and filled glyphs for play/pause/skip. Color follows surface: #14110C on light screens, #D4B548 or #F0E8D2 on dark. Common sizes 12 / 14 / 22px. Icons are both decorative (birds, ladder, stars, clock illustration) and functional (controls, toggles).

Do's and Don'ts

• Do keep gold #D4B548 as the single voltage for active/interactive states.
• Do set display type in Fraunces light italic; keep labels in mono all-caps with wide tracking; use tabular numerals for all clock figures.
• Do preserve the double-ring device shadow and the warm-on-ink contrast.
• Do keep motion slow and ambient (drift/glow), never snappy.
• Don't introduce shadows where hairlines do the work, or square off the rounded geometry.
• Don't add new accent hues beyond the Lucid Dawn five (cream/peach/violet/ gold/ink).
• Don't mix the type roles (no Inter headlines, no mono body copy).

Known Gaps

• style-guide.json token values use the five named palette swatches; many in-markup colors are opacity variants of ink/cream expressed via Tailwind /NN modifiers and inline rgba() — captured as representative tokens.
• The .sweep shimmer keyframe is defined in CSS but no element uses the .sweep class in the markup; documented as authored-but-unused.
• Spacing scale is inferred from recurring Tailwind utilities (4px base); not every one-off offset is listed.
• Fonts load from Google Fonts; the Fraunces variation settings (SOFT/WONK) render only where the variable font is available.