Meridian, the design system.
How anything Vyntel looks, reads and moves. This page renders the system; the same rules are published as files so that people and agents working on a Vyntel surface start from one place: DESIGN.md, tokens.json, voice.md and checklist.md. Version 2.1.0.
Direction
Thesis. Vyntel is an atlas of software: a small number of well-made instruments, indexed plainly, for people everywhere. The site is a reference work first and a pitch second.
Own world. Printed atlases and gazetteers, with their cool bright paper, black type and one blue for water and graticule. Airmail stationery. Railway timetables. The terminal. The printed field manual. Not a dashboard, not a deck.
Form. Editorial. Hairlines and a double rule divide; an asymmetric twelve-column grid; a serif for reading; a grotesque for headlines; one ultramarine used sparingly.
Finish. Still. Only feedback moves. Selection, caret, focus ring and underlines are themed. Screenshots sit in figures with a hairline border and nothing drawn around them.
Scope and exceptions
Scope. This system governs vyntel.com and any other Vyntel company surface: documentation, journal, brand and legal pages. Products inherit the mark usage, the “by Vyntel” attribution, the voice guide and the honesty rules; their own interfaces have their own systems and are not bound by this site’s component list.
Exceptions that are part of the system, not violations of it. A breadcrumb above a product heading is navigation. The “by Vyntel” attribution sits below a product heading, never above it. The mission line is nine words and stays. A product’s opening region carries that product’s colours and may include a real screenshot. The brand and design pages show the accent and the mark at specimen size because the specimen is the content.
Colour
Built in OKLCH, tinted toward the ultramarine hue. The accent is kept under three percent of any viewport. Contrast ratios are computed against paper.
--paperPage background. Atlas paper: bright, cool, tinted toward the accent hue.--paper-2Recessed surface: code blocks, table stripes, figure backgrounds.--ruleHairlines and rules. Never used for text.--neutralTertiary text: dates, captions, colophon. 4.9:1 on paper.--mutedSecondary text and long body copy. 7.6:1 on paper.--inkPrimary text and the mark in one-colour use. 16:1 on paper.--accentUltramarine. Links on hover, the active nav item, the mark, one anchor per page. Under 3% of any viewport. 6.8:1 on paper.--on-accentText on an accent fill (rare: focus, selection).--focusFocus ring only. 4.0:1 on paper, above the 3:1 floor for UI. Text selection uses accent.Type
Bricolage Grotesque for display, Source Serif 4 for text, JetBrains Mono for code. Ratio 1.25; at most five sizes on a page; measure 65ch. Sizes are the --fs-* tokens and the matching text-* utilities; no other font sizes exist on the site.
- Leading
- display 1.02, headings 1.15, body 1.6, reading pages 1.68
- Tracking
- display -0.035em, headings -0.015em, body 0, small caps 0.06em
- Rules
- Headlines written for the site are sentences in sentence case, at most seven words for a page’s first line; the mission line and product taglines are quoted as they are. No label above a heading, no tracked uppercase, no italic or coloured word inside a headline. Oldstyle figures in text, tabular figures in tables.
Space and layout
A four-point scale with named steps, exposed as --space-* tokens and the matching m-*, p-* and gap-* utilities; numeric spacing utilities are not used. Sections are not padded equally: generous above a heading, tight below it.
--space-3xs2px--space-2xs4px--space-xs8px--space-sm12px--space-md16px--space-lg24px--space-xl32px--space-2xl48px--space-3xl72px--space-4xl112px--space-5xl160px
- Grid
- Container 1200px, gutter clamp(20px, 4vw, 40px), twelve columns with a 24px gap. Reading layouts are asymmetric: 4/8, 3/9 or 5/7. Marginalia sit in the narrow column.
- Dividers
- A hairline, a double rule for the masthead, or space. Never a card border, never a shadow. Cards are not a layout tool; a list with hairlines replaces a grid of cards.
- Radii
- 0 for layout, 2px for hairline chips, 4px for controls, 6px for figures.
Page shapes
Each page commits to one shape and names it in a comment at the top of its file. Shared conventions (masthead, colophon, links, rules, type, spacing) stay constant; the composition follows the reading task.
- Home
- Statement, then index. A display thesis, one paragraph, the products index, the journal list, the rules as prose.
- Products
- Split studio. A product with a real screenshot gets a diptych; one without gets its icon beside its name. Past six products the page becomes an index of rows and the diptychs live on product pages.
- Product
- Committed opening in the product’s own colours, then a long document with marginalia, a plain feature list, and questions as a definition list.
- About
- Letter. Continuous prose, asterism separators, signed at the foot.
- Journal
- Dated index by year; each entry a long document with contents in the margin.
- Brand and design
- Specimen and long document with live specimens.
Components
Every interactive element ships default, hover, focus-visible and active states. Focus rings appear instantly. Hover is gated behind a hover-capable pointer.
- Masthead
- The real component, rendered inert. Lockup, small-caps descriptor, plain navigation with the current section underlined in accent, a double rule beneath. Not sticky, no button.
- Text link
- The default call to action: underlined with a hairline, accent on hover and while pressed. Links name their destination.
- Chip
- Download tokens.jsonDisabledOutlined, 44px tall, fills with ink on hover, presses one pixel on active. For the few real actions. Every standalone link in the masthead and colophon is also at least 44px tall.
- Index row
- A hairline-divided row; the whole row is the link; name in display, one sentence in serif, meta in the margin.
- Definition list
- Platforms
- iOS, iPadOS, Android
- Status
- Available
- Figure
- a real screenshot goes here
Hairline border, six-pixel radius, caption in neutral. No device frames. - Prose
The reading container: 65 characters wide, serif, headings in display,
inline codein mono on recessed paper.npm run brand- Not in the system
- Pill buttons, filled accent buttons, icon tiles, badges with pulsing dots, accordions that hide answers, carousels, modals, toasts, hover tooltips, marquees, labels above headings, numbered decoration.
Motion
The pages are still. Permitted: colour and underline transitions on links and chips at 120ms with cubic-bezier(0.16, 1, 0.3, 1), and a one-pixel press on active. Not permitted: entrance animations, scroll reveals, parallax, hover scale, transition: all, bounce easing, anything above 300 milliseconds. Reduced motion removes the remaining transitions and keeps every state visible.
Imagery
Typography is the hero. No decorative illustration, no wireframe globes, no blobs, no grids as backgrounds. Product screenshots are real, captured from the app, and placed in a figure with a hairline border, never inside a drawn phone or browser. Design-process images are welcome in the journal because they are true artefacts. Feature lists do not need icons.
Voice
Plain, specific, honest about status, warm without being chummy. One idea per sentence. No labels above headings, no arrows in link text, no ”not X but Y”, no triads for rhythm’s sake, no em dashes. Buttons name their destination. Pre-release products are described as in development. The full guide, with the banned word lists, is in voice.md.
Before shipping
Build fully, capture 320, 390, 640, 768, 1280 and 1440 widths, then run checklist.md once: shape, type, colour, structure, honesty, copy, motion, accessibility. The script establishes the technical floor; visual order and readability are judged by a person from the captures, and screen-reader behaviour needs a live check with VoiceOver or TalkBack. Fix everything in one batch, confirm with one more pass, and stop.