One system. Every page. No exceptions.
Every colour, size, border and motion the marketing site is allowed to use. Copy the values from this page; do not invent new ones. If a page needs something that is not here, it gets added here first.
- resources/css/marketing.cssThe tokens. Every utility on this page resolves to one of them.
- components/marketing/uiThe kit. Nine specimens build every page; there are no page-local variants.
- docs/design/marketing/DESIGN-SYSTEM.mdThe written rules this page renders.
Maximum content width in pixels, centred, with 30px gutters. Section owns the shell; no page hand-rolls it.
Top padding in pixels between sections. 150 before a shift in subject, 56 under the breadcrumb rule.
Radius in pixels, on buttons only. Dots and pills are 999px and everything else is square.
Backgrounds per page: paper and ink bands. A third surface is the one thing this system cannot absorb.
Palette
Two backgrounds only — paper and ink. Accent carries action and state, mint reads positive on ink, and the pass and fail pairs exist for the comparison specimen and nothing else.
Paper is the only light background. Panels are a single step down, and there is no third surface.
Page background.
Raised surface — the mega-menu, and nothing else.
Inset panels, table headers, hover fill.
The light band of the hatch.
Pressed or selected panel.
Internal dividers inside a bordered box.
List-row and table-row dividers.
Dividers drawn inside a panel.
Dashed placeholders and inactive chip borders.
Text and every 1px structural border. Four steps, darkest first.
Headings, outer borders, dark panels.
Body copy.
Mono labels and meta. 6.2:1 on paper.
Disabled state and far field. 4.6:1 on paper — not for small text on a panel.
The only values allowed on a #0C0C0A panel, alongside mint and warn.
Body copy on an ink band.
Meta and dimmed terminal output on ink.
Dividers on ink.
Action, active state, eyebrow. One accent, one hover, and two outcome colours for ink panels.
Primary action, active nav entry, eyebrow, focus ring.
Link hover.
A positive outcome on ink.
Terminal error text on ink.
The comparison specimen and nothing else. Never a page background, never a general good/bad tint.
Raw-engine column fill.
Failing sample text.
Failing column label.
Transglot column fill.
Passing sample text.
Success label and the live dot.
Type
Three roles, three families. Display sets every headline, body sets every sentence, and the mono label carries all system speech: eyebrows, meta, numbers, code.
Headlines and figures. Weight 800 for h1, h3 and numbers, 700 for section heads. Tracking is always negative.
Every sentence. 400 for prose, 500 for emphasis and small buttons, 600 for the CTA labels. Never set below 13.5px.
Uppercase system speech at 9.5–11px with .16–.2em tracking. The same family, mixed case and untracked, carries code and figures.
| Role | Utility | Size | Tracking | Line height |
|---|---|---|---|---|
| Statement hero — home page only Display 800 | text-hero | clamp(46px, 8.4vw, 132px) | -0.05em | 0.9 |
| h1 — page title Display 800 | text-h1 | clamp(42px, 5.2vw, 80px) | -0.035em | 0.95 |
| h2 — section head Display 700 | text-h2 | clamp(34px, 4.4vw, 60px) | -0.03em | 1 |
| h3 — card title Display 800 | text-h3 | 26px | -0.035em | 1.02 |
| h4 — row title Display 800 | text-h4 | 20px | -0.02em | 1.1 |
| Big sourced figure Display 800 | text-stat | clamp(38px, 4.4vw, 58px) | -0.03em | 1 |
| Inline figure — proof row Display 800 | text-figure | 26px | -0.02em | 1 |
| CTA band headline Display 800 | text-cta | clamp(38px, 5.2vw, 74px) | -0.035em | 0.95 |
| Lede Body 400 | text-lede | 19px | — | 1.5 |
| Body — large Body 400 | text-body-lg | 18px | — | 1.5 |
| Body Body 400 | text-body | 16px | — | 1.55 |
| Small — list rows, table cells Body 400 | text-small | 14.5px | — | 1.5 |
| Tiny — dense meta Body 400 | text-tiny | 13.5px | — | 1.5 |
| Label Mono 500 | text-label | 11px | 0.16em | 1 |
| Label — small Mono 500 | text-label-sm | 9.5px | 0.16em | 1 |
| Label — eyebrow Mono 500 | text-label-lg | 11px | 0.2em | 1 |
| Code and figures Mono 400 | text-code | 13px | — | 1.6 |
Geometry
Structure is drawn with borders, not shadows. Data sits inside one outer box with hairline dividers — never in a row of floating cards.
- SHELL
- max-width 1500px, centred, 30px side gutters. The Section component owns it — no page hand-rolls the shell.
- RHYTHM
- 130px of top padding between sections, 150px before a shift in subject, 56px between the breadcrumb rule and the hero.
- BORDERS
- 1px ink outside, 1px line inside. The mega-menu carries the only shadow in the system.
- RADIUS
- 2px on buttons, which own it. 999px on dots and pills. Everything else is square.
- LAYOUT
- Flex or grid with gap. Data lives in one bordered grid with hairline gaps, never in a row of floating cards.
- IMAGERY
- A hatched or dashed slot with a mono caption stands in for art. Never a drawn illustration; every image loads lazily.
hatch — repeating-linear-gradient(135deg, panel 0 9px, panel-2 9px 18px)
7×7px accent squares, offset −4px, on hero media only
Nine parts build every page
Each specimen below is live markup rendered by the same component the pages import — not a picture of one. Lift it as it is; the only variables are the words.
accent · ink · outline on paper; paper is the only button allowed on an ink band. Radius 2px, here and nowhere else.
chip: square, 1px border, mono. dot: 999px. A blinking dot means something is happening right now — never decoration.
Drops into the pipeline you already run
Eyebrow, heading, one sentence under 520px, and optional right-aligned mono meta on the same baseline.
eyebrow (label-lg, accent) → h2 → 16px sub. `as` drops it to an h3 when the outline needs one.
Native file formats, from JSON and Android XML to XLIFF 2.0, .NET .resx and Unreal Engine PO.
Words a month on the Free plan. It is a hard cap, so it stops metering instead of billing you.
Per word past your plan’s included words, with a spend cap you set yourself.
Three or four columns in one bordered box. Every figure names the file that proves it; a number without a source does not ship.
ink panel · rules rule-dark · body on-dark · a good outcome is mint · an error is warn. Those four are the whole palette inside it.
Ouvrez le panneau d’inspection pour examiner un segment
Ouvrez le panneau Inspector pour examiner un segment
The fail and pass pairs exist for this and nothing else. Samples are real output, so they take the body face with lang and dir set.
The Action runs push and pull on your own runner, so the translated locale files land in the repository they came from. Nothing leaves your version control.
Active row is an ink fill with paper text. Wired as a real tab set: roving selection, arrow keys, a labelled panel.
| Format | Extension | Plurals |
|---|---|---|
| JSON (flat) | .json | no |
| JSON (nested) | .json | no |
| Android XML | .xml | yes |
| iOS Strings | .strings | no |
Mono header on the panel tone, 13px row padding, real table markup. Figures always take the mono face so columns line up.
Every page opens with the crumb rule and closes with two to four cross-links. Both are real anchors — there is no clickable div on this site.
The same bar and footer on every page
Seven top-level entries, four of them opening the same mega-menu. The bar above this page is the specimen: it is fixed, paper, ruled 1px below, and no page adds, removes or relabels an entry.
Fixed, paper, 1px ink rule below, a 14px/30px row inside the same 1500px shell. Wordmark and version left, entries centre, Talk to sales and Start free right.
Product · Platform · Solutions · Developers · Pricing · Customers · Trust. The first four open the shared mega-menu on hover and on keyboard focus.
The active entry is derived from the URL by sectionForPath, not declared per page — accent, weight 500, 2px accent underline. Exactly one, or none on the home page and Contact.
Every page except the home page opens with the mono breadcrumb rule. Home is prepended for you; the last crumb is accent and carries aria-current.
The wordmark cell beside six link columns in one bordered grid, then the compliance row read from config/trust.php and the copyright rule. Every entry is a real anchor.
Every page ends with the same dark CTA band: 42px vertical rules, one paper button, one mono note. Only the words change.
Four keyframes, nothing else
Content that changes blurs in. Swapped text alternates between two identical keyframes so a re-render always replays. Nothing eases for longer than 550ms.
Any value that swaps: translated copy, the detail pane of a selected tab, a figure that just recalculated. The two keyframes are byte-identical so alternating the name forces a replay.
0.45s cubic-bezier(.2,.7,.2,1) · blur 12px → 0 · y 14px → 0
- Hello
- こんにちは
- Hallo
- Bonjour
- Hola
- مرحبا
- Olá
- 안녕하세요
- Ciao
- Привет
- नमस्ते
- 你好
- Merhaba
- Cześć
- Hej
- Xin chào
- Γειά σου
- שלום
One band per page at most, always linear, always duplicated content so the loop has no seam. The duplicate is hidden from assistive tech.
translateX(0 → −50%) · linear · infinite
Reserved for something genuinely happening right now — an open session, a running job. A static status marker does not blink.
1.4s steps(1) infinite · never on decoration
One curve: cubic-bezier(0.2, 0.7, 0.2, 1). Nothing in the system eases for longer than 550ms.
prefers-reduced-motion collapses every animation and transition to 0.01ms, once, in marketing.css. No component branches on it.
Declarative, second person, sourced
Every headline states what happens. Every number says where it came from. Mono labels speak like a system, not like a brand.
WRITE
- State what happens: “Translate on merge, commit the result back.”
- Address the reader as you, in the present tense.
- Put the real number in the sentence and name the file it came from underneath.
- Let mono labels speak like a system: SESSION METER, PATH 02, FAILURE CLASS 01.
- Name the trade-off before the reader has to ask for it.
- Say “in progress” when something is in progress.
NEVER
- Exclamation marks, emoji, or “revolutionary”.
- Adjective stacks — “powerful, seamless, enterprise-grade”.
- A figure with no source line under it.
- A certification, an uptime percentage or a customer count the repository cannot prove.
- Sentences that describe the page instead of the product.
- A new colour, font or radius to make one section feel special.
Every page, one chrome
Which patterns each page is built from. A new page picks from this column — it does not add a pattern of its own. The nav section is computed from the URL by the same function the top bar uses.
| Page | URL | Nav section | Patterns |
|---|---|---|---|
| Home | / | — | Statement hero, live translation demo, comparison pairs, terminal inset, marquee, stat grid |
| Product | /product | PRODUCT | Page hero, rail + detail, stat grid, cross-links |
| AI translation | /product/ai-translation | PRODUCT | Page hero, feature grid, comparison pair, dark inset |
| In-context editor | /product/in-context | PRODUCT | Page hero, feature grid, placeholder media, stat grid |
| Editor & workflow | /product/editor | PRODUCT | Page hero, feature grid, rail + detail |
| Glossary & terminology | /product/glossary | PRODUCT | Page hero, comparison pair, data table |
| Quality gate | /product/quality | PRODUCT | Page hero, comparison pair, policy rail, YAML inset |
| Developer platform | /product/developer | PRODUCT | Page hero, code insets, data table, cross-links |
| Features | /features | PLATFORM | Page hero, feature grid, comparison pair, stat grid |
| Languages | /languages | PLATFORM | Page hero, filterable data table, tier chips, marquee |
| Integrations | /integrations | PLATFORM | Page hero, category rail + detail, catalogue grid |
| Solutions | /solutions | SOLUTIONS | Page hero, segment rail + detail, cross-links |
| For developers | /solutions/developers | SOLUTIONS | Page hero, code inset, stat grid, first-week timeline |
| For localization managers | /solutions/localization-managers | SOLUTIONS | Page hero, rail + detail, data table, stat grid |
| For agencies | /solutions/agencies | SOLUTIONS | Page hero, rail + detail, data table |
| For open source | /solutions/open-source | SOLUTIONS | Page hero, eligibility grid, disclosures |
| For games | /solutions/games | SOLUTIONS | Page hero, format table, rail + detail |
| Changelog | /changelog | DEVELOPERS | Page hero, release feed, tag chips, policy grid |
| API changelog | /api-changelog | DEVELOPERS | Page hero, release feed, deprecation table |
| Design system | /design-system | DEVELOPERS | Token grids, type specimen, nine live specimens, inventory |
| Blog | /blog | DEVELOPERS | Page hero, featured post, topic filter, post grid |
| Blog post | /blog/{slug} | DEVELOPERS | Article shell: meta rail, prose, pull quote, related posts |
| Resources | /resources | DEVELOPERS | Page hero, featured dark inset, format filter, library grid |
| Ebooks & reports | /resources/ebooks | DEVELOPERS | Page hero, rail + detail, chapter list, request form |
| Pricing | /pricing | PRICING | Page hero, plan columns, rate card, comparison table, FAQ |
| Customers | /customers | CUSTOMERS | Page hero, case rail + detail, segment table, quotes |
| About | /about | CUSTOMERS | Page hero, comparison pair, milestone list, stat grid |
| Contact | /contact | — | Page hero, route rail, form, office list |
| Trust | /trust | TRUST | Page hero, control grid, posture table, disclosures |
| Trust centre | /trust-center | TRUST | Page hero, subprocessor table, document pack list |
| SLA | /sla | TRUST | Page hero, tier table, credit schedule |
| Open-source programme | /oss | TRUST | Page hero, eligibility grid, application form |
| Privacy policy | /legal/privacy | TRUST | Document shell: prose measure, anchor headings, TOC rail |
| Terms of service | /legal/terms | TRUST | Document shell: prose measure, anchor headings, TOC rail |
| Data processing addendum | /legal/dpa | TRUST | Document shell: prose measure, anchor headings, TOC rail |
| Cookie policy | /legal/cookies | TRUST | Document shell: prose measure, anchor headings, TOC rail |
Build the next page out of this file.
Start from the closest existing page, keep the bar and footer untouched, and reuse a specimen before you invent one.