# Onroadmap · Design system migration spec

> Source: https://www.onroadmap.com  ·  Curated by OpenDesign  ·  en

> This site is a great example of how a vibrant, multi-colored accent system can work within a highly restrained, clean layout to create a professional yet approachable product tool.

## 1. Identity DNA

Onroadmap functions as a digital whiteboard for team priorities, its design stripped of all but the essential. Like a physical planning surface, it provides a clean, neutral field upon which vibrant markers can划 out tracks and priorities with clarity.

**One-liner:** A minimalist roadmap tool for aligning teams and visualizing priorities.
**Keywords:** roadmap · planning · alignment · visual · priority
**Analogy:** A clean whiteboard for team priorities

## 2. Color

The palette operates on a principle of restraint: a neutral canvas of white and stark black forms the foundation, while a set of vibrant multi-colored accents are reserved exclusively for roadmap tracks and status indicators.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#FAFAFA` | card background |
| `--bg-quiet` | `#F3F3F3` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#222222` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--line` | `rgba(243, 243, 243, 1)` | divider |

**Color principle:** Neutral canvas with vibrant, multi-colored accents representing roadmap tracks.

This approach ensures color serves a clear informational purpose, never decoration.

## 3. Typography

The typographic voice is established by a geometric sans-serif for headlines, set in bold with tight spacing for punch and presence. For the body and supporting text, a humanist sans-serif provides a more measured, readable counterpoint.

- **Display:** geometric-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.0 | 700 | -0.5px | Hero headlines |
| h2 | 32px | 1.2 | 700 | -0.25px | Section headings |
| h3 | 21px | 1.3 | 500 | 0px | Card titles |
| body | 16px | 1.75 | 400 | 0px | Main body text |
| caption | 14px | 1.7 | 400 | 0px | Secondary text and captions |

**Type rules:**
- Headlines use bold weight with tight letter spacing
- Body text maintains generous line height for readability
- Secondary text uses muted ink color

## 4. Spacing

The vertical rhythm is defined by generous spacing between major sections, creating distinct areas of focus on the page.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical rhythm between sections, with tight internal padding for cards and buttons.

## 5. Surfaces

Surfaces achieve depth through a minimal toolkit: soft, diffuse box-shadows for elevation and a stark lack of ornamental borders. Borders, where they appear, are reserved for active states, providing a clear, 2-pixel signal of interaction.

- **Radius:** sm 4px · md 6px · lg 8px · pill 999px
- **Shadows:**
  - 0 8px 16px rgba(0, 0, 0, 0.16)
  - 0 4px 16px rgba(0, 0, 0, 0.32)
  - 0 0 0 3px rgb(243, 243, 243)
- **Borders:** Subtle 2px solid borders for active states, otherwise borderless or using box-shadow for depth.

## 6. Layout

The layout skeleton is a study in centered simplicity, built on a single vertical column that guides the eye downward. Content blocks are contained within this central spine, framed by ample negative space on either side.

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

**Skeleton:** Single-column vertical flow with centered content blocks.

## 7. Motion & Interaction

Motion is applied with deliberate utility, not for flourish. Transitions are quick and smooth, focused on the functional feedback of hover states and focus outlines, ensuring the interface remains responsive without becoming a spectacle.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle hover states on buttons and cards
  - Focus transitions on interactive elements

- **Hover:** Buttons likely darken slightly; cards may lift with shadow.
- **Click:** Immediate feedback with potential slight scale or opacity change.
- **Transition:** Smooth transitions for background-color, box-shadow, and border (0.2s).
- **Keyboard:** Visible focus states likely using box-shadow outlines.

## 8. Voice & Don'ts

The editorial voice is direct, professional, and clear, using short, declarative sentences for headlines and straightforward action calls for interaction.

- **Tone:** Direct, clear, and professional.
- **Headline style:** Short, declarative sentences in bold sans-serif.
- **CTA style:** Simple and action-oriented with an arrow symbol.
- **Avoid:** Jargon-heavy language / Complex sentence structures / Visual clutter or noisy backgrounds

### Don'ts
- ❌ Don't use decorative or serif fonts — screenshot shows clean geometric sans-serif headlines.
- ❌ Don't add complex drop shadows — screenshot shows subtle, soft box-shadows.
- ❌ Don't use a busy or dark background — screenshot shows a predominantly white canvas.
- ❌ Don't clutter the hero section — screenshot shows ample white space around central elements.
- ❌ Don't use rounded squares for badges — screenshot shows pill-shaped labels.
- ❌ Don't use heavy borders on cards — screenshot shows cards separated by subtle shadows or background changes.

The system deliberately avoids visual noise, jargon, and complex ornamentation, committing instead to a minimalist interface where focus is the primary feature.

## System Prompt (paste into AI tool)

```
This is a minimalist SaaS roadmap tool website. It uses a clean white background with black text for maximum readability. Typography is a geometric sans-serif for headlines and humanist sans-serif for body text. Key colors are neutral black, white, and gray, with vibrant multi-colored accents (green, pink, purple, blue) used only for status badges and roadmap track indicators. The layout is centered with generous spacing. Critical don'ts: never use decorative fonts, never add complex shadows, never clutter the interface with unnecessary elements. The design prioritizes clarity and focus.
```