# Your Majesty · Design system migration spec

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

> This site is a masterclass in balancing bold, expressive typography with a minimal UI, making it a perfect reference for premium agency design.

## 1. Identity DNA

Your Majesty operates with the precision of a high-end fashion editorial, where each element is placed with the deliberateness of a gallery curator. The system is built on a stark contrast between a monochrome typographic base and the immersive depth of 3D and photographic media, which serve as the primary color.

**One-liner:** A luxury creative agency website blending bold serif typography with immersive 3D and photographic media.
**Keywords:** luxury · premium · creative agency · human-centered
**Analogy:** A high-end fashion editorial meets a digital gallery.

## 2. Color

The color strategy is one of deliberate restraint. A high-contrast monochrome palette provides the neutral stage, allowing the rich greens, golds, and textures of the embedded media to become the visual accents.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#D8D8D8` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast monochrome base allowing 3D and photographic media to serve as the primary color accents.

This principle ensures the design remains a canvas for the client's work, not a competitor to it.

## 3. Typography

The typographic voice is defined by the tension between a high-contrast transitional serif for commanding headlines and the clean utility of a humanist sans-serif for body text. A monospaced font in all-caps with wide tracking provides a technical, editorial accent for labels and UI tags.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 70px | 1.1 | 300 | -0.2px | Hero headlines |
| display-lg | 30px | 1.13 | 400 | -0.2px | Subheadlines |
| body | 16px | 1.15 | 400 | 0px | Body text |
| caption | 13px | 1.15 | 400 | 0.8px | Labels, tags, and uppercase UI text |

**Type rules:**
- Headlines use a high-contrast transitional serif with tight leading.
- UI labels and tags use a monospaced font in all-caps with wide tracking.
- Body text uses a clean sans-serif for readability.

## 4. Spacing

Generous whitespace establishes a rhythmic, gallery-like cadence, giving each element room to breathe and hold its own.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace emphasizing a gallery-like layout.

## 5. Surfaces

Depth is achieved through subtlety, with soft shadows and fine borders that lift elements just enough to create hierarchy without visual noise.

- **Radius:** sm 4px · md 5px · lg 12px · pill 9999px
- **Shadows:**
  - 0px 2px 6px rgba(0,0,0,0.1)
- **Borders:** 1px solid rgba(0,0,0,0.1)

## 6. Layout

The layout is an asymmetric masonry grid, where large typographic blocks are balanced against overlapping vertical cards of rich media. This skeleton creates dynamic visual tension, guiding the eye across an expansive, curated field.

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

**Skeleton:** Asymmetric masonry grid with overlapping 3D and photographic cards over a wide typographic base.

## 7. Motion & Interaction

Motion is used sparingly and with intent, emphasizing refinement over flair. Understated fades and smooth color or filter shifts on interaction guide focus and confirm actions without disrupting the premium atmosphere.

- **Durations:** micro 150ms · small 250ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Fade-in transitions for media elements
  - Smooth color and filter shifts on hover

- **Hover:** Subtle color shifts or filter adjustments on interactive elements.
- **Click:** Immediate visual feedback on buttons and links.
- **Transition:** Smooth opacity and color transitions on all interactive states.
- **Keyboard:** Standard focus management for accessibility.

## 8. Voice & Don'ts

The editorial voice is authoritative and forward-thinking, matching the sophistication of the visual system. Headlines are bold and evocative, while calls to action are direct and typographically distinct.

- **Tone:** Authoritative, sophisticated, and forward-thinking.
- **Headline style:** Bold, evocative statements set in large serif type.
- **CTA style:** Direct and uppercase, often monospaced.
- **Avoid:** Casual language / Cluttered layouts / Vibrant neon colors

### Don'ts
- ❌ Don't use playful or rounded sans-serif fonts — screenshot shows elegant transitional serifs for headlines.
- ❌ Don't use a busy, multi-colored background — screenshot shows a clean, stark white canvas.
- ❌ Don't center-align all content — screenshot shows a strong left-aligned typographic hierarchy.
- ❌ Don't use standard rectangular cards — screenshot shows slightly rounded corners (5px) and overlapping elements.
- ❌ Don't use small, dense text for UI labels — screenshot shows monospaced, uppercase tags with wide tracking.
- ❌ Don't introduce a bright, high-saturation accent color — screenshot relies on 3D renders and photos for color.

The system deliberately excludes casual language, cluttered compositions, and vibrant neon colors to preserve its curated, high-end character.

## System Prompt (paste into AI tool)

```
This is a premium creative agency website for 'Your Majesty'. It features a high-contrast monochrome palette (#FFFFFF background, #000000 ink) that serves as a neutral stage for rich media. The typography is defined by large, elegant transitional-serif headlines paired with a clean humanist-sans body and a wide-tracked monospaced font for UI labels. The layout uses an asymmetric masonry-style grid with large, slightly rounded cards. Do not use playful fonts or casual language; maintain an authoritative, sophisticated tone. Avoid bright accent colors, instead letting 3D and photographic content provide visual interest. Ensure generous whitespace and left-aligned text blocks to preserve the editorial feel.
```
