# Informed · Design system migration spec

> Source: https://www.informed.so  ·  Curated by OpenDesign  ·  en

> This site is a great example of a modern, clean SaaS aesthetic, using a single bold accent color and tight typography to create a focused and professional feel.

## 1. Identity DNA

Informed operates on the principle of the capable assistant: a system designed to absorb the mechanical labor of content production so the human team can focus on direction and strategy. Its design language reflects this role—clean, direct, and functionally optimistic. It is the visual embodiment of a friendly, efficient AI content intern.

**One-liner:** An AI content pilot that automates content production for editorial, PR, and marketing teams.
**Keywords:** content automation · editorial · PR · marketing · AI
**Analogy:** A friendly yet efficient AI content intern that handles the heavy lifting.

## 2. Color

The color system is disciplined, built upon a pristine white foundation to maximize clarity and focus. A single, vibrant green accent (#08C474) is reserved exclusively for primary actions and interactive highlights, creating a strong, unambiguous visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F8F8F7` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#31343B` | secondary text |
| `--muted` | `#7E838F` | placeholder |
| `--accent` | `#08C474` | single accent |
| `--line` | `rgba(0, 0, 0, 0.08)` | divider |

**Color principle:** A clean, white-based palette driven by a vibrant, high-chroma green accent for emphasis and action.

The palette's restraint is its core principle: a clean, high-contrast environment where a solitary accent color carries all communicative weight.

## 3. Typography

Typography is handled with a single, clean humanist-sans-serif for all text levels, creating a unified and professional voice. Display headlines are set large and tightly tracked to make bold, declarative statements, while body copy maintains high legibility in dark gray.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 69px | 1.0 | 400 | -4.33px | Main hero headlines |
| display-sm | 28px | 1.2 | 400 | 0px | Section headlines |
| body | 17px | 1.0 | 400 | 0px | Main body copy |
| body-sm | 20px | 1.0 | 400 | 0px | Secondary descriptions |

## 4. Spacing

Vertical rhythm is established through generous, deliberate padding that isolates content blocks and guides the eye downward in a measured flow.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical padding separates distinct content blocks, centered on a single column.

## 5. Surfaces

Surfaces are defined by subtle depth and soft edges, not heavy ornamentation. Delicate drop-shadows lift elements slightly off the page, and a consistent 1px solid border grounds certain components, with rounded corners applied liberally to soften the entire composition.

- **Radius:** sm 8px · md 12px · lg 43px · pill 100px
- **Shadows:**
  - 0px 8.67px 26px 0px rgba(0, 0, 0, 0.08)
  - 0px 26px 52px 0px rgba(0, 0, 0, 0.08)
- **Borders:** 1px solid rgb(0, 0, 0)

## 6. Layout

The layout skeleton is a single, centered column of controlled width, a deliberate funnel for attention. Generous vertical whitespace and occasional full-width background sections create distinct, readable blocks within this vertical stack.

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

**Skeleton:** Single-column centered layout with generous whitespace and distinct full-width background sections.

## 7. Motion & Interaction

Motion is applied with purpose and restraint, serving to clarify interaction rather than decorate it. Smooth 0.25-second transitions govern all color and background changes on interactive elements, with slightly longer durations reserved for layout shifts.

- **Durations:** micro 250ms · small 250ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth 0.25s transitions for color, background-color, and border-color on interactive elements.
  - Subtle 0.5s transform transitions for layout shifts.

- **Hover:** Subtle background-color or opacity changes with a smooth 0.25s transition.
- **Click:** Immediate visual feedback through standard active states.
- **Transition:** Consistent 0.25s transitions applied across all interactive color and transform properties.
- **Keyboard:** Standard focus states with clear outlines (inferred from accessibility defaults).

## 8. Voice & Don'ts

The editorial voice is professional, encouraging, and straightforward, mirroring the system's efficient ethos. Copy favors bold, tightly tracked value propositions and direct calls to action, avoiding complex jargon and aggressive sales language.

- **Tone:** Professional, encouraging, and straightforward.
- **Headline style:** Bold, tightly tracked, lowercase or sentence-case statements focused on value proposition.
- **CTA style:** Direct, action-oriented phrases like 'Try it out yourself' or 'Choose a plan'.
- **Avoid:** Overly complex jargon / Aggressive sales language / Dense paragraphs

### Don'ts
- ❌ Don't use serif typography — the screenshot exclusively employs clean humanist-sans-serif fonts for all text elements.
- ❌ Don't use a dark mode or dark backgrounds — the screenshot features a predominantly white and light gray background.
- ❌ Don't use a wide array of colors — the palette is strictly limited to white, black, gray, and a single vibrant green accent.
- ❌ Don't use sharp, 90-degree corners — the screenshot consistently applies large border-radius values (up to 43px) for a softer look.
- ❌ Don't use dense, multi-column layouts — the screenshot shows a strictly single-column, vertically stacked, centered layout.
- ❌ Don't use heavy drop shadows — the screenshot relies on very subtle, light drop-shadows for depth.

The system deliberately rejects dark mode, serif typography, sharp corners, and dense layouts, maintaining its focused and approachable character through consistent omission.

## System Prompt (paste into AI tool)

```
Design a clean, centered SaaS landing page for an AI content automation tool. The layout should be a single column with generous vertical whitespace. Use a predominantly white background (#FFFFFF) with a secondary light gray (#F8F8F7) for subtle surface differentiation. The primary accent color is a vibrant, high-chroma green (#08C474), used for call-to-action buttons, interactive tags, and selected card borders. Typography should be humanist-sans-serif for both display and body text, with display headlines being very large (69px) and tightly letter-spaced (-4.33px). Body text should be a dark gray (#31343B) or black (#000000), with muted text in a medium gray (#7E838F). Buttons must be pill-shaped with white text on the green background, accompanied by subtle drop-shadows (e.g., 0px 8.67px 26px 0px rgba(0,0,0,0.08)). Avoid dark mode, avoid serif fonts, avoid sharp corners, and avoid using more than one or two primary colors.
```