# Light · Design system migration spec

> Source: https://light.so/home  ·  Curated by OpenDesign  ·  en

> A strong example of a modern, developer-focused SaaS interface that balances bold typography with a clean, functional layout.

## 1. Identity DNA

Light presents itself as a developer toolkit for building onchain applications, and its design system reflects that utilitarian ethos. The visual language is that of a well-organized workshop: clean surfaces, strong hierarchy, and components that feel like purpose-built modules.

**One-liner:** Developer building blocks for the onchain Internet era.
**Keywords:** blockchain · developer tools · infrastructure · web3 · onchain
**Analogy:** A modern toolkit for building the next generation of blockchain applications.

## 2. Color

The palette is a study in restraint and focus. A light gray canvas and deep black ink provide maximum readability, while a single vibrant purple accent anchors the interface’s primary actions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F5F7FA` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--bg-quiet` | `#F0F2F5` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#6C7A89` | secondary text |
| `--muted` | `#9EABBE` | placeholder |
| `--accent` | `#6C00F6` | single accent |
| `--line` | `rgba(0, 0, 0, 0.05)` | divider |

**Color principle:** Clean, high-contrast interface with a vibrant purple accent for primary actions.

The principle is clarity through contrast, reserving high-chroma color for moments that require decisive user input.

## 3. Typography

Typographic voice is split between a bold grotesque-sans for authoritative headlines and a humanist-sans for accessible body copy. This pairing allows the interface to communicate both technical confidence and instructional clarity.

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 52px | 1.0 | 700 | -1px | Main headline |
| headline | 32px | 1.2 | 700 | normal | Section headings |
| body | 16px | 1.5 | 400 | normal | Paragraph text |
| label | 14px | 1.3 | 500 | normal | Navigation and small labels |

**Type rules:**
- 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.

## 4. Spacing

Vertical rhythm is governed by a consistent 4px base unit, creating a predictable scaffold for both layout spacing and component padding.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 40 / 64 / 96 px
- **Rhythm:** Consistent 4px base unit with a modular scale for vertical rhythm and component padding.

## 5. Surfaces

Surfaces are defined by soft, layered shadows and subtle 1px borders, establishing a clean, lightweight depth. White cards with rounded corners float gently above the background, containing feature highlights without heavy visual weight.

- **Radius:** sm 4px · md 8px · lg 20px · pill 999px
- **Shadows:**
  - 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)
- **Borders:** 1px solid rgba(0, 0, 0, 0.05)

## 6. Layout

The structural skeleton begins with a full-width, centered hero section that commands attention with large typography. This transitions into a multi-column grid for feature sections, maintaining clear margins and a strong central content column.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is minimal and strictly functional, used to confirm interaction rather than to decorate. All transitions follow a standard cubic-bezier curve, ensuring animations feel smooth, predictable, and professional.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle opacity and transform transitions on hover states.
  - Smooth easing for all interactive elements.

- **Hover:** Subtle color changes or opacity adjustments on interactive elements.
- **Click:** Immediate visual feedback with slight scale or color shift.
- **Transition:** Standard 0.15s cubic-bezier transition for most state changes.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional, technical, and forward-looking, matching the platform’s infrastructure focus. It favors direct, action-oriented headlines and verbs that invite builders to engage.

- **Tone:** Professional, technical, and forward-looking.
- **Headline style:** Bold, clear, and action-oriented statements.
- **CTA style:** Direct and encouraging, using verbs like 'Start building' and 'Read docs'.
- **Avoid:** Casual language / Excessive jargon without explanation / Passive voice

### Don'ts
- ❌ 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.

They deliberately avoid casual language, unexplained jargon, and passive constructions, ensuring the interface speaks with the precision of its own technical foundation.

## System Prompt (paste into AI tool)

```
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.
```