Skip to content
Sauna/Apps
Read guide.md

UI & BRAND GUIDE FOR AGENTS

Design for
Sauna apps.

This is the UI and brand guide for agents building Sauna-native apps. Read the Markdown for design rules, assets, and interaction patterns.

The review desk shows the guide in use: sample jobs you can review, edit, and approve on mobile and web.

Read guide.md

Keep the content in focus.

Editable UI example · Sample content
Review
Launch brief / Product notesTo review

Illustrative draft · Tap the wording to edit

Example source material

A list, the context, and the next action. Read and edit in the same place. This is one possible composition; interactions stay in this page.

A small set of decisions.

01 / Typography
A point of view.
Clearly expressed.
Instrument SerifDisplay · 48–72 px
The right detail, in the right place.
Google Sans FlexBody 16 px · Controls 14 px
02 / Color

A neutral starting point.
Use color when it has something to say.

White is still the canvas. Give colour a specific job; leave the rest quiet.

03 / Form

Square edges. Fine rules. A 4 px rhythm.

0 px radius / 160 ms transitions
04 / COMPONENTS

The small things, considered.

Familiar behaviours. A little character.
Try the controls and their states.

Actions

One clear next step. Ink is the default; Forest can give a meaningful completion action a little warmth.

44 px minimum · 0 px radius

A local interaction specimen. Nothing is saved or sent.

PrimarySecondaryDisabled

Inputs & selection

Keep the label visible. Put feedback beside the field and explain how to fix it. Checkboxes express explicit choices.

Labels above · Feedback below

Try clearing the title to see the validation state.

Example source · Product notes

States with a purpose

A status needs words as well as colour. Give empty, loading, and error states the same care as a finished result.

Keyboard tabs · Named states
Needs review

The next step belongs to the person.

Approved

A recorded decision, tied to a revision.

Changes requested

Keep the written direction with the draft.

Space & rhythm

Group related things closely. Leave more space between different ideas. A fine rule is often all the structure you need.

4 px base · No shadows
4
8
12
16
24
32
48
64

8–12 px within a control · 24 px within a section · 48–64 px between ideas

Implementation notes for agents

Use native buttons, labelled inputs, and real disabled states. Keep focus visible with a 2 px Ink outline and 3 px offset. For tabs, use a labelled tablist, one active tab stop, and linked tab panels. Arrow keys move focus; Enter or Space selects.

Keep the actual loading or error state connected to the operation it describes. Use the controls above as specimens, not as a substitute for persistence or delivery.

@import url("/brand/apps/tokens.css");

.review-action {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--sauna-studio-forest);
  border-radius: var(--sauna-studio-radius-control);
  background: var(--sauna-studio-forest);
  color: var(--sauna-studio-panel);
}
.review-action:focus-visible {
  outline: 2px solid var(--sauna-studio-ink);
  outline-offset: 3px;
}
.status--review { color: var(--sauna-studio-tangerine-deep); }
.status--approved { color: var(--sauna-studio-forest); }
Use the shared CSS tokens Read the implementation guide
05 / APP PATTERNS

A shape for every kind of work.

Choose the shape the work needs.
These are possibilities, not a prescribed shell.

01

Document review

Read a draft, adjust the wording, and approve a revision.

Expandable sections02

Email batch

Check the person, the reason, and the actual message together.

An editable message03

People & outreach

Choose a shortlist with useful context and verified profiles.

Selectable directory04

Meeting preparation

Put the proposed event beside the agenda and preparation.

Event + briefing05

Purchase decision

Compare the evidence, criteria, and cost before choosing.

Options + decision06

Research synthesis

Keep findings connected to sources and open questions.

Reading view + sources07

HTML artifact

Edit the actual page and the message that accompanies it.

Artifact + context
ON A SMALLER SCREEN

One person. One thoughtful message.

Review the email and why it matters together. Swipe or use the arrows to move; Include and Skip stay explicit. Approve the batch after every person has a decision.

Try the email review
Selection is a decision.
Navigation is just navigation.

These examples use illustrative records in browser storage. Approval records a local decision; it does not send, book, buy, or publish.

06 / A HUMAN TOUCH

A trace of the hand.

A small painted moment can make a tool feel
more personal. Give it a place, then stop.

A MOMENT OF WARMTH

Getting things ready…

A loading study: painted timber, warm glass, a slow wisp of smoke. Motion follows your device preference.
A SMALLER GESTURE

A little character.
Just enough.

Forest, steel, a little clay. Simple marks over the faintest wash of colour.

Clear geometry for search and code. A softer line where it helps. Keep the meaning immediately familiar.

Let the work choose. A small sauna for an honest pause; a simple mark for orientation. Neither belongs on every page. Keep the reading surface clear.

Download painting
THE ORIGINALS

Keep the marks intact.

Sauna wordmarkWordmark Sauna symbolSymbol

Preserve proportions.
Leave half a mark of clear space.
Use Ink on light surfaces.

FOR AGENTS

Start with
the guide.

Read guide.md before building. It covers the UI and brand rules, exact asset URLs, and links to the interaction details. Choose the layout that fits the work.

Read guide.md firstUI and brand rules, assets, and app patterns.mdDesign tokensColor, typography, spacing, and behavior.cssStructured referenceThe same foundations, ready for your tools.jsonJob examplesSeven illustrative records with the real artifact shapes.jsonJobs & interactionsRecord contracts, batch review, exports, and navigation.mdSauna assetsOriginal marks and brand referenceAssets