TracePlot Design Guidelines

The single source of truth for what this site looks like and how it behaves. Every implementer reads this before touching a pixel. Every evaluator scores against it. Every design decision is traceable to a rule here.

This document supersedes any aesthetic judgment that conflicts with it. When you're tempted to "polish", check this doc first — most "polish" is adding noise.

---

1. The brand in one sentence

Editorial, warm, restrained, European. Think Linear crossed with Apple product pages crossed with a printed European supplement — not a bootcamp SaaS landing page. The product is regulatory compliance for import teams. These readers are skeptical, busy, technical. They respect clarity and distrust hype.

2. The subtraction principle

The single rule that governs everything: if an element doesn't earn its place, it's gone.

Good pages are what's left after you've removed everything that doesn't earn its place. Most "improvements" are subtractions. Before adding any chip, badge, pill, divider, gradient, shadow, eyebrow label, or decorative element, ask: what does this communicate that isn't already communicated? If the answer isn't immediate and specific, don't add it.

When in doubt, remove. When not in doubt, still consider removing.

---

3. Typography

3.1 Font families

• Display: Iowan Old Style → Palatino → Georgia → serif. Used sparingly — only for the hero h1 and section-level h2s. Never for h3 or below. Never for body text.
• Body: system-ui → Avenir Next → Segoe UI → sans-serif. Used for everything else: section eyebrows (if any), card titles, paragraphs, lists, tables, captions, nav, CTAs, forms, pricing, metadata.

Two families total. That's it. No third font. No icon font with text styling. No italic "accent" family.

3.2 Scale (tight)

The entire site uses this scale. There are no one-off text-[2.7rem] sizes. If a size isn't in this table, you don't use it.

Hero h1 is the only place that gets dramatic type. Sections h2s are restrained — they are not heroes. Everything h3 and below is modest body sans. No more clamp-to-the-sky display treatments on inner sections.

3.3 Uppercase / tracking / small-caps

Allowed in exactly one place: the section eyebrow label above the section h2 — e.g., text-[0.78rem] font-bold tracking-[0.18em] uppercase in accent green, used ONCE per section at most.

Banned everywhere else. No small-caps metadata for dates, no all-caps badges, no tracking on body text, no uppercase h3, no small-caps "PASS" labels in paragraphs.

3.4 Measure

Body paragraphs inside a single-column article or a centered content block use max-w-[68ch]. Lead paragraphs (the intro sentence under a section h2) may go to max-w-[56ch] for visual weight. No wider. No narrower unless the container dictates it.

---

4. Color

4.1 Palette (tight)

That's 8 colors. No other hex values. No additional gradients. No gold undertone. No dark-mode variants.

4.2 Color economy

• Accent green is used for: CTAs, links, active toggle, eyebrow labels, and nothing else.
• No colored badges like "New" or "Beta" or "Launching autumn".
• No colored status chips like green "PASS" / amber "FLAG" in body copy. Those belong in real product UI, not on a marketing page.
• No full-bleed color backgrounds for sections. The entire page sits on #f4efe6. Alternating section backgrounds are allowed only via a subtle bg-[rgba(255,255,255,0.4)] tint for a single "feature" section if genuinely needed — not all sections.

---

5. Layout and spacing

5.1 Container

Content max-width: 1160px. Outer gutter: clamp(1.25rem, 3vw, 2rem). Everything sits in this single container.

5.2 Vertical rhythm

Every section uses py-16 md:py-24. That's 4rem mobile / 6rem desktop of top and bottom padding, with no exceptions. The hero may take extra top padding to clear the sticky header. The final CTA section uses the same rhythm.

No ad-hoc pt-[4.5rem]. No max-[719px]:pt-14. One token. Every section.

5.3 Inter-element rhythm inside sections

• Between section eyebrow and section h2: mb-3 (eyebrow to h2)
• Between section h2 and lead paragraph: mt-3
• Between lead and the main content block: mt-10 md:mt-14
• Between grid rows inside a content block: gap-8 md:gap-10
• Between paragraphs: margin from the typography system, no manual mb-4s

5.4 Horizontal alignment

• Sections are left-aligned by default. Eyebrow + h2 + lead sit on the left, max-w-[56ch] for the lead.
• Centering is allowed only for: the final CTA section (one reason: conversion focus), and the pricing toggle. Everything else is left-aligned.
• No center-aligned section headers. No center-aligned diagnostic questions. No center-aligned paragraphs.

---

6. Containers and decoration (forbidden list)

6.1 Cards

A card is legitimate only when its content is a distinct container:

• A pricing plan (one of several compared offers)
• A single FAQ item (optional — can also be plain row with a divider)
• Nothing else

Forbidden card uses:

• Hero card wrapping eyebrow + h1 (that's a region of the page, not a container)
• Section-header card (bordered box around an eyebrow + h2)
• Diagnostic cards wrapping each "Is this you" question
• Content cards wrapping plain text blocks
• Nested cards inside a card
• Cards with gradient backgrounds
• Cards with drop-shadows larger than 0 1px 2px rgba(0,0,0,0.03)
• Cards surrounding a TOC / sidebar

When you're tempted to wrap something in a card, consider: what if this were just flat type on the page? Usually the answer is: it's cleaner.

6.2 Pills, badges, chips

Allowed: the "Most teams start here" pricing highlight, the segmented control buttons in the pricing toggle, and the accent pill on primary CTAs.

Forbidden: trust bar pills (Designed for TRACES submission, etc), "Launching autumn 2026" standalone pills, "01 / 02 / 03" step pills, section eyebrow rendered as a rounded pill (the eyebrow is plain small-caps text, not a pill), status chips in copy.

6.3 Dividers and rules

Allowed: a single hr or border-t between major sections only if the whitespace alone doesn't provide enough visual separation. On a tight rhythm of py-24, the whitespace usually does provide it.

Forbidden: decorative border-b under a hero, multiple rules within one section, vertical dividers between columns, decorated borders with gradients, rules with icons in the middle.

6.4 Shadows

Allowed: shadow-card = 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(22, 49, 42, 0.04) on pricing cards only. Primary CTA pill gets a subtle shadow-sm.

Forbidden: shadow-floating, large glowing shadows, multiple layered shadows on the same element, shadows on text, drop shadows on icons.

6.5 Gradients

Allowed: a single extremely subtle background gradient from #f4efe6 to rgba(18, 114, 95, 0.02) only if it's used sparingly as the full-page background. Most pages don't need it.

Forbidden: gradient backgrounds on sections, gradient buttons, gradient text, radial gradients as decoration, gradient masks on anything.

---

7. CTA strategy

7.1 Count

The entire landing page has this CTA budget:

1. Hero CTA — one primary pill button
2. Final CTA at the bottom — one primary pill button
3. Sticky header CTA — the same primary pill button (mirrors the hero)

That's it. Three CTA entry points total. No CTAs after how-it-works. No CTAs after is-this-you. No CTAs inside the FAQ. No "see pricing" ghost button next to the final CTA.

When a user finishes reading a section, they either scroll or they click the sticky header. They don't need another button at every section break.

7.2 CTA styling

• Primary: accent green pill, white text, min-h-[44px], rounded-full, px-5 py-3, shadow-sm, hover:bg-accent-strong, :focus-visible outline in white (not green — white is visible on the green pill).
• Ghost variant: keep the component for places that truly need a secondary (like the docs index linking out) — transparent background, accent-strong text, thin accent-strong border, underline on hover.
• Link variant: underline + accent-strong color + underline-offset-[0.14em] — used for in-copy links.

7.3 CTA labels

• Hero: Reserve your spot
• Final CTA: Reserve your onboarding slot (slightly different to reinforce "act now")
• Sticky header: Reserve your spot (matches hero)
• Links in body: use specific verbs — Read the methodology, See pricing, Read the FAQ. No Learn more, no Click here.

---

8. Imagery

8.1 Count

Maximum 5 images on the landing page:

1. Hero aerial
2. Step 1 "Collect" visual
3. Step 2 "Verify" visual
4. Step 3 "Submit" visual
5. Optional: a closing visual if one genuinely adds narrative weight

No decorative stock. No abstract gradients as "visuals". No icon grids.

8.2 Image treatment

• Real <Image> via next/image with explicit width and height
• sizes attribute set for responsive resolution
• Framing: rounded-[14px] (subtle, not pillowed), no border, no shadow
• Alt text is descriptive, not decorative
• Never blur-loaded with a placeholder color that flashes

8.3 Text in images

Zero. Every label, badge, pin, status, sidebar item, heading that appears to overlay an image is rendered in HTML/JSX on top of the image. Images are the photographic or illustrative layer only.

---

9. Anti-pattern reference (specific things the old site did wrong, now banned)

These are specific past mistakes. Call them out by name so we don't repeat them.

1. "Launching autumn 2026" as a vertical oval next to the hero. The pill was a sibling of the ProductMock inside a flex row, and rounded-full + w-fit clipped it into a 400px-tall ellipse. Never put a rounded-full pill as a flex sibling to a block element.
2. Trust bar of 4 pill chips under the hero. Every chip a small pill with its own border. Total visual noise. Deleted. If trust indicators matter, they're inline dot-separated text or not present at all.
3. Accordion StepFlow that hides 2/3 of its content behind click gates. Marketing content is for scanning. Use static grids. The FAQ is the one legitimate accordion.
4. Eyebrow + display-clamp h1 + muted subhead + thin bottom rule hero composition on legal pages. Legal is document mode, not marketing mode. See the Document mode vs Marketing mode section in launch-loop.md.
5. "Is this you?" as 3 dense text cards. Plain numbered questions on the page. No cards.
6. "Pay per check" as a pricing mode name. Renamed to Per verification. "Check" was read as "bank check".
7. CTA row after every section. Deleted. See §7.
8. Header deadlineNote crammed inline as plain <p> in the nav bar. Deleted. Deadline belongs in the hero eyebrow if anywhere.
9. Headers that collapse the logo on scroll, causing nav items to slide horizontally. Caused CLS and UX jitter. Fixed via grid-cols-[auto_1fr_auto] so nav is anchored regardless of logo width. Logo never collapses now.
10. Decorated tables with card wrappers, rounded corners, gradient scroll hints. Document-mode and marketing-mode tables both use plain borders, cell padding, no wrapper card.
11. Small-caps "LAST UPDATED: 2026-04-05" as metadata above legal article bodies. Plain body paragraph, nothing fancy.
12. TOC aside stretched to article height because grid default align-items: stretch. On a 13k-px article, the aside becomes a 13k-px empty card. items-start fix mandatory on any two-column grid where one column is shorter than the other.
13. StepFlow pills "01 / 02 / 03" or "COLLECT / VERIFY / SUBMIT" above each step card. The h3 title of the step is enough. Step numbers optional and subtle, not pill-wrapped.
14. Footer with 3rem between every link because of aggressive touch-target padding. Touch target enforced via min-h-[44px], visual padding stays at py-1.5 or py-2, not py-3.
15. Invisible ghost CTAs from a className collision between text-white in the base and text-accent-strong in the ghost override. Refactored to emit one colour className per kind.
16. canonical and og:url hardcoded to / in root metadata, inherited by every page. Every page sets its own via generateMetadata.
17. Fake dashboard ProductMock with invented company names and status chips in the hero. Killed in favor of a real image (hero-aerial.jpg) plus sparse HTML overlays.

---

10. How to evaluate against these guidelines

For any page or section, ask these questions in order:

1. Does it breathe? If a reader can't scan it in 10 seconds and feel calm, it's too dense.
2. Does every element earn its place? Go element by element. Remove anything that doesn't answer "what does this communicate that isn't already said?"
3. Is there ONE primary message per section? If there are two competing focal points, kill one.
4. Is the typography tight? Check the scale — no one-off sizes.
5. Is the CTA count under 3? Hero, sticky header, final. If there's a 4th, delete it.
6. Is the color count under 10? Including accent-soft, border, etc. If not, simplify.
7. Are there any cards that aren't genuine containers? Strip them.
8. Are there any pills that aren't genuine indicators? Strip them.
9. Does any text above h3 use display serif? Strip to body sans.
10. Does any section look like it's competing with another for attention? Equalize or hide one.

A page that passes all 10 is launch-ready on the design axes. The rubric in launch-loop.md handles the other axes (a11y, tech polish, responsive, copy).

---

11. References

• Timon.chat — conversational Spanish copy, one font family at modest sizes, 6 CTAs total on the whole page, sections separated by whitespace and cream/white alternation, coral accent used only functionally, section-py-mobile: 3rem / desktop: 5rem rhythm.
• Stripe.com — italics for voice not for decoration, hero h1 restrained (not dramatic), grayscale dominant with single accent, flat architecture throughout, customer logos as inline social proof, no feature comparison tables on the home page.
• Linear.app — tight heading scale, generous whitespace, product visuals as the one visual variety, CTAs clustered at decision points not scattered.
• Apple product pages — whitespace as design, imagery full-strength at the moments of peak attention, copy short and declarative.

All four share: restraint. Subtraction. Whitespace. One message per section. TracePlot does the same, with its own serif-first editorial brand personality layered on top.