Char Dark Variant
Approved use cases.
These are the only approved uses of the dark color system. Proposals, client-facing documents, and marketing materials stay on the standard light guidelines.
Use the dark variant sparingly: per section, not per document. For example, a deck that is otherwise light can contain a dark variant slide where the content falls into any of the approved use cases, to create contrast or clarity. The dark variant is a controlled extension of the brand, not an alternate identity to use at will — this isn’t an all-or-none choice between light and dark. The existing ratio still holds: char is the anchor at roughly a fifth of any layout, not the ground everything sits on.
Live or recorded walkthroughs of the product, where dark variant helps UI to be read clearer.
Code walkthroughs and technical presentations where syntax and structure need to stand out.
System and architecture diagrams shown in technical, engineering-facing contexts.
Screen recordings and video where a dark background keeps focus on-screen.
Rules and approved combinations.
When building for one of the approved use cases above, apply the following — and nothing outside of it.
The only approved surface for this variant — full-bleed, not a band.
The primary ink on this surface — the logo and running text both stay Paper.
Secondary text only — captions, labels, and anything muted. Never the logo, a headline, or a line a reader is meant to read first.
Dark mode, full-bleed — the wordmark in Paper on Char, and nowhere else.
Primary color as a visual accent.
HEX — may be used as a visual accent within graphical, data-driven elements — a highlighted value, a data point, a marker on a timeline — the way it’s used to call out a single result among many. It is not approved as a primary contrast against black: not for the logo, headlines, or body copy.
Approved — primary color calls out one value among many
Approved — primary color marks a point on a timeline or chart
Approved — primary color highlights the standout bar in a chart
Approved — primary color outlines the node in focus within an architecture diagram
Incorrect usage.
Ember (—) is never the wordmark or the copy on char. As a fill, a rule, a mark, or graphic accent, it is.