Runway
Bold fuchsia UI — airy, punchy, high-energy.
Overview
Colors
Typography
Spacing
Base
unit: 8px
Component
padding: 8px (small), 16px (medium), 24px (large)
Section
spacing: 56px (mobile), 80px (tablet), 112px (desktop)
Border Radius
Product image wells, full-bleed banners, media running edge to edge inside a rounded card
—
Badges, inline tags, overline chips, checkboxes, tooltips
Product cards, inputs, search bars, dropdown menus, modals, table frames, image containers
—
—
CTA pill buttons, filter chips, tabs, quantity selectors
Avatars, toggle rails, progress tracks
Components
Clickable actions: primary, secondary and ghost, with their states.
Surfaces that frame grouped content — padding, border and shadow.
Form controls — borders, labels, placeholders and focus rings.
Small markers that carry status or category at a glance.
Dense rows of data — headers, dividers and row states.
Form controls — borders, labels, placeholders and focus rings.
20px box, 2px, radius
Checked fills with a matching border and an checkmark
indeterminate is the same fill with an dash
Disabled drops to 40% opacity
Clickable actions: primary, secondary and ghost, with their states.
20px circle, 2px
Selected swaps the border to and adds a 6px inner dot of the same hue
Disabled drops to 40% opacity
Label with a 10px gap.
Layers above the page — how they sit, dim and dismiss.
Fill, text,, padding 8px 12px, radius, max-width 200px, 6px arrow, 200ms open delay
Position defaults to top and flips to bottom when the trigger sits within 8px of the viewport edge.
Elevation & Depth
Subtle shadow:
1px offset, 3px blur, #000000 at 6%; 1px offset, 2px blur, #000000 at 4%
Medium shadow:
4px offset, 6px blur, #000000 at 7%; 2px offset, 4px blur, #000000 at 5%
Large shadow:
10px offset, 25px blur, #000000 at 10%; 6px offset, 10px blur, #000000 at 6%
Overlay shadow:
25px offset, 50px blur, #000000 at 15%; 12px offset, 24px blur, #000000 at 8%
Product Hover shadow:
6px offset, 12px blur, #000000 at 6%, layered under 14px offset, 32px blur of `{colors.primary}` at 12% — the fuchsia-tinted lift, reserved for product cards
Guidelines
Do
- •Use high-quality product photography with consistent aspect ratios across grids.
- •Make the primary CTA the most visually prominent element on every product card.
- •Show urgency cues (low stock, limited time) near the CTA, not buried in descriptions.
- •Keep the side drawer accessible from every page; never force a full page redirect.
Don't
- •Don't use more than one animated element per viewport; competing motion distracts from products.
- •Don't auto-open newsletter popups before a user has scrolled at least 50% of the page.
- •Don't place product descriptions in font sizes below Body Small (14px); readability drives trust.
- •Don't hide the price or shipping estimate behind a click; transparency reduces drop-off before the confirmation step.
Spacing roles
Iconography
More Design Systems
View allAperture
Deep-navy UI with one violet accent — light, precise, quietly premium.
Odyssey
Sunlit coral UI — airy, photo-led, friendly.
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.
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
