Forest & Fern Playground

✳   Organic UI / Theme system

Forest & Fern.
Room to grow.

Soft edges. Deep greens. Familiar controls.
A living look and feel for the web, rooted in native HTML.

Explore the controls ↗Start building
01 / Grounded

Native by nature

Real HTML. Familiar keyboard behavior. Your framework, your choice.

02 / Organic

Imperfect, on purpose

Asymmetric corners and optional quiet waves. All the clarity, a little more character.

03 / Considered

A softer kind of motion

Small gestures that respond to you. Still and composed when you prefer less motion.

01Theme Lab

Two palettes. One forest.

Daylight

A breath of fresh air

Warm paper, mossy accents, deep green ink.

After hours

Under the canopy

Forest shade, soft foliage, room to focus.

Edit the palette

Try your own colors in the preview. Custom colors are experimental; check contrast before shipping.

Your little corner of the forest

Preview your color choices on a real surface.

Muted labels should remain readable.

02Shape Lab

A little less square.

The same seed and settings produce the same shape. Your settings are saved on this browser.

Waves per edge

One wave is a crest and a trough. Set an edge to 0 to make it straight.

A living surface

Quiet waves around the edges.
Clear, steady content within.

Seeded corners and static SVG waves. Variation 0 uses the original geometry; wave strength 0 restores pure CSS corners. Export CSS and add ff-seeded-theme to a theme boundary or card. Explicit shape/wave presets on descendants override inherited geometry.

03Motion Lab

Small gestures. A lighter touch.

Hover, press, or tab to the samples. Your system’s reduced-motion preference always takes priority.

Hover or focus this surface ↗

04Native Controls

Familiar roots. Fresh foliage.

Radio buttons

Workspace layout

Checkboxes & switches

Range

46%

Drag, tap, or use the arrow keys. Native interaction, a softer silhouette.

Text, select & buttons

Fields & validation

Enter an email address, like hello@example.com.

A little more room

✓ Saved · success

△ Review your changes · warning

Ready when you are. Try the controls or explore a lab.

05Out in the wild

An everyday workspace, naturally.

Revenue

$128.4k

↗ 12.8% this month
Active customers

4,892

↗ 8.2% this month
Active projects

24

6 growing, 18 delivered

Revenue, taking root

A steady season of growth · mock data

Revenue from May to October Revenue increases from 72 thousand dollars in May to 128.4 thousand dollars in October. June: 88 thousand, July: 82 thousand, August: 106 thousand, September: 114 thousand. 150k 100k 50k 0 May Jun Jul Aug Sep Oct
Built for real work

Make yourself at home.

A sidebar, customer search, clear metrics, and room for the details. See the system working together.

Open dashboard ↗Try a form

06Plant the first seed

One stylesheet. Your HTML.

<link rel="stylesheet" href="forest-and-fern.css">
<section class="ff-theme" data-ff-theme="dark">
  <article class="ff-card" data-ff-shape="organic">
    <h2>Hello, forest.</h2>
    <button class="ff-button">Let’s grow</button>
  </article>
</section>
Download CSS ↓v0.1.0 · framework-agnostic.Read the documentation ↗