# Maquilts · Design system migration spec

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

> This site is an excellent example of how to combine expressive, high-chroma colors with bold typography to create a distinct, art-focused brand identity.

## 1. Identity DNA

Maquilts operates like an artist's portfolio, where the architecture itself serves the work. The system's identity is built on the tension between warm, saturated surfaces and bold geometric forms, creating a space that feels both curated and vibrantly alive.

**One-liner:** A vibrant, art-focused portfolio for modern textile design
**Keywords:** Modern · Textile · Art · Quilts · Geometric
**Analogy:** An artist's portfolio showcasing bold, modern textile creations

## 2. Color

The palette is built on a foundation of warm, high-chroma color, anchored by a bright yellow background. Supporting tones in soft coral and a dominant orange accent create a vibrant, multi-colored geometric scheme that feels expressive yet grounded.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFED8C` | main background |
| `--bg-soft` | `#F4A398` | card background |
| `--bg-quiet` | `#FFFFFF` | quiet area |
| `--ink` | `#F15A24` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#797791` | placeholder |
| `--muted-soft` | `#FFCCFF` | weak hint |
| `--accent` | `#F15A24` | single accent |
| `--line` | `rgba(241,90,36,1)` | divider |

**Color principle:** Warm, saturated primary background with vibrant orange accents

The principle is one of warmth and saturation, using color to define space and mood with confidence.

## 3. Typography

The type system establishes a clear hierarchy through weight contrast and spacing. Display headlines are set in uppercase with increased letter spacing, creating a bold, graphic voice that contrasts with the more neutral body text.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 68px | 1.0 | 700 | -1px | Main hero headlines |
| display | 36px | 1.2 | 400 | 3.5px | Secondary section headlines |
| body | 23px | 1.6 | 400 | 1.4px | Body text and descriptions |
| mono | 14px | 1.6 | 400 | 0px | Small UI elements or captions |

**Type rules:**
- Text transform is uppercase for headlines
- Letter spacing is increased for display and secondary text
- Weight contrasts between bold headlines and regular body text

## 4. Spacing

Vertical rhythm is generous, with large section padding that creates a measured, unhurried pace.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical rhythm with large section padding (96px top, 192px bottom)

## 5. Surfaces

Depth is suggested through soft, diffuse shadows rather than hard edges. Borders are used as expressive accents, most notably a bold 4px solid line that defines interactive elements and adds graphic punch.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 1px 0px 10px 6px
- **Borders:** 4px solid rgb(241, 90, 36)

## 6. Layout

The foundational layout is a split-screen hero, with large, impactful typography occupying the left and a centered product image anchoring the right. This structure establishes a clear visual balance between word and image.

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

**Skeleton:** Split-screen hero with text left, image right

## 7. Motion & Interaction

Motion philosophy is subtle and functional, designed to provide feedback and continuity rather than spectacle. Transitions are consistently brief, typically 0.2 seconds, applied to color and transform properties for a responsive feel.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth color transitions on interactive elements
  - Scale transforms on hover states

- **Hover:** Color change on borders and text
- **Click:** Transform scale (0.98) on buttons
- **Transition:** All properties 0.2s or transform 0.2s
- **Keyboard:** Focus states not visible in static screenshot

## 8. Voice & Don'ts

The editorial voice is professional and artistic, using bold, uppercase headlines with a high-contrast palette to inform and engage. The tone is informative without being cold, inviting the viewer into a creative space.

- **Tone:** Professional, artistic, and informative
- **Headline style:** Bold, uppercase, high-contrast
- **CTA style:** Friendly and inviting with a casual dashed border
- **Avoid:** Using purely decorative fonts / Overwhelming the visual with too much text / Using a cold or strictly corporate tone

### Don'ts
- ❌ Don't use thin or delicate typography — screenshot shows bold, heavy weights for headlines
- ❌ Don't use a dark or cool-toned primary background — screenshot shows a warm, bright yellow
- ❌ Don't use rigid, sharp corners for primary buttons — screenshot shows pill-shaped, dashed outlines
- ❌ Don't use a minimalist, monochromatic palette — screenshot shows a vibrant, multi-colored geometric scheme
- ❌ Don't hide the main navigation behind complex interactions — screenshot shows a simple hamburger icon
- ❌ Don't use small, cramped spacing — screenshot shows generous padding and wide gutters

They deliberately avoid thin, delicate typography and dark, cool backgrounds, ensuring the system's bold, warm character remains uncompromised.

## System Prompt (paste into AI tool)

```
A vibrant, art-focused portfolio for modern textile design, showcasing bold geometric quilts and apparel. The design DNA centers on a warm, high-chroma palette with #FFED8C as the primary background and #F15A24 as the dominant accent color. Typography utilizes a humanist-sans for display headlines and a geometric-sans for body text, emphasizing bold weights and generous letter spacing. Key critical donts: don't use a cold or dark primary background, don't use thin or delicate type weights, and don't use rigid, sharp corners for primary interactive elements. The layout features generous vertical rhythm and a split-screen approach that balances large typography with impactful imagery.
```