The Dium brand, in one page.

Logo, colours, type, components and voice rules. Use them when you show Dium on your site or build on it.

Logo

One square mark. Use the file as it is, on paper or on ink.

Right: keep clear space on every side equal to one quarter of the logo's width. File: /cdn/images/dium_io_sq.png (PNG). Smallest size: 20 px on screen.

Do

Use the supplied PNG at its own proportions
Place it on paper, white or ink backgrounds
Write the name as Dium, or dium.io for the site
Link it to https://dium.io

Don't

Stretch, rotate, recolour or add effects
Put it on busy photos or low-contrast colour
Rebuild it from a font or trace it
Imply Dium endorses your product without a written agreement

Template, not live data. Vector (SVG) logo files, a horizontal lockup and a press kit download still need to be supplied by the Dium team.

Colour

Warm paper, near-black ink and one blue. Blue is for fills and focus. Accent text uses the darker blue so it stays readable.

#FAFAF8

Paper--bg

Page background

#F3F2EF

Alt--bg-alt

Tinted bands and code chips

#FFFFFF

Surface--surface

Cards, inputs, panels

#0F0F0E

Ink--ink

Body text, primary buttons

#5E5E58

Ink 2--ink-2

Secondary text, 6.2:1 on paper

#6B6B65

Ink 3--ink-3

Meta text, 5.1:1 on paper

#00A3FF

Dium blue--brand

Fills, focus rings, decoration. Never text

#0A6FB0

Accent text--accent

Links and accent text, 5.1:1 on paper

State colours

For status only, such as solved, pending or error. Always pair them with a word or icon.

OK #1F7A4D Warn #8A5A00 Bad #B42318

Type

Three families, all self-hosted and free under the SIL Open Font License.

Playfair Display

Headings, regular 400, one italic accent phrase

Answers that last.

Inter Light

Body text, 300, with 400 to 600 for emphasis

Members ask, the community answers, and the best answer stays easy to find.

JetBrains Mono

Code, API names, tokens

POST /api/wave.php action: "create"

Heading rules

Sentence case, never title case
At most one italic accent phrase per heading, and not on every heading
One H1 per page

Components

Live samples from the site stylesheet.

Buttons

Start freeTake a tour

AccentRead more

Black pill for the one primary action. Secondary is white with a hairline.

Pills

Open SolvedSponsor Live

Status and labels. Never a button.

Card

Knowledge base

Search what was solved

Best answers rise to the top of search.

Note

Free while your Flow has fewer than 50 members.

Keys are server-side secrets.

Form field

Work emailLabels sit above inputs, never inside them.

Code

json

{"action":"get","slug":"acme-summit"}

The shape rule

Three radii, used the same way everywhere, so the site reads as one system.

Element	Radius	Token
Buttons, chips, pills	Full pill (999px)	`--r-pill`
Cards, panels, media frames	16px	`--r-lg`
Inputs, code blocks, small tiles	10px	`--r-md`

Voice

Write the way a helpful community lead talks: plainly, and only about what is true.

Plain words and short sentences. Aim for a 6th to 8th grade reading level.
Name the problem first, then what Dium does about it.
Use product words the same way every time: Flow, Wave, best answer, profile type, Page, Room.
No em dashes or en dashes. Use a period, comma, colon or parentheses.
Never invent proof: no made-up customers, quotes, numbers or certifications.
Say when something is not built yet.

Words we do not use

elevateseamlessunleashnext-genrevolutionizesuperchargeempowerall-in-onecutting-edgegame-changerrobustleverage (as a verb)synergy

Calls to action

Label	Goes to
Start free	Create a Flow
Take a tour	/tour/
Book a demo	/demo/book/
Talk to sales	/contact-sales/
Read the quickstart	/docs/quickstart/
Get an API key	/developers/#keys

Questions about using the brand: [email protected]

Product

Solutions

Resources

Account