# Rebeccaatwood · Design system migration spec

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

> An excellent example of how to blend premium, artisanal branding with clean e-commerce functionality through restrained color and elegant typography.

## 1. Identity DNA

This design system is built for an artisan studio, not a factory floor. It treats the digital canvas like a sun-drenched workspace where organic textures and botanical photography are the primary materials, and typography is the precise, editorial hand that frames them. The result is a refined digital presence that feels both personal and premium.

**One-liner:** Artisanal textile brand blending botanical photography with refined typography.
**Keywords:** Artisan · Botanical · Refined · Organic · Studio
**Analogy:** A sun-drenched artisan studio where organic textures meet editorial typography.

## 2. Color

The palette is fundamentally restrained, built on a foundation of warm off-whites and soft earth tones. This quiet backdrop exists to let high-quality photography breathe, with a single, high-chroma orange accent reserved for moments of focused energy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F5F5F5` | main background |
| `--bg-soft` | `#F1F1F0` | card background |
| `--ink` | `#000000` | body text |
| `--muted` | `#6084B5` | placeholder |
| `--accent` | `#F5A73C` | single accent |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** A restrained, neutral palette of whites and warm earth tones, allowing the vibrant, high-chroma orange accent to serve as a singular, energetic focal point against organic photography.

The principle is one of surgical accent: a single vibrant hue gains its power from the vast, neutral calm that surrounds it.

## 3. Typography

Typographic voice is split between two distinct roles: the refined transitional serif, **Signifier**, commands attention as the brand's display face, while a clean monospace carries the functional UI with understated clarity. This separation creates a clear hierarchy between storytelling and utility.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.0 | 400 | -1px | Hero brand name |
| h2 | 24px | 1.2 | 400 | 0px | Section titles |
| body | 16px | 1.0 | 400 | 0px | Product names |
| caption | 12px | 1.0 | 400 | 0px | Navigation and UI labels |

**Type rules:**
- Use Signifier for all primary headings and brand identity.
- Use monospace for functional UI elements like navigation links, button text, and labels.

## 4. Spacing

Rhythm is established through generous padding and large, deliberate gaps between sections, creating a calm, editorial pace.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding and large gaps between sections to let the imagery breathe.

## 5. Surfaces

Depth is communicated not through shadows or borders, but through contrast in photography and background color shifts. Surfaces remain clean and flat, relying on spatial relationships and visual weight for separation.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Minimal to non-existent; relies on spacing and background color shifts for separation.

## 6. Layout

The layout skeleton transitions from immersive, full-bleed photographic heroes with overlaid typography to clean, structured white grids for product display. This creates a clear journey from inspirational imagery to organized, shoppable content.

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

**Skeleton:** Full-bleed photography with overlaid typography, transitioning to clean white grids for product display.

## 7. Motion & Interaction

Motion philosophy favors subtlety and smoothness, using opacity and background-color transitions over 0.5 seconds. Animations are designed to feel refined and unhurried, serving the content rather than drawing attention to the interface.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- **Patterns:**
  - Smooth opacity and background-color transitions over 0.5s.
  - Subtle height changes for reveal animations.

- **Hover:** Subtle cursor pointer state with potential opacity or color shifts.
- **Click:** Standard pointer state.
- **Transition:** Smooth 0.5s transitions on interactive elements.
- **Keyboard:** Standard focus states not clearly visible but implied by standard navigation.

## 8. Voice & Don'ts

The editorial voice is artisanal, personal, and inviting, supported by elegant, tightly-tracked serif headlines and understated monospace calls to action. The system deliberately avoids loud aggression in favor of quiet confidence.

- **Tone:** Artisanal, personal, and inviting.
- **Headline style:** Elegant, tightly-tracked serif typography that commands attention.
- **CTA style:** Understated, functional monospace text, often capitalized.
- **Avoid:** Loud, aggressive colors / Rigid, corporate layouts / Playful, rounded geometric shapes

### Don'ts
- ❌ Don't use aggressive, high-chroma colors — screenshot shows a restrained, earthy palette.
- ❌ Don't use rounded corners or soft borders — screenshot shows sharp, zero-radius edges.
- ❌ Don't use heavy drop shadows — screenshot relies on spacing and image contrast.
- ❌ Don't use sans-serif fonts for headlines — screenshot uses transitional-serif for display.
- ❌ Don't clutter the layout with dense UI elements — screenshot prioritizes generous white space.
- ❌ Don't use monospace fonts for primary headings — screenshot reserves them for functional UI.

They deliberately forgo playful geometry, rigid corporate layouts, and visual noise to preserve a space of calm, curated refinement.

## System Prompt (paste into AI tool)

```
This site is a premium, artisanal textile brand e-commerce platform. The design DNA is defined by a restrained, warm neutral palette (#F1F1F0, #F5F5F5) that lets high-quality botanical photography breathe. The typography is a mix of refined transitional-serif (Signifier) for display and body text, and a clean monospace (SohneMono) for functional UI elements like navigation and buttons. A single, high-chroma orange accent (#F5A73C) is used sparingly for newsletter popups. Key critical donts: Never use aggressive or neon colors, never use rounded corners or drop shadows, and always prioritize generous spacing over cluttered layouts. The overall aesthetic is editorial and refined, leaning heavily on photographic storytelling.
```