# Brand guidelines

> Visual rules for Chatticus surfaces (marketing site and product workspace). This governs backgrounds and regions only. It does not change foreground, text, or accent colors (`ink`, `paper`, `signal`, `clay`, `cobalt`,...

Canonical: https://chattic.us/wiki/brand-guidelines/

Visual rules for Chatticus surfaces (marketing site and product workspace).
This governs backgrounds and regions only. It does not change foreground,
text, or accent colors (`ink`, `paper`, `signal`, `clay`, `cobalt`, `sea`,
`amber` stay exactly as they are).

## No lines, no gradients

Regions are never denoted by a border, outline, divider rule, or gradient.
A region is a rounded rectangle with a flat background-color step. Nothing
else marks its edge — no `border`, no `divide-x`/`divide-y`, no `outline`,
no `linear-gradient`/`radial-gradient` standing in for a boundary.

Hard-edge drop shadows (e.g. `shadow-[4px_4px_0_var(--ink)]`) are a
different device — ornament, not a region boundary — and are unaffected by
this rule.

## Three background steps, symmetric across light and dark

Every surface uses exactly three background steps:

| Token | Role |
| --- | --- |
| `surface-0` | Page base |
| `surface-1` | A raised region |
| `surface-2` | The region getting the most attention (e.g. the latest bot message, the active nav item) |

Neither `surface-0` nor its darkest step is pure black or pure white. Light
mode and dark mode are symmetric mirrors of each other: the same three
relative steps, offset from their respective true black/white by the same
amount. Dark mode is real `prefers-color-scheme` support, not a forced
theme — both marketing and the product workspace render correctly in
whichever mode the visitor's system prefers.

`surface-2` is reserved for the single thing on a screen that should draw
the eye most; don't apply it to more than one region in a given view.

## Message-shaped affordances

The logo mark's black bubble (`CHATTICUS_MARK_MODEL` in Vultus) is a
rounded rectangle with three corners fully rounded and one corner sharp
(corner radii 8/8/1.85/8 on its 20x16 box — the sharp corner is roughly
0.23x the rounded ones). Primary actions that represent sending or
receiving a message (e.g. the "Hey, Chatticus..." header CTA) use this
same shape instead of a plain pill, scaled to the control's own height:
round corners at half the height, the sharp corner at ~0.23x that. This is
a deliberate motif, not a rule for every button — most controls (secondary
actions, form buttons, nav) stay pill-shaped (`rounded-full`) or use the
existing hard-edge card style; reach for the message-bubble shape only for
controls that are themselves about a message.