Aperture
Deep-navy UI with one violet accent — light, precise, quietly premium.
Overview
Colors
Typography
Spacing
Base unit
Foundation spacing value
Notable
The scale is dense at the small end (every 2px from 4-12), reflecting Aperture's precision-oriented UI for numeric data
Max
content width: approximately 1080px
Hero
centered single-column with generous padding, lightweight headlines
Feature
sections: 2-3 column grids for feature cards
Full-width
dark sections with #1c1e54 background for brand immersion
Code/dashboard
previews as contained cards with blue-tinted shadows
Precision
spacing: Unlike the vast emptiness of minimalist systems, Aperture uses measured, purposeful whitespace. Every gap is a deliberate typographic choice.
Dense
data, generous chrome: Numeric data displays (tables, charts) are tightly packed, but the UI chrome around them is generously spaced. This creates a sense of controlled density -- like a well-organized spreadsheet in a beautiful frame.
Section
rhythm: White sections alternate with dark brand sections (#1c1e54), creating a dramatic light/dark cadence that prevents monotony without introducing arbitrary color.
Border Radius
Full-bleed dark brand bands, table cells, flush-joined segment groups
Fine-grained marks -- sparkline caps, 1px indicator ticks, progress-bar tracks
The workhorse: buttons, inputs, badges, pills, checkboxes, toggle tracks, tabs, tooltips, tight cards
Standard card containers, chips, table frames
Navigation containers, larger interactive shells, dropdown panels and menus
Featured cards, hero preview frames, modals, the search bar -- the ceiling
Avatars and status dots only -- never buttons or cards
Components
Clickable actions: primary, secondary and ghost, with their states.
Surfaces that frame grouped content — padding, border and shadow.
Small markers that carry status or category at a glance.
Form controls — borders, labels, placeholders and focus rings.
The top bar — brand, links and the primary call to action.
Clean horizontal nav on white, sticky with blur backdrop Brand logotype left-aligned Links:, text with "ss01" Radius: (6px) on nav container CTA: purple button right-aligned ("Sign in", "Start now") Mobile: hamburger toggle with radius
The finishing touches that carry the brand's character.
Elevation & Depth
| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, inline text |
| Ambient (Level 1) | rgba(23,23,23,0.06) 0px 3px 6px | Subtle card lift, hover hints |
| Standard (Level 2) | rgba(23,23,23,0.08) 0px 15px 35px | Standard cards, content panels |
| Elevated (Level 3) | rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px | Featured cards, dropdowns, popovers |
| Deep (Level 4) | rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px | Modals, floating panels |
| Ring (Accessibility) | 2px solid #5947F7 outline | Keyboard focus ring |
Shadow Philosophy: Aperture's shadow system is built on a principle of chromatic depth. Where most design systems use neutral gray or black shadows, Aperture's primary shadow color (rgba(50,50,93,0.25)) is a deep blue-gray that echoes Aperture's navy palette. This creates shadows that don't just add depth -- they add brand atmosphere. The multi-layer approach pairs this blue-tinted shadow with a pure black secondary layer (rgba(0,0,0,0.1)) at a different offset, creating a parallax-like depth where the branded shadow sits farther from the element and the neutral shadow sits closer. The negative spread values (-30px, -18px) ensure shadows don't extend beyond the element's footprint horizontally, keeping elevation vertical and controlled.
Decorative Depth
- Dark brand sections (
#1c1e54) create immersive depth through background color contrast - Gradient overlays with ruby-to-magenta transitions for hero decorations
- Shadow color
rgba(0,55,112,0.08)(--aperture-color-shadow-sm-top) for top-edge shadows on sticky elements
Guidelines
Do
- •Set every headline and body string in Instrument Sans weight 300 — lightness is the voice
- •Enable `ss01` on all Instrument Sans text and `tnum` on every numeral
- •Use `heading` deep navy for titles and `label` for form labels — never pure black
- •Take radius from the element: 4px controls and badges, 5px cards, 6px shells, 8px featured cards
Don't
- •Don't round anything past 8px — `rounded.lg` is the ceiling
- •Don't round something harder to make it matter more; radius tracks size, not emphasis
- •Don't lean on radius alone to separate two surfaces — they still need a 1px `border`
- •Don't fill buttons or links with `ruby` or `magenta`; they are gradient and decor only
Spacing roles
Iconography
Responsive Behavior
More Design Systems
View allOdyssey
Sunlit coral UI — airy, photo-led, friendly.
Runway
Bold fuchsia UI — airy, punchy, high-energy.
Sienna
Warm cream editorial UI — serif headlines, coral actions, calm and literary.
Tensor
Hard-edged industrial UI in absolute black, clean white, and electric signal green.
Atlas
Warm, tactile UI in Carrara paper and Milano red — generously rounded and densely tiled.
1 components
Caret
Cream editorial UI with orange actions — calm, hairline-light, inspectable.
Ready to build faster?
Full access to AI Component Builder: 300+ production-ready components, all top-tier AI models with transparent per-use pricing. Every paid plan includes full Atheros Platform access with courses, tutorials, and challenges.
Starting at $15/month + VAT
