# Sierra · Design system migration spec

> Source: https://sierra.ai  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of how to balance a sophisticated, enterprise-focused AI product with a warm, human-centric visual language through the use of editorial photography and restrained typography.

## 1. Identity DNA

The system follows the analogy of a premium consultancy for AI agents, balancing technical depth with approachable, human-centric storytelling. Its visual DNA is built on a warm, neutral palette that allows photography to do the emotional work, while a refined type system and generous spacing create a sense of trusted expertise.

**One-liner:** A sophisticated AI agent platform that uses warm, editorial photography to make complex technology feel human and trustworthy.
**Keywords:** AI · Customer Experience · Enterprise · Agent · Platform
**Analogy:** A premium consultancy for AI agents, balancing technical depth with approachable, human-centric storytelling.

## 2. Color

The color principle is one of restraint, relying on a warm neutral foundation to support content rather than compete with it. Earthy tones and soft grays provide the backdrop, ceding visual interest to the high-quality photography that defines the brand's character.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F6F5F3` | card background |
| `--ink` | `#302E2D` | body text |
| `--ink-soft` | `#716F6C` | secondary text |
| `--muted` | `#E4E0DC` | placeholder |
| `--line` | `rgba(228, 224, 220, 1)` | divider |

**Color principle:** Warm Neutrals: A palette grounded in warm grays and earthy tones, relying on high-quality photography for visual interest rather than synthetic accents.

The core tenet is that color supports content, not the reverse.

## 3. Typography

The typographic voice is that of a refined grotesque-sans, set with tight tracking on display sizes for an editorial feel. A strict 400 weight for body text paired with generous line-height ensures readability and a light, confident presence on the page.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 500 | -1.3px | Hero headlines |
| headline | 44px | 1.05 | 400 | -0.44px | Section headlines |
| subhead | 24px | 1.33 | 400 | -0.38px | Subheadings |
| body | 16px | 1.5 | 400 | 0px | Body text |
| caption | 14px | 1.42 | 400 | 0px | UI labels and captions |

**Type rules:**
- Use tight tracking (-1.3px to -0.38px) for large display text to create a refined, editorial feel.
- Maintain a strict 400 weight for almost all text; 500 is used very sparingly for specific emphasis.
- Ensure generous line-height (1.4-1.5) for body text to maintain readability.

## 4. Spacing

Spacing follows a generous, structured rhythm, with large paddings for major sections and consistent 8px-based increments for internal structure.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 px
- **Rhythm:** Generous and structured, using large padding (80px) for major sections and consistent 8/16/24px increments for internal spacing to create a clean, breathable layout.

## 5. Surfaces

Surfaces are defined by subtlety, using a single 1px border to delineate containers. Depth, where needed, is applied through large, soft shadows with a distinct blue tint.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Shadows:**
  - 0px 28px 34px 0px rgba(15, 79, 138, 0.15)
  - 0px 75px 63px 0px rgba(15, 79, 138, 0.15)
- **Borders:** 1px solid rgb(228, 224, 220)

## 6. Layout

The layout skeleton begins as a centered, responsive container, transitioning from a full-bleed editorial hero to a structured, multi-column UI. This progression from expansive photography to organized dashboards defines the page architecture.

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

**Skeleton:** A centered, responsive layout with a max-width container, transitioning from a full-bleed editorial hero to a structured, multi-column UI for dashboards.

## 7. Motion & Interaction

Motion is standardized and purposeful, with all interactive state changes governed by a single, consistent easing curve. The philosophy prioritizes subtlety—simple color, opacity, and transform shifts that acknowledge interaction without announcing it.

- **Durations:** micro 220ms · small 250ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Standard transitions for color, background-color, and opacity (0.25s)
  - Slightly longer transitions for complex properties like filter (0.5s)
  - Subtle transforms for interactive elements

- **Hover:** Smooth color and background transitions on interactive elements like buttons and navigation links.
- **Click:** Subtle transform (scale/translate) or opacity change on primary CTAs.
- **Transition:** All interactive states use a consistent 0.25s cubic-bezier(0.4, 0, 0.2, 1) easing curve.
- **Keyboard:** Focus states likely follow browser defaults, maintaining visibility for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, clear, and approachable, favoring short, impactful statements that state value directly. Language avoids jargon and marketing enthusiasm, trusting the product's substance and the system's refined presentation.

- **Tone:** Confident, clear, and approachable.
- **Headline style:** Short, impactful statements that clearly state the value proposition.
- **CTA style:** Direct and action-oriented, often using a single 'Learn more' or 'Sign in'.
- **Avoid:** Jargon-heavy language without context / Aggressive or overly enthusiastic marketing speak / Cluttered UI that distracts from the core message / High-contrast neon or synthetic accent colors

### Don'ts
- ❌ Don't use vibrant synthetic accents — screenshot shows a palette grounded in warm grays and earthy photographic tones.
- ❌ Don't set large headlines with loose tracking — screenshot shows tight tracking (e.g., -1.3px) for a refined, editorial feel.
- ❌ Don't use heavy font weights for body copy — screenshot shows almost exclusive use of weight 400.
- ❌ Don't clutter the UI with heavy shadows or borders — screenshot shows subtle 1px borders and minimal shadow usage.
- ❌ Don't use sharp, geometric border-radius on buttons — screenshot shows fully rounded pill shapes (999px).
- ❌ Don't rely on color for primary emphasis in the UI — screenshot shows reliance on typography scale and spacing.

The system deliberately excludes vibrant synthetic accents and cluttered, heavy UI elements, trusting its typographic scale and spacing to provide emphasis.

## System Prompt (paste into AI tool)

```
Sierra is a premium AI agent platform that positions itself through a human-centric, editorial lens. Its visual DNA is defined by a warm, neutral color palette (ink #302E2D, soft background #F6F5F3) that lets high-quality photography do the emotional heavy lifting. The typography is a refined grotesque-sans with tight tracking on large displays, creating a clean, sophisticated feel. The UI components are simple, using pill-shaped buttons and subtle borders. Critical donts: avoid synthetic accents, keep tracking tight for headlines, use light font weights for body text, and maintain generous, breathable spacing. The overall feel is trustworthy and professional, yet approachable.
```
