AtomEons design system · made public · 2026
The language we build in. Made public.
The case for publishing your design system in 2026 is the same case for publishing your research: someone competent reads it and the work compounds. Most companies hide this surface. Stripe Press, IBM Carbon, Vercel Geist, Anthropic — the ones that don't are the ones who lead the field. Ours is below.
CC-BY 4.0. Take what's useful. Cite the lab if it shows up in your work.
::conviction
Restraint is the doctrine.
Every visual choice on atomeons.com starts from a single question: does this earn its presence on the page, or is it decoration pretending to be communication? The decoration loses. Always. Most sites lose this fight a hundred times per viewport. We tried.
The accent color does three jobs: hero signature mark, hover state, citation index. Not bullets. Not decorative borders. Not table headers. Not card stripes. Three jobs.Eye sees an accent — eye knows it's signal. The moment cyan becomes wallpaper is the moment the brand turns to plastic.
Background motion is forbidden. We tried bloom-drift gradients, conic rotations, screen-flicker scanlines. They looked technical in mockups and exhausting on actual pages. Premium sites run static surfaces. We deleted the motion in a 100-line CSS pass and the prose started reading at 100% contrast for the first time.
Typography is two values for line-height: 1.7 for body, 1.55 for lede. Three values for size at hero / section / sub. Sentence case. No screaming caps in body. Mono is for code, labels, and one signature eyebrow per page. JetBrains Mono earns its place; it does not decorate.
Photography is one subject per image. No humans, no logos, no readable text. Single cinematic light source. The clichés — matrix code, hooded figures, padlock-and-binary, glowing brains — are forbidden because they're cheap. The constraint sounds limiting and it is liberating: 67 hero images that don't look like every other site in the field.
::palette
Eight tokens. No exceptions.
Every color on the site is one of these eight tokens. If you reach for a hex code that isn't here, you're wrong before you start.
#000000
Void
primary background
Pure black. The cockpit is dark; light mode is refused on brand grounds. We respect prefers-color-scheme by overriding back to dark — on-brand humor.
#0A0F11
Elevation
elevated surface
Cards, modals, table backgrounds. Half-shade above black so a card reads as object, not absence.
#1A2225
Hairline
borders + dividers
Visible only as edge. Never as fill. If you need a fill, you need a different token.
#F2F4F5
Bone
primary text
Off-white at 95% luminance. White-white is harsh on black; this is the calibration.
#C8CCCE
Cool grey
secondary text
Lede paragraphs, body copy where you want emphasis without screaming.
#9BA5A7
Stone
tertiary text
Captions, metadata, eyebrows. Where attention is not the goal.
#22F0D5
Bio-cyan
the accent
Used three places per page: hero signature mark, hover state, citation index [NN]. Not for decoration.
#FFB87A
Amber
warning + ORANGEBOX
Reserved. Pricing pages, caution notes, ORANGEBOX product surface. Never on the same page as cyan as decoration.
::type scale
Inter Variable. Nine tokens. JetBrains Mono for labels.
Inter at variable weight 540 reads as confident-but-not-aggressive. We modulate weight up to 720 only on the accent words inside hero H1s. JetBrains Mono is reserved for code, labels, and one signature eyebrow per page.
| Token | Size | Weight | Line | Use |
|---|---|---|---|---|
| display-1 | 72px | 540 | 0.92 | Homepage hero, manifesto |
| display-2 | 60px | 540 | 1.0 | Page H1, interior heroes |
| h2 | 40px | 540 | 1.05 | Section openers |
| h3 | 28px | 560 | 1.15 | Sub-section + card titles |
| lede | 18px | 400 | 1.55 | Hero supporting paragraph |
| body-lg | 17px | 400 | 1.7 | Long-form prose |
| body | 15px | 400 | 1.65 | Default |
| caption | 13px | 400 | 1.5 | Meta, footnotes |
| mono-label | 11px | 500 | 1.2 | Mono uppercase eyebrows. JetBrains Mono. Tracking 0.22em. |
::rules of the road
- Mono is for code, labels, and one hero eyebrow per page. Not for body text. Not for CTAs.
- Uppercase is for mono labels at 0.22em tracking. Never on H1s. Never on body sans.
- Line-height is 1.7 for body, 1.55 for lede, 1.05 for hero H1. Three values, not eight.
- Max line width is 58ch for lede paragraphs, 62ch for body sections. Wider than that and reading drops.
- Sentence-case headings everywhere. Title-case is a 1990s magazine tic.
- Letter-spacing -0.01em on display sizes (text-4xl and up). The Inter Variable axis at 540 weight reads correctly only with slight negative track.
::photography
One subject. No humans. Single light. Anti-cliché.
All 67 hero images on the site are generated via Google's Nano Banana Pro (gemini-3-pro-image). The prompt template enforces the four rules below. Each one is a constraint that looks limiting and turns liberating once you watch the field full of every-stock-photo-of-cybersecurity-ever.
::four rules
One subject
Every hero image is one thing. A sealed envelope. A drone above fog. An undersea cable in dark water. The frame breathes around it.
No humans, no logos, no readable text
Three constraints that look limiting and become liberating. The image carries an idea, not a moment in someone's life.
Single cinematic light source
Hard rim light. Deep shadow. The composition is half black. Press-photo restraint, not stock-photo coverage.
Premium materials
Machined matte aluminum. Dark slate. Walnut. Carbon. Bio-cyan rim light is the only color event in the frame.
Anti-cliché
No matrix code. No hooded figures. No glowing brains. No padlock-and-binary. The clichés are forbidden because they're cheap.
::motion
Five rules. Mostly no.
The two best-feeling sites of 2024-2026 (Linear, Stripe) move less than every other site in their categories. Motion is a budget you spend, not a goal you chase.
- Background motion is forbidden. Premium sites run static surfaces. Apple, Stripe, Linear, Anthropic — zero of them rotate gradients under body prose.
- Hover state motion lasts 150ms. Anything longer feels sluggish.
- Page-transition motion is none. Next.js full reloads are honest about what's happening.
- The one earned motion is the homepage hero photo-mosaic rotation: 8 seconds between images, 1200ms cross-fade, opt-out on prefers-reduced-motion.
- Loaders and spinners are forbidden. If you need one, your page is too slow. Fix the page.
::primitives
Eight primitives. Used everywhere.
Every component on the site is built from these eight. If you reach for a ninth, you're wrong before you start.
| Primitive | Spec |
|---|---|
| Eyebrow | font-mono text-[11px] uppercase tracking-[0.22em] text-[#22F0D5] · max one per scroll-screen |
| H1 | text-4xl md:text-6xl font-medium leading-[1] tracking-tight · variable-weight 540 · sentence case |
| Lede | text-base md:text-lg leading-[1.55] text-[#C8CCCE] max-w-[58ch] |
| Primary CTA | rounded-full bg-[#22F0D5] px-6 py-3 text-sm font-semibold text-black hover:bg-[#1AD4BD] |
| Ghost CTA | rounded-full border border-[#22F0D5]/40 px-5 py-2.5 text-sm font-medium text-[#22F0D5] hover:bg-[#22F0D5]/10 |
| Section divider | border-b border-[#1A2225] · never a full ruling, only between thematic sections |
| Card | rounded-2xl border border-[#1A2225] bg-[#0A0F11] p-6 · no left-stripe, no inline shadow, no decorative chrome |
| Image hero | aspect-[16/9] max-h-[56vh] · Next.js Image fill · object-cover · bottom gradient transparent-to-black |
::take it
CC-BY 4.0.
Use anything here. Cite the lab if it shows up in something public. Send us what you build — we read it.