# Carrd · Design system migration spec

> Source: https://carrd.co  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of how a highly restrained, minimalist design can still feel modern and professional through careful use of a dark mode palette and a single, well-chosen accent color.

## 1. Identity DNA

Carrd's design operates as a calm, geometric welcome screen for a digital toolkit. Like a well-lit showroom with a single product on a pedestal, it uses a dark, low-chroma gradient to focus all attention on a clear, singular path forward.

**One-liner:** A minimal, gradient-based landing page for a one-page site builder.
**Keywords:** simplicity · accessibility · responsive
**Analogy:** A calm, geometric welcome screen for a digital toolkit.

## 2. Color

The palette is built on a desaturated foundation of charcoal (#24252d) with a subtle purple-blue gradient, establishing depth without drama. A single, vibrant teal (#33ada9) serves as the exclusive accent, a deliberate beacon for primary actions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#24252d` | main background |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `rgba(255,255,255,0.75)` | secondary text |
| `--muted` | `rgba(255,255,255,0.4)` | placeholder |
| `--muted-soft` | `rgba(255,255,255,0.376)` | weak hint |
| `--accent` | `#33ada9` | single accent |
| `--line` | `rgba(255,255,255,0.075)` | divider |

**Color principle:** High-contrast white text over a dark, low-chroma gradient, with a single vibrant teal accent.

The principle is one of focused contrast: high-visibility white text over a muted field, with a solitary accent to guide the user's eye.

## 3. Typography

Typography is strictly functional, employing standard system grotesque-sans fonts like Arial/Helvetica for all text. This choice prioritizes universal readability and performance over stylistic expression, aligning with the tool's core ethos of simplicity.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1.4px | Primary logo text |
| heading | 34px | 1.25 | 700 | -0.85px | Section headings |
| body-lg | 24px | 1.6 | 400 | normal | Subheadings and feature descriptions |
| body | 16px | 1.75 | 400 | normal | Standard body text |
| caption | 12.8px | 1.5 | 400 | normal | Small labels and footnotes |

## 4. Spacing

A base 4px scale governs all spacing, creating a consistent internal rhythm. This structure is paired with generous padding (32–64px) for large sections, allowing content to breathe within the centered column.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Base 4px scale with generous padding (32-64px) for large sections.

## 5. Surfaces

Surface treatments are minimal and functional, using subtle shadows and borders to define elevation. Cards and inputs gain definition from a single, soft shadow and thin, semi-transparent white borders that maintain the interface's lightness.

- **Radius:** sm 4px · md 6px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 0px 8px 16px 0px
- **Borders:** Subtle 1-2px white borders with varying opacity (0.4 to 0.75) or a solid white stroke.

## 6. Layout

The layout skeleton is straightforward: a centered single-column hero establishes the primary message, which then opens into a simple two-column grid for feature showcases. This transition from monologue to dialogue mirrors the user's journey from headline to detail.

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

**Skeleton:** Centered single-column layout on hero, transitioning to a 2-column grid for features.

## 7. Motion & Interaction

Motion is applied with restraint, serving as functional feedback rather than ornament. All transitions use a consistent 0.2s ease-in-out curve for color, background, and opacity changes, ensuring interactions feel smooth and predictable.

- **Durations:** micro 200ms · small 250ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Color and opacity transitions on hover and focus
  - Fade-in for page sections

- **Hover:** Color transitions and subtle opacity changes on interactive elements.
- **Click:** N/A
- **Transition:** All elements use a 0.2s ease-in-out transition for color, background, and opacity changes.
- **Keyboard:** Standard focus states with 2px white outline offset.

## 8. Voice & Don'ts

The editorial voice is helpful, minimalist, and approachable, using bold, clean headlines and direct, action-oriented CTAs. It consistently avoids jargon, complex sentences, and any hint of aggressive urgency.

- **Tone:** Helpful, minimalist, and approachable.
- **Headline style:** Bold, large, and clean, often using a single word like 'Responsive' or 'Free'.
- **CTA style:** Direct and action-oriented, using phrases like 'Choose a Starting Point'.
- **Avoid:** Jargon-heavy technical language / Overly complex sentences / Aggressive or urgent tone

### Don'ts
- ❌ Don't use multiple competing accent colors — screenshot shows a single teal (#33ada9) as the only vibrant hue.
- ❌ Don't use complex, multi-layered gradients — screenshot shows a simple two-color linear gradient overlay.
- ❌ Don't use decorative or serif typefaces — screenshot shows a clean, standard grotesque-sans (Arial/Helvetica).
- ❌ Don't use heavy, solid black backgrounds — screenshot shows a dark charcoal (#24252d) as the primary background.
- ❌ Don't use square, sharp corners for buttons — screenshot shows consistent 6px rounded corners.
- ❌ Don't use wide, sprawling layouts — screenshot shows content constrained to a narrow, centered column.

What it deliberately doesn't do is compete for attention; it relinquishes complexity in favor of an unwavering focus on a single, clear task.

## System Prompt (paste into AI tool)

```
Carrd is a minimalist, user-friendly tool for creating simple one-page websites. The design utilizes a dark, desaturated palette centered around charcoal (#24252d) with a subtle purple-blue gradient overlay. Typography is strictly functional, relying on standard system grotesque-sans fonts (Arial/Helvetica) for all display and body text. The single vibrant accent is a muted teal (#33ada9), used exclusively for primary call-to-action buttons to provide clear visual guidance. Critical design constraints include avoiding complex color schemes, maintaining a strictly centered single-column or simple 2-column layout, and using only consistent 6px rounded corners for interactive elements. The overall tone is calm, restrained, and highly focused on clarity and ease of use.
```