Standalone — share with any LLM
Sphere Partners — Design System
One page. No site chrome. Paste this URL into Claude (or any LLM) and ask it to produce UI in this brand’s voice. Tokens, typography, colors, spacing, buttons, icons and logo are all live below — values come straight from style-tokens.ts so what you see here is what ships.
Brand context
Edit these to match the engagement. The LLM reading this page will use them as the source of truth for company name, voice, and product context.
Company name
Sphere Partners
General description
A digital engineering partner helping ambitious companies build, modernize, and scale software.
Brief company resume
Founded in Chicago, US. Senior-heavy delivery teams across the Americas and Europe. Strong in legacy modernization, AI/ML, cloud, and data engineering. Spec-driven, outcome-backed engagements with first production phase typically live in 6–12 weeks.
Saved in localStorage on this device only. Use the Reset button to restore the default Sphere brand.
Section 01
Colors
Two layers: primitive palettes (raw hex values, scaled 50→950) and semantic tokens (named by purpose: text, surface, brand, status). Always reach for semantic tokens first — they map intent to value and survive a re-skin.
How to use: Import from @/design-system/style-tokens. Examples: colors.text.primary, colors.brand.primary, colorPrimitives.blue[500]. Avoid hex literals in JSX.
Colors
Primitives
White
white
#ffffff
Black / Neutral
black.50
#f7f8f8
black.100
#ededf1
black.200
#d8dadf
black.300
#b6b9c3
black.400
#8d92a3
black.500
#6f7588
black.600
#5a5f6f
black.700
#494d5b
black.800
#3f424d
black.900
#383a42
black.950
#1f2025
Blue
blue.50
#edf8ff
blue.100
#d7edff
blue.200
#b9e1ff
blue.300
#88d0ff
blue.400
#50b5ff
blue.500
#2893ff
blue.600
#1677ff
blue.700
#0a5ceb
blue.800
#0f4abe
blue.900
#134295
blue.950
#112a5a
Green
green.50
#f2fbf4
green.100
#e1f7e5
green.200
#c4eecc
green.300
#96dfa4
green.400
#61c876
green.500
#3bac52
green.600
#2b8e40
green.700
#257035
green.800
#22592e
green.900
#1d4a28
green.950
#0b2812
Gold & Red (accent)
gold.500
#ffb800
red.500
#ff4d4f
Semantic Tokens
Text
text.white
#ffffff
text.black
#1f2025
text.primary
#1f2025
text.secondary
#6f7588
text.muted
#b6b9c3
text.subtle
#d8dadf
text.blue
#1677ff
text.green
#3bac52
Surface
surface.white
#ffffff
surface.subtleGray
#f7f8f8
surface.mutedGray
#ededf1
surface.disabledGray
#d8dadf
surface.dark
#1f2025
surface.ghostBlue
#edf8ff
surface.ghostGreen
#f2fbf4
Brand
brand.default
#1677ff
brand.hover
#2893ff
brand.pressed
#0a5ceb
brand.disabled
#d8dadf
Status
status.success
#3bac52
status.warning
#ffb800
status.danger
#ff4d4f
Section 02
Typography
Two type families. DM Sans is the default for UI, body, headings, and microcopy. Lora (italic) is reserved for editorial accents inside headlines — sets emotional weight without a wall of italics.
How to use: Use the named heading/body styles (headingStylesDMSans.h1, typeStylesDMSans.lg.normal). Don’t hand-pick font-size/font-weight — pick from the scale. Pair italic Lora as ONE phrase inside a sans heading, never as full body copy.
Typography
DM Sans — UI & Body
Headings
Sphere Partners
Heading / Tab
SemiBold · 85px
Sphere Partners
Heading / H1 — Hero
ExtraBold · 56px
Sphere Partners
Heading / H2 — Section
Black · 48px
Sphere Partners
Heading / H3
Black · 42px
Sphere Partners
Heading / H4
ExtraBold · 32px
Sphere Partners
Heading / H5
Black · 24px
Sphere Partners
Heading / Mobile
Black · 32px
XL — 20px
Sphere Partners
XL / Normal
Regular · 20px
Sphere Partners
XL / Strong
Bold · 20px
Sphere Partners
XL / Capital
SemiBold · 20px · uppercase
LG — 16px
Sphere Partners
LG / Normal
Regular · 16px
Sphere Partners
LG / Strong
Bold · 16px
Sphere Partners
LG / Capital
ExtraBold · 16px · uppercase
Base — 14px
Sphere Partners
Base / Normal
Regular · 14px
Sphere Partners
Base / Strong
Bold · 14px
Sphere Partners
Base / Capital
Medium · 14px · uppercase
SM — 12px
Sphere Partners
SM / Normal
Regular · 12px
Sphere Partners
SM / Strong
Bold · 12px
Sphere Partners
SM / Capital
Medium · 12px · uppercase
Font: DM Sans variable — all weights available (Regular → Black)
Lora — Editorial & Italic Accents
Headings
Sphere Partners
Heading / H1
Bold Italic · 56px
Sphere Partners
Heading / H2
SemiBold Italic · 48px
Sphere Partners
Heading / H3
SemiBold Italic · 32px
Sphere Partners
Heading / H4
SemiBold Italic · 24px
Sphere Partners
Heading / Mobile
SemiBold Italic · 32px
XL — 20px
Sphere Partners
XL / Normal
Italic · 20px
Sphere Partners
XL / Strong
Bold Italic · 20px
Sphere Partners
XL / Capital
Bold Italic · 20px · uppercase
LG — 16px
Sphere Partners
LG / Normal
Italic · 16px
Sphere Partners
LG / Strong
Bold Italic · 16px
Sphere Partners
LG / Capital
Bold Italic · 16px · uppercase
Base — 14px
Sphere Partners
Base / Normal
Italic · 14px
Sphere Partners
Base / Strong
Bold Italic · 14px
Sphere Partners
Base / Capital
Bold Italic · 14px · uppercase
SM — 12px
Sphere Partners
SM / Normal
Italic · 12px
Sphere Partners
SM / Strong
Bold Italic · 12px
Sphere Partners
SM / Capital
Bold Italic · 12px · uppercase
Font: Lora — loaded weights: 400i, 600i, 700i
Section 03
Spacing
A single numeric scale shared by margin, padding, and gap. Pick adjacent steps in a stack (e.g. spacing[3] and spacing[4]); avoid arbitrary values like 13px.
How to use: Reference as spacing[N] from style-tokens. Use the scale for everything that has a vertical rhythm — sections, cards, buttons, form fields, lists.
Spacing
spacing[1] = 4pxspacing[2] = 6pxspacing[3] = 8pxspacing[5] = 12pxspacing[6] = 16pxspacing[7] = 20pxspacing[8] = 24pxSection 04
Border Radius
Three intents: small radius for inputs and chips, medium radius for cards and panels, full radius for pill-shaped buttons and tags. Mixing two intents at once on the same component looks accidental — pick one.
How to use: radii.sm for form controls, radii.md/radii.lg for cards, radii.full for pills. Buttons in this system are *always* radii.full.
Border Radius
radii.sm
8pxradii.full
32pxSection 06
Icons
Three sets: Line (1206 icons, default for UI affordances), Monochrome (285, soft accent), Solid (189, emphasis only). Stay inside one set per surface — mixing styles reads as inconsistency.
How to use: Import from @iconscout/react-unicons (line) or the monochrome/solid packages. Click any icon in the gallery to copy its import name.
Icons
@iconscout/react-unicons@iconscout/react-unicons-monochrome@iconscout/react-unicons-solidShowing 400 of 649 — use search to find specific icons
Section 07
Logo
Two variants only: light (on dark backgrounds), dark (on light backgrounds). Never recolor, outline, or place on a busy photo without the standard 24px clear-space.
How to use: Use the existing <Logo variant="light|dark" /> component. The SVG sources are pinned in Vercel Blob — do not inline alternative artwork.
Logo
Light variant — on dark backgrounds
<Logo variant="light" />→ public/images/logo-light.svg
Dark variant — on light backgrounds
<Logo variant="dark" />→ public/images/logo-dark.svg