playful-color
Skill1 starsChanged 3 months agoMITView on GitHub
Genre pack: bold, joyful consumer design — giant display type, thick ink outlines, flat vibrant color fields, sticker-like shapes, chunky buttons. For D2C brands, consumer apps, events, education, and youth-facing products. Fun without looking childish: the structure stays strict, only the attitude is loud. Stack on the design-taste core skill.
In this repository23 other files it gives its agents.
- brutalist-industrialSkill
- cinematic-motionSkill
- corporate-trustSkill
- dark-techSkill
- design-tasteSkill
- editorial-minimalSkill
- japanese-minimalSkill
- neo-brutalismSkill
- quiet-luxurySkill
- retro-printSkill
- taste-accessibilitySkill
- taste-brand-identitySkill
- taste-code-craftSkill
- taste-code-reviewSkill
- taste-colorSkill
- taste-design-reviewSkill
- taste-design-systemSkill
- taste-gsapSkill
- taste-landing-pageSkill
- taste-motionSkill
- taste-typographySkill
- taste-ux-copySkill
- taste-web-performanceSkill
The file
We split this skill into the rules it gives an agent
2 rules. About 0 are common, 1 is distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈1
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 27
No gradients, no drop-shadow blur.
- Distinctive: line 46
No emoji. Draw simple marks: dot grids, asterisks, arrows (→ with 3px strokes), and hand-drawn-feel SVG squiggles — underlines, scribble …
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
playful-color
One identity: a poster you can't walk past — loud, but never sloppy.
1. PALETTE (Fixed)
- Ground: cream
#FDF6ECor bright paper#FFF9EF. Never plain white. - Ink:
#101014coat-black for type and outlines. - Color fields — two saturated inks max, chosen deliberately: cobalt
#2E4BFF, tomato#FF4D2E, banana#FFD100, mint#2BD99B, fuchsia#FF3ED2. One dominant (spread across large fields) + one supporting (accents, marks). - Outlines: 2–3px solid ink everywhere shapes meet paper — sticker cut-line aesthetic.
- No gradients, no drop-shadow blur; hard offset shadows ONLY (
6px 6px 0 ink), and only on 2–3 hero elements — one per viewport max.
2. TYPOGRAPHY (Fixed)
- Display: ultra-heavy — Archivo Black, Bricolage Grotesque 800, or system bold-900. Sizes
clamp(3rem, 8vw, 7rem), leading 0.95, tracking −0.02em. Uppercase or sentence-case with a rotated word for emphasis. - Body: same family at 500/400, 16–18px, 1.55. Or mono for the technical bits.
- Labels: mono or bold caps,
letter-spacing: 0.06em, 11–12px, always readable on its color field. - One emphasis trick allowed: a word underlined with a 6px accent bar, or set on a rotated solid field. Pick one, use it ≤ 3 times per page.
3. COMPOSITION (Fixed)
- Off-grid energy, on-grid bones: everything aligns to a 12-col grid EXCEPT deliberate 2–4° rotations on 2–3 hero elements (badge shapes, single words, button pair). Rotation is the spice; overuse = broken.
- Color-blocked sections: alternate paper sections with full-bleed ink or accent fields (ink sections get paper text). This is the structure that makes loud colors feel designed.
- Sticker components: badges and chips are solid fields with 2.5px ink outlines, square or pill — never gradient, never glass.
- Hero: huge type + sticker badge + one chunky CTA + color-blocked product panel. Two colors max in the hero viewport.
- Pricing: 3 chunky cards, each a solid field (paper / accent / paper), ink outlines, hard offset shadow on the featured one only.
4. CONTENT TREATMENT
- No emoji. Draw simple marks: dot grids, asterisks, arrows (→ with 3px strokes), and hand-drawn-feel SVG squiggles — underlines, scribble circles.
- Illustration allowed and encouraged: flat geometric shapes (circles, half-circles, spokes) in the two ink colors. No gradients, no 3D, no photorealism.
- Copy: short, direct, exclamation-mark budget ONE per page. Hype comes from color, not syntax.
- CTA: chunky — min 56px height, 2.5px ink outline, hard offset shadow, pressed state = shadow removed + 2px translate.
5. MOTION (Bouncy But Brief)
- Springs: overshoot allowed —
cubic-bezier(0.34, 1.56, 0.64, 1)on entrances, 350–500ms, one wave per element (no repetition). - Hover: buttons translate −3px with shadow growing +2px. Logo wiggle ≤ 1 time. No infinite loops, no marquees.
6. CHECKLIST (Fail the page if…)
- More than two saturated colors + cream + ink on the palette.
- Any gradient or soft blur shadow.
- More than ~3 rotated elements per page.
- Any emoji.
- Body text below 16px or lacking contrast (4.5:1 minimum).
- Display type under 3rem.
- Any element of the design that looks scared to be there.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.