HASHTONDesign system
Shared criteria for how Hashton looks and behaves
Tokens, type, motifs, and primitives — so every surface stays geometric, engineer-precise, and aligned with the # mark. One system. No template drift.
Foundations
What is this?
A living scoring guide for Hashton UI — the same idea as a rubric applied to design. Visible standards so screens don’t invent their own language.
Brand fit
Hashton sells direct engineer work, not agency theatre. The system should feel sharp, dark, and intentional — clip notches, hash geometry, blue→violet brand energy.
What it covers
Color and type tokens in globals.css, notes in DESIGN.md, primitives in @/components/ui, and this page at /design-system.
Foundations
How we use it
Build UI from these tokens and primitives — don’t invent one-off styles when something already exists.
- Prefer semantic tokens (
bg-bg,text-fg-subtle) over raw hex. - Primary actions use
<Button>— brand gradient, clip-notch, 44px targets. - Dropdowns use
<Select>— custom listbox, Geist Mono, never native OS menus. - Display type is Syne; body is Geist; labels and CTAs are Geist Mono.
- Body copy stays ≥16px. Only mono eyebrows / labels may go smaller.
- When you add or change a primitive, update this page in the same change.
Foundations
Logo
Two assets: the full wordmark for spacious layouts, and the # mark for condensed chrome.
Wordmark
/hashton-logo.png — transparent PNG; wide nav, docs headers, marketing surfaces.
Mark
/hashton-logo-mark.png — transparent PNG; header, favicon-adjacent, condensed layouts. Use .logo-knockout on dark plates.
Foundations
Colors
Near-black surfaces with AAA text hierarchy and brand mark blues → violets. Tokens live in globals.css and map through @theme.
bg
--bg
bg-elevated
--bg-elevated
fg
--fg
fg-subtle
--fg-subtle
muted
--muted
border
--border
border-strong
--border-strong
brand-ice
--brand-ice
brand-blue
--brand-blue
brand-indigo
--brand-indigo
brand-violet
--brand-violet
brand-core
--brand-core
glow-magenta
--glow-magenta
glow-cyan
--glow-cyan
glow-navy
--glow-navy
focus-ring
--focus-ring
brand CTA gradient
Engineer-built
brand gradient text sample
Foundations
Typography
Syne for display. Geist for body. Geist Mono for labels, meta, and CTAs. Readable copy stays at ≥16px.
| Role | Family | Use | Sample |
|---|---|---|---|
| display | Syne | H1–H2, wordmark, titles | Built fast |
| sans | Geist | Body, support copy | Body copy sample |
| mono | Geist Mono | Labels, buttons, meta | Section label |
Syne — The quick brown fox
Geist Sans — The quick brown fox jumps over the lazy dog.
Geist Mono — const ready = true;
Foundations
Motifs
Geometric language tied to the # mark — not soft SaaS chrome.
Hash grid
.hash-grid — soft geometric overlay on atmospheric surfaces.
Clip notch
.clip-notch — cut corner on CTA faces; focus ring stays on the outer control.
Hero mesh
HeroMesh — WebGL navy / blue / violet field via @mesh-gradient/react. Respects prefers-reduced-motion.
Foundations
Accessibility pledge
We aim for WCAG 2.2 Level AAA targets on this marketing site — contrast, type size, and hit areas are part of the brand, not bolted on.
- Contrast & color — text tokens tuned for ≥7:1 on
--bg; don’t rely on color alone. - Readable type — body stays ≥16px; mono labels ≥14px.
- Keyboard & focus — interactive controls expose a visible white focus ring; targets ≥44px.
- Motion — hero mesh, hook dissolves, and service motifs respect
prefers-reduced-motion.
Components
Primitive showcase
Live demos of UI primitives. New primitives belong here in the same PR.
Select
Custom listbox — Geist Mono, sharp corners, white focus ring, 44px target. Optional tone on options for colour-coded filters. Use name in forms. Do not use native <select>.
Badge
Compact status and offer labels. Tones: muted, slate, amber, sky, teal, purple, emerald, red, brand, violet.
Input
Text fields, textareas, and Field labels. Sharp corners, 44px minimum height, white focus ring.