Harbor

Surfaces

Text levels

Accent — single hue, 4 states

Semantic trio (no info level)

Accessibility verification (dark mode)

All sizes use fluid clamp() — no fixed pixel declarations. Instrument Serif italic carries editorial emphasis; Inter handles body. Italic is reserved for display headlines and pull quotes — never body copy.

Type scale

Font families

Weight scale

Line heights & letter spacing

14-step scale on a 4px base. Generous density — whitespace IS the design. Section padding uses fluid clamp().

Section & content tokens

Default elevation via background surface shift. Shadows reserved for floating elements only. All shadows are warm — derived from the teal primary. Cold #000 rgba shadows are banned.

Radii scale — 6 steps

Borders

Use motion sparingly: hover state changes, scroll-spy active nav, section reveal on enter. Reduced-motion fallback: fade-only at --duration-fast.

Duration tokens

Easing tokens

Reduced-motion rule

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--duration-fast) !important;
  }
}
/* Remove transform animations entirely — do not just shorten them */

Banned motion patterns

Phosphor (light or regular weight) is the sole icon family for Harbor. The light + regular weights carry editorial warmth and rounded character that match Harbor's serif italic display and warm oklch shadows. Stroke: 1.5px. Grid: 24px (16px for inline UI). Color: currentColor only — never hex. Line icons only — no filled icons except severity badges.

Sample icon set — Phosphor light weight, 1.5px stroke, 24px grid

One primary CTA per section. Action-first verbs. Italic serif on key words only. Numbers over hyperbole. Max line: 68ch paragraphs, 56ch leads, 52ch pull quotes.

Banned CTA verbs

Allowed CTA verbs

1. Button

4 variants × 3 sizes × 6 states. Arrows ONLY on navigation CTAs — never on submit buttons. Never two primary buttons adjacent.

2. Icon button

3. Field (text input + textarea)

Labels ALWAYS above and visible. Floating labels are banned. Hint text below. Error text replaces hint.

4. Selection controls

5–6. Tag / Badge / Chip

7. Avatar

Initials only by default. Two-letter monogram on warm tint. Stock photos are banned (governance rule).

8. Pull quote

9. Card variants (7)

10. Alert

11–12. Toast & Tooltip

15. Tabs

16. Loading states

18. Process diagram

Any Harbor marketing page is assembled from exactly 6 section templates. The AI assembles — never invents new section types.

Harbor sells marketing pages, case studies, and pricing pages that get printed. Every Harbor product ships @media print rules by default. Case studies and pricing pages must print to a single PDF that's pitch-deck quality.

@media print {
  /* ── Hide chrome and CTAs ── */
  .nav, .reading-progress, .theme-toggle,
  .cta-block, .newsletter-block,
  .floating-action { display: none; }

  /* ── Force light mode for printing ── */
  :root {
    --color-bg: #FFFFFF;
    --color-surface: #FAFAF8;
    --color-text: #1A1A1A;
    --color-text-muted: #6B6B6B;
  }

  /* ── Expand body to full printable width ── */
  .article-body,
  .case-study-body { max-width: none; }

  /* ── Show URLs after every external link ── */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    color: var(--color-text-muted);
    font-size: 0.85em;
  }

  /* ── Page breaks ── */
  h1, h2 { page-break-after: avoid; }
  .case-study-block,
  .pricing-tier { page-break-inside: avoid; }
  .section-divider { page-break-before: always; }

  /* ── Pull quotes keep typographic identity ── */
  .pull-quote {
    font-family: var(--font-serif);
    font-style: italic;
  }

  /* ── Drop warm oklch shadows (printer can't render warmth) ── */
  * { box-shadow: none !important; }
}

Domain components are composed FROM Layer 1–3 using Harbor's rules. Each inherits the states and accessibility requirements of its constituent primitives. Below are 5 named examples for editorial / marketing products.

25. Blog post card

Composes: Card-Interactive (9c) + Avatar (7) + display serif h2 with italic emphasis

26. Author bio block

Composes: Avatar-xl (7) + body paragraph + icon buttons (2). Initials variant default — real photos only for case-study attribution.

27. Service tier card

Composes: Card-Service (9d) + Pull quote (8) + numbered list. 2-col grid on desktop — NOT 3-col.

28. Case study testimonial block

Composes: Card-CaseStudy (9e) + Pull quote (8) + Card-Stat (9g). Outcome stat in display serif. No quote marks.

29. Editorial newsletter inline block

Composes: CTA Block (template 06) + Field (3) + Button (1). Appears ONCE per article, after 60% scroll. Never as popup, sticky bar, or scroll-triggered modal.

WCAG 2.1 conformance

• Body text ≥ 4.5:1 (AA). Primary body text achieves AAA (15.8:1). All Harbor default pairings verified in §1.1 table.
• Large text (18pt+ or 14pt bold) ≥ 3:1. Harbor display headings meet AAA at every viewport width.
• Non-text UI (icons, focus rings, chart elements) ≥ 3:1. --color-primary on --color-bg = 9.8:1.
• Focus indicator: 2px outline, offset 2px, --color-focus-ring (teal at 60% opacity). Applied to all interactive elements.
• Focus ring uses :focus-visible (keyboard users only) — pointer devices don't see the ring.
• Skip-to-content link at top of every page. Present in this spec page.
• All icon-only buttons have aria-label. Decorative SVGs have aria-hidden="true".
• All form fields have programmatic labels via label[for]. Floating labels are banned in Harbor.
• Live regions for toasts, async results, validation errors (aria-live="polite" default; "assertive" for errors).
• prefers-reduced-motion honored — transform animations removed entirely (not just shortened).

Keyboard navigation map

Screen reader requirements

SemVer policy

Deprecation policy: deprecated tokens/components ship for 2 MINOR versions before removal. Deprecation warnings logged in console at build time.

Harbor governance overrides (additions to universal gates)

• Warm oklch shadows enforced — any cold #000-based rgba shadow fails CI
• Single accent enforced — any secondary accent ramp fails lint
• Typography is fluid clamp — any --text-* declared in fixed px fails lint
• Serif italic display reserved for editorial emphasis — no italic body class allowed
• Floating label class banned — fails component lint
• Indigo/purple banned in any token — fails token lint
• Avatar component defaults to initials variant — stock-photo variant fails review
• One primary CTA per section — template lint flags multi-primary rendering
• Hero variants limited to template 01 (Hero Editorial) — no carousel hero in compiled templates

Changelog

When using Prompt 1b (Bring Your Own Colors variant), your supplied palette must cover all 16 semantic roles below. Prompt 1b validates coverage before generating tokens.css.

Rejected palettes (Prompt 1b will fail)

Pick Harbor if the product is a marketing site, editorial site, brand-forward portfolio, services firm, agency site, content publication, blog, or documentation-marketing hybrid. Reader spends 1–3 minutes per session, primarily reading.

Sample adjectives that route to Harbor

Archetype-selection aid (Finding 5 demoted-adjective routing). If three or more of your brand adjectives are in this list, Harbor is likely your archetype.

Real-world examples

Calibrate against these public sites that exemplify Harbor's principles.

• Stripe.com homepage — single accent, generous whitespace, serif italic display emphasis
• Linear.app marketing site — restrained palette, atmospheric case studies, sparse iconography
• Vercel.com marketing — single hue, asymmetric splits, no gradient circle clichés
• Apple.com (selected product pages) — editorial rhythm, product-as-hero without UI noise
• Mailchimp brand site — warm, illustrated restraint, curated voice
• Notion.so marketing — quiet palette, generous type scale, atmospheric section breaks
• Pentagram, IDEO, Instrument — most agency portfolio sites follow this pattern naturally

Do NOT pick Harbor if…

• Users spend hours per session doing tasks → Sentinel (compact density, multi-ramp, data UI)
• Touch targets, gestures, bottom nav matter → Current (44px enforced, mobile-first)
• Information density beats whitespace → Lattice (max density, data-explorer)
• Body text IS the hero (docs, long-form prose) → Meridian (utilitarian headings, body-as-hero)
• You need 9-step color granularity for status / severity / charts → Sentinel
• Mobile-first consumer app with bold saturation → Current

When teams force Harbor onto the wrong use case, predictable failures appear in this order. Use these as early-warning signs that the archetype is wrong — not as bugs to fix.