Design system — internal
[01]team.dev — living style guide
Every token, atom, and block that ships on this site. Not linked in the main nav — open /system directly. Source of truth: brand/styles/tokens.css
01 — Tokens
Color palette
All values live in brand/styles/tokens.css. Never use raw hex in components.
--team-bg
var(--team-bg)
--team-bg-elevated
var(--team-bg-elevated)
--team-accent
var(--team-accent)
--team-accent-dim
var(--team-accent-dim)
--team-text
var(--team-text)
--team-muted
var(--team-muted)
01 — Tokens
Elevation & shadow
Four levels via --shadow-* tokens. Use on cards and overlays — never raw box-shadow values.
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl
02 — Typography
Scale
Mono-first. Geist Mono body, JetBrains Mono for technical labels.
Eyebrow — 11px / tracked / accent
H1 Display — 3xl semibold
H2 — xl semibold
H3 — lg semibold
H4 — sm semibold
Body — text-sm / leading-relaxed / muted. Senior technical help without enterprise bloat; numerals and eyebrows stay loud.
Mono meta — xs for SKUs, timestamps, status labels
Fine print — 10px for table footers, legal disclaimers
03 — Actions
Buttons
primary / secondary / ghost + disabled and loading states.
03 — Forms
Inputs
Labeled input group — label + field + error message bundled. Lime focus ring, validation states.
03 — Atoms
Badges
Six semantic variants from ui/badge. Always use Badge — never inline the classes.
04 — Surfaces
Cards
Glass card base + lime highlight variant. Every feature block sits in one of these.
Default
Card title
Standard glass surface — hairline border + left-edge lime refraction. Used across all tier and feature grids.
Featured / highlight
$7.5–25k / month
Lime tint variant — glass-card-lime overrides the gradient and border variables.
04 — Atoms
Accordion
Keyboard accessible, ARIA expanded/controls. Used in FAQ blocks across all service pages.
04 — Atoms
Link wrapper
Auto-detects internal vs external. Adds rel='noopener noreferrer' and target='_blank' for external hrefs.
05 — Blocks
Feature grid
blocks/feature-grid.tsx — 2, 3, or 4 columns. Icon + title + body per card.
Fast delivery
Fixed-scope sprints ship in 2–6 weeks. Scope, build, done.
Senior-only team
No hand-offs to juniors. Every engagement is run by the same engineer who scoped it.
AI-native builds
LLM integrations, RAG pipelines, agents — not bolt-ons, built-in from day one.
05 — Blocks
FAQ block
blocks/faq.tsx — wraps Accordion in a bordered container.
05 — Blocks
Testimonials
blocks/testimonials.tsx — 3-column grid of glass quote cards.
“They shipped what we scoped, on time, and left us with code we could actually maintain.”
“The fractional CTO engagement changed how we hire, build, and ship. Worth every dollar.”
05 — Blocks
Clients / logo row
blocks/clients.tsx — logo images with grayscale + opacity; abbr fallback when no image.
Trusted by
- ACME
- BLabs
- Gamma
- ΔFin
06 — States
Empty & loading
Use these patterns when content is fetching or absent — never show a blank layout.
Skeleton loader
Empty state
No items yet
Add the first one06 — Icons
lucide-react
18px stroke icons. Always aria-hidden when decorative; add aria-label when semantic.
07 — Data
Code, quote, table
MDX (Insights), case study, and tier comparison patterns.
Code block
▹ npm run ship ▹ git push origin main
Artifacts you own — blockquote pattern for case studies and insights.
| Relationship | Best for | Starts |
|---|---|---|
| Project — Sprint | Defined scope, fixed price | $15–40k |
| Partnership — Retainer | Ongoing leverage | $7.5–25k / mo |
| Leadership — [01]/cto | Fractional executive | $20k+ / mo |
08 — Backdrop
Pattern + glow
Fixed layer uses .team-pattern-bg — scroll drift + lime halo. Respects prefers-reduced-motion.
This page uses the same PatternBackdrop as the rest of the site. Animations are defined in brand/styles/globals.css. Tokens for opacity and shadow are in brand/styles/tokens.css.