The DeFi Chain. Powered by Uniswap. Unichain is the fast, decentralized L2 purpose-built for onchain markets.
Design Analysis
This design language is for onchain finance products that need to feel direct, technical, and high-energy. It uses a saturated magenta stage, visible grid structure, oversized white or magenta headlines, dark plum pill a...
This design language is for onchain finance products that need to feel direct, technical, and high-energy. It uses a saturated magenta stage, visible grid structure, oversized white or magenta headlines, dark plum pill actions, and calm rounded cards for app and builder content. Use one major visual object per page: a magenta hero field, a technical diagram, an app directory, or a builder resource grid. The interface should feel protocol-native, not like a generic fintech dashboard.
Use F50FB4 and nearby hot pinks for the main stage, hero energy, gradient headings, and grid highlights. This color can own the whole first viewport. Use 371A37 for primary actions. It grounds the pink field and gives CTAs enough visual weight. Use FFD6F1 for pale diagrams, technical grid surfaces, and active filters.
Use a rounded grotesk for almost everything. Hero headlines can be very large, around 90px / 90px with medium-heavy weight. Section titles sit around 45px / 45px; body and controls can share an 18.75px scale. Use a high-contrast italic serif only for selected headline words. The serif should create a sharp product-editorial moment, not become a paragraph font.
Start with a full-bleed magenta or pale technical stage. Center hero copy and actions, then transition into white sections for product directories, builder resources, and editorial content. Use grid overlays as a structural signal. Cards should be broad, rounded, and low-shadow. Directory pages should prioritize search and filter controls above card grids.
Core identity and authoring metadata from the refto.one design model.
A high-energy onchain finance design language with saturated magenta grid stages, oversized mixed display type, dark plum pill actions, pale technical diagrams, and rounded app/resource cards.
Bold, protocol-native, kinetic, and technical, with broad color confidence but restrained component depth.
Fields outside the primary renderer remain visible here as structured fallback content.
Primitive palettes and resolved token colors for the active preview mode.
Spacing scales rendered as tokens with a simple length specimen.
Corner radii tokens with a live surface sample.
Font families from the current design YAML, including fallback stacks and usage character.
Top-level typography scale rendered as live text specimens.
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
hero_display | 90px |
page_display | 78px |
section_title | 45px |
card_title | 34px |
body_large | 22.5px |
control | 20px |
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
display | 550 |
title | 550 |
control | 500 |
body | 400 |
Fields outside the primary renderer remain visible here as structured fallback content.
Border tokens with resolved values.
Shadow tokens with resolved values and shadow samples where applicable.
Motion tokens rendered as resolved values for timing and personality.
Resolved border token values.
| Property | Value |
|---|---|
hairline | 1px solid rgba(19, 20, 22, 0.10) |
pale | 1px solid rgba(245, 15, 180, 0.16) |
plum | 1px solid rgba(55, 26, 55, 0.32) |
Resolved shadow token values.
| Property | Value |
|---|---|
none | none |
button | 0 2px 8px rgba(55, 26, 55, 0.20) |
card_hover | 0 16px 40px rgba(19, 20, 22, 0.08) |
Resolved motion token values.
| Property | Value |
|---|---|
duration_fast | 140ms |
duration_base | 220ms |
easing | cubic-bezier(.2, 0, 0, 1) |
Low-complexity component tokens rendered as design-system specimens.
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Compact list of patterns the design system explicitly avoids.