Skill 22 · Hyperframes Creative
Subchapter 22.60
frame-presets/daisy-days/FRAME.mdMarkdown17 KBView on GitHub
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:
{colors.coral} is a marker accent, never a surface.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.
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.
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.
display; 4–6 → headline; 7+ → title.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.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.
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.
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.
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.
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.
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.
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.
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.
rgba shadows (save the soft text-shadow).| 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.
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.
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.
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).{colors.text-muted} off pastel surfaces (cream/white cards only); small text on saturated grounds should be charcoal or white.