# Create · Design system migration spec

> Source: https://www.create.xyz  ·  Curated by OpenDesign  ·  en

> The design effectively balances a playful, creative AI tool identity with a clean, professional SaaS aesthetic.

## 1. Identity DNA

The Create interface operates like a well-equipped workshop: the tools are visible and ready, but the clutter of construction is hidden behind the counter. Every element serves a clear purpose—making the act of building with AI feel both powerful and routine.

**One-liner:** AI-native platform for turning words into functional apps, sites, and tools.
**Keywords:** AI-native · app builder · creative · effortless
**Analogy:** A playful yet professional workshop where anyone can build digital products with AI.

## 2. Color

The color system is deliberately restrained, functioning like a neutral gallery wall that lets the user's photographic outputs command full attention. Black and white provide the essential contrast for action, while light grays handle the subtle hierarchy of supporting text.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F9F9F9` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--bg-quiet` | `#F2F2F2` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#18191B` | secondary text |
| `--muted` | `#6A6A6C` | placeholder |
| `--muted-soft` | `#ACADAE` | weak hint |
| `--line` | `rgba(187, 187, 187, 1)` | divider |

**Color principle:** Clean, light neutrals with a photographic hero and black contrast for primary actions.

The primary principle is clarity through reduction—color is reserved for the content itself, not the interface around it.

## 3. Typography

Typography establishes a clear voice through contrast: a transitional-serif for display headlines lends a sense of craft, while a humanist-sans-serif for body text ensures effortless readability. This pairing creates a distinct editorial rhythm that feels both authoritative and approachable.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 42px | 1.4 | 400 | normal | Brand name in hero |
| heading | 24px | 1.17 | 400 | normal | Section headings |
| body | 16px | 1.5 | 400 | normal | Default body text |
| body-large | 18px | 1.4 | 400 | normal | Subheadings and descriptions |

## 4. Spacing

All spatial relationships derive from a consistent 4px baseline, creating a predictable rhythm that scales from tight inline gaps to expansive section padding.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 30 / 40 px
- **Rhythm:** Consistent 4px base with generous padding in sections.

## 5. Surfaces

Surfaces are defined by subtle elevation, not stark separation. Shadows are barely perceptible lifts, and borders are fine, light-gray lines that merely suggest the edge of a component.

- **Radius:** sm 8px · md 12px · lg 20px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 0px 10px 15px -3px
  - rgba(0, 0, 0, 0.1) 0px 4px 6px -4px
- **Borders:** 1px solid #BBBBBB

## 6. Layout

The skeletal structure is straightforward and focused: a single, centered column for primary content flows into a grid of large, rounded cards for secondary information. This layout prioritizes scanning and gives each module of content significant breathing room.

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

**Skeleton:** Centered, single-column hero followed by card-based sections.

## 7. Motion & Interaction

Motion is treated as immediate feedback, not decoration. Transitions are swift (150ms) and use a custom easing curve to make state changes feel responsive and polished without drawing attention to the animation itself.

- **Durations:** micro 150ms · small 300ms · medium 700ms
- **Easing:** `cubic-bezier(0.23, 1, 0.32, 1)`
- **Patterns:**
  - Smooth transitions on hover/click
  - Fade-in for opacity changes

- **Hover:** Color and background transitions over 0.15s.
- **Click:** Immediate visual feedback via transition.
- **Transition:** Cubic-bezier easing for smooth state changes.
- **Keyboard:** Standard focus management assumed.

## 8. Voice & Don'ts

The voice is direct and empowering, using simple statements to guide rather than instruct. It avoids technical abstraction and corporate formality in favor of clear, action-oriented language.

- **Tone:** Approachable, empowering, and slightly playful.
- **Headline style:** Simple, direct statements using a mix of serif and sans-serif fonts.
- **CTA style:** Clear and action-oriented ('Get started').
- **Avoid:** Technical jargon without explanation / Overly complex layouts / Dull, corporate language

### Don'ts
- ❌ Don't use a stark white background — screenshot shows a light gray (#F9F9F9) background.
- ❌ Don't use a purely sans-serif logo — screenshot shows a serif font for 'Any' in the brand name.
- ❌ Don't use bright, saturated accent colors as primary backgrounds — screenshot uses a full-bleed photograph.
- ❌ Don't use sharp, square corners on major elements — screenshot shows 20px border-radius on cards and inputs.
- ❌ Don't use heavy, dark shadows — screenshot shows very subtle, low-opacity shadows.
- ❌ Don't make the typography monochromatic and uniform — screenshot shows contrast between serif display and sans-serif body.

The system deliberately excludes complex grids, sharp corners, and saturated accent palettes, understanding that constraint is what enables creative freedom within a clean framework.

## System Prompt (paste into AI tool)

```
A friendly, AI-native SaaS platform for building apps with words. Use light gray (#F9F9F9) or white (#FFFFFF) backgrounds, black (#000000) for primary text and CTAs, and subtle gray (#6A6A6C, #ACADAE) for secondary text. Typography mixes a transitional-serif (for display) with a humanist-sans (for body). The layout is centered, clean, and spacious. Critical don'ts: Don't use sharp corners (min 8px radius). Don't use heavy shadows. Don't clutter the interface with complex grids.
```
