Brand
An engineering document, not a launch poster.
Warm graphite and paper, monochrome for everything structural, and colour reserved for one distinction: current versus out of date. This page is the reference for anyone drawing, writing, or building something that carries the DocZoid name.
Direction
The visual world is the one the buyer lives in: repositories, commit hashes, architecture diagrams, review comments. The site should look like something an engineer would trust, which means it looks like a well-set document rather than a campaign.
Blue and cyan are the competitor cluster, so the site avoids them. Warm cream with a terracotta accent and a serif display is copied widely enough now to read as machine-generated, so the site avoids that too. What is left, and what suits a product whose entire argument is “this is current and that is not”, is a monochrome palette with one accent doing semantic work.
The rule that follows: if something is coloured, it is saying either generated from the repo and current or out of date. Buttons, links, navigation, active states, and table marks are all monochrome. There is no third accent and no success green.
A dark theme ships too, because most of this audience browses dark. It is designed as its own palette, not an inversion. Use the toggle in the header to see every swatch below in the other theme.
Palette
Fifteen tokens. Two of them are colours.
Swatches render in whatever theme you are viewing. Both hex values are listed so nothing needs to be picked off a screen.
Structure
- light
- #F4F3EF
- dark
- #131210
Page ground. Warm, never cream.
- light
- #FBFAF7
- dark
- #1C1A17
Cards, the product frame.
- light
- #ECEAE4
- dark
- #262320
Sunken surfaces, code blocks, container fills.
- light
- #1A1814
- dark
- #F2F0EA
Headlines, body, and every primary button.
- light
- #4C483F
- dark
- #B5AFA3
Secondary text, button hover.
- light
- #8B857A
- dark
- #837D71
Captions, mono labels, timestamps.
- light
- #E3E0D8
- dark
- #2E2A25
Hairlines, table borders.
- light
- #C9C5BA
- dark
- #423D36
Emphasised borders, diagram strokes.
- light
- #F4F3EF
- dark
- #131210
Text on an ink ground, so buttons stay legible in both themes.
Semantic
- light
- #186B47
- dark
- #63CE96
Generated from the repo and current. Nothing else.
- light
- #1F8757
- dark
- #84E0AF
The moving part of the sync line, and the focus ring.
- light
- #E3F1E9
- dark
- #12291E
Ground behind live content.
- light
- #FFFFFF
- dark
- #131210
Text on a live ground.
- light
- #A8542B
- dark
- #DB9068
Out of date. Nothing else.
- light
- #F7E9DF
- dark
- #332115
Ground behind a stale example.
liveis green because green already means passing, fresh, and in sync, so the one coloured thing on the page needs no explaining. Four candidates were compared on the running site against the rust pairing, which is the accent's actual job. Forest won. Because chroma is rare, the site does not read as a green site.
Rules
- Colour is semantic. If it is not saying current or stale, it is monochrome.
- Primary buttons are ink with on-ink text. The accent never competes with the call to action.
- Links are ink with a rule-coloured underline. The underline darkens on hover.
- Navigation, tabs, and active states never take the accent.
- Table marks: present is ink, absent is ink-3 at 45%. There is no success green.
- No gradients. Greys are warm-biased. Never #888.
Typography
Three faces, each with one job.
Display and headings
Schibsted Grotesk
weights 600, 700
A Scandinavian newspaper grotesk. Tight tracking (-0.02em) above 32px. Every heading is balanced.
Push a commit. The diagram updates.
Body and UI
IBM Plex Sans
weights 400, 500, 600
Reads well at 16 to 18px and pairs with the mono below.
Connect a repository. DocZoid generates the architecture and data-lineage diagrams, keeps them current on every push, and carries them into every doc and slide that embeds them.
Code, labels, metadata
JetBrains Mono
weights 400, 500
Repo paths, commit hashes, MCP config, eyebrows, timestamps.
regenerated 4 min ago · a3f9c2e · main
Scale, desktop, rem
- 4.25
- 3
- 2.125
- 1.5
- 1.125
- 1
- 0.875
- 0.75
Setting
- Body is 17px with a line height of 1.6 and a measure of 60 to 68 characters.
- Eyebrows are mono, 12px, uppercase, with 0.08em tracking.
- Fonts are self-hosted through next/font, so nothing depends on Google at runtime.
Wordmark
Drawn, not loaded.
The mark is set inline from the original vector. The letterforms take the theme's ink, and the Z carries the live accent. The old silver treatment is gone: metallic dates a mark quickly.
- Use the two-colour mark wherever the live accent is available. Fall back to single colour for print, embroidery, and any surface with one ink.
- Never place the mark on a gradient, a photo, or a coloured ground other than
inkorpaper. - Keep clear space of at least the height of the D on every side. Do not stretch, outline, add a shadow, or rotate.
Signature elements
The things only this site has.
Use each once or twice, not everywhere. They carry the argument that the content is alive.
01
The sync line
02
Provenance stamps
03
Stale and live pairing
04
The product frame
A product frame in the live tone, with a provenance stamp. The stamp is real data from a real repository, never decorative.
The stale tone means one thing: this is out of date. It is never used for warnings, errors, or emphasis.
Motion
One moment. Then stillness.
- One orchestrated moment: the hero loop recording, muted, autoplaying, looping, with a poster frame so the first paint is complete.
- The sync line drawing on scroll.
- Hover on buttons changes colour only. No scale transforms.
- Nothing else animates. No sparkles, no cycling words, no parallax, no fade-in-on-scroll for text. Everything meant to be read is visible at rest.
- Reduced motion stops the loop on its poster frame and draws the sync line fully.
Layout
Grid, not cards.
- Content column 1120px max, with a 720px reading column for prose.
- Section rhythm is 96px on desktop and 64px on mobile. Sections are separated by whitespace, not divider lines, except where a table or product frame needs a hairline.
- Grid, not cards. Feature lists are two- or three-column grids with a hairline between cells. A card is used only for pricing tiers and the compare table.
- Header: wordmark left, five links, a Log in text link, and a solid ink Start free button. Sticky, 56px, paper background with a hairline on scroll.
- Mobile first, 16px gutters, nothing scrolls sideways except the compare table in its own container.
Voice
Engineer to engineer. Plain, specific, a little dry.
| Say | Not |
|---|---|
| Push a commit. The diagram updates. | Experience seamless synchronization. |
| Four diagram types. | Powerful diagrams. |
| Connect a repo | Get started on your journey |
Rules
- Say what happens. Numbers over adjectives.
- Buttons say what they do: Start free, Connect a repo, Read the MCP setup, See pricing.
- The founder writes in first person. Everything else is "DocZoid does" or "you".
Banned words
- seamless
- unlock
- supercharge
- empower
- revolutionary
- effortless
- magic
- next-level
- game-changing
- robust
- cutting-edge
Writing about DocZoid?
Partners, press, and anyone building an integration are welcome to use the wordmark and the palette as described here. If you need something this page does not cover, ask.