Phantom
A full-bleed, edge-to-edge gallery interface for a technology-led creative agency, built on a pure-black canvas (#000000) where rounded-corner project tiles tile the entire viewport like a contact sheet. The system is near-monochrome — black ground, white text and floating white pill controls — punctuated by saturated accent greens, teals, and orange that surface only inside project artwork. Typography is a single confident grotesque (Helvetica Now) used at a tight, oversized display weight, and the UI chrome (floating nav pill, "Let's Talk" pill, cookie card) hovers above the gallery as soft white capsules.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display
56px · 700 · 0.929
The quick brown fox jumps
button
14px · 500 · 1.1
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xs | 8px | |
| sm | 16px | |
| md | 24px | |
| lg | 32px | |
| xl | 40px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| md | 14px | |
| lg | 32px | |
| xl | 40px | |
| xxl | 48px |
FAQ
- What colors does Phantom use?
- Phantom's core palette includes #000000, #000000, #ffffff, #ffffff, #222222. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Phantom DESIGN.md.
- What font does Phantom use?
- Phantom's primary typeface is Helvetica Now. 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 Phantom design system?
- A full-bleed, edge-to-edge gallery interface for a technology-led creative agency, built on a pure-black canvas (#000000) where rounded-corner project tiles tile the entire viewport like a contact sh…