Style identity
Orbit Treasury
A dark premium finance-operations study for business banking, cards, treasury, payments, and intelligent controls.
Dark-first premium fintech with indigo data surfaces, warm highlights, and restr themeDesign system Pro AI Kit14 components
Orbit Treasury — Mercury-inspired AI Kit
14 focused, original elements for Orbit Treasury; categories are retained only when supported by the live reference. Published flags remain disabled.
Desktop · 1440 × 11712
Foundations
The visual decisions behind the system
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Visit website
Typography
Font families
Arcadia
Observed live-site body, navigation, controls, and business copy
arcadia, "arcadia Fallback", Inter, ui-sans-serif, system-ui, sans-serif- Weights
- 360–500 observed
- Sizes
- 16px body; 12–14px controls and labels
- Line height
- 24px body; 1.2 controls
- Tracking
- normal body
Fallback: Inter, ui-sans-serif, system-ui, sans-serif
Arcadia Display
Observed live-site hero and section headlines
arcadiaDisplay, "arcadiaDisplay Fallback", Inter, ui-sans-serif, system-ui, sans-serif- Weights
- 480 observed
- Sizes
- 49px hero and 42px section at the audited desktop viewport; responsive clamp
- Line height
- 54px hero; 48px section
- Tracking
- normal to slight positive tracking
Fallback: Inter, ui-sans-serif, system-ui, sans-serif
Inter
Business copy, controls, data labels, and trust detail
Inter, ui-sans-serif, system-ui, sans-serif- Weights
- 400, 500, 600, 700
- Sizes
- 12px labels; 14px controls; 16px body; 20px lead
- Line height
- 1.45 body; 1.2 controls
- Tracking
- normal; -0.02em headings
Fallback: ui-sans-serif, system-ui, sans-serif
System Mono
Balances, IDs, rates, and compact data labels
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace- Weights
- 400, 500, 600
- Sizes
- 11–14px
- Line height
- 1.45–1.6
- Tracking
- -0.02em numeric
Fallback: ui-monospace, SFMono-Regular, Menlo, monospace
Palette
Core colors
canvas / light
#f6f7fblight page backdrop
surface / light
#fffffflight card/control surface
border / light
#dae0eflight hairline separation
text / light
#141825light primary text
muted / light
#616b82light supporting text
accent / light
#6475fflight action signal
accent2 / light
#f3ad9alight secondary action signal
canvas / dark
#080a12dark page backdrop
surface / dark
#141827dark card/control surface
border / dark
#343c5edark hairline separation
text / dark
#f3f5ffdark primary text
muted / dark
#a9b2d1dark supporting text
accent / dark
#7b88ffdark action signal
accent2 / dark
#f3ad9adark secondary action signal
Success
#26a269positive completion
Warning
#d99b35caution
Type scale
Responsive hierarchy
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Hero | clamp(42px, 3.43vw, 49px) | 480 | 54px | normal |
| Section | clamp(34px, 2.92vw, 42px) | 480 | 48px | normal |
| Lead | 20px | 400 | 30px | 0 |
| Body | 16px | 400 | 24px | 0 |
| Metric | 32px | 600 | 36px | -0.05em |
| Data | 12px | 500 | 18px | -0.01em |
Spacing & shape
Layout rhythm
- Density
- Premium spaciousness with compact data islands
- Base unit
- 4px
- Max width
- 1240px
- Section gap
- 112px
- Card padding
- 24px
- Element gap
- 16px
Iconography
Fine outline finance-operation icons with simple data glyphs
1.5px stroke · 16px / 20px / 24px
Use currentColor symbols with text labels for payments, cards, search, and security; keep amounts and permissions primary.
System metrics
Radius
Control 9pxCard 16pxFeature 24pxOrbit 28px
Spacing
Base unit 4pxInline gap 8pxControl gap 12pxCard padding 24pxSection gap 112px
Motion
Interaction 160ms ease-outReveal 500ms cubic-bezier(.2,.8,.2,1)
Elevation
Soft
0 4px 16px rgba(15,23,42,.08)quiet surface separation
Lifted
0 18px 48px rgba(15,23,42,.14)focused proof surface
Surfaces & shape
Canvas
#f6f7fb / #080a12page backdrop
Surface
#ffffff / #141827card and control surfaces
Accent
#6475ff / #7b88ffaction and status emphasis
Guidelines
Do
- Show the observed mechanism beside its claim.
- Keep states and next actions close to their explanation.
- Use semantic color and explicit focus in both themes.
- Let long content wrap or scroll without clipping.
Don't
- ×Do not copy brand marks or protected text.
- ×Do not add generic categories just to increase the count.
- ×Do not make decorative gradients carry essential meaning.
Imagery
Use original orbit lines, card silhouettes, approval flows, receipts, and small data plots; never embed Mercury photography, logos, product screens, or partner marks.
Layout
A dark premium startup-banking shell with compact product navigation, broad hero, business-banking and cards proof, finance-ops modules, security, and responsive stacked data surfaces.
Concept
A complete visual language, ready to inspect.
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
Orbit Treasury Interface Elements
14 published components in collection order
Components
Built from the same system
Production-ready specimens from this AI Kit's approved collection.
More like this
Postman-inspired API Orbit
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
v0-inspired Prompt Workshop
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
Borderless Ledger — Wise-inspired AI Kit
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
Runway-inspired Real-World Studio
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
Observable-inspired Signal Notebook
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
Replit-inspired Build Canvas
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.