2FIFTEEN.DESIGN
One brand.
Every surface.
The living identity system for 2Fifteen Tech — logos, color, typography, and the component library that powers our interfaces.
Logo Usage
Our logo comes in three variants for different contexts.
Light Background
Primary logo for light surfaces
Dark Background
Inverted logo for dark surfaces
Icon Only
Favicons, avatars, compact spaces
GUIDELINES
- Clear space
- Keep a margin around the logo equal to the height of the “2.”
- Minimum size
- Never display the logo smaller than 24px in height.
- No distortion
- Do not stretch, rotate, recolor, or add effects to the logo.
- Contrast
- Light variant on dark backgrounds; dark variant on light backgrounds.
Typography
We set everything in Geist, with Geist Mono for code and technical detail.
Sharp, quiet,
unmistakably modern.
Geist was designed for interfaces — high x-height, open counters, and even rhythm at every size. It reads as cleanly at 12px as it does at 96.
WEIGHTS
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
TYPE SCALE
Click any class chip to copy it.
MONOSPACE
Geist Mono — used for code snippets and technical content.
const brand = {
name: "2Fifteen Tech",
colors: ["#77B8E0", "#F5C543", "#DD3A94", "#3A3A3A"],
font: "Geist",
};Color Palette
Four colors, used with restraint. Click any value to copy its hex or Tailwind class.
Brand Blue
Trust, technology, connectivity
Brand Yellow
Energy, innovation, calls to action
Brand Pink
Creativity, attention, accents
Brand Dark
Text, stability, grounding
Component Library
Live demos of our shadcn/ui component library — the same primitives that ship in our products.
<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button size="sm">Small</Button>
<Button>Default</Button>
<Button size="lg">Large</Button>
<Button size="icon"><Mail className="h-4 w-4" /></Button>
<Button disabled>Disabled</Button>