# 13 · Applications

> The system applied to each surface Since Labs actually ships.

---

## 13.1 Product UI

Covered in depth by [UX principles](/guide/ux-principles/),
[patterns](/guide/patterns/) and [components](/guide/components/).

The short version: paper ground, 264px `paper-base` sidebar, `PageHeader` on
every page, white panels with hairline borders, terracotta reserved for the
active nav row, the primary action, and the focus ring.

---

## 13.2 Marketing site

The site is the brand at full volume — it is the only surface that gets the hero
scale and the full editorial treatment.

- Hero: Lora at 42–52px, one terracotta serif-italic phrase, on `paper-base`.
- Eyebrow above it: `// AI NATIVE LAB`, 12px, `+0.08em`, muted.
- Alternate section grounds between `paper` and `ink` — the dark sections are where terracotta lifts to `#E07A38`.
- One CTA style: pill, `accent-ink` fill, near-white label, verb first. "Book your AI Audit", "Get a demo". **Never** "Learn more", "Get in touch", "Contact us".
- Proof stats: large tabular figures in terracotta, muted labels beneath.
- Footer: `© 2026 Since Labs · The command center for AI agents · AI Native Lab`

---

## 13.3 Email

Email is the most constrained surface in the brand. Assume no webfonts, no CSS
variables, no flexbox, and a dark-mode client that will invert things behind your
back.

**Rules**

- Inline styles only. No `<style>` block, no external CSS.
- **Hex literals only** — custom properties do not resolve in most clients.
- System fallback stacks, not Lora or DM Sans.
- `max-width: 480px`, centred, single column.
- The `// Since Labs` lockup at the top, 18px, semibold, in terracotta.
- One CTA button: `background:#A34A1F`, white label, 8px radius, 10px/18px padding — **`#A34A1F`, not `#C4602A`**, because the label must clear AA and email has no fallback for a failed contrast check.
- Always print the raw URL under the button. Buttons get stripped; links do not.
- Always ship a plain-text part.

**Current state:** `src/lib/email/templates.ts` uses `#C4602A` for the CTA fill
and `#666666` for helper text. Both should move to `#A34A1F` and `#6B6762`
respectively — see the [app audit](/audit/).

**Subjects** are sentence case, specific, and name the product:
`Reset your Since Labs password`, `Set your Since Labs password`. Never
`Action required`, never an emoji.

---

## 13.4 LinkedIn and social

**Cover image (1128×191)** — `ink` ground. Left: eyebrow in muted warm grey, then
a Lora headline in `on-ink`. Right: one or two proof stats with terracotta
numbers and muted labels. No photography, no gradients, no decoration.

**Post images** — one of two grounds, never a third: `paper` `#F7F5F2` or `ink`
`#1A1917`. Same three faces. Logo in the same corner every time.

**Carousels** — 4–6 slides maximum, one idea per slide. Slide 1 mirrors the site
hero: eyebrow + Lora headline + one terracotta phrase. Numbered slides use
terracotta numerals. Consistent footer with mark and handle.

**Quote cards** — `ink` ground, 2px terracotta left border, Lora italic for the
quote, DM Sans for attribution.

**Stat cards** — the number is the image. Large, tabular, `accent-lift` on dark
or `accent-ink` on light; label in muted beneath.

**Profile image** — `since-tile-ink.svg` at 400×400, generous padding.

---

## 13.5 Decks and grant applications

- 16:9, `paper` ground, `ink` for section dividers.
- Title: Lora 40–48px. Section heading: Lora 28px. Body: DM Sans 18px minimum — **a deck is read from the back of a room**.
- Maximum one idea per slide. If there are two, there are two slides.
- Every claim gets a number and a source. Grant panels check.
- The `//` device opens a section divider. Once per deck section, not per slide.
- Charts follow [colour § 4.6](/guide/color/#data-visualisation) — five series maximum, labelled directly.
- Footer: mark, slide number in mono, nothing else.

---

## 13.6 Documents and reports

Client-facing PDFs — the AI Audit report above all — are the surface where the
editorial character does the most work.

- `paper` ground, generous margins, 62ch measure.
- Lora for the report title and section headings; DM Sans for body at 11pt.
- Findings as a ranked list with the hours-reclaimed figure set large in terracotta.
- Tables follow the product's table rules: uppercase muted headers, tabular figures, hairline rules.
- Cover: `ink` ground, wordmark top-left, Lora title, one terracotta phrase, client name and date in mono at the foot.

---

## 13.7 Canva brand kit

Set this up once so non-designers cannot go off-brand by accident.

| Slot | Value |
|---|---|
| Primary | `#C4602A` (fills) |
| Primary — text/CTA | `#A34A1F` |
| Background | `#F7F5F2` |
| Dark | `#1A1917` |
| Secondary text | `#6B6762` |
| Accent light | `#F0E4DA` |
| Heading font | **Lora** |
| Body font | **DM Sans** |
| Accent font | **Geist Mono** |
| Logos | `since-wordmark.svg`, `since-wordmark-on-ink.svg`, `since-tile-ink.svg` |

⚠️ The existing Canva setup note in Notion lists **Cormorant Garamond + Inter**
and `#C4561A` / `#F0EBE3`. Those are wrong — replace them with the table above.

**Templates to build:** LinkedIn cover · post (paper) · post (ink quote) ·
carousel cover · carousel body · stat card · one-pager.

---

## 13.8 Slack, Notion, GitHub

- Workspace icons: `since-tile-terracotta.svg` — it reads at 20px in a sidebar.
- Notion page icons: emoji, matching the product convention.
- GitHub org avatar: `since-tile-ink.svg`.
- Repo READMEs open with the wordmark, one line on what the repo is, then how to run it.

---

## 13.9 Merch and physical

Rare, so keep it disciplined.

- One-colour terracotta on natural cotton or unbleached card, or one-colour `on-ink` on charcoal.
- The mark alone, not the wordmark, on anything small.
- No full-colour print, no gradients, no all-over patterns.
- Business cards: `paper` stock, wordmark, name in DM Sans, role in mono, nothing else.