TechnicalCollectible prompt
Playful rounded design system for a consumer brand
Act as a senior brand designer. Restyle the existing site for {{business_name}}, a {{business_type}}, as a complete playful, rounded design system. Keep every page, route, component and line of content; change only the visual layer, through shared tokens in the current styling system. Read the existing styles first and tell me what you'll replace. Our brand colors are {{brand_colors}}: map them onto the roles below where they fit, and if they fight the style, keep one as the accent and use the pack's neutrals.
Type: Fredoka 600 and 700 for headings, Nunito 400 and 700 for text at 18px, line height 1.6. Scale 1.25: 18, 22, 28, 35, 44, 55, and 64px for the hero. Sentence-case headings, never all caps.
Palette: background #FFF9F0, surface #FFFFFF, text navy #1F2140, muted #555A7A, border navy, fills pink #FF5C8A, sky #4CC3FF, sunshine #FFD23F and grass #3DDC97, always with navy text. Primary buttons pink with navy text, hover #F03C70.
Shape: radius 20px on cards, 999px on buttons and tags; 2px navy outlines; pressable buttons with a solid 4px navy shadow beneath and no blur, which drops to 0 when pressed.
Grid: 4, 8 and 12 columns at 360, 768 and 1280px with 16, 24 and 32px gutters; 48px touch targets; section padding 56px mobile, 112px desktop.
Imagery: flat rounded illustrations with thick navy outlines in the four fills, one consistent character or mascot; photos in rounded frames with a colored border.
Motion: springy but short. Buttons scale to 0.96 on press in 120ms; illustrations may wiggle 3 degrees on hover; nothing moves on its own.
Signature details: wavy section dividers; numbered steps in big flat circles; the mascot in empty and error states.
Do: keep information for parents and buyers calm and clear, even when the rest is playful; one fill color per component.
Avoid: rainbow everything, emoji as bullets, novelty fonts for text, tiny tap targets.
Check: text contrast of at least 4.5:1, visible focus, 44px touch targets, no horizontal scroll at 360px, reduced motion respected. Finish with a short change list and the reason for each decision.
Technicalnvoka.com/library/nvoka-playful-rounded-design-system-for-a-consumer-brandScan to open
Technical
Playful rounded design system for a consumer brand
Rounded type, bright fills and pressable buttons for kids' and consumer brands, still clear for adults.
Curated by Nvoka
Lovablev0BoltClaude Code
Make it yours
Fill in the blanks and change any word. Only your copy changes, never the card.
Fill in the blanks
0 of 3 filledYour prompt
Act as a senior brand designer. Restyle the existing site for {{business_name}}, a {{business_type}}, as a complete playful, rounded design system. Keep every page, route, component and line of content; change only the visual layer, through shared tokens in the current styling system. Read the existing styles first and tell me what you'll replace. Our brand colors are {{brand_colors}}: map them onto the roles below where they fit, and if they fight the style, keep one as the accent and use the pack's neutrals.
Type: Fredoka 600 and 700 for headings, Nunito 400 and 700 for text at 18px, line height 1.6. Scale 1.25: 18, 22, 28, 35, 44, 55, and 64px for the hero. Sentence-case headings, never all caps.
Palette: background #FFF9F0, surface #FFFFFF, text navy #1F2140, muted #555A7A, border navy, fills pink #FF5C8A, sky #4CC3FF, sunshine #FFD23F and grass #3DDC97, always with navy text. Primary buttons pink with navy text, hover #F03C70.
Shape: radius 20px on cards, 999px on buttons and tags; 2px navy outlines; pressable buttons with a solid 4px navy shadow beneath and no blur, which drops to 0 when pressed.
Grid: 4, 8 and 12 columns at 360, 768 and 1280px with 16, 24 and 32px gutters; 48px touch targets; section padding 56px mobile, 112px desktop.
Imagery: flat rounded illustrations with thick navy outlines in the four fills, one consistent character or mascot; photos in rounded frames with a colored border.
Motion: springy but short. Buttons scale to 0.96 on press in 120ms; illustrations may wiggle 3 degrees on hover; nothing moves on its own.
Signature details: wavy section dividers; numbered steps in big flat circles; the mascot in empty and error states.
Do: keep information for parents and buyers calm and clear, even when the rest is playful; one fill color per component.
Avoid: rainbow everything, emoji as bullets, novelty fonts for text, tiny tap targets.
Check: text contrast of at least 4.5:1, visible focus, 44px touch targets, no horizontal scroll at 360px, reduced motion respected. Finish with a short change list and the reason for each decision.