name: soft-craft-design
version: alpha
description: >
  A warm, editorial design-studio landing in soft cream and sage, with two
  hand-mixed voltages — a rose-coral (#B85F75) and a sky-cyan (#5BB8D4). The
  signature face is Fraunces, used almost exclusively in italic with live
  variable-font axes (SOFT 0–100, opsz 60–144) for a soft, calligraphic display
  voice; Manrope carries body and Space Mono sets all the uppercase eyebrows and
  meta. The hallmark moves are a frosted "water" hero card (SVG turbulence
  displacement + backdrop blur + specular sheen), a hover-expand bento grid, a
  scroll-driven word-mask color fill, and a velocity-reactive type marquee.
  Geometry is mostly soft-cornered rectangles with generous whitespace; tiles
  are sharp-edged and full-bleed.
colors:
  # Surface
  bg-primary: '#F7F3EC'      # page background — warm cream
  bg-secondary: '#EAF4F0'    # alt sections (word-mask), soft sage-mint
  surface: '#FFFFFF'         # bento tile default fill
  # Text
  text-primary: '#1A2E20'    # headings/body — deep forest green; also footer bg
  text-muted: '#6B8575'      # muted body, eyebrow meta, unfilled mask words
  hero-ink: '#2A2520'        # hero headline/sub ink — warm near-black
  # Brand / Voltage
  accent-1: '#B85F75'        # rose-coral — primary accent, links, fills, rules
  accent-2: '#5BB8D4'        # sky-cyan — secondary accent, eyebrows, dots
  # Misc
  hero-video-bg: '#95B79E'   # sage placeholder behind hero video
typography:
  display:
    fontFamily: "'Fraunces', Georgia, serif"
    fontSize: clamp(28px, 5vw, 80px)
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.02em
    fontStyle: italic
  display-mega:
    fontFamily: "'Fraunces', Georgia, serif"
    fontSize: clamp(60px, 13vw, 200px)
    fontWeight: 900
    lineHeight: 0.96
    letterSpacing: -0.015em
    fontStyle: italic
  display-marquee:
    fontFamily: "'Fraunces', Georgia, serif"
    fontSize: clamp(56px, 10vw, 140px)
    fontWeight: 700
    lineHeight: 1
    fontStyle: italic
  body:
    fontFamily: "'Manrope', sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.7
  body-cta:
    fontFamily: "'Manrope', sans-serif"
    fontSize: 14px
    fontWeight: 500
    letterSpacing: 0.04em
  mono-eyebrow:
    fontFamily: "'Space Mono', monospace"
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 0.18em
    textTransform: uppercase
  mono-meta:
    fontFamily: "'Space Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.14em
    textTransform: uppercase
rounded:
  none: 0px            # bento tiles, footer rules, CTA borders — sharp
  card: 24px           # hero-inner glass card — clamp(18px,1.6vw,28px)
  full: 9999px         # marquee dots (border-radius:50%)
spacing:                # base unit 8px; large section rhythm in 4px multiples
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  section: 160px
components:
  nav:
    backgroundColor: 'linear-gradient(to bottom, rgba(247,243,236,0.85), rgba(247,243,236,0))'
    typography: '{typography.mono-meta}'
    textColor: '{colors.text-muted}'
    padding: '24px 64px'
    note: 'fixed; backdrop-filter blur(4px); logo in {typography.display} italic 22px'
  hero-card:
    backgroundColor: 'linear-gradient(160deg, rgba(180,220,235,0.34), rgba(150,195,215,0.18) 50%, rgba(200,230,240,0.3))'
    textColor: '{colors.hero-ink}'
    rounded: '{rounded.card}'
    padding: 'clamp(32px,4.5vw,64px) clamp(28px,5vw,72px)'
    border: '1px solid rgba(255,255,255,0.55)'
    note: 'frosted water glass — SVG turbulence displacement + backdrop blur + sheen'
  hero-cta:
    textColor: '{colors.hero-ink}'
    typography: '{typography.body-cta}'
    border: '1.5px solid hero-ink (bottom only)'
    padding: '0 0 4px'
    note: 'text link with → arrow that slides 6px on hover'
  bento-tile:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-primary}'
    rounded: '{rounded.none}'
    padding: '36px'
    note: 'image tiles (t-a/t-c/t-e) use {colors.text-primary} bg + dark gradient overlay; t-b {colors.bg-secondary}; t-d {colors.accent-1} on cream'
  bento-num:
    typography: '{typography.mono-meta}'
    note: '01 / Discovery — mono label, opacity 0.7'
  bento-title:
    typography: '{typography.display}'
    fontSize: clamp(26px, 2.6vw, 38px)
    note: 'Fraunces italic, SOFT 100 opsz 100'
  word-mask-word:
    textColor: '{colors.text-muted}'
    typography: '{typography.display-mega}'
    note: 'fills to {colors.accent-1} as scroll progress crosses per-word thresholds'
  word-mask-cta:
    textColor: '{colors.accent-1}'
    typography: '{typography.body-cta}'
    rounded: '{rounded.none}'
    border: '1.5px solid {colors.accent-1}'
    padding: '14px 28px'
    note: 'uppercase; inverts to accent-1 fill / cream text on hover'
  marquee-token:
    textColor: '{colors.text-primary}'
    typography: '{typography.display-marquee}'
    note: '.alt tokens use {colors.accent-1}; separated by {colors.accent-2} dots'
  footer:
    backgroundColor: '{colors.text-primary}'
    textColor: '{colors.bg-primary}'
    padding: '120px 64px 48px'
    note: 'wordmark in {typography.display-mega}; accent rules in {colors.accent-1}'
motion:
  hero-water-rise: 'hero card rises 1.4s cubic-bezier(0.25,0,0.15,1) — translateY(60px)+scale(0.96)+clip-path inset reveal'
  hero-line: 'words fade in staggered 140ms apart, blur(14px)→0 + translateY(20px)→0 over 0.8s'
  water-distort: 'SVG feTurbulence baseFrequency animates over 16s, feDisplacementMap scale 14 (live)'
  bento-hover: 'siblings dim to 0.55 + scale(0.96); hovered tile scale(1.04) + lift shadow, 0.45s'
  word-mask-fill: 'rAF scroll progress fills words at 0.15/0.30/0.45/0.60; sub+CTA at 0.78'
  marquee: 'JS rAF velocity-reactive scroll; base 8px/frame + scroll-velocity boost up to ~60px (CSS marquee fallback 80s linear)'
  footer-wordmark: 'per-character clip-path reveal, 70ms stagger'
  footer-rule: 'horizontal rules scaleX(0)→1 over 0.95s on intersect'
icons:
  library: inline unicode glyphs
  style: 'arrow → in hero CTA; no icon font/SVG icon set'
  color: '{colors.hero-ink}'

Soft Craft Studio

soft-craft-design · alpha

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

Overview

Soft Craft is a warm editorial landing page for a fictional craft/design studio, built on a cream surface (#F7F3EC) with a sage-mint alternate (#EAF4F0) and a deep forest-green ink (#1A2E20) that doubles as the footer field. Its character comes from two soft voltages — a rose-coral #B85F75 and a sky-cyan #5BB8D4 — used sparingly for links, fills, eyebrows, dots, and rules. The type story is the whole personality: Fraunces, set almost entirely in italic with live variable axes ('SOFT' 0–100, 'opsz' 60–144) for a soft, calligraphic display voice; Manrope for body at a roomy 1.7 line-height; and Space Mono for every uppercase eyebrow and meta caption at tight 11–12px with wide tracking. The signature moves are showy but tasteful: a frosted "water" hero card that layers an SVG turbulence-displacement filter, backdrop blur, and a diagonal specular sheen; a hover-expand bento grid where siblings recede; a scroll-driven word-mask that fills each headline word from muted to coral; and a velocity-reactive marquee of client names. Geometry is mostly soft-cornered rectangles (clamp(18px,1.6vw,28px) on the hero card) over generous, slow whitespace, while the bento tiles stay sharp-edged and full-bleed.

Colors

Surface. The page sits on bg-primary #F7F3EC, a warm cream used for the body, the bento section, and the marquee section. bg-secondary #EAF4F0, a soft sage-mint, backs the word-mask section and the t-b tile. surface #FFFFFF is the default bento-tile fill.

Text. text-primary #1A2E20 is a deep forest green for all headings and body copy on light surfaces — and it inverts to become the footer background. text-muted #6B8575 (sage-grey) handles secondary copy, mono meta, and the unfilled state of the word-mask words. The hero uses a section-local hero-ink #2A2520 (warm near-black) for its headline, sub, and CTA, with the last headline word lightened to rgba(42,37,32,0.88).

Brand / Voltage. Two accents. accent-1 #B85F75 (rose-coral) is the primary voltage: nav-hover, the t-d tile fill, the word-mask fill color and CTA border, .alt marquee tokens, footer rules, and the email hover. accent-2 #5BB8D4 (sky-cyan) is the secondary: all section eyebrows, marquee dots, and the footer email link. A t-c tile overlay blends a rgba(232,84,122,0.55) coral wash into green.

Misc. #95B79E is a sage placeholder shown behind the hero video before it loads.

Typography

Three Google Fonts, loaded via one css2 request: Fraunces (italic + roman, full variable opsz 9..144, wght 400..900, and the SOFT 0..100 axis), Manrope (400/500/600), and Space Mono (400/700 + italic). Fraunces is the display face and is set in italic everywhere with live font-variation-settings tuning softness and optical size per role. Manrope is the body/UI sans. Space Mono is the caption/eyebrow voice — always uppercase, wide-tracked, small. No bespoke faces; all three are open-source on Google Fonts.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(28px,5vw,80px)	700 italic	1.08	-0.02em	Hero headline (SOFT 0, opsz 144)
display (heading)	clamp(36px,4.4vw,64px)	700 italic	1.0	-0.01em	Bento heading (SOFT 100, opsz 144)
display-mega	clamp(60px,13vw,200px)	900 italic	0.96	-0.015em	Word-mask + footer wordmark
display-marquee	clamp(56px,10vw,140px)	700 italic	1.0	—	Marquee client tokens
body	17px	400	1.7	—	Body copy, hero sub
body-cta	14px	500	—	0.04em	Hero / word-mask CTA labels
mono-eyebrow	12px	400	—	0.18em	Section eyebrows (uppercase)
mono-meta	11px	400	—	0.14em	Meta captions, nav links, footer (uppercase)

Layout

Base unit is 8px (gaps and small paddings step in 8/16/24/32/48), with the large vertical rhythm in 4px multiples (sections at 140–180px top/bottom, footer at 120px). Inner content is capped at max-width: 1280px and centered; nav and sections gutter at 64px (collapsing to 24px under 560px). The page composition: a fixed blurred nav over a full-viewport hero whose content lives in a centered frosted card (min(820px,100%)); then a two-row 4-column bento grid (280px rows, asymmetric spans) with a hover-expand interaction; a 250vh sticky-pinned word-mask section; a full-bleed velocity marquee; and a forest-green footer with a centered wordmark flanked by animated rules and a three-column info grid. Whitespace is generous and unhurried.

Elevation & Depth

Depth is concentrated in the hero card, which is real glassmorphism: a multi-stop inset/outset shadow stack — 0 36px 80px -24px rgba(20,45,60,0.34) for cast shadow plus four inset hairlines (rgba(255,255,255,0.75) top sheen down to 0.08 ring) — over a backdrop-filter: blur(3px) saturate(130%) layer warped by an SVG turbulence displacement filter, finished with a diagonal overlay-blend specular streak. Elsewhere depth is restrained: bento tiles are flat until hover, when the focused tile gains 0 24px 64px rgba(26,46,32,0.18); image tiles use a green gradient scrim instead of a shadow. Section separation is by background color and hairline borders (rgba(247,243,236,0.08–0.12) in the footer), not shadow.

Shapes

A soft-but-mixed radius story. The hero card is the one truly soft element at clamp(18px,1.6vw,28px) (~24px). Everything structural is sharp: bento tiles, the word-mask CTA, footer rules, and the type all sit at 0, giving the editorial grid its crisp backbone. The only fully round shapes are the 12px marquee dots (border-radius:50%). The softness of the brand reads through the typeface's SOFT axis and curvature, not through heavy corner rounding.

Components

• Nav — fixed; cream-to-transparent gradient + blur(4px); logo in Fraunces italic 22px (SOFT 100, opsz 60); links in Space Mono 11px uppercase, muted, coral on hover; padding 24px 64px.
• Hero card — frosted glass; cyan-tinted diagonal gradient fill, white 0.55 border, ~24px radius, padding clamp(32px,4.5vw,64px) …; water displacement + sheen layers; rises in on load.
• Hero CTA — "See How We Work →"; Manrope 500 14px, hero-ink, 1.5px bottom border; arrow slides 6px on hover, color fades to 65%.
• Bento tile — sharp, full-bleed, 36px pad, content bottom-aligned. Default white; image tiles (t-a,t-c,t-e) go forest-green with a green gradient scrim; t-b sage-mint; t-d coral fill on cream text. Label 01 / Discovery in mono, title in Fraunces italic clamp(26px,2.6vw,38px).
• Word-mask headline — four words ("WORK THAT FEELS ALIVE.") in display-mega, muted by default, each filling to coral as scroll passes 0.15/0.30/0.45/0.60.
• Word-mask CTA — "View All Projects"; uppercase Manrope 500 14px, coral with 1.5px coral border, inverts to coral fill on hover; padding 14px 28px.
• Marquee token — client names in Fraunces italic clamp(56px,10vw,140px); .alt tokens coral; 12px cyan dots between; 36px gap.
• Footer — forest-green field, cream text; centered "SOFT CRAFT" wordmark in display-mega flanked by coral rules; three-column grid; email link in cyan, coral on hover.

Motion

The page is motion-forward but tasteful, all CSS/rAF (no GSAP). Easings are --ease cubic-bezier(0.25,0,0.15,1) and --ease-soft cubic-bezier(0.4,0,0.2,1). Hero: the card runs hero-water-rise (1.4s, translateY 60px + scale 0.96 + a clip-path inset reveal); eyebrow/sub/CTA fade up on timers; headline words fade in 140ms apart from blur(14px). The SVG water-distort filter animates its baseFrequency over 16s for a live rippling backdrop. Bento: on grid hover all siblings dim to 0.55 and scale to 0.96 while the hovered tile scales to 1.04 and lifts (0.45s). Word-mask: a rAF scroll loop fills words and a bottom progress bar. Marquee: JS replaces the CSS animation with a velocity-reactive transform — base 8px/frame plus a scroll-velocity boost (decaying ×0.92) up to ~60px; the authored @keyframes marquee (80s linear) is the no-JS fallback. Footer: per-character clip-path reveal (70ms stagger) and rules scaling out from center on intersect. A 1.5s global fallback force-reveals everything if observers miss.

Iconography

There is no icon font or SVG icon set. The only glyph is a unicode arrow → in the hero CTA (hero-ink, slides on hover). Decorative geometry is limited to the 12px cyan marquee dots and the coral footer rules. The lone SVG is a non-visual feTurbulence/feDisplacementMap filter powering the hero glass.

Do's and Don'ts

• Do keep Fraunces in italic with the SOFT/opsz axes tuned per role — that variable-font softness is the brand.
• Do use the two voltages sparingly: coral for action/fill, cyan for labels/dots/links. Let cream and forest-green carry the field.
• Do keep eyebrows and meta in Space Mono, uppercase, wide-tracked, small.
• Do keep structural elements (tiles, CTAs, rules) sharp-cornered; reserve softness for the hero card and the typeface.
• Don't add box-shadows to flat tiles or sections — depth lives only in the hero glass and the hovered bento tile.
• Don't introduce a third accent or set Fraunces upright/non-italic for display — both break the voice.
• Don't tighten the body line-height; the roomy 1.7 is part of the calm.

Known Gaps

• Spacing scale is inferred from the gaps/paddings used (base 8px); not declared as tokens in the HTML.
• The hero glass effect's exact look depends on the runtime SVG turbulence filter and backdrop-filter support; values are read from the markup, not rendered.
• hero-ink (#2A2520) is a hero-local CSS var, not part of the :root palette.
• The marquee's CSS @keyframes (80s) is a fallback; the live motion is the JS velocity-driven transform whose exact speed is data-dependent.
• No icon library is used; "Iconography" describes the single unicode arrow and decorative shapes only.