tillwork
Start your store

Styleguide · v2

The Field, set in motion.

Tillwork’s design system: one mark that opens like a zip, a few loud colors, one typeface across its width, and a way of moving. Every value on this page comes from one file, src/design/tokens.ts, so the site, its motion and this page can’t drift apart.

01

The mark

The Field: eight capsules in two interlocking combs, like rows in a tilled field, or the teeth of a zip. It looks the same after a half turn, which is why it can spin and land either way. It opens the way the 3D mark does, from the same geometry.

Bars
8 capsules, 70 × 9.5 units, 5.5 apart, in a 120-unit square
Opening
A straight V from the pull. A tooth tilts square to its tape only once it has cleared its neighbours, so nothing passes through anything
Smallest
16 px. Below that, the gaps close up
Clear space
Half a bar’s length (35 units) on every side
tillwork
Mark in field, wordmark in soil, on milk
tillwork
Mark in pollen, wordmark in milk, on field
tillwork
Mark in milk, wordmark in milk, on soil
tillwork
Mark in soil, wordmark in soil, on tomato

The loader assembles it

One bar per step of real loading (fonts, the 3D code, the first store’s image), from alternate sides, 170 ms apart. Then the finished mark flies to the header.

02

Color

Loud, flat and few. Field blue is the brand; tomato is the pull, and every call to act; pollen is a highlight that only ever sits on blue. The stores bring their own colors, so Tillwork’s stay out of their way.

Every text pair, checked

03

Type

One family, Archivo, used across its width axis: stretched wide and heavy for display, normal for reading. Type is the loudest thing on the site after the mark, and it moves.

  • --fontArchivo, subset and renamed. Weight 400 to 900, width 100% to 125%
  • --wideWidth for display type and the wordmark
  • --labelWidth for labels, buttons and navigation
  • --textWidth for running text
Furrowed One line of a heading can be filled with the furrows instead of ink. The stripes drift as you scroll.
Stretched by speed Display type widens with scroll speed and settles back when you stop.
04

Space, radius, depth

A 4 px scale. Capsules are the house shape, because the mark is made of them. Shadows are tinted with field blue, never grey, and every layer has a name.

Space

  • --s-14px
  • --s-28px
  • --s-312px
  • --s-416px
  • --s-524px
  • --s-632px
  • --s-748px
  • --s-864px
  • --s-996px
  • --gutterclamp(16px, 2.8vw, 40px)
  • --sectionclamp(96px, 14vw, 200px)

Radius

  • --r-pillButtons, chips, the concept label: the mark’s bars
  • --r-fieldForm fields
  • --r-cardCards and panels
  • --r-frameA store inside the frame

Shadows

  • --shadow-pressThe thickness of a pull button. Shrinks to 2px when pressed
  • --shadow-liftFloating things: the concept label, a lifted card
  • --shadow-deepA store in its frame
  • --z-furrows0The field behind everything
  • --z-page1Sections and stores
  • --z-stage3The 3D mark, above the page
  • --z-header6Header and the concept label
  • --z-menu20The phone menu
  • --z-loader50The loader
  • --z-cursor60The cursor
05

Motion

Snappy and elastic. Things are ploughed in, not faded in: they travel from the left, arrive with a small overshoot, and leave faster than they came. One big motion per screen; everything else supports it.

Easings

  • --ease-ploughTravel: slow to start, decisive to land. The mark, wipes
  • --ease-snapArrivals with a small overshoot. Buttons, chips, the label
  • --ease-outReveals: lines of type, floods
  • --ease-liftExits: quick, and out of the way

Durations

  • --d-quick180ms · Hovers and presses
  • --d-base420ms · Entrances of one thing
  • --d-slow900ms · Wipes, floods and lines of type
  • --d-scene1400ms · A whole screen changing: the flip, the loader outro

Choreography

  • stagger-line90msBetween lines of a heading
  • stagger-item60msBetween items in a group
  • stagger-bar170msBetween the mark’s bars
  • orderleft to right, top to bottomLike a plough. Lines draw from the left; groups arrive from the top
  • exit0.6An exit takes 60% of its entrance
  • one at a time1One big motion per screen. Everything else supports it
06

Components

Every control has a state for each thing that can happen to it, and each state moves. Hover these, press them, tab to them. The rows marked “pinned” hold a state still, for review.

Buttons

A capsule with a pull. The label rolls over on hover, the pull swings, a press sinks the button into its own thickness, and on a mouse it leans toward the pointer.

Start your store See the concepts How it works
Rest
Hover
Pressed
Focus
Busy
Disabled

Pinned states

Links

Links in running text are always underlined. On hover the line is ploughed into furrows under the words. In navigation there’s no line until you point: Concepts · How it works.

Chips

Fields

Focus pinnedAda
Invalid pinnedada@

That email address looks incomplete.

The concept label

Every store wears one, the whole time it’s on screen. It says what it is: a concept, not a real brand, on a .example domain.

Concept 01 · Ruddy · not a real brand · ruddy.example

Concept 02 · Small Hours · not a real brand · smallhours.example

Concept 03 · Standing Order · not a real brand · standingorder.example

The cursor

On a mouse only. A tomato dot; a ring over anything you can press; a label where something needs one; a clear glass lens over the stores. On touch screens there is no cursor, and every control answers the tap instead.

Dot
Label
Lens

Navigation

Transparent over the opening screen, a milk capsule once the page moves, out of the way while a store has the screen.

The phone menu

A field-blue flood from the menu button; the links rise one after another. Escape or the button closes it, and focus goes back where it was.

07

Transitions

Nothing just appears. Sections and the things in them arrive in one of these ways, and nothing invents its own. With reduced motion, everything is simply there.

Lines rise out of their own masks, one after another.

Rise Headings. 900 ms, ease out, 90 ms between lines.
OilsSaltLinenSetsTrade
Pop Small things in a group. 420 ms with a snap, 60 ms apart.

A band of furrows sweeps across, and the next section is under it.

Plough Between Tillwork’s own sections, scrubbed by the scroll.

Click anywhere in here.

Flood Color pours out from where you pressed. Ruddy’s shades, the phone menu.
Shopper
Wholesale
Flip The store turns over like a card: the same brand, dark side up, for the cafés and shops that stock it.
Perfumefor after dark.Concept 02 · not a real brand · smallhours.example
Frame Each store arrives as an inset card and opens to the full screen, the way the first one opened out of the mark. Its label comes with it.
Zip The signature: the mark opens and what’s inside takes the screen.
08

The contact form

Four questions, one optional. It checks itself kindly, says exactly what’s missing, and tells you what happened. This copy is a demo: it goes through every state and sends nothing.

Tell me what to call you.

I need an email address to reply to.

A link to your store, your site or your Instagram.

Add a link, so I can see your brand before I reply.

Which concept did you like best? Optional

Or email me directly: robin@tillwork.studio

Sent. Thank you.

I read every message myself, and I’ll reply from my own address.

09

The stores’ systems

Each concept store has its own small design system, so the three could come from three different studios. None of them is a real brand.

Ruddy

One stick.

One product, four shades, and the whole page wears the one you pick. Juicy, friendly, loud.

Motion Pop and bounce. A picked shade floods the page from the swatch outward; the bag count jumps.

Small Hours

Night Iris

No. 3 · eau de parfum · 50 ml · iris, violet leaf, smoked vanilla

Three scents for the hours after midnight, and a discovery set. Slow, smoky, close to the skin.

Motion Slow and smoky. Long fades, light pooling behind the bottle, the juice moving when it turns.

Standing Order

No.1

Specialty coffee roasted every Monday, by the bag for kitchens and by the kilo for the cafés that pour it. Bright, graphic, morning.

Motion A standing order filling up: bags drop into the weeks and settle, prices roll over like a scale, and the store turns over like a card for cafés.

Ruddy Concept 01 · not a real brand · ruddy.example

  • Cherry Pit #c8102e A shade, full bleed. The page is the product
  • Papaya #ff7a45 A shade; the one light enough for espresso type
  • Fig Jam #8a2468 A shade
  • Cocoa Nib #9a5440 A shade
  • Cream #fff0e4 Type and buttons on every shade
  • Deep #8e0a1e A deep version of each shade, for type on cream
  • Display Bricolage Grotesque at 75% width, weight 800, tight
  • Text The same family at full width, weight 420

Small Hours Concept 02 · not a real brand · smallhours.example

  • Aubergine #2a0f24 The ground: the room with the lights low
  • Moon #f3e8f8 Type
  • Smoke #cdb9d6 Secondary type, notes
  • Gilt #d9b26f Prices and the one detail that catches the light
  • Night Iris #7d4bc4 Juice: violet
  • Fig Leaf #7c9a3f Juice: green
  • Amber Tar #d0711f Juice: amber
  • Display Instrument Serif, roman and italic, very large
  • Notes IBM Plex Mono: notes, sizes and prices, like a perfumer’s formula card

Standing Order Concept 03 · not a real brand · standingorder.example

  • Butter #e7bb44 The ground: yellow paper in morning sun
  • Espresso #221a16 Type, the No. 1 bag, and the whole wholesale side when the store flips
  • Leaf #2f6b52 The No. 2 bag
  • Clay #e2622b The No. 3 bag. Espresso type on it
  • Milk #fbefd5 Cards, and type on the dark side
  • Display Anybody, heavy and stretched wide: the headline, the bag, the big numbers
  • Text Hanken Grotesk, for everything you read