BRAND BIBLE
A little light.
Every morning.
Everything Aunara looks like: the sunrise, the colours, the type, the motion and the words. This page is drawn by the product's own styles, so it is always current.
The mark
Five petals of the Aurora flower rise as the rays of a sun over the horizon; beneath it, the ledger line keeps the books. One drawing, mark.mjs, serves the app, this site and the favicon.
- Horizon
- y 21, x 3 to 29
- Sun
- Half-disc, radius 7, warm gradient
- Petals
- The Aurora petal, lime, alternating light and deep, each with a glint
- Ledger line
- y 26.5, x 9.5 to 22.5, 38% opacity
Lockup and sizes
- Name. In sentences, Aunara. Lowercase
aunarabelongs to the logo only. - Clear space. One sun radius all round.
- Colour. The petals and sun never change, except the sun's own states: amber when something needs you, red for a problem.
Never
- In a tile or box
- Recoloured
- Stretched or rotated
- Outlined or shadowed
Colour
Mostly cream and white, forest for words, lime as light. Amber only where something needs the person. Components use roles, never the palette directly, and never a raw colour.
Forest and moss
- Forest 900
--forest-900Ink, primary actions, dark sections - Forest 800
--forest-800Second ink - Forest 700
--forest-700Raised dark surfaces - Forest 600
--forest-600Primary hover - Moss 700
--moss-700Links - Moss 500
--moss-500Focus, checks
Sage and paper
- Sage 600
--sage-600Muted text - Sage 500
--sage-500Icons, placeholders - Sage 300
--sage-300Strong lines - Sage 200
--sage-200Lines - Sage 100
--sage-100Hover - Sage 50
--sage-50Soft surfaces - Cream
--creamThe page - White
--whitePaper
Lime and the sun
- Lime 400
--lime-400Lime lines, focus glow - Lime 300
--lime-300Light, the lime section - Lime 50
--lime-50Soft brand surfaces - Sun light
--sun-lightThe sun's top - Sun
--sunThe sun - Sun deep
--sun-deepThe sun's base - Ray
--rayPetals - Ray light
--ray-lightPetals, where they meet the sun - Dawn
--dawnThe sunrise's glow
Tints
- Tint lime
--tint-limeIllustrative cards - Tint sand
--tint-sandIllustrative cards - Tint mist
--tint-mistIllustrative cards
States
Green when verified, amber when something needs the person, red for a problem. Each has a text colour, a line and a surface. No colour ever means a business effect happened.
- Green 700
--green-700Verified: text - Green 50
--green-50Verified: surface - Amber 700
--amber-700Needs you: text - Amber 500
--amber-500Needs you: dots, the sun - Amber 200
--amber-200Needs you: lines - Amber 50
--amber-50Needs you: surface - Red 700
--red-700A problem: text - Red 200
--red-200A problem: lines - Red 50
--red-50A problem: surface
On forest
- On dark
--on-darkHeadings, body - On dark muted
--on-dark-mutedParagraphs - On dark subtle
--on-dark-subtleNotes - On dark accent
--on-dark-accentCaps labels - Horizon on dark
--horizon-on-darkThe mark's lines - Dark raised
--dark-raisedCards on forest
Roles and contrast
Every pairing below is checked by the design tests: 4.5:1 for text, 3:1 for icons and the focus ring. The ratios here are measured live.
| Sample | Role | Contrast |
|---|---|---|
| Aa | Text on the page--ink on --background | |
| Aa | Muted text--muted on --background | |
| Aa | Links--brand on --paper | |
| Aa | Primary action--on-primary on --primary | |
| Aa | Lime action on forest--ink on --accent-action | |
| Aa | Text on lime--ink on --lime | |
| Aa | Needs you--warning on --warning-surface | |
| Aa | Done and verified--success on --success-surface | |
| Aa | A problem--danger on --danger-surface | |
| Aa | Text on forest--on-dark on --dark | |
| Aa | Muted on forest--on-dark-muted on --dark | |
| Aa | Icons and placeholders--subtle on --background | |
| Aa | Focus ring--focus on --background | |
| Aa | Amber dot--warning-accent on --paper |
Type
One family for everything: the platform's own sans, local and quick. The serif is an accent for an emphasized line, in italics, on the website only.
Your business.
In good hands.
Sans --font-sans: Segoe UI, San Francisco, Roboto.
Serif accent --font-serif: Georgia, italic, one line.
Money in tabular figures: $1,020.00 · $85.00 · $12,840.50
Caps labels ONE CONVERSATION. EVERYTHING CONNECTED.
| Sample | Token | Size | Use |
|---|---|---|---|
| One intention. | --display-2 | 36–64 | Website sections |
| A familiar face. | --display-3 | 27 | Website cards |
| What can I help with? | --text-3xl | 32 | App welcome |
| A little room to grow | --text-xl | 20 | App headings |
| A little room to grow | --text-lead | 19 | Website lead |
| A little room to grow | --text-body | 16 | Website body |
| A little room to grow | --text-base | 14 | App body |
| A little room to grow | --text-sm | 13 | Captions |
| LESS ADMIN. MORE POSSIBILITY. | --text-2xs | 11 | Caps labels |
Motion
Motion says hello (the sunrise, once) or working (light sweeping the petals). It never celebrates a result, and it stops for reduced motion, the pause control and hidden pages.
- HelloThe horizon draws, the sun rises, the petals open from the middle out. Once, where the mark first appears large.
- WorkingLight sweeps across the petals while the sun settles and rises.
- Needs youThe sun turns amber when something waits for the person.
- A problemThe sun turns red. Never used to celebrate or to alarm.
Where the mark would be too heavy (the website's hero and closing), the same choreography is drawn in light, slower, over --dur-dawn.
The choreography
| Token | Value | For |
|---|---|---|
--dur-fast | Hover and colour | |
--dur-base | Panels and sheets | |
--dur-slow | Tilt | |
--dur-reveal | Sections | |
--dur-horizon | The horizon draws | |
--dur-rise | The sun rises | |
--rise-delay | Petals start | |
--rise-stagger | Between petals | |
--dur-bloom | A petal opens | |
--dur-dawn | The sunrise in light | |
--dur-radiate | Working sweep |
--ease-dawnEverything that arrives--ease-bloomA petal opening, with a little spring
Shape, space and depth
Soft corners, a 4-point rhythm and forest-tinted shade. Prefer a hairline to a box, and never put a box inside a box.
Corners
--radius-xs6 · tags--radius-sm8 · controls--radius12 · cards--radius-lg16 · panels--radius-xl22 · website cards--radius-2xl28 · feature panels--radius-pillpill · buttons
Space
--space-14--space-28--space-312--space-416--space-524--space-632--space-748--space-864--space-996
Depth
--shadow-smResting controls--shadow-mdLifted cards--shadowMenus, the composer--shadow-lgDialogs, the preview
In use
The pieces people touch, drawn with the site's own components.
Voice
Calm, plain, honest. Say what happened and what didn't. Prepared is not sent, and sent is not paid.
| Say | Not |
|---|---|
| Here it is for you to check. Nothing is sent until you approve it. | Done! Your invoice is on its way. |
| Saved as a draft. Not issued or sent. | Invoice created successfully. |
| This needs another look. Nothing was changed. | Oops, something went wrong. |
| A little room to grow. | Supercharge your workflow with AI. |
No exclamation marks or emoji in the product. Small words, short sentences, and the person decides.