Brand & UI kit

# Reconciled — Design Guidelines for Documents

> Give this file to Claude (or any designer) before asking for a proposal, letter,
> report, one-pager, slide deck or PDF. Everything produced for Reconciled should
> follow these rules. Live component reference: https://reconciled.co.za/brand

## 1. Brand in one paragraph

Reconciled is practice-management software for South African accounting firms:
compliance deadlines, AI bank-statement extraction, time tracking, invoicing,
client email and e-signatures in one place. The brand is **calm, precise and
trustworthy** — an accountant's desk, not a startup billboard. Warm paper
backgrounds, one confident teal, a serif for headings, generous whitespace.
Never loud, never gimmicky.

## 2. Colour

Use teal as an accent, not a flood. Most of any page is paper, white and ink.

| Role | Hex | Use for |
|---|---|---|
| Primary teal | `#0F6E56` | Primary buttons, links, key rules, logo mark |
| Teal hover | `#0a5240` | Hover / pressed state of primary |
| Deep teal | `#0a3d2e` | Text on teal tint, gradient end, dark hero blocks |
| Accent green | `#1D9E75` | Eyebrow labels, ticks, small highlights |
| Mint | `#5DCAA5` | Decoration and text on dark teal only |
| Mint soft | `#9FE1CB` | Secondary text on dark teal |
| Teal tint | `#E1F5EE` | Callout backgrounds, icon wells, selected rows |
| Paper | `#FAFAF8` | Page background |
| Muted band | `#F1EFE8` | Alternate section bands, table header fill |
| Surface | `#FFFFFF` | Cards, document pages |
| Border | `#E4E4DC` | 1px hairlines, card borders, table rules |
| Ink | `#1C1C1C` | Headings and body text |
| Body grey | `#444441` | Long-form body text on white |
| Muted text | `#6B6B60` | Secondary copy, captions |
| Faint text | `#9A9A90` | Metadata, page numbers, footers only |

Semantic colours (status only — never decorative):

| Meaning | Text | Fill |
|---|---|---|
| Success / paid / on track | `#0F6E56` | `#E1F5EE` |
| Warning / due soon | `#854F0B` | `#FAEEDA` (solid `#BA7517`) |
| Danger / overdue | `#993556` | `#FBEAF0` (solid `#C2415F`) |
| Info | `#185FA5` | `#E6F1FB` |
| Secondary accent | `#534AB7` | `#EEEDFE` |

Dark surfaces (only when a dark document is requested): page `#0C0C0B`,
surface `#141413`, border `#2A2A27`, text `#E8E8E4`, muted `#8A8A80`.

Rules:
- Hero / cover blocks may use the gradient `#0F6E56 → #0a3d2e` with white text.
- Teal on white and muted text on white both pass WCAG AA; mint and faint grey
  do not — never set body copy in them.
- No other brand colours. No pure black (`#000`). No gradients besides the one above.

## 3. Typography

| Use | Typeface | Weight | Notes |
|---|---|---|---|
| Headings, titles, big numbers | **Fraunces** (serif) | 600–700 | Tight tracking, sentence case |
| Body, UI, tables | **DM Sans** | 400 / 500 / 600 | Line-height 1.5–1.6 |
| Fallbacks | Georgia (serif), Arial / Helvetica (sans) | — | When web fonts are unavailable (e.g. PDF engines) |

Font import: `https://fonts.bunny.net/css?family=dm-sans:400,500,600,700|fraunces:400,500,600,700`

Document type scale (A4 / Letter):

| Element | Size | Style |
|---|---|---|
| Document title | 28–32pt | Fraunces 700, ink; one key word may be teal |
| Heading 1 | 20–22pt | Fraunces 700 |
| Heading 2 | 15–16pt | Fraunces 600 |
| Heading 3 | 12pt | DM Sans 600 |
| Body | 10.5–11pt | DM Sans 400, `#444441` |
| Small / caption | 9pt | DM Sans 400, `#6B6B60` |
| Eyebrow label | 8.5–9pt | DM Sans 600, UPPERCASE, letter-spacing 0.12em, `#1D9E75` |

- Numbers in tables use tabular figures and are right-aligned.
- Headings are sentence case ("Your practice, reconciled"), never Title Case or ALL CAPS
  (eyebrow labels are the only uppercase text).
- Maximum line length ~75 characters. Left-align body text; never justify.

## 4. Layout and spacing

- Page: A4 portrait, margins 20–25 mm. Single column for letters and reports;
  two columns only for one-pagers.
- Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64. Prefer more space over more lines.
- Corner radius: 8px inputs and small chips, 12px cards and callouts, 16px large
  panels, fully round for pills.
- Separate with 1px `#E4E4DC` borders and whitespace, not drop shadows. If a shadow
  is essential, keep it soft and teal-tinted: `0 30px 60px -20px rgba(15,110,86,0.25)`.
- One idea per section. Open each section with: eyebrow → Fraunces heading → one
  sentence of muted supporting text.

## 5. Document building blocks

**Letterhead / header** — logo top-left, firm details top-right in 9pt muted text,
closed by a 3px `#0F6E56` rule (the same header used on Reconciled invoices).

**Cover / hero block** — gradient `#0F6E56 → #0a3d2e`, white Fraunces title, 60–80%
white supporting line, optional translucent white (10%) metric tiles.

**Callout** — fill `#E1F5EE`, text `#0a3d2e`, radius 12px, padding 16px, no border.
Warning and danger callouts use their semantic fill and text colours.

**Table**
- Header row: fill `#F1EFE8`, 9pt DM Sans 600 uppercase, `#6B6B60`.
- Rows: 1px `#ECEAE2` dividers, no vertical lines, optional `#FAFAF8` zebra.
- Totals row: 2px `#0F6E56` top rule, DM Sans 600; grand total may sit on `#E1F5EE`.

**KPI tile** — white card, 1px border, uppercase 9pt label, Fraunces 700 value,
muted sub-line, small tinted icon well top-right.

**Status pill** — fully rounded, 9pt DM Sans 500, semantic fill + text
(Draft grey, Approved blue, Sent amber, Paid green, Overdue red).

**Checklist** — teal-tint header with "2 out of 3" progress and a thin teal bar;
done items show a filled teal tick box and struck-through grey text.

**Signature block** — name in DM Sans 600, role in muted text, a 1px ink line
above, date beneath. Leave 25 mm of clear space for the signature.

**Footer** — 8.5pt faint text: firm name · registration / VAT number · page X of Y.

## 6. Logo

- The mark is a `#0F6E56` rounded square (radius one-third of its width) holding a
  white tick with two short, 45%-opacity white lines.
- The wordmark is lowercase **reconciled** in Fraunces 500: "re" in ink `#1C1C1C`,
  "conciled" in teal `#0F6E56`. On dark backgrounds "re" becomes `#E8E8E4`.
- Clear space: at least the height of the mark on every side. Minimum mark size 24px / 7 mm.
- Never recolour, outline, stretch, rotate, add effects, or set the wordmark in
  another typeface or in capitals.

```svg
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Reconciled">
  <rect width="36" height="36" rx="12" fill="#0F6E56"/>
  <g transform="translate(8 8)" fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round">
    <path d="M4 10 L8 14 L16 6" stroke-width="2"/>
    <path d="M4 5 L9 5" stroke-width="1.5" opacity="0.45"/>
    <path d="M4 15 L7.5 15" stroke-width="1.5" opacity="0.45"/>
  </g>
</svg>
```

## 7. Voice and writing

- Plain, confident, specific. Lead with the outcome, then the detail.
- South African English: organisation, finalise, programme, cheque, licence (noun).
- Prefer concrete numbers to adjectives ("3 overdue VAT201s", not "several issues").
- Address the reader as "you"; the firm is "we". No exclamation marks, no hype
  words (revolutionary, seamless, game-changing), no emoji in formal documents.
- Use the proper names: SARS, CIPC, eFiling, VAT201, EMP201, EMP501, IRP6, ITR12,
  ITR14, POPIA, PAYE, COIDA.

Formats:
- Currency: `R 12 500.00` — "R", a space, thousands separated, two decimals in
  financial tables; whole rands (`R 65 625`) for headline figures.
- Always say whether an amount is **excl. VAT** or **incl. VAT**. Standard VAT is 15%.
- Dates: `27 May 2026` (day, month in words, year). Never `05/27/2026`.
- Time: 24-hour (`14:30`). Hours worked: one decimal (`87.5 h`).
- Percentages: no space (`15%`). Phone: `082 123 4567`.

## 8. Document recipes

| Document | Structure |
|---|---|
| Letter / engagement letter | Letterhead → date and addressee → subject line (Heading 2) → body → signature block → footer |
| Proposal | Cover block → "At a glance" KPI tiles → scope sections (eyebrow + heading) → pricing table → next steps callout → signature block |
| Report | Title + period → summary callout → KPI row → detail tables → notes → footer with page numbers |
| One-pager | Header with logo → teal headline → 3 benefit columns → proof number row → single call to action |
| Slide deck (16:9) | Title slide on the teal gradient; content slides on paper `#FAFAF8` with one idea, an eyebrow, a Fraunces headline and at most 5 bullets or one chart |

## 9. Do and don't

Do
- Keep at least 60% of every page as paper, white or empty space.
- Use one teal emphasis per view (a button, a rule, or one highlighted word).
- Right-align numbers; align decimals; show units and VAT status.
- Use semantic colours only for real status.

Don't
- Don't use stock-photo imagery, 3D illustrations, clip art or decorative icons.
- Don't use more than two typefaces or more than three text sizes per page.
- Don't centre long paragraphs or justify text.
- Don't put teal text on teal tint smaller than 10pt, or mint on white at any size.

## 10. Design tokens (copy-paste)

```css
:root {
  --rc-primary: #0F6E56;
  --rc-primary-hover: #0a5240;
  --rc-primary-deep: #0a3d2e;
  --rc-accent: #1D9E75;
  --rc-mint: #5DCAA5;
  --rc-mint-soft: #9FE1CB;
  --rc-tint: #E1F5EE;
  --rc-paper: #FAFAF8;
  --rc-band: #F1EFE8;
  --rc-surface: #FFFFFF;
  --rc-border: #E4E4DC;
  --rc-ink: #1C1C1C;
  --rc-body: #444441;
  --rc-muted: #6B6B60;
  --rc-faint: #9A9A90;
  --rc-warning: #BA7517;
  --rc-warning-fill: #FAEEDA;
  --rc-danger: #C2415F;
  --rc-danger-fill: #FBEAF0;
  --rc-info: #185FA5;
  --rc-info-fill: #E6F1FB;
  --rc-font-heading: 'Fraunces', Georgia, serif;
  --rc-font-body: 'DM Sans', Arial, Helvetica, sans-serif;
  --rc-radius-sm: 8px;
  --rc-radius-md: 12px;
  --rc-radius-lg: 16px;
}
```

## 11. Prompt to use with Claude

> Follow the Reconciled design guidelines at
> https://reconciled.co.za/brand/guidelines.md for colour, typography, layout,
> tone and number formats. Create a [document type] for [audience] about [topic].
> Use the letterhead, the eyebrow + heading pattern, and South African formats
> (R currency, 27 May 2026 dates, VAT shown explicitly).