# Texts · Design system migration spec

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

> This site is a prime example of a modern, AI-integrated productivity tool with a highly refined, accessible design system.

## 1. Identity DNA

The Texts design system is built as a streamlined command center, where every token and component serves the central mission of unifying disparate conversations into a single, coherent flow. Its identity is anchored in the promise of an AI-powered assistant—a tool that brings order to the chaos of modern communication through clarity and control.

**One-liner:** An AI-enhanced messaging hub that organizes all your conversations in one clean, private interface.
**Keywords:** unified inbox · AI assistant · productivity · messaging · privacy
**Analogy:** A streamlined, AI-powered command center for all your conversations

## 2. Color

The color system employs a stark, high-contrast foundation of deep charcoal and pure white, making the singular professional blue accent a deliberate signal for action and focus. This restricted palette ensures accessibility and directs the eye without visual competition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F9FAFB` | card background |
| `--bg-quiet` | `#F5F7FA` | quiet area |
| `--ink` | `#101116` | body text |
| `--ink-soft` | `#1C2022` | secondary text |
| `--muted` | `#697882` | placeholder |
| `--muted-soft` | `#9CA3AF` | weak hint |
| `--accent` | `#2563EB` | single accent |
| `--line` | `rgba(226, 232, 240, 1)` | divider |

**Color principle:** High-contrast, accessibility-focused palette with a dominant professional blue accent.

The guiding principle is restraint: color is used to inform and direct, never to decorate.

## 3. Typography

Typography is exclusively handled by the humanist-sans Inter, chosen for its legibility and modern, neutral character. The type scale prioritizes clear hierarchy, from bold, negative-tracked headlines that make declarative statements to the clean, readable body copy that carries the core information.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1.12px | Primary marketing headlines |
| h1 | 48px | 1.0 | 700 | -1px | Section headers |
| body | 16px | 1.5 | 400 | normal | Main reading copy |

## 4. Spacing

All spatial relationships are governed by a strict 4px rhythm, creating a predictable and harmonious grid that underpins the interface's generous whitespace.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 56 / 64 px
- **Rhythm:** Standard 4px grid with generous padding for whitespace-heavy sections.

## 5. Surfaces

Surfaces are defined by soft, rounded corners and subtle, low-opacity shadows that provide gentle elevation from the background. This creates a sense of layered depth without harsh borders, keeping the interface light and focused on content.

- **Radius:** sm 4px · md 12px · lg 16px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 0px 1px 3px 0px
  - rgba(0, 0, 0, 0.2) 0px 4px 16px 0px
- **Borders:** 1px solid rgb(226, 232, 240)

## 6. Layout

The layout skeleton is a centered single column, a simple and powerful form that maximizes content legibility. Generous vertical padding between sections reinforces the system's rhythm and gives each piece of content room to breathe.

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

**Skeleton:** Centered single-column layout for content sections with generous vertical padding.

## 7. Motion & Interaction

Motion is employed with professional minimalism, using smooth transitions for layout shifts to maintain spatial context. State changes occur through subtle opacity fades, ensuring feedback is clear but never theatrical.

- **Durations:** micro 200ms · small 220ms · medium 700ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth layout transitions for padding and height changes
  - Subtle opacity fades for state changes

- **Hover:** Standard pointer cursor for interactive elements.
- **Click:** Pointer cursor maintained across interactive regions.
- **Transition:** Global 'all' transition for smooth state updates.
- **Keyboard:** Standard focusable elements for accessibility.

## 8. Voice & Don'ts

The voice is confident and transparent, speaking in bold, declarative statements that emphasize innovation and organizational clarity. It is direct and action-oriented, avoiding passive voice and technical jargon in favor of forward-looking language.

- **Tone:** Confident, transparent, and forward-looking
- **Headline style:** Bold, declarative statements emphasizing innovation and organization
- **CTA style:** Direct and action-oriented with directional cues (arrows)
- **Avoid:** Technical jargon / Overly formal language / Passive voice

### Don'ts
- ❌ Don't use serif fonts — screenshot shows all typography in clean sans-serif families.
- ❌ Don't use neon or highly saturated secondary colors — screenshot shows a restrained palette of blue, white, and dark gray.
- ❌ Don't clutter the layout — screenshot shows generous whitespace and focused content sections.
- ❌ Don't use sharp, square corners on primary elements — screenshot shows 12px radius on cards and 9999px on buttons.
- ❌ Don't use heavy, aggressive drop shadows — screenshot shows very subtle, low-opacity elevation shadows.
- ❌ Don't use complex decorative illustrations — screenshot relies on clean text, simple icons, and UI screenshots.

The system deliberately rejects decorative flourish, opting instead for functional components and clean typography to build trust through utility.

## System Prompt (paste into AI tool)

```
This design is a clean, professional SaaS interface for an AI-powered productivity tool. It uses a high-contrast palette with a white background (#FFFFFF), dark ink (#101116), and a dominant blue accent (#2563EB). Typography is exclusively humanist-sans (Inter), featuring bold, negative-tracked headlines. Critical donts: avoid serif fonts, do not use neon or saturated secondary colors, and never clutter the layout with unnecessary decorative elements. Maintain generous whitespace and use 12px rounded corners for surfaces. The overall feel is modern, efficient, and trustworthy.
```
