hyperframes/skills/hyperframes-creative/frame-presets/daisy-days/FRAME.md

---

version: alpha name: Daisy Days — Frame (video / frame layer) description: > Video-first companion to Daisy Days' design.md. The unit is the frame (1920×1080). Atoms are identical and sacred — the sunny-garden pastel palette (cream + turquoise/pink/butter/mint/ lavender/peach/sky + coral accent), charcoal 3px outlines, hard offset shadows (6/4px, no blur), the Fredoka + Quicksand pairing, generous radii, headline text-shadow on color, dot bullets, and the hand-drawn SVG ornament layer. Composition + frame scale rewritten. Motion out of scope. unit: the frame — 1920×1080 primary; 9:16 and 1:1 documented principle: atoms are sacred · composition is free · numbers come from the script

colors: cream: "#F5F0E6" turquoise: "#7ECDC0" soft-pink: "#F7C8D4" butter: "#FDE68A" mint: "#A8E6CF" lavender: "#D4A5E8" peach: "#FFCBA4" sky: "#A8D8F0" coral: "#F8635F" text-dark: "#2D2D2D" text-muted: "#6B6B6B" white: "#FFFFFF"

borders: { primary: "3px solid text-dark", thin: "2px solid text-dark" } shadows: { default: "6px 6px 0 text-dark", small: "4px 4px 0 text-dark", text-headline: "3px 3px 0 text-dark", text-headline-soft: "3px 3px 0 rgba(0,0,0,0.2)" }

typography:

— reading ramp (Quicksand) —

body: { fontFamily: "Quicksand", cqw: 0.95, weight: 500, lineHeight: 1.6 } body-strong:{ fontFamily: "Quicksand", cqw: 0.95, weight: 600, lineHeight: 1.5 } meta: { fontFamily: "Quicksand", cqw: 0.78, weight: 600, lineHeight: 1.45 }

— display ramp (Fredoka One / Fredoka 600 — single weight, never italic) —

badge: { fontFamily: "Fredoka One", cqw: 0.9, tracking: "0.02em" } label-display:{ fontFamily: "Fredoka One", cqw: 1.3, lineHeight: 1.3, tracking: "0.02em" } subtitle:{ fontFamily: "Fredoka One", cqw: 1.8, lineHeight: 1.2, tracking: "0.02em" } quote: { fontFamily: "Fredoka One", cqw: 2.6, lineHeight: 1.35 } title: { fontFamily: "Fredoka One", cqw: 3.0, lineHeight: 1.15, tracking: "0.02em" } headline:{ fontFamily: "Fredoka One", cqw: 4.5, lineHeight: 1.1, tracking: "0.02em" } display: { fontFamily: "Fredoka One", cqw: 6.5, lineHeight: 1.1, tracking: "0.02em" }

spacing: pad-slide: "3cqw" radius: "20px" radius-lg: "28px" radius-pill: "50px" radius-round: "50%"

components: card: backgroundColor: "{colors.white}" border: "3px solid {colors.text-dark}" rounded: "{spacing.radius} (28px featured)" shadow: "6px 6px 0 {colors.text-dark}" description: "The universal container; white-on-pastel is standard." framed-header: backgroundColor: "pastel cap + {colors.white} body" border: "3px solid {colors.text-dark} (one continuous)" rounded: "{spacing.radius-lg}" shadow: "6px 6px 0 {colors.text-dark}" description: "Pastel header strip flush above a white body — one unit, one shadow." badge-pill: backgroundColor: "{colors.butter}" border: "3px solid {colors.text-dark}" rounded: "{spacing.radius-pill}" typography: "{typography.badge}" shadow: "4px 4px 0 {colors.text-dark}" description: "Section tag. white-space:nowrap." circle-marker: backgroundColor: "any pastel" textColor: "{colors.white} (dark on butter)" border: "3px solid {colors.text-dark}" rounded: "50%" size: "bullet 20 / icon 44 / dot 48 / step 90" typography: "Fredoka numeral" description: "Steps carry a small shadow." bullet-dot: backgroundColor: "{colors.butter}" border: "2px solid {colors.text-dark}" rounded: "50%" size: "20px (::before, 4px from line top)" description: "Lists never use glyph bullets." ornament: type: "hand-drawn SVG (daisy, star, sun, cloud, rainbow)" stroke: "2.1px {colors.text-dark}" placement: "z-index:1 behind content (z-index:2), cropping past the frame edge" description: "3–7 per frame, clustered at corners/edges." quote-mark: typography: "oversized Fredoka quote glyph" color: "{colors.soft-pink} (charcoal stroke)" description: "Above a quote body." text-headline-shadow: shadow: "3px 3px 0 {colors.text-dark} (soft 20% variant on pink/mint)" appliesTo: "Fredoka headlines on saturated surfaces (cream headlines sit flat)" description: "Makes the headline read 'outlined' like the shapes."

Daisy Days — Frame (video / frame layer)

Overview

Daisy Days at frame scale is a cheerful, childlike system — picture-book illustration meets sticker-sheet kawaii. Every shape carries a 3px charcoal outline, every elevated element a solid hard offset shadow (no blur), every surface a sunny-garden pastel. The voice is one pairing: Fredoka One (chunky rounded, single weight) for every headline, Quicksand for every body and meta line. The signature is the hand-drawn SVG ornament layer — daisies, stars, suns, clouds, rainbows clustering at corners and cropping past the edge.

The palette is multi-pastel with one warm pop: cream canvas, seven pastel surfaces, and {colors.coral} reserved for small high-attention markers only. Headlines on a saturated surface get a 3px charcoal text-shadow (so they read "outlined" like the shapes) and switch to white; headlines on cream sit flat in charcoal. Depth is 2D and graphic — thick outline + hard offset = sticker-on-paper.

Key characteristics at frame scale:

• Cream default + rotating pastel surfaces; {colors.coral} is a marker accent, never a surface.
• Fredoka One headlines + Quicksand 500/600 body — strict by role, never crossed.
• 3px charcoal outline + hard offset shadow (6/4px, zero blur) on every elevated shape.
• Generous radii — 20px cards, 28px featured, pill badges, full-circle markers; no square corners.
• Headline text-shadow on saturated surfaces (white text); flat charcoal on cream.
• Dot bullets (outlined butter discs, never glyphs) + a 3–7 ornament wreath per frame.

The Frame

Frame Craft Bar

Three eyeball tests gate every frame before any structural check:

• Squint — one Fredoka headline or content card dominates at 3–6× its neighbor.

• Silence — one content container per frame surrounded by an ornament wreath; the info-card grid is the one dense exception. Empty corners read as broken.

• Restraint — cream or one pastel surface; coral is a small-marker accent (never a surface); charcoal borders + hard offset shadows only; no ninth color.

• Reference — aim at a children's picture-book / sticker-sheet kawaii zine; failure looks like a flat, square-cornered, blurred-shadow corporate slide.

• Primary: 1920×1080 (16:9). Display authored in cqw (px ÷ 1920 × 100 = cqw).

• Vertical: 1080×1920 (9:16). Square: 1080×1080 (1:1).

• Safe area: pad-slide ~3cqw; ornaments deliberately bleed past the edge.

The container law (load-bearing). Every frame ground sets container-type: size; ALL frame-relative units are cqw/cqh against it — never vw. Borders stay 3px/2px; radii stay 20/28/50px; shadow offsets scale in cqw so the sticker offset holds proportionally.

Colors

Tokens identical to the source. Default ground {colors.cream}; rotate saturated pastels (turquoise / soft-pink / butter / mint / lavender / peach / sky) for tonal mood. Cards are white on any surface. Borders + shadows are always {colors.text-dark} charcoal — never colored, never blurred, never rgba (save the soft text-shadow variant). {colors.coral} is the lone high-saturation accent — small markers (step circles, dots, headers) only, never a surface. Body is charcoal/muted; pastels carry no semantic meaning. No ninth color.

Typography

Two ramps. The reading ramp (Quicksand 500 body 0.95cqw, 600 emphasis, meta) carries copy; the display ramp (Fredoka One label-display 1.3cqw → display 6.5cqw, single weight) carries every headline, title, quote, and marker numeral.

• Legibility floor: any load-bearing line ≥ 1.4cqw; meta is chrome only.
• Fit-to-measure: size the headline to its length. Cap the block at ≤ 78cqw; ≤3 words → display; 4–6 → headline; 7+ → title.
• Fredoka One for all display, Quicksand for all body — never crossed. Fredoka is single-weight (no italic, no underline, no alt weights); Quicksand stays 500/600/700. Fredoka tracking 0.02em; Quicksand body never uppercase.

Depth & Surface

2D graphic depth — hard offset shadow, solid charcoal, zero blur, bottom-right:

• shadows.default 6px cards, frames, badges, chart containers.
• shadows.small 4px small cards, step circles, avatars.
• Text-headline shadow — 3px charcoal on Fredoka headlines over saturated surfaces (20% soft variant on pink/mint); cream headlines flat.
• Outline + offset together are the sticker-on-paper signature.

Ceiling: no blurred shadow, no rgba (except the soft text-shadow), no gradient, no glow; an element either casts a hard charcoal offset or none.

Shapes

• 20px cards, 28px featured, 50px pill (badges, counter), 50% all circles, 4px legend swatch. Zero square corners — every region is rounded.

Components

• card / framed-header — the white-fill bordered containers (one shadow). badge-pill — butter section tag.
• circle-marker family (bullet 20 / icon 44 / dot 48 / step 90) + bullet-dot — outlined pastel discs, Fredoka numerals.
• ornament — the hand-drawn SVG sticker layer (3–7 per frame). quote-mark — soft-pink Fredoka anchor. text-headline-shadow — the on-color headline treatment.

Frame Treatments

Recipe: ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density. One content container per frame + a 3–7 ornament wreath; empty corners read as broken.

1 · Cover (identity · move: ornament wreath · saturated · centered)

Ground a saturated pastel (e.g. {colors.turquoise}). Composes badge-pill, display, body sub, 3–7 ornaments, counter. Focal a 1–2 line Fredoka display in white with the 3px charcoal text-shadow, centered, under a butter badge-pill. Chrome counter pill. Accent the ornament wreath (daisies + stars at corners, cropping past edges). Silence content centered; ornaments fill the edges. Fixed text-shadow on color, 3px outlines, charcoal shadows. Free surface color, ornament mix/positions, copy. Density full-but-not-crowded.

2 · Info Cards (catalog · move: 3-up white cards · cream · the dense frame)

Ground {colors.cream}, pad-slide. Composes headline (flat charcoal), 3× card (circle-icon + Fredoka title + Quicksand body), a couple ornaments. Focal three white 3px-bordered cards with 6px shadows. Chrome flat headline. Accent the pastel circle-icons (rotate turquoise/coral/lavender). Silence tight — the density exception (fewer ornaments here). Fixed white cards, 3px + 6px, 20px radius. Free card content, icon hues. Density dense-exception.

3 · Process Steps (sequence · move: rotating circle markers · peach · centered)

Ground {colors.peach} (or another pastel). Composes headline (white + text-shadow), 3–4 step circles + → arrows, ornaments. Focal a row of 90px outlined step circles, fills rotating coral → mint → sky → lavender, Fredoka white numerals, linked by Fredoka arrows. Chrome white headline with text-shadow. Accent the rotating circle fills. Silence moderate. Fixed 3px circles + small shadow, rotating fills, arrow glyphs. Free step count, labels. Density standard.

4 · Quote (quote · move: quote-mark anchor · soft-pink · centered)

Ground {colors.soft-pink}. Composes a white quote card (28px radius, 6px shadow), quote-mark, Fredoka quote, Quicksand attribution, ornaments. Focal a Fredoka quote in charcoal inside the white card, under an oversized soft-pink quote-mark. Chrome Quicksand 700 attribution. Accent the quote-mark + a star or two. Silence card centered, ornaments at corners. Fixed quote-mark anchor, white card. Free quote, attribution. Density moderate.

5 · Framed Section (feature · move: cap+body card · cream)

Ground {colors.cream}. Composes framed-header (pastel cap + white body), bullet-dot list, ornaments. Focal a framed-header — a pastel cap strip (Fredoka title, optional text-shadow) above a white body with a butter-dot bullet list. Accent the cap color + bullet dots. Silence moderate. Fixed one continuous 3px border + one shadow, butter dot bullets. Free cap color, list. Density standard.

6 · Closing (closer · move: ornament wreath · saturated · centered)

Ground a saturated pastel (e.g. {colors.lavender}). Composes badge-pill, display (white + text-shadow), 3–7 ornaments. Focal a Fredoka display sign-off in white with the charcoal text-shadow, centered. Accent the ornament wreath. Silence content centered. Fixed text-shadow on color, ornaments fill corners. Free sign-off, surface, ornaments. Density full.

Composition Rules

Do

• Pair Fredoka One headlines + Quicksand body strictly by role.
• Outline every shape 3px charcoal + a hard offset shadow (6/4px, no blur); white card fills on any surface.
• Give Fredoka headlines on saturated surfaces a 3px charcoal text-shadow + white text; flat charcoal on cream.
• Use outlined butter-disc bullets (never glyphs); cluster 3–7 hand-drawn ornaments per frame (corners, cropping past edges).
• Keep one content container per frame; rotate marker colors (coral → mint → sky → lavender → butter); reserve coral for small markers.
• Center most frames; lean cream for content-dense frames, saturated for cover/closer/quote.

Don't

• No square corners; no blurred or rgba shadows (save the soft text-shadow).
• No colored borders (charcoal only); no coral surface; no ninth color.
• No third font; no Quicksand headline or Fredoka body; no italic/underline Fredoka; no uppercase Quicksand body.
• No glyph bullets; no empty corners (ornaments fill them); no two competing content panels.
• Don't blow a headline edge-to-edge — fit to measure.

Aspect-Ratio Behavior

Treatment	16:9	9:16	1:1
Cover	centered, corner ornaments	centered, taller, more ornaments	centered
Info Cards	3 across	stacked	2+1
Process Steps	horizontal + arrows	vertical, arrows rotate down	2×2
Quote	centered card	centered, taller	centered
Framed Section	cap + body	cap + body taller	cap + body
Closing	centered, wreath	centered, wreath	centered

pad-slide holds on the short edge; re-step display above the 1.4cqw floor. On tighter ratios keep the ornament count toward the upper end (5–7) so corners never read empty.

Approved Real Entities

No real customers, logos, or vendors are defined in the source — render any such mark as a placeholder. Ornaments and pastels are content-agnostic; counters/badges carry per-deck text.

Numerals & Claims (hard rule)

Never invent figures, dates, or counts at frame scale. Render slots as — figure —, {metric}, N. Step numbers and any chart values carry placeholders until the script supplies them; the slide counter is decorative chrome.

Pre-Render Self-Audit

• Squint — one Fredoka headline or content card dominates per frame.
• Silence — one container per frame surrounded by an ornament wreath; only the info-card grid runs dense.
• Color — cream or one pastel surface; coral markers only; charcoal borders/shadows; no ninth hue.
• Type — Fredoka headlines (text-shadow + white on saturated, flat charcoal on cream), Quicksand body; ≥1.4cqw floor.
• Depth — 3px outline + hard offset (no blur, no rgba save soft text-shadow); rounded corners only.
• Ornaments — 3–7 per frame, cropping past edges; no empty corners. Bullets — outlined discs, never glyphs.
• Fabrication — every numeral traces to the script, else placeholder.

Known Gaps

• Motion intentionally out of scope. frame.md specifies composition only; the source uses scroll-snap nav, no transition spec.
• Fonts: the source names Fredoka One; Google now serves the Fredoka variable family — request Fredoka:wght@500;600;700 and set display weight 600 (visually equal to Fredoka One), with Fredoka One kept first in the stack for environments that still serve it. Quicksand loads normally. CJK: ZCOOL XiaoWei (display) / Yozai (body).
• 9:16 / 1:1 are guidance; keep ornament count high so corners stay filled per ratio.
• Ornaments (daisy/star/sun/cloud/rainbow), markers, and framed headers are CSS/SVG-only; recoloring SVG ornaments requires editing their stroke values.
• Contrast: keep {colors.text-muted} off pastel surfaces (cream/white cards only); small text on saturated grounds should be charcoal or white.