# Somethingspecialstudios · Design system migration spec

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

> This site is a perfect example of a 'less is more' agency portfolio that uses typography and photography to convey a high-end, professional brand identity.

## 1. Identity DNA

This system is a high-end fashion magazine translated into a digital gallery, where the architecture of the page recedes to let the work command the space. It is a bold, image-driven creative agency portfolio that prioritizes visual work and typography over UI decoration.

**One-liner:** A bold, image-driven creative agency portfolio that prioritizes visual work and typography over UI decoration.
**Keywords:** agency · creative · portfolio · high-fashion · editorial
**Analogy:** A high-end fashion magazine translated into a digital gallery.

## 2. Color

The palette is a strict, high-contrast duotone: warm cream and ink black. Project photography is the sole source of color, providing all chromatic variation.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFDF1` | main background |
| `--ink` | `#141414` | body text |
| `--muted` | `#E6E6E6` | placeholder |
| `--line` | `rgba(20, 20, 20, 0.1)` | divider |

**Color principle:** Strict black-on-cream typography with vibrant photography as the only color source.

The principle is that the system's own palette provides a neutral stage, never competing with the content it presents.

## 3. Typography

Typography uses the **AntiqueLegacy** family exclusively, a transitional serif whose confident voice anchors the editorial tone. All text, from display headlines to metadata, is set at a strict weight of 400.

- **Display:** transitional-serif
- **Body:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 75px | 1.0 | 400 | -3px | Main site title |
| body | 16px | 1.5 | 400 | 0.12px | Primary text |
| caption | 12px | 1.1 | 400 | 0.12px | Navigation and project metadata |

**Type rules:**
- Use the AntiqueLegacy font family for all text.
- Maintain a strict font weight of 400 for all elements.

## 4. Spacing

An 8px baseline rhythm governs all gaps and padding, creating a consistent and measured vertical cadence.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 10 / 16 / 24 / 32 / 48 / 64 px
- **Rhythm:** 8px baseline rhythm for gaps and padding.

## 5. Surfaces

Depth is communicated through subtraction; surfaces are flat and borders are minimal, defined only by a subtle 1px divider. The absence of shadows and radii keeps the focus on the imagery's rectangular edge.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 1px solid border color for subtle dividers.

## 6. Layout

The layout skeleton is a full-width image grid, stripped of extraneous padding to maximize visual impact. A massive typographic header establishes the top of the page, with a flat, top-aligned navigation bar above it.

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

**Skeleton:** Full-width image grid with minimal padding.

## 7. Motion & Interaction

Motion is used sparingly and with purpose, primarily for smooth page transitions and subtle state changes. The philosophy is one of calm, refined movement—opacity fades and slight transforms that signal interactivity without spectacle.

- **Durations:** micro 100ms · small 150ms · medium 600ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Opacity fade and subtle transform on hover and page transitions.

- **Hover:** Cursor changes to pointer; subtle opacity or transform transitions.
- **Click:** Standard navigation.
- **Transition:** 0.15s ease-in-out for most interactive states.
- **Keyboard:** Standard browser focus management.

## 8. Voice & Don'ts

The voice is minimal, professional, and confident, relying on concise copy and large whitespace. Headlines are set large and bold in the serif, while calls to action are simple text links, avoiding decorative or UI-heavy patterns.

- **Tone:** Minimal, professional, and confident.
- **Headline style:** Large, bold, serif typography.
- **CTA style:** Simple text links.
- **Avoid:** Decorative elements / Complex gradients / Vibrant UI accents / Dense text blocks

### Don'ts
- ❌ Don't use bright UI accents — screenshot shows the design relies on photography for color.
- ❌ Don't use sans-serif fonts — screenshot shows a consistent transitional-serif typeface throughout.
- ❌ Don't use heavy shadows or border radii — screenshot shows flat, edge-to-edge imagery.
- ❌ Don't use dense text layouts — screenshot shows minimal, concise copy and large whitespace.
- ❌ Don't use complex navigation menus — screenshot shows a flat, top-aligned navigation bar.
- ❌ Don't use rounded image corners — screenshot shows strict rectangular crops for all imagery.

The system deliberately forgoes vibrant UI accents, complex navigation, and decorative gradients to ensure the photography and typography remain the unambiguous focus.

## System Prompt (paste into AI tool)

```
A high-end creative agency portfolio for Something Special Studios. Positioning: A premium, image-first gallery showcasing fashion, retail, and lifestyle work. Key hex colors: #FFFDF1 (cream background), #141414 (ink black), and #E6E6E6 (muted borders). Font categories: Transitional-serif (AntiqueLegacy) for both display and body. Critical donts: Never use sans-serif fonts; never add rounded corners to images; never use vibrant UI accents or shadows. The layout is a minimalist, full-width grid that prioritizes photography over decorative UI elements.
```