itsoffbrand
A minimal, gallery-grade creative-agency interface built on a warm off-white canvas (#e5e4e0) with near-black ink (#1d1d1d) and a single custom wide-grotesque display face (Ataero Retina OB Edition). The system reads as confident and reductive — enormous display headlines, a symbolic plus/cross logo mark, tiny uppercase micro-labels, and grids of client logos and portfolio thumbnails floating in acres of empty canvas. Brand voltage comes from scale contrast (100px+ display type against 15px labels) and near-total restraint rather than color.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-xl
102.86px · 400 · 1.0
The quick brown fox jumps
display-lg
76.19px · 400 · 1.0
The quick brown fox jumps
label
15.24px · 400 · 1.4
The quick brown fox jumps
body
15.24px · 400 · 1.4
The quick brown fox jumps
button
15.24px · 400 · 1.4
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 9px | |
| sm | 15px | |
| md | 19px | |
| lg | 30px | |
| xl | 46px | |
| xxl | 61px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| sm | 6px | |
| md | 10px | |
| lg | 30px | |
| xl | 95px | |
| pill | 152px |
FAQ
- What colors does itsoffbrand use?
- itsoffbrand's core palette includes #e5e4e0, #1d1d1d, #000000, #222222, #ffffff. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the itsoffbrand DESIGN.md.
- What font does itsoffbrand use?
- itsoffbrand's primary typeface is Ataero Retina OB Edition. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the itsoffbrand design system?
- A minimal, gallery-grade creative-agency interface built on a warm off-white canvas (#e5e4e0) with near-black ink (#1d1d1d) and a single custom wide-grotesque display face (Ataero Retina OB Edition).…