CURATED · OPEN · FREE

Arbitrum

A premium, bold, and high-contrast fintech platform identity.

web3infra

↓ Download design system (25 MB)Open in OpenDesign

Visit: https://arbitrum.io

📦 Browse pack contents →

Identity DNA

blockchaininfrastructurefinanceprogrammable economy

A bold, high-contrast fintech dashboard with a futuristic, geometric edge.

Color

#10E1FFAccent

#05163DInk

rgba(0, 0, 0, 0.5)Ink soft

#FFFFFFBG

#F2F2F2BG soft

rgba(0, 0, 0, 0.1)Line

High-contrast, bold typography dominates, with a primary blue-cyan accent against deep navy and stark white.

Typography

grotesque-sans · geometric-sans · monospace

display56px · 500
h240px · 500
body16px · 500
small14px · 500
caption12px · 500

All text is uppercase by default · Body text uses a geometric sans-serif · Hero text uses a bold grotesque sans-serif

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous padding (40px) and gaps (16px) create a spacious feel.

Surfaces

sm · 5px

md · 5px

lg · 20px

pill · 40px

1px solid rgba(0, 0, 0, 0.1)

0px 1px 2px 0px rgba(0, 0, 0, 0.05)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

A clean, grid-based layout with generous whitespace and a strong left-aligned hero.

Motion & Interaction

220msmicro

300mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth transitions on all interactive elements · Background color and fill transitions

Subtle background-color or opacity changes · Immediate feedback with slight opacity reduction

Components

button Pill-shaped buttons with dark backgrounds and white text, or outlined versions with dark text.
card Case study cards with rounded corners, a dark background for the image area, and white text below.
chip N/A
input N/A
hero A full-width, deep navy container with a bold, oversized headline and a high-contrast background graphic.

Voice & Don'ts

Tone Confident, authoritative, and forward-looking
Headlines Bold, uppercase, and declarative
CTAs Direct and action-oriented

Don't use lowercase for navigation — screenshot shows all-uppercase labels like 'SOLUTIONS' and 'BUILDERS'
Don't use thin or light font weights — screenshot shows exclusively medium (500) and semibold (600) weights
Don't use rounded corners on primary buttons — screenshot shows pills (40px) for buttons, but sharp (5px) or small (20px) radius for other elements
Don't use a soft or pastel color palette — screenshot shows high-contrast navy, white, and a vivid cyan accent
Don't use serif fonts — screenshot shows exclusively sans-serif typefaces for all text
Don't use a cluttered layout — screenshot shows generous whitespace and a clear, left-aligned hierarchy
Avoid: Passive or hesitant language
Avoid: Overly casual or playful tone
Avoid: Complex jargon without context

Inside the pack — real screenshots

Arbitrum — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Arbitrum's design is a premium, high-contrast fintech identity defined by bold, uppercase typography and a stark navy-and-white palette. The primary accent is a vivid cyan (#10E1FF), used for emphasis against a deep navy (#05163D) background. The typography is exclusively sans-serif, with a grotesque-sans display font for hero sections and a geometric-sans for body text, all set in medium (500) or semibold (600) weights and uppercase by default. Layouts are spacious and grid-based, with generous padding and clear hierarchy. Key donts: do not use lowercase navigation, do not use light font weights, do not use a pastel palette, do not use serif fonts, do not use cluttered layouts, and do not use thin borders or outlines without sufficient contrast.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko