No. XXIDownloads · the asset shelf

The brand,
as files.

Wordmark in SVG. Favicon. OG cards. The token sheet. Self-hosted Euclid Flex woff2. Click a row to download. All assets are provided under the same internal-use licence as the design system.

5 Brand-mark formats 5 Font weights 1 Token sheet Updated 27 MAY 2026
IWordmark · favicon · monogram

The mark, in every format you'll need.

favicon

Favicon · Midnight ground

32×32 SVG. Midnight #0B1018 ground, Cloud Dancer "r", Terracotta dot.

SVG · 321 B Download →
OG card preview

OG card · 1200 × 630

Open Graph share card. Wordmark, kicker, paper-on-ink.

PNG · 1200×630 Download →
better reviews.

Wordmark · stacked · paper

"better" Euclid Light + "reviews." Fraunces Black. Inline-text SVG.

SVG · vector Download →
better reviews.

Wordmark · stacked · ink

Same lockup on Midnight ground. Paper text, Terracotta accent.

SVG · vector Download →
r.

Monogram · r.

Standalone monogram, Fraunces Black, letter-spacing -0.12em.

SVG · vector Download →
IIDesign tokens

Eighty-nine custom properties. The single source.

CSS

colors_and_type.css

All 89 tokens, the @font-face block, semantic type roles. Import as your first stylesheet.

CSS · 10.8 KB Download →
JSON

tokens.json · Style Dictionary

Same tokens, exported for Figma plugins and Style Dictionary pipelines.

JSON · generated Download →
IIIFonts · Euclid Flex

Five upright weights. Self-hosted.

Aa

Euclid Flex Light · 300

The "better" in the wordmark. Captions, dim chrome.

WOFF2 · upright Download →
Aa

Euclid Flex Regular · 400

Default body when Fraunces is reserved for headlines.

WOFF2 · upright Download →
Aa

Euclid Flex Medium · 500

Canonical body. Chrome smallcaps. The room tone.

WOFF2 · upright Download →
Aa

Euclid Flex Semibold · 600

Sidebar active, in-body emphasis, display pair.

WOFF2 · upright Download →
Aa

Euclid Flex Bold · 700

Hero pair with Fraunces 900. Used sparingly.

WOFF2 · upright Download →

Fraunces is loaded from Google Fonts. For offline use, mirror the variable-axis woff2 into fonts/fraunces/ and add an @font-face block. Do not load the italic axis.

IVCode starters

Copy-paste blocks for the most common patterns.

Wordmark · stacked 
<span class="wordmark">
  <span class="top">better</span>
  <span class="bot">
    rev<span class="accent">i</span>ews<span class="accent">.</span>
  </span>
</span>
Pill button · on ink 
<button class="btn-pill">
  Request access
  <span class="arrow">→</span>
</button>
Magritte frame 
<div class="magritte">
  <div class="magritte-inner">
    <!-- 14px inset hairline -->
  </div>
  <!-- content -->
</div>

.magritte {
  background: var(--br-paper);
  border: 1px solid var(--br-paper-line);
  box-shadow: var(--sh-frame);
  padding: 36px;
  position: relative;
}
.magritte-inner {
  position: absolute; inset: 14px;
  border: 1px solid rgba(11, 16, 24, 0.09);
  pointer-events: none;
}
Section header · landing 
<section style="
  background: var(--br-ink);
  color: var(--br-paper);
  padding-block: var(--pad-section-anchor);
">
  <span class="smallcaps">The Refusal · No. I</span>
  <h1 class="display">
    This is <span class="accent-clay">not</span>
    a review tool.
  </h1>
</section>
VThe whole guideline

Want everything?

THE FULL BUNDLE

Twenty-two chapters, the token sheet, the wordmark set, all five Euclid weights.