Join Zerohash at The Onchain Brokerage Summit to explore the future of digital asset brokerage, connect with industry leaders, and gain insights into compliance, innovation, and crypto infrastructure.
Design Analysis
This design language is for serious financial infrastructure. It combines a deep forest shell, bright mint actions, pale mint industry sections, and large proof cards to communicate trust, compliance, and modern money mo...
This design language is for serious financial infrastructure. It combines a deep forest shell, bright mint actions, pale mint industry sections, and large proof cards to communicate trust, compliance, and modern money movement. The system should feel institutional first and crypto-adjacent second. Use abstraction, proof, and calm confidence instead of speculative visual noise.
Use deep forest 06170D for top-level hero stages and high-emphasis brand moments. Use bright mint 75F477 for primary CTAs, round arrow buttons, and active states. Use pale mint D9FFD9 for industry hero panels. Use white for normal page sections and F6F6F6 for rounded proof/value cards. Text on light surfaces is 1C1C1C; green text can use 143720 when the section needs more brand continuity.
Use a Hauora-style grotesk: rounded, modern, and sturdy. Hero headlines sit around 60px / 66px at 600 weight. Section titles are 36px to 40px; card titles are around 20px. Keep claims short and direct. Use large numerals for metrics and proof. Avoid fragile thin type; regulated finance needs sturdy typography.
Top-level pages can use a centered dark hero with large type and proof metrics immediately below. Industry and product pages can use split layouts with copy on the left and an abstract dotted illustration or symbolic icon on the right. Trust proof should appear early: client logos, compliance cards, metrics, or certification marks. Use two- and three-column card grids with generous spacing.
Core identity and authoring metadata from the refto.one design model.
A high-trust financial infrastructure language with deep forest hero stages, bright mint actions, pale mint industry pages, and large rounded proof cards.
Institutional, modern, regulated, and high-contrast with a controlled green technology signal.
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 | 66px |
page_title | 50px |
section_title | 45px |
card_title | 25px |
body | 28px |
control | 20px |
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
heading | 600 |
body | 500 |
control | 700 |
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 |
|---|---|
none | 0 |
pale | 1px solid rgba(20,55,32,0.10) |
dark | 1px solid rgba(255,255,255,0.12) |
Resolved shadow token values.
| Property | Value |
|---|---|
none | none |
mint_glow | 0 24px 80px rgba(117, 244, 119, 0.16) |
Resolved motion token values.
| Property | Value |
|---|---|
duration_fast | 160ms |
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.
