The Playful design system: Fredoka, rounded shapes and a springy hero

Playful without being childish

A playful register says the business is friendly and easy to deal with. Done badly it says the opposite: clip-art, five bright colours and bouncing everything, which reads as cheap or meant for toddlers. The difference is restraint in the system around the fun. Playful keeps to one rounded typeface, two colours that work together, one signature moment of motion in the hero, and a calm layout under it. The playful web design guide looks at the wider style; this is how the playful design system with Fredoka applies it.

What it sets

• Fredoka for everything. A rounded sans with soft terminals, loaded in weights 300 to 700. Headlines use 600 with slight negative tracking.
• Cobalt and sunflower. In the light palette, cobalt is the action colour and sunflower the secondary; the page is warm cream and the text a deep indigo-black. The dark palette inverts the roles: sunflower becomes the action colour on deep navy, with a softer blue as the secondary.
• Body at 17.5px, with the same generous line spacing as the other systems.
• Pill buttons and 28px cards. Buttons and tags are fully round; cards, photos and plans have large but not circular corners.
• Two-pixel outlines. Cards are drawn with a solid line in the text colour, and the key facts sit in a rounded panel ringed the same way.
• Light theme first. Auto gives the cream palette.

The signature: shapes on a spring

The hero photo is cropped into an irregular rounded blob rather than a rectangle, and two coloured shapes sit behind the headline, one large in sunflower and one smaller in the action colour. On load they grow and turn into place on a curve that overshoots slightly and settles, so they land with a small bounce. Product and band photos keep a simpler 28px rounding, so the blob shape stays special to the hero.

That's the only bouncy motion in the system. Everything else uses the same quiet timing as Anticode's other systems: short transitions on a tuned curve, and, in browsers that support scroll-linked animation, content that rises gently into view as you scroll. Visitors who have asked their device for reduced motion see none of it; the page simply appears.

Rounded, but still by role

Rounding everything to the same value is one of the habits that makes generated sites look alike; giving each role its own shape is what the radius by role check is about.

Where it fits

• Fitness, yoga, pilates and climbing studios, where the tone should be encouraging.
• Bakeries, ice-cream shops and cafés for families.
• Children's activities: science clubs, parties, swimming lessons, tutoring.
• Community groups and events that want to feel open to newcomers.
• Less suited to law, finance, healthcare and anything where visitors need reassurance that you're serious. Technical or Editorial carry more authority.

Switching to Playful

In the builder, turn on Edit and pick Playful under Direction, or ask for it in a sentence ("make it playful"); both are applied in your browser and don't use your build allowance. Your words, sections and features stay. If cobalt isn't your colour, choose another action colour: the sunflower secondary stays, so check the pair together.

Limits

• No illustrations or mascots. The fun comes from type, colour and shape; Anticode doesn't draw characters, and emoji used as icons are flagged by the Critic.
• One animation moment. You can't add more bouncing elements on design-engine pages, which run no scripts.
• The secondary colour comes with the system. Changing the action colour doesn't change sunflower; only editing the colour tokens in the code editor does.
• Apps get a description. A model-written app is told Playful means Fredoka, cobalt and sunflower, rounded and bouncy, and your own request can override it.

Questions people ask

Is Fredoka readable for body text?

Yes at the sizes Playful uses. Body text is 17.5px with generous line spacing, which keeps the rounded letterforms comfortable in paragraphs.

Will the bouncing shapes bother people sensitive to motion?

Not if they've set reduced motion on their device. Every animation on the page is switched off for them.

Can I use Playful for a children's charity?

It suits the audience, but check the tone with the people funding you. Organic gives a softer, calmer alternative.