Open design system

dbi-style

The tokens, type, components, and infinity mark that power every Divide by Infinity property. Free to use on any site — no attribution required, but appreciated.

Download DBI infinity mark (PNG)Jump to tokens

01 / Mark

The DBI infinity

An image mark of an infinity symbol dividing into itself — the literal "divide by infinity". Use on dark or light backgrounds. PNG with transparent background.

02 / Color tokens

Semantic palette

All colors are CSS custom properties. Reference them as var(--name) or via the Tailwind aliases (bg-primary, text-muted-foreground).

--background

oklch(0.18 0.02 250)

Page background — deep ink

--foreground

oklch(0.96 0.01 90)

Body text — warm parchment

--surface

oklch(0.22 0.025 250)

Cards, panels

--primary

oklch(0.82 0.14 75)

Primary accent — warm gold

--muted-foreground

oklch(0.72 0.02 90)

Secondary text

--border

oklch(1 0 0 / 10%)

Hairlines, dividers

03 / Typography

Sora · Manrope · JetBrains Mono

Display · Sora

Divide by Infinity

Body · Manrope

We see every angle. Then we build the path forward.

Mono / Eyebrow · JetBrains Mono

01 / cross-disciplinary

04 / Components

Core building blocks

Buttons

Link →

Card

Technical systems

Built to be understood, not just to work.

Eyebrow + section heading

Approach

Three principles we don't compromise on.

05 / Usage

Drop into any site

The infinity mark and CSS tokens below are hosted on dbi.life and free for any site to link to directly.

Embed the logo

<img
  src="https://dbi.life/dbi-infinity-logo.png"
  alt="Divide by Infinity"
  height="32"
/>

Copy the tokens

:root {
  --dbi-bg: #0d1426;
  --dbi-fg: #f5f1e8;
  --dbi-surface: #15203a;
  --dbi-primary: #e3b34a;
  --dbi-muted: #b3ad9e;
}

License: free for any use, commercial or personal. No attribution required.