Design system

Brand

A drystone wall is irregular stones fitted together without mortar — which is exactly what a Suguru block layout is. Everything here follows from that: monochrome stone on near-black, one warm accent spent only on the square you are working, and nothing decorative that a wall would not have.

The mark

Four courses of deliberately uneven stones, laid the way a drystone wall is — no mortar, every stone a different size, nothing wasted.

The unevenness is the whole point. A regular grid reads as a spreadsheet, which is exactly what a puzzle about thinking must not look like.

No two neighbouring courses put a joint in the same place. A running joint is the line a wall fails along — it is the thing the craft exists to avoid — so a mark about laid stone must not contain one.

Construction

Every measurement derives from one unit, equal to a quarter of the mark's height. That is why the mark is identical at 19 pt in a navigation bar and 1024 px on the App Store.

0.88 : 1

Aspect

width to height

0.16 unit

Gap

between every stone

0.84 unit

Stone height

per course

0.24 unit

Corner

radius

Course widths, as fractions of the mark's width
Course 1	0.34	0.28	0.38
Course 2	0.20	0.30	0.50
Course 3	0.38	0.32	0.30
Course 4	0.26	0.30	0.44

Clear space. Keep one unit — the mark's height divided by 4 — free on every side. On an app icon that grows to16% of the canvas, because iOS masks the corners and a mark without air reads as cropped.

Colour

Monochrome stone on near-black, and exactly one accent. The app ships locked to the dark appearance, so these are the only values that ever render — there is no light theme to keep in step.

canvas

#0c0b091.00:1 on canvas

The page and app background. Quarry dark.

surface

#1916121.09:1 on canvas

One shade up from the canvas, for panels and trays.

stone

#201d181.17:1 on canvas

A cut stone in shadow — the cell fill, and the face of a slab.

stoneLit

#302a221.39:1 on canvas

A stone catching light — the block under the cursor.

joint

#3731281.53:1 on canvas

Hairlines between stones in the same block. Decoration, deliberately below AA.

wall

#e7e4df15.51:1 on canvas

The wall itself: block outlines, and the wordmark.

ink

#f0eeeb16.99:1 on canvas

Primary text and placed digits.

inkSoft

#928a7f5.77:1 on canvas

Secondary text. On the web this lifts to A9A49B — see webOverrides.

Web override: #a9a49b — the app draws this at 17pt+ on a phone held close; a page gets neither advantage.

ember

#cb944c7.38:1 on canvas

The single accent. Spent only on live focus: the selected square, an active key, a hint's reasoning. Never decoration.

onEmber

#201d181.17:1 on canvas

Text and glyphs on a filled ember surface. Ember is a light accent, so white fails at 2.03:1 — this reads 6.30:1.

flag

#d9695c5.74:1 on canvas

A broken rule. Always paired with words, weight or motion — never colour alone.

Typography

Sora throughout — bundled as a variable font in the app and selected via the wght axis rather than a family-name guess, which is the failure mode that quietly makes a brand look generic.

Simple rules. Endless moves.

display · 40/700 · -0.02em

Simple rules. Endless moves.

title · 26/600 · -0.02em

Simple rules. Endless moves.

bodyStrong · 17/600

Simple rules. Endless moves.

body · 16/400

Simple rules. Endless moves.

caption · 13/400

DRYSTONE

wordmark · 13/600 · 0.18em

Stone texture

octaves of value noise, generated once at launch rather than shipped as an image, so it stays crisp at any size and costs nothing to download.

The blend mode has to suit the surface, and getting it wrong is what once washed the board grey. The full field averages mid-grey, and screening mid-grey over near-black can only lighten — it lifted every cell by roughly 17 units.

On dark surfaces use the peaks-only field: everything at or below the average is flattened to black, which screen leaves untouched, so the stone keeps its floor and only the high points catch light.

Near-black surfaces

blend: screen
field: photograph, peaks-only, mirrored 512px tile
opacity: 0.3

Mid-grey stone

blend: overlay
field: procedural, 5 octaves
opacity: 0.75

Rules

Ember marks where to look. If it is not live focus, it is not ember.
Never state anything with colour alone — a broken rule carries words, weight or motion too.
The mark is never redrawn by hand. Generate it from this file.
The mark keeps clear space of one unit (its height / 3) on every side.
Never set the wordmark in anything but Sora caps at the documented tracking.
Never place white or ink on ember. Use onEmber.
The board is near-black. Texture adds light to it; it never lifts its floor.