Design language Resources
The design language as files you can open. Download the glyph, read the token file the site is built from and the Zero Door token snapshot, see the tests and gates that hold the language and follow the dated history of what changed and how a change lands.
The glyph comes as two SVG files and the tokens as two text files. Each one matches the source this page reads, so what you download is what these pages show.
Both glyph files draw the same single path the site draws in code, so the mark you download is the mark you see on this page.
For light surfaces. The glyph is drawn in ink with no ground of its own, so the surface beneath it shows through.
Download SVG: zerone-glyph.svg
For places that need a square mark with its own ground. It is the designer’s ink square: square corners, the glyph in paper at its own size in the centre.
Download SVG: zerone-glyph-ink-tile.svg
/favicon.svg is its own file: this square and its colours, with the glyph enlarged to two thirds of the side so that it reads at tab size.Use the logo as its files draw it. Do not recolour it, rotate it or add effects.
WhyThe designer gave the logo two colourways, ink on light grounds and paper on ink. Holding to them keeps it recognisable everywhere. The rule is written in the press kit.
ReviewKept by review, not by a test.
The download files draw the glyph from the code, not from a redrawn copy.
WhyIf the glyph path in the code changes, the files have to change with it or the test fails.
TestEnforced by a test on every change.
Every fill in the download files is a token colour.
WhyA file that leaves the site still carries the palette: ink and paper, exactly as the token file defines them.
TestEnforced by a test on every change.
The browser icon, /favicon.svg, keeps the square, colours and centring of the ink tile, with the glyph at two thirds of the side.
WhyAt 16 px the designer’s square leaves the glyph too small to read in a tab, so the icon is its own file. A test measures it, so the larger glyph cannot drift from the tile’s square.
TestEnforced by a test on every change.
The token file the site is built from and the Zero Door token snapshot, the two files the next two sections show.
The file the site is built from, as it is. It is a Tailwind 4 @theme block rather than a plain stylesheet.
Both colour themes, spacing, radius, shadow, curves and durations from the product's token file, values read from its code, such as the typeface and the icon sizes, and the two dates shown with the snapshot below. It carries no commit identifier.
Download JSON: product-tokens.jsonsource.repoThere is no raster version. Clear space, minimum sizes and print values for paper and accent are rules Zerone added; the logo page states them with their method and shows the whole logo system. The press kit offers its six files: the two lockups in ink and in paper, and these two glyph files. The typeface files are served for this site and are not offered here.
The site's named colours, typeface stacks, curve, radii and shadow are declared in one file. The block below is that file, read when the site is built, so it cannot differ from what ships. In use, components also write some radii and colour mixes in place rather than naming a token.
/* Zerone tasarim tokenlari: renk, yazi tipi yigini, egri, yaricap ve golge
degerleri. Bilesenler renkleri token adiyla kullanir (var(--color-*)).
CSS disindaki kopyalar (theme-color, SVG, OG gorseli, e-posta)
tasarim kaynaklari betiginde, RAW_HEX_COPIES
listesinde tutulur. */
@theme {
--color-*: initial;
--color-transparent: transparent;
--color-current: currentColor;
--color-paper: #fdfaf6;
--color-paper-2: #f6f3ee;
--color-hair: #e2dfdb;
--color-hair-2: #cdcac6;
--color-ink: #0f1c26;
--color-ink-muted: #5c5753;
--color-ink-subtle: #736d69;
--color-accent: #00847e;
--color-accent-deep: #006560;
--color-accent-tint: #d9f5f3;
/* Ham, dogrulanmamis degisim. Kanit sahnesinde inen egri ve isaretleri bu
renktedir: accent "dogrulanmis tek sinyal" demek oldugu icin gurultunun
de kendi rengi olmali, yoksa ikisi de koyu kaliyor ve sahne tek renkli
bir grafige donuyor. Alarm kirmizisi DEGIL, kirilmis bir tugla tonu:
kagit uzerinde 5,7:1, uzerindeki beyaz tik 5,9:1. */
--color-raw: #a9432c;
--font-sans: var(--font-newblack), system-ui, sans-serif;
--font-mono: var(--font-geistmono), ui-monospace, SFMono-Regular, monospace;
--ease-out-quart: cubic-bezier(0.23, 1, 0.32, 1);
--radius-sm: 6px;
--radius-md: 8px;
--shadow-float: 0 12px 30px -18px rgb(15 28 38 / 0.45);
}The page prints the file as it is, and the build gate rejects a number beside a percent sign other than 99.5. A unit test therefore keeps percent signs out of the file and names the reason when it fails.
The file is a Tailwind 4 @theme block. Its first declaration, --color-*: initial, removes Tailwind's default palette, so a colour utility that uses a palette name, such as bg-red-500, exists only if that name is declared here. Two keywords are added back: transparent and currentColor. The comment above --color-raw is part of the file because it records why that colour exists.
This table is read from the tests when the site is built. Value means the token test holds the exact value; present means it holds only that the token exists. The last column counts the other tests that read the token. A token with nothing in either column is held by review alone.
| Token | In the token test | Also read by |
|---|---|---|
| --color-transparent | Not checked | None |
| --color-current | Not checked | None |
| --color-paper | Value | 1 other test |
| --color-paper-2 | Value | 1 other test |
| --color-hair | Value | 1 other test |
| --color-hair-2 | Value | 1 other test |
| --color-ink | Value | 1 other test |
| --color-ink-muted | Value | 1 other test |
| --color-ink-subtle | Value | 1 other test |
| --color-accent | Value | 1 other test |
| --color-accent-deep | Value | 1 other test |
| --color-accent-tint | Value | 1 other test |
| --color-raw | Value | 1 other test |
| --font-sans | Present | 1 other test |
| --font-mono | Present | 1 other test |
| --ease-out-quart | Present | 1 other test |
| --radius-sm | Present | 1 other test |
| --radius-md | Present | 1 other test |
| --shadow-float | Not checked | 1 other test |
Every palette colour, the 11 hex colours, keeps the exact value it was given.
WhyContrast on every page is computed from these values; a colour that drifts moves every ratio at once.
TestEnforced by a test on every change.
The token file holds no pure black and no pure white.
WhyInk and paper are the darkest and the lightest colours in the palette.
TestEnforced by a test on every change.
Tailwind's default palette stays switched off.
WhyWithout --color-*: initial, a default colour utility such as bg-red-500 would still work and step outside the palette unnoticed.
TestEnforced by a test on every change.
The Zero Door interface keeps its own token file. We do not retype it: a script reads the product's files without changing them and writes the values into one JSON file in this repository.
Besides the token file, the script reads values the product sets in its own code, such as the typeface, the default theme and the icon sizes. It records two dates, the day the token file last changed and the last day any file it reads a value from changed, so the dates below say which version this is.
Text
Muted text
Subtle text
Text
Muted text
Subtle text
6 light-theme colours compute to exactly the value of a site colour; their swatches name the site colour.
Each hex value is computed from the oklch value by the same code that computes contrast on these pages; a colour channel outside the sRGB range is clipped.
| Token | Value |
|---|---|
| --radius-sm | 4px |
| --radius-md | 8px |
| --radius-lg | 12px |
| --ease-out | cubic-bezier(0.23, 1, 0.32, 1) |
| --ease-in-out | cubic-bezier(0.77, 0, 0.175, 1) |
| --ease-drawer | cubic-bezier(0.32, 0.72, 0, 1) |
| --duration-feedback | 130ms |
| --duration-fast | 160ms |
| --duration-default | 200ms |
| --duration-slow | 300ms |
| --duration-drawer | 400ms |
| Token | Light | Dark |
|---|---|---|
| --shadow-flat | 0 1px 2px rgb(0 0 0 / 0.04) | 0 1px 2px rgb(0 0 0 / 0.20) |
| --shadow-raised | 0 8px 24px rgb(0 0 0 / 0.08) | 0 8px 24px rgb(0 0 0 / 0.40) |
Product values are copied by a script, never typed.
WhyA typed copy goes stale the day the product changes. The snapshot records the day the product's token file last changed and the last day any file it reads changed, so a stale copy shows.
ReviewKept by review, not by a test.
Every product text token reads at 4.5:1 or more on all three surfaces, in both themes.
WhyThe interface is dense; text has to stay legible on whichever surface it lands on.
TestEnforced by a test on every change.
The product border token --zd-border is not claimed at 3:1.
WhyIt separates regions and stays below 3:1 against the surface in both themes. The test pins that, so no page can claim more.
TestEnforced by a test on every change.
Every rule on these pages says what holds it. These are the tests and gates that hold the language across the site, grouped by the stage of the pipeline that runs them, with what each one holds. A test that holds a single page's rule is marked on that rule's card.
Pins the exact value of every palette colour in the token file, the 11 hex colours. Checks that the typeface stacks, the curve and the radii are defined, keeps pure black and white out of the file in any hex spelling and keeps Tailwind's default palette switched off.
Checks that each of the 6 font files the site serves itself is a real WOFF2 file of a sensible size: more than 8,000 bytes and less than 120,000. Weights checked: New Black 400, 500, 600, 700; Geist Mono 400, 500.
Reads every page dictionary, these design pages included, and fails if the Turkish and English versions differ in shape or if any string carries an em dash, the one-word form of the product name, another banned string or a percentage other than 99.5.
Proves the colour maths these pages use against known values, checks that a displayed ratio rounds down so it never looks like a pass when it is not one, reads every colour from the token file in order, confirms the ratios quoted in the comments of the token file and the primary button style and checks that ink, ink-muted, ink-subtle and accent-deep reach at least 4.5:1 on paper and paper-2.
Checks that every design page has its dictionary, component, route entry and navigation label, that previous and next visit each page once, that the site tokens are read with the expected values and that the Zero Door snapshot keeps its contrast claims in both themes.
Holds the claims this page makes about files: the download files draw the glyph path from the code and use only token colours, the browser icon keeps the ink tile’s square with the glyph at two thirds of the side, the token file carries no percent sign, every rule card on this page that says a test holds it is tied to a test that exists and the list of files that repeat token colours stays complete.
Checks the one motion setting the whole site shares: it starts playing, a pause or a resume reaches every listener once and the choice is stored under one fixed key.
Pins the site's list of compliance frameworks to 13 identifiers in a fixed order, copied from the product's catalogue; a change on the product side is caught by review, not by this test. Also checks that no listed name is empty or contains a name from the fixed list of frameworks the product does not ship.
Runs over every built page and stylesheet. No em dash, no one-word product name and no four-column grid class at the large breakpoint; no percentage except 99.5; a security policy on every page, a canonical link and language links on every page except the 404 page, no Google Fonts and no external script beyond one named exception on the contact page; in shipped CSS, no pure black or white in any spelling (hex, keyword or colour function, inline SVG images included) apart from one named Tailwind default, and no opacity in a keyframe or in a transition that names it; no skipped heading level inside main; no name from the site's list of unsupported compliance frameworks in the main content of pages outside research and legal.
Follows every internal link and every #anchor on every built page and fails if the target file or the id is missing.
Scans every built page, the 404 page included, with axe at the WCAG tags below and expects zero violations; the mobile run leaves out the legal documents and research articles, though not the two index pages. A loop started through the shared reveal motion marks itself, as do several loops that run their own script, such as the noise field on the home page; the test fails a page where a marked loop runs without a visible pause control. It also checks that no page scrolls sideways at 320 CSS px, that keyboard focus stays clear of the sticky header on the pages named in the gaps below, in a desktop window and again at 390 CSS px wide, and that a pause decision carries from page to page.
WCAG tags
Lighthouse on a fixed list of pages. A score below a threshold stops the pipeline, because the jobs that publish the site wait for this one.
Thresholds
Legal documents skip the SEO score but keep its other individual checks; is-crawlable is off.
advisory
Lighthouse with mobile emulation on a shorter list of pages. The job is advisory: CI lets it fail without stopping the pipeline.
Thresholds
started by hand
Runs first in the production release job.
Stops the release when
/, /zero-door and /tr/contact.The design language is not released in versions; git is its record. Each date is the day a change was committed, newest first, except where an entry says it reached the main branch.
The beaver of the Zero Door page got a page of his own, and with it his name. It tells what each part of his scene stands for, pairing every part with the copy of the Zero Door page it echoes, and it shows how he is drawn from the glyph and how he moves. Its rules say where he may appear. The name is used wherever he is described, the text alternative of the Zero Door opening included. The mascot page is in the foundations, after the logo.
The gate figure left the design language, and the dam of the Zero Door page took its place among the figure types. The visualisation page now shows the dam live with its measures and rules. The primitives on the diagrams page draw its card, original, stopped card and verdict tag at the size the dam has in the Zero Door opening on a wide screen.
Scripted motion moved to one module of named durations, curves and moves, and a unit test began to fail a script that writes its own curve or a bare duration, apart from a short list of named exceptions. Before it, each component described the same motion with its own numbers. The motion page describes the vocabulary.
This section arrived with the parts every page shares: navigation, a last-changed date read from git and rule cards that say what holds each rule. Underneath sat a measurement layer: site tokens read from the token file when the site is built, contrast ratios computed rather than typed and the Zero Door tokens copied from the product by a script.
A loop started through the shared reveal motion began to mark itself, and the accessibility test began to fail a page where such a loop runs without a visible pause control. The flow diagram on the architecture page, which had shipped without one, got its control the same day.
From this day the built pages had to pass axe with zero violations, and a page that scrolled sideways at 320 CSS px failed the gate. The gate was written the day before and reached the main branch on this date. The accessibility page describes what it tests.
One motion setting came to cover the whole site: pausing one animation paused all of them on every page, and the browser remembered the choice. The looping visuals of that time got a small round pause button beside them. Focusable elements also gained a scroll margin to keep keyboard focus clear of the sticky header. The motion page describes the control.
--color-raw, #a9432c, joined the palette: a muted brick tone for raw, unverified change. Accent means the one verified signal, so noise needed a colour of its own. It is the only colour added after the first day, and the token test pinned its value the same day.
One commit brought the token file, New Black and Geist Mono served from the site itself, the glyph, the base styles and the first token and font tests. Later that day the primary button moved to accent-deep to reach 4.5:1 with paper text, and reveal motion became transform-only. Build gates arrived for banned strings, for external fonts and for any pure black or white, and the press kit published the two glyph files.
A change to the language is a change to a file, and it reaches the site only through the pipeline every other change takes. These are the steps, in the order the pipeline runs them.
Check
Build
Test
Release
Colours, typeface stacks, the curve, the radii and the shadow change in the token file; the typefaces themselves are declared in the build configuration. Buttons, links and the base type change in the site stylesheet or in the component itself. By convention a component names a colour token rather than copying its value.
The first stage runs the type check and the unit tests across the workspace. One test fails on a palette colour that changed without its test, another rechecks the ratios quoted in the token file and the button style and a third holds both languages to the same shape.
The build stage builds every page in both languages, then runs the gates over the result: banned strings, pure black and white and animated opacity in shipped CSS, heading order and every internal link and anchor.
Browser tests open the built site in a desktop and a mobile browser: each page's own tests, axe on the built pages, reflow at 320 CSS px and a visible pause control on any page that runs a marked loop.
Lighthouse scores a fixed list of pages on desktop and stops the release below its thresholds; the mobile run reports but does not stop anything.
Jobs that publish the site wait for the build and its gates, the browser tests and Lighthouse on desktop. The production release is started by hand and runs the launch gate as its first step.
.note {
color: var(--color-ink-muted);
}.note {
color: #5c5753;
}A component names a colour token; it does not write a hex value.
WhyThe header of the token file says so. A hex value outside the palette is caught only when it is pure black or white, so review holds this rule.
ReviewKept by review, not by a test.
A palette value written outside the token file is a listed copy.
WhyThe test scans the site, the shared package and the form service for every palette value. It fails on a file that the list of copies does not name and on a listed file that no longer holds one.
TestEnforced by a test on every change.
A commit that changes a pinned value changes its test too.
WhyThe token test holds the exact value of every palette colour, the 11 hex colours, so a colour change without a test change fails the first stage of the pipeline.
TestEnforced by a test on every change.