Style identity
Borderless Ledger
A calm financial interface study for transparent exchange, account details, cards, and trust-aware money movement.
Fresh green financial clarity with expressive display type and restrained produc themeDesign system Pro AI Kit13 components
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.
Desktop · 1440 × 11616
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
Inter
Product body, transfer values, navigation, and accessible copy
Inter, ui-sans-serif, system-ui, sans-serif- Weights
- 400, 500, 600 observed in Wise design system
- Sizes
- 12px notes; 16px body; 20px lead; 32px values
- Line height
- 1.25 values; 1.5 body; 1.6 legal
- Tracking
- normal; avoid all-caps body
Fallback: ui-sans-serif, system-ui, sans-serif
Wise Sans
Short expressive display and success/feature headlines
"Wise Sans", Inter, ui-sans-serif, system-ui, sans-serif- Weights
- Custom display face; heavy short-headline use
- Sizes
- 48–80px; not body copy
- Line height
- 0.9–1.05 display
- Tracking
- tight display tracking
Fallback: Inter, ui-sans-serif, system-ui, sans-serif
Palette
Core colors
canvas / light
#fffffflight page backdrop
surface / light
#f5f9f1light card/control surface
border / light
#d3e4c8light hairline separation
text / light
#163300light primary text
muted / light
#47613dlight supporting text
accent / light
#9fe870light action signal
accent2 / light
#0f4a06light secondary action signal
canvas / dark
#071407dark page backdrop
surface / dark
#102410dark card/control surface
border / dark
#2f5534dark hairline separation
text / dark
#efffe8dark primary text
muted / dark
#b8d4afdark supporting text
accent / dark
#9fe870dark action signal
accent2 / dark
#b8f29cdark secondary action signal
Success
#2c9b52positive completion
Warning
#d99a20caution
Type scale
Responsive hierarchy
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Display | 72px | 900 | 65px | -0.04em |
| Section | 40px | 700 | 44px | -0.02em |
| Lead | 20px | 400 | 30px | 0 |
| Body | 16px | 400 | 24px | 0 |
| Value | 28px | 600 | 34px | -0.02em |
| Disclaimer | 12px | 400 | 18px | 0 |
Spacing & shape
Layout rhythm
- Density
- Generous, trust-building product rhythm
- Base unit
- 4px
- Max width
- 1240px
- Section gap
- 120px
- Card padding
- 24px
- Element gap
- 16px
Iconography
Simple rounded line icons with square terminals
Light 1.5px–2px stroke · 16px / 24px / 32px
Use globally understandable line icons; pair symbols with text for money movement and never use icons instead of fee/arrival labels.
System metrics
Radius
Control 8pxCard 12pxCalculator 16pxPill 999px
Spacing
Base unit 4pxInline gap 8pxControl gap 12pxCard padding 24pxSection gap 120px
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
#ffffff / #071407page backdrop
Surface
#f5f9f1 / #102410card and control surfaces
Accent
#9fe870 / #9fe870action 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 abstract map lines, currency tokens, card-like rectangles, and editorial route illustrations; do not copy Wise photography, cards, or glyphs.
Layout
A broad financial marketing shell with personal/business/platform routes, prominent calculator, product education cards, trust proof, and destination/account details that collapse linearly on mobile.
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
Borderless Ledger Interface Elements
13 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.
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.
Perplexity-inspired Research Desk
An unofficial, original Perplexity-inspired interface study with 13 focused specimens supported by the live product and content experience.