One brand.
Every surface.
The living identity system for 2Fifteen Tech: logos, color, typography, and the component library that powers our interfaces.
- Blue77B8E0
- YellowF5C543
- PinkDD3A94
- Dark3A3A3A
Logo(link to this section)
Our logo comes in three variants for different contexts, plus monochrome versions for single-color use.
Light background
Primary logo for light surfaces
Dark background
Inverted logo for dark surfaces
Icon only
Favicons, avatars, compact spaces
Monochrome
For single-color print, embossing, and partner lockups. Black on light backgrounds, white on dark. The “2” is a true cutout.
Black wordmark
White wordmark
Black icon
White icon
Guidelines
x = the height of the “2” in the icon
- 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.
Misuse
Each of these breaks a rule above.
Don't stretch
Don't rotate
Don't recolor
Don't add effects
Don't use low contrast
Don't place on busy backgrounds
Color(link to this section)
Four brand colors, used with restraint, on a cool neutral base. Click any value to copy it.
Download tokens
Trust, technology, connectivity
Energy, innovation, calls to action
Creativity, attention, accents
Text, stability, grounding
Contrast is the WCAG ratio for text on each color. Blue and Yellow never carry text on white. CMYK values are calculated conversions; confirm them with a printer's proof before a print run.
Color bar
The brand's recurring thread: the four colors as a print control strip.
- Discrete plates
- Four solid segments, never blended into a gradient.
- Fixed order
- Blue, yellow, pink, dark, left to right.
- Edges only
- Run it along the top or bottom edge of a page, slide, or footer. Never as a fill.
- Thin
- 4 to 8px on screen, 1 to 2mm in print, always full width.
Status
Status lights for system state. Always pair the color with a text label.
| Token | Light | Dark | Use |
|---|---|---|---|
| Green--status-green | #2EB860 | #36A15D | Healthy, complete, success |
| Yellow--status-yellow | #EBA428 | #DF9C20 | Degraded, needs attention |
| Orange--status-orange | #D96626 | #BB5E2B | Pending, in progress |
| Blue--status-blue | #2673D9 | #316FC4 | Informational |
| Red--status-red | #D4355A | #BE3756 | Critical, offline, destructive |
Neutrals
The cool paper and graphite base that every interface sits on.
| Token | Light | Dark | Use |
|---|---|---|---|
| Background--background | #FBFCFD | #0E1013 | Page surface |
| Card--card | #FFFFFF | #14171B | Raised surfaces, stages |
| Muted--muted | #F1F3F6 | #1B1F24 | Wells, code, subtle fills |
| Border--border | #E3E6EB | #23272E | Hairlines and dividers |
| Muted text--muted-foreground | #5F6672 | #98A0AB | Secondary text |
| Ink--foreground | #16181D | #ECEEF1 | Primary text |
Typography(link to this section)
We set everything in Geist, with Geist Mono for code and technical detail.
Sharp, quiet,
unmistakably modern.
Geist was designed for interfaces, with a 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
Size and line height in pixels, with letter spacing where it differs from normal. Click any class to copy it.
Monospace
Geist Mono is used for code snippets and technical values like hex codes and class names.
const brand = {
name: "2Fifteen Tech",
colors: ["#77B8E0", "#F5C543", "#DD3A94", "#3A3A3A"],
font: "Geist",
};Icons(link to this section)
We use Lucide: clean outline icons that sit comfortably next to Geist.
- laptop
- shield-check
- cloud
- key-round
- wifi
- users
- calendar
- bell
- settings
- search
- download
Sizes
Rules
- One set
- Lucide only. Never mix in icons from other sets.
- Outline, 2px stroke
- Keep the default stroke at every size. No filled or duotone versions.
- Inherit color
- Icons use currentColor so they match the text beside them.
- Label them
- Pair icons with text. An icon-only button needs an aria-label; decorative icons get aria-hidden.
Voice(link to this section)
How we sound: knowledgeable, approachable, and practical. We explain rather than lecture.
- Educate, don't alarm
- Help people understand risk and what to do about it. Never scare them into action.
- Plain language
- Translate technical terms. Lead with what it means for the reader, then the detail.
- Specific and proactive
- Say what will happen and when. Concrete numbers and dates beat vague promises.
- Confident, not salesy
- State what we do well and stop. No hype, no superlatives, no buzzwords.
In practice
The same message, written two ways.
Don't: Hackers could destroy your business overnight!
Do: Phishing is the most common way attackers get in. Here's how we stop it.
Don't: Leverage our synergistic, best-in-class IT solutions.
Do: We manage your Macs, Google Workspace, and security so your team can focus on the work.
Don't: Error 0x80070005: operation failed.
Do: We couldn't sign you in. Check your password and try again.
Writing rules
- Our name
- Always “2Fifteen Tech.” 215.tech is only for web and email addresses.
- Sentence case
- Headings, buttons, and labels capitalize only the first word and proper nouns.
- No em dashes
- Use a colon, a comma, or a new sentence instead.
- Buttons say what happens
- “Plan a project,” not “Submit.” Keep the same verb through the whole flow.
Values
What we stand for, and what our words should reflect.
Dependability
We do what we say, when we say.
Simplicity and clarity
Complex technology, explained simply.
Customer-centric
Decisions start with what helps the client.
Proactive partnership
We fix problems before they reach people.
Excellence in service
Enterprise methodology, sized for growing teams.
Components(link to this section)
Live demos of our shadcn/ui component library, the same primitives that ship in our products.
Do
- Use one primary button per view, for the main action.
- Label buttons with a verb that says what happens.
Don't
- Use destructive for actions that can be undone.
- Use the link variant for a primary action.
<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>