hyperframes/skills/product-launch-video/phases/design-system/style-presets/daisy-days/preset.md

{
  "name": "daisy-days",
  "label": "Daisy Days",
  "fingerprint": {
    "shadow": "hard-offset-charcoal",
    "border": "thick-charcoal-rounded",
    "type": "rounded-display",
    "decoration": "hand-drawn-sticker",
    "mood": "storybook-pastel",
    "motion": "bounce-and-settle"
  },
  "match_signals": [
    { "kind": "shadow_zero_blur", "weight": 0.3 },
    { "kind": "thick_solid_border", "weight": 0.25 },
    { "kind": "low_saturation", "weight": 0.2 },
    { "kind": "bouncy_easing", "weight": 0.1 }
  ],
  "best_for": ["educational content", "wellness", "community workshops", "creator portfolios", "friendly internal kickoffs"],
  "avoid_for": ["enterprise compliance", "financial precision", "security", "authority-first contexts"],
  "chromeFonts": {
    "googleFontsHref": "https://fonts.googleapis.com/css2?family=Fredoka+One&family=Quicksand:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap",
    "display": "Fredoka One",
    "body": "Quicksand",
    "script": "Fredoka One",
    "mono": "JetBrains Mono"
  }
}

chromeFonts makes the design.html doc chrome render in the preset's native fonts (Fredoka One + Quicksand); brand fonts still apply to §6 component code. The script slot also points at Fredoka — the storybook voice refuses a third face.

§A Director's intent

Daisy Days is a cheerful, storybook-pastel system. Every container is a rounded card with a thick charcoal outline (3px) and a hard offset shadow (6px / 6px / 0), and every region is wreathed in hand-drawn SVG ornaments — daisies, stars, suns, clouds, rainbows — that cluster at the corners and crop past the edges. Type pairs a chubby rounded display face with a friendly humanist sans; surfaces alternate between cream and saturated pastels (turquoise, soft-pink, butter, mint, lavender, peach, sky). The single accent — coral — is reserved for small high-attention markers, never as a surface.

Voice is warm and informal: short sentence fragments, sentence case, no shouting. Motion is bounce-and-settle: things hop in with a mild overshoot, ornaments breathe and twinkle, exits are quick and clean. Use dc- as the CSS class prefix to namespace components.

§B Decoration tokens

/* Hard offset shadow + chunky borders — the system's signature elevation.
   All borders/shadows use var(--ink) directly; site DNA's ink carries it. */
--border-bold: 3px solid var(--ink);
--border-thin: 2px solid var(--ink);
--shadow-card: 6px 6px 0 var(--ink);
--shadow-small: 4px 4px 0 var(--ink);
--shadow-text-bold: 3px 3px 0 var(--ink);
--shadow-text-soft: 3px 3px 0 color-mix(in srgb, var(--ink) 20%, transparent);

/* Generous radii — there are no square corners in this system */
--radius-card: 20px;
--radius-card-lg: 28px;
--radius-pill: 50px;

/* Spacing */
--gap-card: 1.5vw;
--gap-grid: 1.25vw;
--pad-card-lg: 2.4vw 2.8vw;
--pad-card-md: 1.6vw 2vw;
--pad-card-sm: 0.8vw 1.2vw;

/* Surface alternates — each is a low-opacity tint over the brand palette so any
   brand still produces a pastel-garden surface. Falls back cleanly when the
   site's accent palette is itself pastel.

   §8.2 exception: pastel/butter/blush/sky anchors are technical hue anchors,
   declared once here so every surface/sticker mix produces a storybook tone
   regardless of brand DNA. Without these anchors, dark or saturated brands
   would produce dark pastels — breaking the storybook register. */
--anchor-cream: #fffaf0; /* off-white pastel anchor for surfaces */
--anchor-warm-cream: #f5f0e6; /* warmer cream for canvas wash */
--anchor-butter: #fde68a; /* butter-yellow sticker anchor */
--anchor-sky: #a8d8f0; /* sky-blue sticker anchor */
--anchor-blush: #f7c8d4; /* blush-pink sticker anchor */
--anchor-mint: #a8e6cf; /* mint-green sticker anchor */
--anchor-lavender: #d4a5e8; /* lavender sticker anchor */
--anchor-peach: #ffcba4; /* peach sticker anchor */
--anchor-teal: #7ecdc0; /* deep-teal sticker anchor */
--anchor-paper: #ffffff; /* pure white — card surface + white text on saturated fills */

--surface-pastel-primary: color-mix(in srgb, var(--brand-primary) 32%, var(--anchor-cream));
--surface-pastel-secondary: color-mix(in srgb, var(--brand-secondary) 30%, var(--anchor-cream));
--surface-pastel-accent: color-mix(in srgb, var(--brand-accent) 28%, var(--anchor-cream));
--surface-cream: color-mix(in srgb, var(--canvas) 78%, var(--anchor-warm-cream));

/* Sticker tints — used for ornament fills so daisies/stars re-color with brand */
--sticker-warm: color-mix(in srgb, var(--brand-primary) 50%, var(--anchor-butter));
--sticker-cool: color-mix(in srgb, var(--brand-accent) 50%, var(--anchor-sky));
--sticker-soft: color-mix(in srgb, var(--brand-secondary) 45%, var(--anchor-blush));

/* SVG stroke (used inline on ornaments) */
--sticker-stroke: var(--ink);
--sticker-stroke-w: 2.1px;

§D Font pairing fallback

• display: 'Fredoka One' · 'Fredoka' wght 600 · 'Baloo 2' wght 700
• body: 'Quicksand' wght 500 · 'Nunito' wght 500 · 'Comfortaa' wght 500
• mono: 'JetBrains Mono' wght 500 · 'IBM Plex Mono' wght 500

§T Type-role atlas (Phase 4b reads this to size text correctly)

The atlas is the sole authoring source for non-component text. If a scene needs a number-hero numeral that isn't covered by §6 components, the worker reads role number-hero here and writes inline CSS from these values. Do NOT invent ad-hoc sizes — every role floors at 24px and the Fredoka/Quicksand families split the ladder by role, so ad-hoc sizes break the storybook ladder.

[
  {
    "id": "display-cover",
    "family": "display",
    "purpose": "cover / opening hero headline (Fredoka One on cream, no text-shadow)",
    "px_min": 52, "px_max": 112, "weight": 400, "leading": "1.1", "tracking": "0.02em", "case": "sentence",
    "sample_html": "<div class=\"t-trole-display-cover\">{BRAND_NAME}</div>"
  },
  {
    "id": "headline",
    "family": "display",
    "purpose": "primary slide headline on cream / white card (dark ink, flat — no shadow)",
    "px_min": 40, "px_max": 72, "weight": 400, "leading": "1.1", "tracking": "0.02em", "case": "sentence",
    "sample_html": "<div class=\"t-trole-headline\">A friendlier way to begin</div>"
  },
  {
    "id": "headline-pastel",
    "family": "display",
    "purpose": "headline on a saturated pastel surface (white text + 3px charcoal text-shadow — non-optional)",
    "px_min": 40, "px_max": 72, "weight": 400, "leading": "1.1", "tracking": "0.02em", "case": "sentence",
    "sample_html": "<div class=\"t-trole-headline-pastel-wrap\"><span class=\"t-trole-headline-pastel\">This week's lineup</span></div>"
  },
  {
    "id": "title",
    "family": "display",
    "purpose": "section title or framed-header title (Fredoka One on cream/card)",
    "px_min": 28, "px_max": 48, "weight": 400, "leading": "1.15", "tracking": "0.02em", "case": "sentence",
    "sample_html": "<div class=\"t-trole-title\">Section title</div>"
  },
  {
    "id": "quote-text",
    "family": "display",
    "purpose": "pull-quote body inside a white quote box (Fredoka One, dark ink)",
    "px_min": 30, "px_max": 48, "weight": 400, "leading": "1.35", "tracking": "0.02em", "case": "sentence",
    "sample_html": "<div class=\"t-trole-quote-text\">A small kindness, repeated daily, becomes the work.</div>"
  },
  {
    "id": "subtitle",
    "family": "display",
    "purpose": "sub-headline or in-card title (Fredoka One mid-scale)",
    "px_min": 26, "px_max": 38, "weight": 400, "leading": "1.2", "tracking": "0.02em", "case": "sentence",
    "sample_html": "<div class=\"t-trole-subtitle\">Sub-headline</div>"
  },
  {
    "id": "number-hero",
    "family": "display",
    "purpose": "hero statistic numeral (Fredoka One, brand-accent on cream / white card)",
    "px_min": 80, "px_max": 152, "weight": 400, "leading": "1", "tracking": "0.02em", "case": "sentence",
    "sample_html": "<div class=\"t-trole-number-hero\">63%</div>"
  },
  {
    "id": "body-strong",
    "family": "body",
    "purpose": "emphasized body line — welcome list items, info-card descriptions (Quicksand 600)",
    "px_min": 24, "px_max": 28, "weight": 600, "leading": "1.5", "tracking": "0", "case": "sentence",
    "sample_html": "<p class=\"t-trole-body-strong\">A friendlier way to start the week — together.</p>"
  },
  {
    "id": "quote-author",
    "family": "body",
    "purpose": "quote attribution (Quicksand 700, muted ink)",
    "px_min": 24, "px_max": 26, "weight": 700, "leading": "1.4", "tracking": "0", "case": "sentence",
    "sample_html": "<div class=\"t-trole-quote-author\">— A friend, in a workshop</div>"
  },
  {
    "id": "badge",
    "family": "display",
    "purpose": "pill badge text (Fredoka One on butter-yellow fill, charcoal border)",
    "px_min": 24, "px_max": 26, "weight": 400, "leading": "1", "tracking": "0.02em", "case": "sentence",
    "sample_html": "<div><span class=\"t-trole-badge\">New today</span></div>"
  },
  {
    "id": "marker-numeral",
    "family": "display",
    "purpose": "numeral / letter inside a marker circle (Fredoka, white on saturated fill — dark on butter)",
    "px_min": 26, "px_max": 34, "weight": 400, "leading": "1", "tracking": "0.02em", "case": "sentence",
    "sample_html": "<div><span class=\"t-trole-marker-numeral\">1</span></div>"
  }
]

§E Motion (GSAP consts — REPLACES site ease)

// Daisy Days motion — bounce-and-settle storybook character
const EASE = {
  entry: "back.out(1.6)", // chunky cards hop in with mild overshoot
  emphasis: "back.out(2.0)", // bigger overshoot for hero moments
  exit: "power2.in", // exits stay quick and clean
  drift: "sine.inOut", // ornaments breathe; rainbow shimmer; sun twinkle
  wobble: "elastic.out(1, 0.5)", // optional: signature joy moment, use sparingly
};
const DUR = {
  snap: 0.18,
  med: 0.5,
  slow: 0.9,
};
// RULE: cards/badges enter with EASE.entry, never with linear or power2.out — the back.out is the brand
// RULE: ornaments use EASE.drift on a continuous yoyo (rotation ±3deg, scale 0.97-1.03) — never freeze
// RULE: do NOT cross-fade scenes. Cut on the beat. The shadow + outline only read on a hard frame change.
// RULE: text-shadow on headlines must animate IN with the headline, not after — they're one object
// RULE: EASE.wobble is for ONE element per scene at most (the focal stat number, a sticker pop) — overuse turns the system into a toy

§E.5 Motion choreography

• Atmosphere: ornaments (daisies, stars, suns, clouds, rainbows) drift continuously on EASE.drift. Stagger rotation phase 0-2s across instances so the field never moves in lockstep.
• Entry vocabulary: cards bounce up from y: 24, scale: 0.94, opacity: 0 to rest. Stagger 0.06-0.08s between siblings in a grid (week-card row, info-card grid, team-grid).
• Emphasis: numbers/stats count up on EASE.emphasis with a one-shot wobble on the final value. Display headlines pop in on EASE.entry with a 0.5x letter-by-letter stagger when budget allows.
• Exits: quick fade + 8-12px upward drift on EASE.exit over DUR.snap. Ornaments fade last.
• Transitions: hard cut between scenes — no crossfade, no slide. The charcoal outline must land on a clean frame to read sticker-on-paper.
• Forbidden gestures: blur, parallax, perspective tilt past 6°, motion-blur trails, gradient sweeps, glass refraction. The system is 2D and graphic.

§G Voice transform recipe

1. Keep sentence case — never UPPERCASE. Fredoka is loud on its own; shouting breaks the storybook warmth.
2. Strip corporate hedges (leverage, enable, solutions, seamlessly, holistic) and connectives where the line still reads.
3. Prefer short, friendly fragments. 4-8 words per line for headlines; 6-12 for subheads.
4. Use commas, em-dashes, and exclamation points sparingly but warmly. Never trail with . on a headline.
5. End with one warm word as a closer when possible — today, friends, welcome, brand-name.
6. Pastel surfaces want softer copy ("Let's begin"); cream surfaces can carry the meatier line ("A friendlier way to build").

Example:

• IN: Our platform enables teams to seamlessly collaborate across complex workflows in real time
• OUT: Teams, working together — in real time. Welcome.

§H Scene composition hints

• One main subject per scene. A single card / frame / grid lives at the center, max-width well inside the slide padding. Two competing panels reads anxious; let one focal region carry the beat.
• Wreath every scene with 3-7 SVG ornaments clustered at corners. Crop them past the edge (top: -30px / right: -20px style). An empty corner reads as broken — ornaments are structural, not garnish.
• Surface alternation: rotate scenes through var(--surface-cream) (cover, info), var(--surface-pastel-primary) (welcome, week), var(--surface-pastel-secondary) (timeline, quote), var(--surface-pastel-accent) (process, donut). Don't repeat the same surface back-to-back.
• Headline shadow rule: on a saturated pastel surface, every Fredoka headline carries var(--shadow-text-bold) and switches to white. On cream or on a white card, headline sits flat in var(--ink). This is non-optional — skipping it on a colored surface breaks the system.
• Brand-color role contract:
  • var(--brand-primary) → focal sticker fills (daisy centers, star fills), primary card surfaces
  • var(--brand-secondary) → soft sticker fills (cloud bands, rainbow stripes), divider rules
  • var(--brand-accent) → marker dots (timeline node, step circle), single high-attention spot
  • var(--ink) → every border, every shadow, every SVG stroke. Never colored.
• Bullet rule: body lists use outlined 20px discs with butter-yellow fill (var(--brand-secondary) 50% tint). Never glyph bullets, never bare hyphens.
• Marker rotation: when a sequence of dots/steps is needed (timeline rows, process steps, day-headers), rotate fills through accent → secondary → primary → soft so each beat has a distinct color. Never one color for all.
• Type roles: display font (Fredoka One register) carries headlines, titles, numerals, marker labels, and badge/chip text; body font (Quicksand register) carries paragraph copy, list items, descriptions, and quote attributions. All on-screen text floors at 24px and the ladder scales up from there — display roles sit clearly above body roles (see §T). The family split (not a px threshold) is the role boundary. No exceptions.
• Forbidden: colored borders, dashed lines, square corners outside legend swatches, blurred or rgba shadows, gradients, glow effects, photo backdrops, italic display text.
• Transition default: hard cut on the beat. Ornaments fade out last, cards exit first.

§I Page-level CSS

/* ── Preset-native typography vars — doc chrome renders in Fredoka One + Quicksand. */
:root {
  --f-disp-native:
    "Fredoka One", "Fredoka", "Baloo 2", "Comfortaa", "Nunito", system-ui, sans-serif;
  --f-body-native:
    "Quicksand", "Nunito", "Comfortaa", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-script-native:
    "Fredoka One", "Fredoka", "Baloo 2", "Comfortaa", "Nunito", system-ui, sans-serif;
  --f-mono-native:
    "JetBrains Mono", "IBM Plex Mono", "Space Mono", "Menlo", ui-monospace, monospace;
}

/* .preset-native-scope: re-bind brand DNA font tokens to preset-native families for §6 previews + §T atlas. */
.preset-native-scope {
  --font-display: var(--f-disp-native);
  --font-body: var(--f-body-native);
  --font-script: var(--f-script-native);
  --font-mono: var(--f-mono-native);
}

/* Daisy Days — make design.html itself read as a storybook spread */
body {
  background: var(--surface-cream);
}

.ds-section {
  border: var(--border-bold);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-card);
  background: #ffffff;
  margin-bottom: 2.4rem;
}

.ds-section h2 {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.ds-component-preview {
  border: var(--border-bold);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-small);
  background: var(--surface-cream);
}

.ds-code {
  border: var(--border-thin);
  border-radius: 12px;
  background: #fffaf0;
}

/* ── §T Type-role atlas. */
.ds-trole-box {
  display: flex;
  flex-direction: column;
  border: var(--border-bold);
  border-radius: var(--radius-card-lg);
  background: #ffffff;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-top: 24px;
}
.ds-trole-row {
  padding: 28px 32px;
  border-bottom: var(--border-thin);
}
.ds-trole-row:last-child {
  border-bottom: 0;
}
.ds-trole-sample {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 960px) {
  .ds-trole-row {
    padding: 24px;
  }
}

/* ── Type-role samples. */
.t-trole-display-cover {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(52px, 7vw, 112px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.t-trole-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.t-trole-headline-pastel-wrap {
  display: inline-block;
  background: var(--surface-pastel-primary);
  border: var(--border-bold);
  border-radius: var(--radius-card);
  padding: 24px 32px;
}
.t-trole-headline-pastel {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--anchor-paper);
  text-shadow: var(--shadow-text-bold);
}
.t-trole-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.t-trole-quote-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--ink);
  max-width: 28ch;
}
.t-trole-subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.t-trole-number-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(80px, 11vw, 152px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--brand-accent);
}
.t-trole-body-strong {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(24px, 1.6vw, 28px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 50ch;
  margin: 0;
}
.t-trole-quote-author {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(24px, 1.4vw, 26px);
  line-height: 1.4;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
}
.t-trole-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 1.4vw, 26px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--anchor-butter);
  border: var(--border-bold);
  border-radius: var(--radius-pill);
  padding: 8px 20px;
}
.t-trole-marker-numeral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: var(--border-bold);
  background: var(--brand-accent);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 1.8vw, 34px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--anchor-paper);
}