Design System · V1
A living reference for the Nomad Solutions brand, kept current as the work evolves. The voice is the skilled guide, calm and precise. It runs on restraint and exact geometry. The waypoint mark appears rarely, the letterforms are drawn to spec, and nothing is decorative without a reason.
Logo & the arrow motif
Wordmark typefaces
The lockup pairs two faces. NOMAD is drawn from Sora. The custom N and A add the bearing, origin dot, and waypoint counter. SOLUTIONS is set in Outfit, all caps and tracked.
- On light
- #16150f
- On dark
- #faf8f3
- On light
- #75726a
- On dark
- #aeaaa0
NOMAD
- Set NOMAD in Sora, weight 600, at your working size.
- Track to 0.04em.
- Split to curves.
- Take the stem as the unit S (cap height ≈ 4.8 S), then redraw the N and A per the table in Custom Letters below.
Order matters: tracking lands on live type so it stays even, and the custom N and A replace glyphs only after the split.
SOLUTIONS
- Set SOLUTIONS in Outfit, weight Medium (500), all caps.
- Track to 0.34em.
- Split to curves.
Keep SOLUTIONS quiet: tracked, gray, and locked to the N's left edge. It supports the wordmark; it never competes with it.
Never set SOLUTIONS in Sora, in ink black, lowercase, or tightly tracked. Don't center it or let it grow past the wordmark width.
Combining them
SOLUTIONS locks to NOMAD by two measures, both in stem-units S.
- Left edge. SOLUTIONS is locked flush-left to the N’s left edge, never centered.
- Distance. Its baseline sits 2.5 S below NOMAD’s.
- Output. The lockup is SVG; scale it to context and the ratios hold.
Export · no padding, so the viewBox crops tight to the geometry. Clearspace (the height of the N on all sides, min width 140px) is layout space applied in use, never baked into the file.
Custom Letters
Every measure keys to one module, the stem width S. The mark is scalable, so the rules are ratios of S (plus scale-free angles), never fixed pixel values.
| Var | Measure | Calculation | |
|---|---|---|---|
| Shared | S | Stem width | S |
| h | Cap height | 4.8 S | |
| ▲w | Waypoint width | 1.5 S | |
| ▲h | Waypoint height | 0.60 S | |
| The N | Ø | Origin dot | 1.0 S |
| g | Stroke gap | 0.25 S |
The dot and the bearing are one gesture, mirrored across the stroke.
- The origin dot is 1.0 S wide and centered on the baseline, so its edges meet the stem's.
- It detaches from the stem foot by the stroke gap g.
- The bearing echoes the move above the cap line: base on the cap line, right stem stopping g short, so the same gap sits under the arrow.
- Its base is 5/4 S and its height 1/2 S (the dot's radius), which sets the 5:2 waypoint.
It reads as a waypoint, not a slope to match against the legs.
- The inner arrow is locked to the 5:2 waypoint, the same triangle as every marker in the system.
- Letter and arrow share the apex centerline, not the slope; they are deliberately not parallel.
- The leg angle is left to Sora; the typeface sets it, so we don't dimension it.
- A quieter second arrow sits in the counter above, left in the negative space, unmarked.
The waypoint
The waypoint is the only decorative element in the system, the N's bearing lifted out as a standalone 5:2 triangle. It appears small, intentional, and rarely, a marker, not a pattern.
How I work
Marks the start of a section. One per section, baseline-aligned with the label.
How clients arrive
Dark bands soften the pair: the mark lifts to the lighter ochre, the label recedes. Same geometry, quieter voice.
The one place the mark grows: a single 24px waypoint anchors a confirmation. Still the 5:2 triangle, never a different shape.
Reserve the waypoint for section eyebrows and the occasional brand moment, one per section, always pointing up. Lists use a small square; directional cues (links, CTAs) use a plain stroke arrow. Ink or accent only, 10–16px in UI; a single 24px mark may anchor a confirmation moment.
Never use the triangle as a bullet or list marker, and never in rows, wallpaper patterns, or oversized watermarks. No gradients, outlines, or rotation. If it repeats, it's wrong.
Favicon
The favicon is the N alone (dot and bearing intact), knocked out of an ink tile. It survives to 16px; below that the bearing reads as a single notch, which is fine. Never use the full wordmark as a favicon.
- favicon.svg · modern browsers, scalable
- favicon-32.png / favicon-16.png · fallback
- apple-touch-icon.png · 180, iOS home screen
- icon-512.png · PWA / manifest
Embed code lives in the SEO handoff doc, section 02.
Color
Foundation
Ink
ink · warm neutralWarm neutral scale anchored on the logo's two inks: ink-950 and ink-500.
White & Black
the standing pairDeliberately off, never the browser's pure defaults. The standing pair in every build; here they carry the focus ring and halo.
Cream
cream · surfacesWarm paper grounds. Every surface is tinted, so nothing ever sits on pure white.
Accent
Ochre, the lone warm accent in an ink-and-cream system. It carries links, buttons, and the arrow when it needs emphasis, never backgrounds larger than a button.
Ochre
ochreWarm sand, tuned to the warm neutrals. Low-contrast and tonal; the single brand accent.
Links and CTAs, primary buttons, and the section eyebrow arrow. Emphasis only, never a background larger than a button.
Semantic
Four status families for feedback only: success, error, warning, and info. Success and error are the green and red from the Do and Don't cards; warning is a brighter amber, kept distinct from the ochre accent; info is the lone cool tone.
Success
success · pineConfirmations and valid states. The green from the Do column.
Error
error · clayFailures and destructive actions. The red from the Don't column.
Warning
warning · amberCaution and reversible risk. A brighter amber, kept distinct from the ochre accent.
Info
info · lakeNeutral notices and in-progress states. The lone cool tone, kept quiet.
Typography
Geometric, pointed apexes, the closest Google-Fonts kin to the wordmark's letterforms. Weights 600/700, tight tracking.
Warm, highly readable grotesk for paragraphs and UI. Weights 400/500/600.
Eyebrows, labels, code, small metadata. Always small, uppercase tracking 0.12em for labels.
Scale
- text-6xl40–60pxDisplay: hero only
- text-5xl32–48pxH1: page titles
- text-3xl24–30pxH2: section titles
- text-xl18–20pxH3: card titles, service names
- text-lg16–18pxLede: intros and standfirst paragraphs
- text-base16pxBody: the default reading size
- text-sm14pxSmall: captions, meta, footer
- label / mono12pxBuilt for wherever you're headed
Lists & numbering
- Platform strategy
- Custom development
- Retainer support
Unordered lists take a small square, never the waypoint. Bullets repeat by nature; the triangle has to stay rare.
- Talk it through
- Agree on scope
- Build and support
Sequences count in leading-zero mono accent. The numbers are always generated, a counter or a map index, never typed. Build recipes, process steps, and section headings share the treatment.
Spacing & shape
- 1px
- 4px
- 8px
- 16px
- 24px
- 32px
- 64px
- 96px
Square corners everywhere; the brand is geometric. rounded-none on cards, buttons, inputs. No shadows; hierarchy comes from the 1px ink-100 border and background shifts (cream → card white).
Mobile-first; base styles target the phone. Two breakpoints: tablet 768px and desktop 1024px. Multi-column layouts stack to one column below tablet. The container caps at max-w-6xl (1152px), reading text at max-w-prose (65ch).
Links, buttons & focus
Interaction runs on two rules. Motion is earned, underlines grow and arrows nudge, never instant and never a static underline at rest. And every hover has a matching:focus-visible state, so keyboard users get the same affordance as the mouse.
Links & buttons
Live, not screenshots. Hover each one, or pressTab to walk them with the keyboard and watch the focus ring follow.
Use for inline links inside body copy. A bare <a> is a text link — the language is an element default, so any class opts an anchor out and UI links exempt themselves. Ochre at rest, shifting to ink on hover; the underline is always present and never animates. That grow is reserved for nav and CTA links.
Use for primary actions and CTAs. Ink fill, darkens to ochre on hover and focus, and nudges the stroke arrow 8px right. Square corners, no shadow.
Use for links on dark backgrounds, the footer and dark bands. Mono, cream, with a cream underline that grows the same way; it stays cream on hover, never the ink used on light surfaces.
Focus states
A 2px ring (#2e2e2e) at 2px offset, floated on a 6px halo (#fefefe). From the element outward it reads halo, ring, halo, so one of the two layers contrasts with any background. Ink surfaces declare data-surface="ink" and the pair inverts: white ring, ink halo. Applied with:focus-visible so it shows for keyboard and assistive tech without flashing on every mouse click. It rides on top of the hover treatment, never replaces it. The cards below carry data-state="focus", which pins the real rules: the same ring, the same ochre fill, the same nudged arrow and drawn underline a keyboard triggers.
Ochre fill with the ring on its halo; the pair reads against any fill without special cases.
Border darkens to ink and the ring sits 2px off on its halo, the same treatment every element gets.
Give every interactive element a visible :focus-visible ring, and match every hover with an equivalent focus state. Keep the offset clear of the growing underline.
Never set outline:none without a visible replacement, signal state with color alone, or hide an action behind a hover a keyboard can't reach.
Icons
UI icons are Heroicons (outline), a 24×24 grid with a 1.5px stroke, dropped in inline so they inherit currentColor. The only custom mark is the waypoint triangle from the logo set; everything else is Heroicons, unmodified.
Use the outline set at 1.5px, inline, with stroke: currentColor so they theme. Size 16–28px, aria-hidden="true" when decorative. Accent (#826012) only for emphasis, like the service rows.
Don't mix outline with solid icons, recolor them off-palette, or press the waypoint triangle into service as a generic UI icon.