O · 15 / 26

O — Organic

Warm, tactile, shaped by hand.

The style

Taken from nature, not from the grid.

Entries closed in January 1941; the winners went on show that September.

In 1940 the Museum of Modern Art in New York opened a competition, “Organic Design in Home Furnishings”. Its organiser, Eliot Noyes, called a design organic when its parts sit in harmony with the whole, in structure, material and purpose. Charles Eames and Eero Saarinen won two first prizes, one with a chair whose seat was a shell of plywood moulded in three dimensions, which no factory could yet make in numbers.

The forms were older than the name. Alvar Aalto had bent plywood into the Paimio chair by 1932, and gave his 1936 Savoy vase an outline often likened to a lake shore. Isamu Noguchi set a free-form slab of glass on two curved wooden legs that lock together, and from 1951 shaped light from paper over bamboo.

On a screen it means curves with uneven radii: a card is a pebble, a picture an arch, and no corner a right angle. Flat fills carry a faint grain, as paper and clay do. Colour comes from the earth, cream, blush, sand and terracotta, with the dark clay kept for words. And motion eases in and out like breath, slow enough to feel, and still when someone asks for less.

In use

Care can be simple.

ONYU’s app, on a phone. Begin, pause and unwind with a few small steps, say how your skin feels today, and choose a cream and how often it comes. Nothing here is for sale; it only shows how a gentler day might go.

  • Today’s ritualBegin, pause and unwind, a few small steps each, and a pebble that fills as the day does. Say how your skin feels and the steps change to suit it; pick an hour and it reminds you to pause.
  • The creamOne cream from the still life, in two sizes and three scents, with a refill every four to twelve weeks and the day the next one would come.
  • The bagWhat you chose, with steppers and a total. Where checkout would be, it says that nothing here is for sale.
onyuThursday 12 November

Good morning.

0 of 11 steps done today.

How does your skin feel today?

Until you say, these are the usual steps.

0 of 4 done

A fresh start.

Open the curtains. Welcome the light. Give the morning a moment before it begins.

Remind me to pause at

Off. Nothing will call you away.

See the ONYU site
The kit

Every part, every state.

The parts the app is built from: pebble buttons in terracotta, fields like soft wells, stones for switches and checks, a stone thumb on the slider, and no right angle anywhere. Rows of states hold still for comparison; everything else works.

Button

Nothing in your bag yet.

Terracotta for the one thing to do, a clay edge for the rest, and a cobble for an icon aloneHeld down, a button sinks 3% and darkens in 240ms; focus is a 3px clay ring that keeps the pebble’s shape

Text field

Where the refills go: five numbers.

A field is a soft well, sunk a little at the top; the edge thickens when you’re in it and turns ember when it’s wrong, with the reason beside it

Select

Dry wood, like a pencil just cut.

Its list is the phone’s own, so it reads and scrolls the way each one expects

Switch, checkbox, radio

Remind me to pause
Your skin today

Balanced today, so the usual steps are all it needs.

Each is a stone: a seed for the radio, a cobble for the box, and a bead with a cobble in it for the switch

Slider

5 minutes

From 1:00 pm, and back at 1:05 pm.

A clay cobble set in cream on a bead of sand. ← and → move it a minute; Home and End go to either end, and the page stays put

Progress

A fresh start.

3 steps to go.

Begin, this morning

1 of 4 steps done.

One count, as a bar and as a ring. Both end round, and the ring runs clockwise from the top

Segments and tabs

Size

Warm a little cream in your palms and press it in, morning and night. On a dry day, add a second layer where your skin feels tight.

A segment picks a value, and a terracotta stone slides under it; tabs change the view, the chosen one in blush. Arrows move along both

List rows

    • BeginA fresh start.4 steps
    • PauseCome back to you.3 steps
    • UnwindLeave room for rest.4 steps
Icons at 16 by small print, 20 in rows and 24 by a title: a 1.5px line with round ends, drawn a little loose, the way a pen would

Card and loading

The cream in its plain white tube, on warm stone in soft daylight, beside an amber bottle
Face and hands

A soft, plain cream for the face and hands, in a tube you can finish. Then another comes.

₩28,000 · 30 ml

The picture, then the name, then a line about it: every card in that order, on a slabThe name is the one control, and the whole card is its target; it opens on how to use itSpacing steps, each the two before it added: 5, 8, 13, 21, 34, 55, 89Loading, the card is grained stones in its own shape. They hold still

Toast

A bead of clay that stays five seconds, waits while you point at it or tab to it, and goes with Esc

Modal

Rest tomorrow?

Your three rituals rest for a day, with no nudges. They come back on Saturday 14 November.

A slab of cream on a veil of clay. Esc, the × or a tap on the veil keeps things as they were

Steps

  1. Done: Skin
  2. Cream
  3. Refill
  4. Review

Step 2 of 4, cream. Choose a size and a scent.

Stepping stones, each a different pebble along a drawn path; the one you’re on breathes while motion is allowed

Badges and avatars

  • Seo-yun ParkWrites the mornings
  • Ji-ho HanWrites the pauses
  • Mina KwonWrites the nights

A badge is a bead or a cobble, never a box; an avatar is a pebble of the guide’s own, with initials in the serif
Signature

Make a pebble.

Every shape here is eight radii. Drag its eight handles, use the keys, or ask for a new pebble; set how soft it is and how much grain it carries, in clay, sand, moss or stone. It breathes while motion is allowed. Copy it as CSS, or take it away as SVG.

Drag a handle along its edge. Or pick one with Tab: the arrows move it, Shift moves it ten, and Home and End go to 0 and 100. A hollow handle is under the softness, so the pebble rounds it up.

20%

Every radius is lifted to at least this. At 50 the pebble is nearly an ellipse.

20%

The tokens are faint 10, clay 20 and coarse 34. Under type, keep it faint.

Material
  • Slip#eed7c8, 1.31:1
  • Clay, the fill#b97a62, 3.31:1
  • Terracotta#764c40, 6.92:1
  • Kiln, the grain#4e2f29, 11.31:1
/* A clay pebble, softness 20 and grain 20. Its radii are
   in percent, so it keeps its shape at any size in a 5 by 4 box. */
.pebble {
  aspect-ratio: 5 / 4;
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 -1.2'/%3E%3CfeComposite in='SourceGraphic' operator='in'/%3E%3C/filter%3E%3Crect width='180' height='180' fill='%234e2f29' opacity='0.2' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 180px 180px,
    #b97a62;
}

As SVG

The same eight radii as one path, its corners drawn as elliptical arcs, filled in clay with the grain as an feTurbulence filter in kiln. 480 by 384.

Tokens

The system, in numbers.

Ten colours with their contrast, a soft serif and a humanist sans, six pebbles of eight radii each, a scale where each step is the two before it added together, three strengths of grain and three speeds. Copy them as custom properties, with the pebble, the grain and the button.

Colour, with contrast against cream
  • --cream #fff8f0Cream: the page
  • --oat #f4e6d9Oat: sheets, cards, fields; clay on it 7.63:1
  • --blush #eed7c8Blush: pebbles, chosen things; clay on it 6.75:1
  • --sand #e2c2b1Sand: wells and tracks; only clay on it, 5.59:1
  • --rule #d9b8a5Rule: drawn lines only; 1.75:1, so never type
  • --clay #633d35Clay ink: headings and text, 8.86:1
  • --ink-2 #7d5649Second ink: notes, never on sand, 6.04:1
  • --terracotta #764c40Terracotta: buttons and labels, 6.92:1
  • --clay-deep #4e2f29Deep clay: a button held down, cream on it 11.31:1
  • --ember #9b3b2aEmber: errors, 6.53:1
Type
  • A softer day.Young Serif 400 · headings
  • onyuYoung Serif 400 · the wordmark, always lowercase
  • Take a breath. Slow the pace.Figtree 400 · text, 17 / 28
  • Add to bagFigtree 600 · buttons and labels
Pebbles: four across, then four down
  • River63 37 54 46 / 55 48 52 45 %The cover O, and big fills
  • Seed50 50 46 54 / 64 64 36 36 %Avatars, counters, the day’s progress
  • Cobble47 53 38 62 / 52 39 61 48 %Badges, dots and small stones
  • Arch50 50 14 12 / 36 36 9 8 %Pictures, the phone, the cover
  • Slab30 38 32 42 / 36 30 40 34 pxCards, sheets and panels
  • Bead26 30 28 24 / 24 28 26 30 pxButtons, fields and chips
Space: each step the two before it
  • 5
  • 8
  • 13
  • 21
  • 34
  • 55
  • 89
Grain
  • Faint 0.1Sheets with large type on them
  • Clay 0.2Pebbles and fills without words
  • Coarse 0.34Art only, never under type
Motion
  • Breath6s, in and outA resting pebble, only while motion is allowed
  • Settle900msThe cover, a panel, a pebble finding its shape
  • Press240msA button giving under the finger
:root {
  /* Cream, clay and blush. The rule draws lines and never carries type. */
  --cream: #fff8f0;
  --oat: #f4e6d9;
  --blush: #eed7c8;
  --sand: #e2c2b1;
  --rule: #d9b8a5;
  --clay: #633d35;
  --ink-2: #7d5649;
  --terracotta: #764c40;
  --clay-deep: #4e2f29;
  --ember: #9b3b2a;

  /* Type */
  --font-serif: 'Young Serif', Georgia, serif;
  --font-sans: 'Figtree', system-ui, sans-serif;

  /* Space: each step the two before it added together */
  --space-1: 5px;
  --space-2: 8px;
  --space-3: 13px;
  --space-4: 21px;
  --space-5: 34px;
  --space-6: 55px;
  --space-7: 89px;

  /* Pebbles: eight radii each, and never a right angle */
  --pebble-river: 63% 37% 54% 46% / 55% 48% 52% 45%;
  --pebble-seed: 50% 50% 46% 54% / 64% 64% 36% 36%;
  --pebble-cobble: 47% 53% 38% 62% / 52% 39% 61% 48%;
  --pebble-arch: 50% 50% 14% 12% / 36% 36% 9% 8%;
  --pebble-slab: 30px 38px 32px 42px / 36px 30px 40px 34px;
  --pebble-bead: 26px 30px 28px 24px / 24px 28px 26px 30px;

  /* Grain, and the three speeds */
  --grain: 0.2;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 -1.2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  --breath: 6s ease-in-out;
  --settle: 900ms cubic-bezier(0.22, 1, 0.36, 1);
  --press-speed: 240ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* A pebble keeps its eight radii: .pebble is the river, or name one */
.pebble {
  border-radius: var(--pebble-river);
}
.pebble-seed {
  border-radius: var(--pebble-seed);
}
.pebble-cobble {
  border-radius: var(--pebble-cobble);
}
.pebble-arch {
  border-radius: var(--pebble-arch);
}
.pebble-slab {
  border-radius: var(--pebble-slab);
}
.pebble-bead {
  border-radius: var(--pebble-bead);
}

/* Grain: noise in the clay, over the fill and under what sits on it */
.grain {
  position: relative;
  isolation: isolate;
}
.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--grain-ink, var(--clay));
  opacity: var(--grain);
  -webkit-mask-image: var(--noise);
  mask-image: var(--noise);
  pointer-events: none;
}

/* The button: terracotta in a bead, pressed in while it is held */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--pebble-bead);
  background-color: var(--terracotta);
  color: var(--cream);
  font: 600 16px / 1 var(--font-sans);
}
.button:hover {
  background-color: var(--clay);
}
.button:active {
  background-color: var(--clay-deep);
  transform: scale(0.97);
}
.button:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 5px;
}
@media (prefers-reduced-motion: no-preference) {
  .button {
    transition:
      background-color var(--press-speed),
      transform var(--press-speed);
  }
}

Do

  • Give each corner its own radius: eight values, not one, so no two edges curve alike.
  • Keep the hand in the line. Rules that waver a little, icons with round ends.
  • Lay grain on fills, and faintly. Keep it out from under small type.
  • Take colour from the earth, and keep the dark clay for words, so text holds its contrast.
  • Move like breath: slow in, slow out, and still when someone asks for less motion.

Don’t

  • Don’t let the pebble spill

    Push a shape too far and it stops reading as a stone and starts reading as a blot of ink. Let the radii differ, but keep the outline whole: every corner rounds outward, with nothing pinched in, spiked or thrown off in drops.

  • Don’t set words on static

    Grain at full strength turns a card to noise, and the text on it breaks up. Keep it faint, and on fills that carry no words.

  • Don’t set earth on earth

    Sand on blush is 1.20:1, and even terracotta on sand, 4.37:1, falls short of the 4.5 that text needs. Keep the dark clay for words, on cream or oat.

In the wild

Where the style shows up outside this page.

  1. Savoy vase

    Alvar Aalto · 1936Glass blown into a mould with a wavering outline, no two curves alike; it won a 1936 competition and went to the 1937 Paris World’s Fair.

  2. Akari light sculptures

    Isamu Noguchi · 1951Mulberry paper glued over bamboo ribs, made by a lantern maker in Gifu, with an electric bulb where the candle was; they fold flat.

  3. TWA Flight Center

    Eero Saarinen · 1962An airline terminal under a thin concrete shell spread like wings over four Y-shaped piers; Saarinen died the year before it opened.

  4. Material 3 Expressive

    Google · 2025A set of 35 shapes for interfaces, with motion built in that morphs one shape into the next.