Loading…
Loading…
Brand
A reference page for the ssegning.com mark: the geometry it's built from, its variants, the space it needs to breathe, and the ways not to use it.
Two offset squircles, combined with an evenodd fill so their overlap cancels into a transparent lens instead of a flat double-fill. Two masses, one shared negative space — not a letterform, not a literal object.
Monochrome is the default — the mark inherits currentColor from whatever text color it sits in. Accent and reversed are explicit overrides for the two situations that come up on this site.
Monochrome
Default. Inherits text color.
Accent
Forces the accent color.
Reversed
For a filled ink or accent surface.
16px, actual favicon scale, shown at native size next to this line — the two crescents and the gap between them still read as a mark, not a smudge.
Mark and wordmark sit on the wordmark's baseline with a fixed gap — see brand-lockup.tsx. Keep clear space of at least a quarter of the mark's height on every side: no text, rule, or edge inside that margin.
Clear space ≥ ¼ mark height, shown here as the dashed inner boundary
The mark is a single-color, single-piece geometry. These four changes are the ones most likely to get reached for — don't.
Don't recolor per shape
One fill, one color. Splitting the two masses into different colors breaks the negative-space read.
Don't stretch
The squircle geometry only holds its proportions at 1:1. Scale it uniformly or not at all.
Don't add effects
No gradients, no drop shadows. The site's whole visual language is flat surfaces and hairline borders — the mark follows the same rule.
Don't crowd it
No text, panel edge, or second mark inside the clear-space margin defined above.
Achromatic canvas and ink, plus a single rust/copper accent — reserved for links, focus rings, the primary CTA, and metric emphasis. Never a background or a decorative fill.
| Token | Light | Dark | Role |
|---|---|---|---|
| --color-canvas | #ffffff | #08090a | Page background |
| --color-canvas-subtle | #f6f6f5 | #131315 | Recessed surface (skip link, code blocks) |
| --color-surface | #ffffff | #17181a | Cards, panels |
| --color-border | #e6e4e1 | #2a2b2e | Hairline dividers |
| --color-border-strong | #d8d5d1 | #3a3b3f | Hover border state |
| --color-ink | #0a0a0a | #f7f7f6 | Primary text |
| --color-ink-muted | #6b6a68 | #9a9a9a | Secondary text |
| --color-accent | #c2410c | #fb923c | Links, focus ring, CTA, emphasis — never a fill/background |
| --color-accent-ink | #ffffff | #171717 | Text on a filled accent surface |
| --color-danger | #b3261e | #ff6f61 | Error states |
The type scale actually in use across the site, from globals.css. System sans for UI/body, system mono reserved for numerals, dates, and eyebrow labels.
text-display
clamp(2.25rem, 1.65rem + 2.6vw, 3.25rem) / 1.1 / -0.02em
Platform engineering
text-heading-lg
clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem) / 1.15 / -0.015em
What I can take off your plate
text-heading
1.375rem / 1.25 / -0.01em
Kubernetes Platform Builds
text-subheading
1.125rem / 1.4
Let's talk about what you're building.
text-base (body)
1rem / 1.5, system sans
I design, build, and operate Kubernetes platforms and the services that run on them.
text-caption
0.8125rem / 1.4 / 0.08em, mono, uppercase
Independent consultancy
This page can't hand you a file to save — select the markup below, or copy it straight to the clipboard.
brand-mark.svg
<svg viewBox="0 0 64 64" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M20 6H32A14 14 0 0 1 46 20V32A14 14 0 0 1 32 46H20A14 14 0 0 1 6 32V20A14 14 0 0 1 20 6Z
M32 18H46A14 14 0 0 1 58 32V46A14 14 0 0 1 46 58H32A14 14 0 0 1 18 46V32A14 14 0 0 1 32 18Z"
/>
</svg>