Shared foundations / Version 1

A working styleguide.

The prototype and this page use the same tokens and primitives. This is a reusable foundation, not a claim that every product interaction is finalized.

01 / Identity

Full logo kit

Responsive / Detailed or compact

Desktop shows the scanned HEY and slot. Compact layouts use the prepared small artwork.

Small / Actual 136 px width

A solid bar replaces HEY. Its right edge stops before the large slot's end.

Protect one E-stem width around the mark. Use prepared SVG assets, not live typesetting. The header swaps to the compact artwork below the desktop layout breakpoint.

02 / Colors and roles

One lime family / Explicit semantic roles

Paper

--color-background

The working canvas.

Surface

--color-surface

Quiet cards and document surfaces.

Ink

--enno-ink

Text, dark identity surfaces and primary controls.

Lime

--enno-lime

The logo detail and AI cue on dark backing.

Lime on light

--enno-lime-on-light

The same hue, darkened for light backing.

Soft accent

--color-accent

Focused capture surfaces, not ordinary body text.

Muted text

--color-muted

Supporting copy that still needs to be read.

Border

--color-border

Grouping and dividers, not a sole state indicator.

Overdue

--color-status-overdue

A labeled payment state, separate from AI.

Bright lime is not small text on white. The dark lime is derived at the same OKLCH hue; it is a logo/non-text cue color, not a general-purpose text color. Payment and invoice states retain their own labels and roles.

03 / Typography

DM Sans / Local font / No live logo font

Display--font-size-display

Tell it like you did it.

Page--font-size-page

Today

Section--font-size-heading

Finished a job?

Subheading--font-size-subheading

To sort out

Body--font-size-body

A clear next step, in plain language.

Small--font-size-small

Supporting details and action labels.

Caption--font-size-caption

Sample data. Review before issuing.

Use regular and medium for body copy, semibold for actions, and weight 650 for headings. Money uses tabular numerals. Small labels never carry critical status without readable supporting copy.

04 / Spacing

4 px rhythm / rem-based tokens

--space-1

--space-2

--space-3

--space-4

--space-5

--space-6

--space-7

--space-8

--space-10

--space-12

--space-14

--space-16

Use roles before numbers.

--space-page controls the responsive gutter, --space-card the inside of cards, and --space-section the distance between groups.

Keep context close.

A label and value belong together. Increase spacing between groups, not randomly between every element. Safe-area padding is additional to the shared scale.

05 / Shape and surfaces

Quiet cards / Glass only where it floats

Small detail--radius-xs

Badge--radius-sm

Icon tile--radius-md

Control--radius-control

Document--radius-panel

Card--radius-card

Floating navigation--radius-pill

Use the card radius for content containers and the control radius for actions. The asymmetric capture-card corner is an intentional identity detail. Reserve blur and elevation for floating navigation and popovers, not ordinary document content.

06 / Interaction

Real focus / Explicit states / Reduced motion

These are visual control examples, not product actions. Tab through them to inspect the shared focus treatment.

Field example

Touch targets are at least 44 px. Primary actions are 56 px. Short color and press feedback respect reduced-motion preferences.

07 / The AI cue

Useful assistance / Never a verification badge

AI-assisted draft · component example

The bar is paired with a readable label. A future AI-generated suggestion still needs source context and a human review path.

AI capture concept

Use lime on Ink and the derived darker lime on light backing. In today's prototype, the label explicitly says concept: no AI is connected.

Do not use this bar for paid, saved, issued or verified states. It can mark valuable AI-assisted interactions; exact placement, progress animation and state mappings should evolve with implemented features.