Design system

The Ensou visual language.

Every EnsouWorks product is built from the tokens below. Anything on this page can be used directly; anything not on this page should be added here first.

Ground and ink

The palette is mineral sand, biased cool. Both themes are designed rather than inverted — use the toggle in the header to check either.

--c-ground Ground — Page background.

--c-ground-sunk Ground sunk — Recessed bands and quiet sections.

--c-ground-raised Ground raised — Cards and surfaces catching light.

--c-grain Grain — Sand texture and fine detail.

--c-line Line — Borders on interactive elements.

--c-line-soft Line soft — Structural hairlines.

--c-ink Ink — Primary text.

--c-ink-soft Ink soft — Body copy and secondary text.

--c-ink-mute Ink mute — Labels, captions, metadata.

Meaning

Colour carries meaning here, never decoration. The seam is reserved for repair and must not be borrowed as a general accent.

--c-accent Accent — Links, focus, emphasis. Used sparingly.

--c-seam Seam — Repair. Kintsugi only.

--c-ikigai Ikigai — Creation.

--c-kintsugi Kintsugi — Recovery.

--c-kaizen Kaizen — Continuous improvement.

Type

Fraunces states, Geist explains, Geist Mono labels. All three are self-hosted variable faces.

Fraunces · display · --t-3xl

Build what matters.

Fraunces · section title · --t-2xl

Three situations, not three stages.

Geist · lede · --t-md

A software development company for the lifecycle of a product.

Geist · body · --t-base

Most software problems are not coding problems. They are problems of scope, of sequence, and of nobody being clearly responsible for whether the thing works.

Geist Mono · label · --t-xs

Where the work starts

Components

Corners stay square. The only true circle in the system is the ensō.

Primary action Secondary action Ghost action

Field label Hint text sits under the control.

Invalid field Doesn't look like an email address.

A notice, for information that changes what someone does next.

The marks

One ensō in three conditions. The practices are told apart by the state of the circle, not by colour — gathering, broken and rejoined, tended.

Ikigai

MVP development

Creation, and the beginning of a product.

Kintsugi

Project rescue

Recovery.

Kaizen

Ongoing development

Continuous improvement.

Start here

Tell us where your product is, and we will tell you what we would do next.

No pitch deck required. A short description of the situation is enough for a useful first conversation.

Start a conversation hello@ensou.works