# MARLO DESIGN.md

marloai.com design system · published 2026-07-13 · take it, it is easier to copy than to hold.

This file is the complete system behind marloai.com: every token, the type scale, the one card, the motion rules, the copy law, and the refusals. A designer or an AI agent can rebuild the site's look from this file alone. It is published at marloai.com/DESIGN.md and explained at marloai.com/brain. Facts about the company live in marloai.com/llms.txt.

---

## 1. Point of view

- Warm editorial light mode. Paper, ink, one teal. Never a dark theme, never a glow.
- Two typefaces: Inter speaks, JetBrains Mono measures. Mono carries eyebrows, stat labels, numerals, file paths, provenance.
- The visual world is physical objects, photographed: real renders, real product surfaces, real photography. Never a gradient placeholder where a render belongs.
- Results before mechanism. Say what happened, then how.
- Conviction comes from size and space, not boldness. Font weight stops at 600, everywhere.
- Demo data is fictional, always, and disclosed. The demo brand is Pour Co, a fictional 124-location coffee brand (persona: Jasmine Park, VP Marketing; markets CA/TX/FL). Its competitors are fictional too: Vice City Roasters, Coaster Coffee, Boondocks Coffee, Neon Grove. No real brand ever appears in a mockup.

## 2. Color

One accent. Everything else is ink on warm paper.

| Token | Value | Role |
|---|---|---|
| `--color-accent` | `#14B8A6` | THE accent. Active state, delta, CTA, the one thing to read next |
| `--color-accent-dark` | `#0D9488` | hover/pressed accent, accent text on light tints |
| `--color-accent-light` | `#CCFBF1` | selection, soft accent tint |
| `--color-text` | `#0F172A` | ink |
| `--color-text-sec` | `#475569` | secondary ink (body) |
| `--color-text-muted` | `#94A3B8` | muted ink (labels, captions) |
| `--color-bg` | `#FAFAFA` | page. Warm paper, not cold SaaS gray |
| `--color-surface` | `#FFFFFF` | cards, framed surfaces |
| `--color-surface-alt` | `#F4F4F5` | alternating section background |
| `--color-border` | `#E4E4E7` | 1px lines |
| `--color-border-light` | `#F4F4F5` | hairlines inside cards |
| `--color-sidebar-bg` | `#0F172A` | dark interiors inside mockups and terminal cards only |

Rules: never introduce a second accent. Tints derive from the accent via `color-mix()`. Accent text on white uses `--color-accent-dark` for contrast. Sections alternate only between `--color-bg` and `--color-surface-alt`.

## 3. Typography

Faces: `Inter` (with `opsz` axis; headings at optical size 32) and `JetBrains Mono`. Font features: `cv11 ss01 ss02`; tabular numerals (`tnum`) wherever digits align.

Weight law: 600 maximum anywhere. 400 body, 500 quiet emphasis, 600 headings, numbers, eyebrows. Zero 700.

One size per role:

| Role | Size | Line height | Tracking | Weight |
|---|---|---|---|---|
| H1 | `clamp(36px, 4.2vw, 58px)` | 1.05 | -0.03em | 600 |
| H2 | `clamp(30px, 3.6vw, 50px)` | 1.06 | -0.028em | 600 |
| H3 | `clamp(19px, 1.6vw, 23px)` | 1.25 | -0.015em | 600 |
| Lede / hero sub | `clamp(17px, 1.35vw, 19px)` | 1.55 | 0 | 400 |
| Body | `15px` (16px only as body-lg) | 1.6 | 0 | 400 |
| Caption | `13px` | 1.5 | 0 | 400 |
| Eyebrow | `11px` mono | 1 | 0.18em, uppercase | 600 |
| Mono floor | `11px` | 1.5 | 0.02em | 400 to 600 |

The mono floor is absolute: no mono below 11px anywhere, mockup interiors included.

Measures: display headings 20ch, hero subs 44ch, ledes 58ch, long-form prose 65ch.

## 4. The eyebrow (exactly one form)

```css
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--color-accent);
  flex-shrink: 0;
}
```

Text is always muted, never teal. The 24px rule is the only accent. No dots, no pills, no borders, no other tracking. Centered sections keep the rule.

## 5. The card (there is one)

```css
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, .02),
    0 8px 16px rgba(15, 23, 42, .04),
    0 24px 48px rgba(15, 23, 42, .06);
}
```

Radii: card 20px, nested elements 12px, chips and badges 8px, buttons full pill (999px). The three-layer shadow is the only frame shadow; small floating tiles may use `0 8px 22px rgba(15, 23, 42, .10)`. No teal glow shadows.

## 6. The section

```css
.section { padding-block: clamp(72px, 10vw, 132px); }
.container {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}
```

Header stack, in order, always: eyebrow, then H2 at 20px gap, then lede at 18px gap. One idea per section. Backgrounds alternate paper and surface-alt; the closing CTA band goes dark (deep teal-black radial) as the single dark moment on a light site.

## 7. Buttons

- Primary: full pill, ink background (`--color-text`), white 14px/600 label, arrow glyph that slides 3px on hover, background shifts to `--color-accent-dark` on hover, translateY(-1px).
- Quiet: bare text link, 14px/500 secondary ink, arrow slides on hover.
- On dark bands the primary fills with the accent and uses near-black text.
- Mobile: primary CTAs go full width, min-height 48px; all tap targets at least 44px; inputs at least 16px font.

## 8. Motion

Four durations, one curve:

| Token | Value |
|---|---|
| `--motion-instant` | 60ms |
| `--motion-fast` | 120ms |
| `--motion-medium` | 240ms |
| `--motion-slow` | 480ms |
| `--ease-marlo` | `cubic-bezier(0.22, 1, 0.36, 1)` |

Rules:

1. Interface motion stays under 300ms; only ambient chart draws may run longer.
2. Animate transform and opacity only.
3. Never ease-in. Things arrive; they do not wind up.
4. Scale enters at 0.95, never from 0.
5. Staggers run 30 to 80ms apart.
6. Hover effects gate on `(hover: hover)`.
7. Reduced motion means gentler, not zero; content never depends on motion.
8. Everything meaningful is prerendered HTML in its final state. Entrance animation is an enhancement layered on top, armed only for content still below the fold, always with a failsafe timer so nothing can sit invisible.

## 9. Copy law

Budgets are hard limits, not targets:

| Element | Max words |
|---|---|
| Hero sub | 35 |
| Section lede | 45 |
| Any paragraph | 30 |
| Card body | 25 |
| Eyebrow | 3 |

- No em dashes and no en dashes, anywhere, ever. Use a comma, a colon, or a period.
- Banned words: `infrastructure`, `connect`, `smarter`, and `agency` as a self-label (fine when addressing agencies as an audience).
- Memory language: lead with "learns what sells"; "remembers what worked" is a sub-beat, never a headline.
- Results before mechanism. One idea per sentence. Numbers are canonical and identical on every page.
- Demo numbers are illustrative and every fictional brand is disclosed as fictional.

## 10. The refusals

The blacklist. Each of these appeared in a draft and died in review:

1. The dark hero with a purple glow and a spotlight.
2. Icons orbiting a glowing core.
3. Beams, spotlights, particle fields.
4. Sparkle icons meaning intelligence.
5. Fake testimonials and invented logos.
6. A second accent color.
7. Gradient placeholders posing as product.
8. Font weight 700.
9. Em dashes.
10. Mono type below 11px.

## 11. Verification

A page is done when, and only when:

1. The build is green and every route prerenders as full HTML (no client-only islands).
2. Gates on the BUILT output return zero: em dashes, banned words, real brands in demo data, weights over 600.
3. It is captured full-page at 390, 768, and 1440 wide, after a slow scroll with images settled.
4. `scrollWidth <= viewport` is asserted programmatically at every width. Horizontal page scroll is a defect, always.
5. A human reads every capture, then re-checks any suspected defect live in the DOM, because stitched captures lie: sticky headers stamp mid-page, headless renders skip backdrop blur, and scroll reveals race the stitch.

---

Questions, or want the system pointed at your brand: hello@marloai.com. Start at marloai.com/brain.