# Matter · Design system migration spec

> Source: https://hq.getmatter.com  ·  Curated by OpenDesign  ·  en

> Worth including as an example of a premium, content-focused dark UI with excellent typography and restraint.

## 1. Identity DNA

Matter is a premium digital reading companion, an architecture for focused attention built on a foundation of deep blacks and crisp whites. Its identity is one of crafted simplicity—a system designed not to capture your gaze, but to hold it gently on the words that matter.

**One-liner:** A modern, award-winning read-later app for focused reading and growth.
**Keywords:** read-later · simplicity · modern · awarded · crafted
**Analogy:** A premium digital reading companion

## 2. Color

The color system is a disciplined study in contrast, built on a dark, high-contrast canvas for visual rest. A single accent of #6D7EEC punctuates the deep #0D0D0D background, serving as a quiet guide for interactive elements.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0D0D0D` | main background |
| `--bg-soft` | `#1E1F22` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#969698` | secondary text |
| `--muted` | `#6D7EEC` | placeholder |
| `--accent` | `#6D7EEC` | single accent |
| `--line` | `rgba(150, 150, 152, 1)` | divider |

**Color principle:** Dark, high-contrast canvas for readability and visual rest.

This restraint ensures the interface recedes, leaving the content as the sole protagonist.

## 3. Typography

The typographic voice is set in a clean geometric sans-serif, establishing a tone that is modern and authoritative. Headlines are set with tight negative tracking, allowing large-scale letterforms to lock together as cohesive visual units.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -2.4px | Hero headline |
| h2 | 40px | 1.2 | 700 | -1.8px | Section titles |
| h3 | 32px | 1.25 | 700 | -0.36px | Card titles |
| body | 16px | 1.5 | 400 | -0.17px | Body text |
| small | 14px | 1.4 | 400 | -0.32px | Meta information |
| micro | 12px | 1.3 | 400 | -0.17px | Captions and tags |

**Type rules:**
- Use geometric-sans for all headlines and UI elements.
- Maintain tight negative tracking for large display text.
- Ensure high contrast between ink and background for readability.

## 4. Spacing

A consistent 4px base grid establishes a steady, underlying rhythm for all vertical and horizontal spacing.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with generous whitespace to emphasize content.

## 5. Surfaces

Surfaces are defined by deep elevation and crisp, subtle borders that carve form from the dark canvas. Shadows like 0px 4px 12px rgba(0,0,0,0.3) lift cards and containers, creating a sense of layered depth without visual noise.

- **Radius:** sm 4px · md 8px · lg 12px · pill 30px
- **Shadows:**
  - 0px 4px 12px rgba(0, 0, 0, 0.3)
- **Borders:** 1px solid rgba(150, 150, 152, 0.1)

## 6. Layout

The layout skeleton is a centered column, a single, focused channel for long-form content and testimonials. This structure enforces a clear information hierarchy and eliminates peripheral distraction.

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

**Skeleton:** Centered content with a single-column layout for long-form reading and testimonials.

## 7. Motion & Interaction

Motion is applied with deliberate subtlety, confined to smooth scrolling and gentle hover transitions. Every animation exists to confirm an action or guide a transition, never to decorate.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle hover transitions on interactive elements.
  - Smooth scrolling and page transitions.

- **Hover:** Subtle background or opacity changes on interactive elements.
- **Click:** Immediate feedback with a slight scale or color shift.
- **Transition:** Smooth transitions on all interactive state changes.
- **Keyboard:** Full keyboard navigation support with visible focus indicators.

## 8. Voice & Don'ts

The editorial voice is professional and confident, speaking directly to user value with action-oriented clarity. It avoids the overly casual and the visually cluttered, adhering to a strict minimalism.

- **Tone:** Professional, confident, and focused on user value.
- **Headline style:** Direct, action-oriented, and benefit-driven.
- **CTA style:** Simple, clear, and encouraging.
- **Avoid:** Avoid overly casual or slang-heavy language. / Avoid cluttered or busy layouts. / Avoid distracting animations or effects.

### Don'ts
- ❌ Don't use light backgrounds — screenshot shows a dark theme.
- ❌ Don't use serif fonts for body text — screenshot uses a sans-serif typeface.
- ❌ Don't use busy or chaotic layouts — screenshot shows clean, centered content.
- ❌ Don't use a wide range of colors — screenshot relies on a limited palette.
- ❌ Don't use small, cramped buttons — screenshot uses generous padding and pill shapes.
- ❌ Don't use low-contrast text — screenshot maintains high contrast for readability.

The system deliberately forgoes light backgrounds, serif typography, busy layouts, and a wide color range to protect its core function: undistracted reading.

## System Prompt (paste into AI tool)

```
A modern, award-winning read-later app for focused reading and growth. The design uses a dark, high-contrast canvas with a primary accent of #6D7EEC and ink of #FFFFFF on a #0D0D0D background. Typography is geometric-sans with tight tracking for headlines and generous whitespace for readability. Critical donts: avoid light backgrounds, avoid serif fonts for body text, avoid cluttered layouts, avoid a wide color range, avoid small buttons, and avoid low-contrast text. The overall feel is calm, refined, and focused on content.
```