/ style guide

The system, on one page.

Colors, type, and components for SourceMain. Tokens are defined once insrc/styles/global.css and consumed as Tailwind theme variables (e.g. text-salmon, bg-ink) — this page mirrors them for reference.

01/ brand

Logo & mark

The “main” line with a branch peeling off it — source control, made visual. The in-app lockups render through the design tokens; the static SVGs in /public/logos are the downloadable, light-background masters.

Horizontal lockup
Stacked + tagline
Glyph · scales
Mono (currentColor)

Master assets · /public/logos

02/ palette

Color

Backgrounds

ink#0B0F14Page background
ink-soft#11161FRaised background
graphite#1A2230Surface
graphite-soft#232C3DSurface (lighter)

Blues

navy#0E2746Deep accent
navy-bright#1E4D8CBright accent

Salmon — brand accent

salmon#FF8A75Primary accent
salmon-soft#FFB8A8Lighter
salmon-deep#E5654EHover / pressed

Neutrals

bone#E8E6E1Body text
fog#9AA3B2Muted text
03/ type

Typography

Inter Variable for UI and prose, JetBrains Mono for labels, eyebrows, and code.

Display / H1

Senior software engineering.

Heading / H2

Built and shipped before.

Heading / H3

A deliberately small practice.

Body

Every engagement gets attention from someone who has built production systems like yours before.

Muted

Secondary copy, captions, and metadata.

Mono / eyebrow

/ tokens · labels · numbers

04/ controls

Buttons & links

05/ surfaces

Surfaces & lines

/ surface

Gradient surface with hairline border and hover lift. Used for cards.

/ grid-overlay

Faint background grid for hero and section texture.

.hairline — neutral divider

.hairline-salmon — accent divider

06/ tokens

Radius

sm · 2px
md · 4px
lg · 8px
Start a project

Tell us what you're building.

A few lines is plenty — we'll reply from a real inbox, usually within a day.

What do you need?

Prefer email? mike@sourcemain.com