CURATED · OPEN · FREE

Light

Developer building blocks for the onchain Internet era.

Developer ToolsFintechBold TypographyCleanProductivity

↓ Download design system (17 MB)Open in OpenDesign

Visit: https://light.so/home

📦 Browse pack contents →

Identity DNA

blockchaindeveloper toolsinfrastructureweb3onchain

A modern toolkit for building the next generation of blockchain applications.

Color

#6C00F6Accent

#000000Ink

#6C7A89Ink soft

#F5F7FABG

#FFFFFFBG soft

#F0F2F5BG quiet

#9EABBEMuted

rgba(0, 0, 0, 0.05)Line

Clean, high-contrast interface with a vibrant purple accent for primary actions.

Typography

grotesque-sans · humanist-sans · monospace

display52px · 700
headline32px · 700
body16px · 400
label14px · 500

Use bold weights for headings to establish strong hierarchy. · Maintain tight leading for large display text. · Body text should be readable with moderate line-height.

Spacing

4px

8px

16px

20px

24px

32px

40px

64px

96px

Consistent 4px base unit with a modular scale for vertical rhythm and component padding.

Surfaces

sm · 4px

md · 8px

lg · 20px

pill · 999px

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

0 2px 1px 0 rgba(0, 0, 0, 0.03) · 0 1px 0 0 rgba(0, 0, 0, 0.05) · 0 0 24px 0 rgba(128, 128, 128, 0.1)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered hero with full-width container, transitioning to a multi-column grid for feature sections.

Motion & Interaction

150msmicro

300mssmall

500msmedium

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

Subtle opacity and transform transitions on hover states. · Smooth easing for all interactive elements.

Subtle color changes or opacity adjustments on interactive elements. · Immediate visual feedback with slight scale or color shift.

Components

button Primary buttons are pill-shaped with purple background; secondary buttons are ghost/outline with text.
card White cards with soft shadows and rounded corners, used for feature highlights.
chip Rounded labels with background color and text, used for categories.
input Text inputs with subtle borders and rounded corners.
hero Full-width centered section with large typography and prominent call-to-action buttons.

Voice & Don'ts

Tone Professional, technical, and forward-looking.
Headlines Bold, clear, and action-oriented statements.
CTAs Direct and encouraging, using verbs like 'Start building' and 'Read docs'.

Don't use thin or light font weights for headlines — screenshot shows bold weight 700.
Don't use a wide, boxy container — screenshot shows a centered content area with clear margins.
Don't use sharp corners on primary elements — screenshot shows rounded corners (pill buttons, rounded cards).
Don't use a dark background for the main page — screenshot shows a light gray/off-white background.
Don't use subtle or muted accent colors for primary CTAs — screenshot shows a vibrant, high-chroma purple.
Don't use complex, multi-colored gradients as primary backgrounds — screenshot shows clean, solid color sections.
Avoid: Casual language
Avoid: Excessive jargon without explanation
Avoid: Passive voice

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

A developer-focused infrastructure platform for web3 and blockchain. The design features a clean, light background with a vibrant purple (#6C00F6) accent for primary actions. Typography uses a bold grotesque-sans for headlines (weight 700) and a readable humanist-sans for body text. Critical donts: don't use thin font weights, don't avoid rounded corners, and don't use dark backgrounds for the main layout. The interface emphasizes clarity, strong hierarchy, and a professional, technical tone.

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