# Tally design

How Tally looks and sounds. The source of truth for every value here is the site itself: colours and radii in `app/globals.css` (`@theme`), fonts in `app/layout.tsx`. `tokens.css` and `tokens.json` in this kit are generated from that file on every build.

## Name
**Tally**, one capitalised word; the site is tallyless.com; Tally is an ai6labs product. See `copy/tally-copy.md`.

## Colour
Paper and ink carry the page. Tally green is the one signal colour, for actions and the brand panels; Mint is the green on dark. Ledger red is only for money going wrong: an overspend, a cap, a warning.

| Role | Hex | Use |
|---|---|---|
| Ink | #0F1A14 | Text, dark logo |
| Tally green | #0A7A43 | Buttons, links, brand panels |
| Green deep | #086637 | Hover on green |
| Mint | #34C27A | Green on dark backgrounds |
| Paper | #F2F4F0 | Page background |
| Soft | #FBFBFA | Quiet card backgrounds |
| White | #FFFFFF | Cards, header |
| Night | #0E1511 | Dark sections |
| Line | #E1E5DF | Borders and rules |
| Muted | #4F5A52 | Secondary text |
| Ledger red | #B4442E | Warnings only |
| Red on dark | #E07A62 | Warnings on dark |

Text on Tally green is white. Don't put the colour logo on Tally green; use the white one-colour logo there.

## The mark
The T mark is a bar, a stem and a dot, each with its own gradient. Use the files; never rebuild it in flat green.

| Part | Gradient |
|---|---|
| Bar | #12A066 → #14A86B → #4FD39A → #B6F0D3 |
| Stem | #0A7A43 → #16A56A → #6EE0AE |
| Dot | #109A5E → #2BC183 |

One-colour versions are Ink (#0F1A14) or white. On dark, the colour mark stays and the wordmark turns Paper (#F2F4F0).

- **Clear space:** the height of the dot on every side.
- **Minimum size:** the full logo 72 px wide on screen; the mark alone 20 px.
- **Don't:** recolour, stretch, rotate, add shadows or effects, put the colour logo on busy images, or redraw the mark flat.

## Type
- **Figtree** (400–800) for everything people read. Headlines 800, tracking −0.035em, line height about 1.0; text 16–18 px, line height 1.5.
- **IBM Plex Mono** (400, 500) for figures, labels and code. Labels 12–13 px, uppercase, tracking +0.08em. Figures tabular.
- **Share Tech Mono** (400) only for the till tape and receipts.
See `fonts/FONTS.md`.

## Layout
- Content width up to about 1160 px; 16 px side gutters on phones, 32–36 px on desktop.
- Brand panels: full-width green or night blocks with a 12 px inset from the window and 20 px corners.
- Cards: white, 1 px Line border, 14–18 px corners. Buttons: 10–12 px corners in the flow; pills (fully round) for the header's primary action.
- Radii: 5, 6, 10, 14 and 18 px.
- One idea per section; a section starts with a mono label, a headline and one sentence.

## Motion
- Easing: `cubic-bezier(0.2, 0.8, 0.2, 1)` (scrub) and `cubic-bezier(0.22, 1, 0.36, 1)` (sequences).
- Motion explains something (a bill arriving, a total adding up); nothing moves only to decorate. Everything respects reduced motion.

## Voice
- Plain and specific. Short sentences. Numbers instead of adjectives.
- Talk about tools and spend, never about watching people: "Tools, not people."
- No hype words, no exclamation marks, no prices or discounts during the private beta.

## Components
- **Brand panel:** the page's opening block, Tally green with white text, 20 px corners, inset 12 px from the window.
- **Section head:** a mono label with a number (`01 · Logo`), a headline in Figtree 800 and one sentence in Muted.
- **Cards:** white on Paper, 1 px Line border, 18 px corners; the caption sits under a hairline with the name, a mono
  note and the download chips.
- **Download chips:** mono 12 px, 1 px Line border, 6 px corners; the border turns Ink on hover.
- **Buttons:** 50 px tall, 12 px corners; primary is white on green panels and green elsewhere; secondary is outlined.
- **Receipts and the till tape:** Share Tech Mono on white paper with a torn edge; totals right-aligned; Ledger red only
  for an overspend.

## Imagery and illustration
- The four characters are Keeper, Tally's own character, in four roles: design lead, finance lead, product manager and
  backend engineer. Only the clothes, props and pose change; Keeper stays green and unchanged. Keep each with its role.
- Product images show Tally's own screens and receipts with sample data that is plainly sample data. No stock photos,
  no screenshots of other companies' products, no real customer names.
- The brand film is the 42-second intro; it plays without sound.

## Accessibility
- Text meets WCAG AA contrast; text on Tally green is white; Muted (#4F5A52) is the lightest text colour on Paper.
- Focus is always visible. Controls are at least 44 px. Nothing depends on animation or script to be readable.
- Images have alt text; the characters' alt text names Keeper and the role.

## Machine readability
- `/llms.txt` and `/llms-full.txt` (llms.txt, the text of every page as rendered, the approved copy and this file).
- Brand files at stable addresses under `/brand/`: `tokens.css`, `tokens.json`, `DESIGN.md`, `BRAND-ASSETS.md`,
  `RELEASE.md`, `release.json` and the kit ZIP, all generated on every build by `scripts/brand/kit.mjs` from
  `brand.config.json`.
- Every page has a title, description, canonical, Open Graph and Twitter card, and JSON-LD (ai6labs as publisher,
  Wearable Devices Ltd. as parent).

## Relationship to ai6labs
- Tally is built by ai6labs, the innovation studio of Wearable Devices Ltd. (Nasdaq: WLDS). Tally keeps its own colours,
  type and logo; the ai6labs logo appears only in the footer attribution, as the official ai6labs file.
- Press and brand questions for both go to hello@ai6labs.com.

## Presentations
- Start every deck from `presentation/tally-slides-template.pptx`: title, section, content and closing layouts in
  Figtree, Paper and Ink with Tally green as the one accent. The template is built from `scripts/brand/slides/` by
  `scripts/brand/slides-template.py`, which takes its colours from the site's tokens.

## Don't
- Redraw, recolour, stretch or flatten the mark; put the colour logo on green or on busy images.
- Use Ledger red for anything but money going wrong.
- Show real people as Tally users, or describe Tally as watching people. Tally measures tools, not people.
- Quote prices or discounts during the private beta.