Applications

13.1 Product UI

Covered in depth by UX principles, patterns and 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.

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 — 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.

⚠️ 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.