The Organic design system: Figtree, sage and clay, and an arched photo
Organic is Anticode's calmest design system. It sets everything in Figtree, a friendly sans, uses a palette of sage green and clay on warm cream, softens corners according to what each element does, frames the hero photo in an arch, and underlines its text links with a gentle wave in clay. It's meant for businesses that sell care, nature or slowness.
Natural without the clichés
Sites that want to feel natural tend to reach for the same props: a leaf icon, a script font, beige everything, a stock photo of hands holding soil. The result feels like a template because it is one. A more convincing natural look comes from proportions and materials: colours you'd find in a garden or a pottery, shapes with a soft edge, type that's open and unhurried, and enough space that nothing feels rushed. The organic web design guide covers the style more widely; the organic design system with Figtree is Anticode's take on it.
The settings
| Part | Setting |
|---|---|
| Typeface | Figtree, weights 300 to 800; headlines at 500 rather than bold |
| Light palette (the default) | Warm cream background, dark green-black text, deep sage action colour, clay secondary |
| Dark palette | Deep forest background, cream text, pale sage action colour, warmer clay secondary |
| Body text | 18px |
| Buttons and tags | Fully round; buttons have a faint one-pixel shadow underneath |
| Cards and the facts panel | Filled with the palette's surface tone and rounded at 22px, with no outline |
| Hero photo | An arch: fully round across the top, gently rounded at the bottom |
| Text links | A wavy underline in clay, set well below the letters |
The engine describes the result as soft type, sage and clay, an arched hero photo and a hand-drawn underline. The underline isn't drawn by hand, of course: it's the browser's own wavy text decoration, coloured and spaced so it reads like a pencil line.
Why filled cards instead of outlines
Several of Anticode's systems separate content with lines: hairlines in Editorial, thin outlines in Technical, heavy rules in Brutalist. Organic uses tone instead. Cards and the facts panel sit on a slightly darker shade of the background, so groups are visible without outlines around them. Combined with headings at a medium weight and generous body text, the effect is quiet but still easy to scan, which matters for the kind of visitor who arrives tired or anxious, such as someone booking a therapist or a massage.
Sites it suits
- Wellness and care: massage, physiotherapy with a gentle tone, counselling, doulas, saunas and bathhouses.
- Plants and food: florists, nurseries, farm shops, vegetable box schemes, natural wine.
- Makers working in clay, wood or textiles.
- Charities and community gardens that want to feel welcoming rather than corporate.
- Less suited to tech products and anything that needs urgency. If the brand should feel energetic, try Playful; if it should feel precise, Technical.
Choosing and tuning it
- Name it in your request ("calm, organic, sage and clay") so a model build starts there, or switch an existing site by choosing Organic under Direction in the visual editor, or by writing "make it organic" as a change. Switching is done in your browser and doesn't use your build allowance.
- Leave the theme on Auto or Light for daytime brands. Dark suits evening businesses such as a wine bar or a sauna.
- If sage doesn't match the brand, try teal or green among the action colours. Clay stays as the secondary, so check the two together.
- Keep the hero headline at Calm. Organic works by not raising its voice.
Limits
- No textures or hand-drawn art. There are no paper grains, botanical illustrations or brush shapes; the softness comes from colour, radius and type.
- No script or serif accent font. One family per site, and Anticode's design gate refuses serif type, fallbacks included.
- The arch needs a photo. Without photography for the subject, the hero has no image and the signature shape doesn't appear.
- Apps get a description. A model-written app is told Organic means Figtree, sage and clay, soft rounded shapes and calm, and the request's own words can override it.
Questions people ask
Is Figtree too casual for a professional practice?
It's friendly but plain, and at weight 500 in headings it reads as calm rather than playful. For a practice that needs to look clinical, Technical in its light theme is the firmer choice.
Can I turn off the wavy underline?
Not with a switch. It's part of the system. Choosing another direction changes the link style.
Does Organic follow a visitor's dark mode?
No. Auto uses Organic's own light palette. Choose Dark under Theme to use the dark palette for everyone.