Aperture

Deep-navy UI with one violet accent — light, precise, quietly premium.

Instrument SansSource Code Pro

26 colors6 component specsLight & dark

Overview

Aperture is a precise, data-dense interface. A clean white canvas (#ffffff) carries deep navy headings (#061b31) and a saturated violet (#5947F7) that anchors interactive states.

The variable cut of Instrument Sans defines Aperture's visual identity. Every text element enables the OpenType "ss01" stylistic set for a geometric, modern rhythm. At display sizes (48–56px), it runs at weight 300, creating an ethereal, almost whispered authority. Negative letter-spacing tightens headlines into precise blocks, while tabular numerals via "tnum" keep numeric data aligned.

What truly distinguishes Aperture is its shadow system. Multi-layer blue-tinted shadows combine rgba(50,50,93,0.25) with rgba(0,0,0,0.1) for cool atmospheric depth, as if controls float in a twilight sky. The blue-gray undertone ties elevation directly to the navy-violet palette.

Key Characteristics:

Instrument Sans with OpenType "ss01" on all text -- a custom stylistic set that defines Aperture's letterforms
Weight 300 as the signature headline weight -- light, confident, anti-convention
Negative letter-spacing at display sizes (-1.4px at 56px, progressive relaxation downward)
Blue-tinted multi-layer shadows using rgba(50,50,93,0.25) -- elevation that feels brand-colored
Deep navy (#061b31) headings instead of black -- warm, premium, precision-grade
Radius assigned per element -- 4px controls, 5px cards, 6px shells, 8px featured cards; rounded.full reaches avatars and status dots only
Ruby (#ea2261) and magenta (#f96bee) accents for gradient and decorative elements
Source Code Pro as the monospace companion for code and technical labels

Accent: #5947F7
Headings: Instrument Sans
Code: Source Code Pro
Base unit: 8px
UI radius: 5px
Modes: Light & dark

Colors

Brand5

Surfaces & Borders6

Text4

States5

Groups6

Typography

AaABCDEFGHIJKLM abcdefghijklm 0123456789

Instrument SansPrimary · system-ui

AaABCDEFGHIJKLM abcdefghijklm 0123456789

Source Code ProMonospace · ui-monospace

Ship interfaces with tasteA heading set in Instrument Sans sits over body copy in Instrument Sans, the pairing this system is built on.

PairingHeading over body

Display Hero
56px · 300 · Instrument Sans
The quick brown fox jumps over the lazy dog
Display Large
48px · 300 · Instrument Sans
The quick brown fox jumps over the lazy dog
Section Heading
32px · 300 · Instrument Sans
The quick brown fox jumps over the lazy dog
Sub-heading Large
26px · 300 · Instrument Sans
The quick brown fox jumps over the lazy dog
Sub-heading
22px · 300 · Instrument Sans
The quick brown fox jumps over the lazy dog
Body Large
18px · 300 · Instrument Sans
The quick brown fox jumps over the lazy dog
Body
16px · 300-400 · Instrument Sans
The quick brown fox jumps over the lazy dog
Button
16px · 400 · Instrument Sans
The quick brown fox jumps over the lazy dog
Button Small
14px · 400 · Instrument Sans
The quick brown fox jumps over the lazy dog
Link
14px · 400 · Instrument Sans
The quick brown fox jumps over the lazy dog
Caption
13px · 400 · Instrument Sans
The quick brown fox jumps over the lazy dog
Caption Small
12px · 300-400 · Instrument Sans
The quick brown fox jumps over the lazy dog
Caption Tabular
12px · 300-400 · Instrument Sans
The quick brown fox jumps over the lazy dog
Micro
10px · 300 · Instrument Sans
The quick brown fox jumps over the lazy dog
Micro Tabular
10px · 300 · Instrument Sans
The quick brown fox jumps over the lazy dog
Nano
8px · 300 · Instrument Sans
The quick brown fox jumps over the lazy dog
Code Body
12px · 500 · Source Code Pro
The quick brown fox jumps over the lazy dog
Code Bold
12px · 700 · Source Code Pro
The quick brown fox jumps over the lazy dog
Code Label
12px · 500 · Source Code Pro
The quick brown fox jumps over the lazy dog
Code Micro
9px · 500 · Source Code Pro
The quick brown fox jumps over the lazy dog
Progressive tracking
4px · at · Letter-spacing tightens proportionally with size: -1.
The quick brown fox jumps over the lazy dog

Spacing

Base unit

8px

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.

Corner radius

none0pxFull-bleed dark brand bands, table cells, flush-joined segment groups

xs1pxFine-grained marks -- sparkline caps, 1px indicator ticks, progress-bar tracks

sm4pxThe workhorse: buttons, inputs, badges, pills, checkboxes, toggle tracks, tabs, tooltips, tight cards

md5pxStandard card containers, chips, table frames

lg6pxNavigation containers, larger interactive shells, dropdown panels and menus

xl8pxFeatured cards, hero preview frames, modals, the search bar -- the ceiling

pill9999px

full9999pxAvatars and status dots only -- never buttons or cards

Component specs

Buttons

Clickable actions: primary, secondary and ghost, with their states.

Primary Purple: Background: Text: Padding: 8px 16px Radius: (4px) Font:, "ss01" Hover: background Use: Primary CTA ("Start now", "Contact sales") Ghost / Outlined Background: transparent Text: Padding: 8px 16px Radius: (4px) Border: 1px solid Font:, "ss01" Hover: background shifts to rgba(83,58,253,0.05) Use: Secondary actions
Transparent Info: Background: transparent Text: Padding: 8px 16px Radius: (4px) Border: 1px solid Use: Tertiary/info-level actions
Neutral Ghost: Background: transparent Text: Padding: 8px 16px Radius: (4px) Outline: 1px solid rgb(212,222,233) Use: Disabled or muted actions

Cards & Containers

Surfaces that frame grouped content — padding, border and shadow.

Background: Border: 1px solid (standard) or 1px solid (dark accent) Radius: (tight), (standard), (comfortable), (featured) Shadow (standard): rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px Shadow (ambient): rgba(23,23,23,0.08) 0px 15px 35px 0px Hover: shadow intensifies, often adding the blue-tinted layer

Badges / Tags / Pills

Small markers that carry status or category at a glance.

Neutral Pill: Background: Text: #000000 Padding: 0px 6px Radius: (4px) Border: 1px solid Font:
Success Badge: Background: rgba(21,190,83,0.2) Text: Padding: 1px 6px Radius: (4px) Border: 1px solid rgba(21,190,83,0.4) Font:

Inputs & Forms

Form controls — borders, labels, placeholders and focus rings.

Border: 1px solid Radius: (4px) Focus: 1px solid or purple ring Label:, Text: Placeholder:

Navigation

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

Decorative Elements

The finishing touches that carry the brand's character.

Dashed Borders: 1px dashed (purple) for placeholder/drop zones 1px dashed (magenta) for magenta-themed decorative borders
Gradient Accents: Ruby-to-magenta gradients ( to ) for hero decorations Brand dark sections use backgrounds with white text

Elevation & depth

Flat (Level 0)Page background, inline textNo shadow

Ambient (Level 1)Subtle card lift, hover hintsrgba(23,23,23,0.06) 0px 3px 6px

Standard (Level 2)Standard cards, content panelsrgba(23,23,23,0.08) 0px 15px 35px

Elevated (Level 3)Featured cards, dropdowns, popoversrgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px

Deep (Level 4)Modals, floating panelsrgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px

Ring (Accessibility)Keyboard focus ring2px solid #5947F7 outline

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
Keep rounded.full for avatars and status dots only — nothing else is pill-shaped

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
Don't put warm hues (orange, yellow) on interactive elements

Spacing roles

One value per role — no ranges, no alternatives.

Role	Step	Value
Button padding	/	8px 16px
Input padding	/	8px 12px
Chip padding	/	2px 8px
Card padding		16px
Card content gap		12px
Stacked row gap		8px
Menu item padding	/	6px 12px
Menu item gap		4px
Modal padding		20px
Modal section gap		16px
Section gap		64px
Page gutter		20px
Icon-to-label gap		6px

Iconography

Pack: Lucide — geometric and even-weighted, so it sits beside Instrument Sans at weight 300 without shouting.
Style: 1.5px stroke, square terminals.
Weight rule: Keep the stroke at 1.5 — a 2px icon outweighs the type it labels.
Size: 20px in controls and nav; 16px inline with body text; 24px for empty states and feature moments.
Colour: icons inherit currentColor — never a hardcoded hex, so they follow the text token they sit beside.
Import: pull in icons individually, never the whole set.

Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	<640px	Single column, reduced heading sizes, stacked cards
Tablet	640-1024px	2-column grids, moderate padding
Desktop	1024-1280px	Full layout, 3-column feature grids
Large Desktop	>1280px	Centered content with generous margins