The cycleWASH visual system.
The canonical reference for anyone extending cycleWASH — designer, developer or partner studio. The language is Liquid Precision: German engineering clarity fused with the energy of water in motion. Precision is the aesthetic; restraint is the system.
Colour
Four named colours. Use the named tokens — never hard-code new hex values. The brand is light by default; Mist White is the daylight home, Midnight Ink is reserved for the 3D theatre and hero stages.
Typography
Two families. Newsreader carries the brand — an editorial serif, set light and large; Inter keeps everything else legible. Outfit and Playfair Display were the V1 pairing and are superseded: they no longer appear anywhere in the shipped theme.
every bike rolling.
Sentences are short and weighted. We name things by what they do — wash, dry, protect, recirculate — and we prove claims with numbers: 99% water recycled, 3 minutes per bike, 40 patent filings. Eyebrow labels are uppercase with .18em tracking.
The serif appears exclusively in Journal heroes and headlines — the one place the brand slows down. Never in UI, never on product pages.
Logo & mark
The official 2016 mark: a water droplet carrying the rotating gold wash-cycle arrow. The wordmark pairs gold lowercase “cycle” with blue “WASH”.
- Construction — Glacier Blue droplet outline (the water) around a Signal Gold rotating arrow (the wash cycle) with a blue hub. Wordmark: cycle in gold lowercase, WASH in blue caps.
- Clearspace — one droplet-width on all sides; never crowd the mark.
- Backgrounds — designed for white/light surfaces; on midnight, place it on a white chip. Never recolour, outline or rotate.
- Source files — download them below. EPS and PDF are CMYK for print; PNG and JPG are RGB for screen. The web SVG ships with the theme.
Layout & depth
- 8 px base unit; container max-width 1240 px, centred, 24 px side padding.
- Section rhythm: 88 px band padding desktop / 56 px mobile; bands alternate Mist ↔ white ↔ midnight.
- Cards: radius 16–20 px; buttons and inputs 10 px; pills 100 px.
- Weight content toward the centre — negative space is engineering, not emptiness.
- The editorial pattern (V2). A page or mail opens with a dark ink band — wordmark left, tracked-uppercase label right — then a half-bleed photograph with no border and no caption, then a quiet eyebrow above one large serif headline. Everything below is hairline-ruled rows, not cards.
- The call to action is a rule, not a button. A 34 px Signal Gold bar, then the link text in ink. Filled buttons belong to commerce controls (Add to cart, Request a quote) and nowhere else — a filled button in editorial content is the single clearest sign the system has been misapplied.
- Radius is retreating. V1's 16–20 px cards are being replaced by 3–6 px and a hairline; where the two meet, the hairline wins.
- Numbering must mean something. 01/02/03 markers are for genuine sequences. Parallel items — four programmes, three machines — take rules, not numbers.
- Depth = tonal layers; shadows only as
0 20px 48px -28px rgba(13,17,23,.45). - Hairlines: 1 px rgba-blue on light, #2E3140 on dark.
- The 3D theatre is always full-bleed midnight with a single gold or blue accent.
- Performance is part of the design: lazy-load below fold, content-visibility on long pages.
Motion
Water is the only thing allowed to move freely. Everything else moves like machinery — precise, damped, once.
- Reveals: translateY 14 px → 0, .6 s ease-out, stagger 80 ms, play once.
- Hovers: −2 px Y over 200 ms; buttons may deepen one ramp step.
- 3D turntable: continuous, slow (≈12 s/rev), pointer-interruptible.
- Bubbles & water effects: brand-coloured (blue/gold), physical, never looping ads.
- No bounce, no parallax scroll-jacking. The brand does not jump.
- Respect
prefers-reduced-motion— reveals become fades.
Application
How the system behaves — light where functional, midnight where the machines perform.
Reference sheet
The one-page palette & style sheet — drop it into decks, briefs and partner handoffs.
