# Topicals · Design system migration spec

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

> This site is a great example of using oversized typography and high-quality photography to build a premium, modern brand identity in the skincare space.

## 1. Identity DNA

This system is built on a principle of editorial boldness, where every element serves a dual purpose: communicating clinical credibility while maintaining a playful, inclusive spirit. The brand identity functions like a modern skincare clinic redesigned by a fashion magazine—clinical precision meets high-contrast spectacle.

**One-liner:** A bold, editorial skincare brand that uses oversized typography and high-contrast photography to convey science-backed, inclusive formulations.
**Keywords:** skincare · science-backed · inclusive · bold · editorial
**Analogy:** A bold, modern skincare brand that combines clinical efficacy with a playful, inclusive, and high-fashion editorial aesthetic.

## 2. Color

The color palette operates with deliberate restraint, using deep charcoal and crisp white as a high-contrast foundation. A single vibrant coral-red accent provides energetic focal points without competing with the photography.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#131212` | main background |
| `--bg-soft` | `#F6F6F6` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#818181` | placeholder |
| `--accent` | `#FF454E` | single accent |
| `--line` | `rgba(19, 18, 18, 1)` | divider |

**Color principle:** A high-contrast palette anchored by deep charcoal and crisp white, with a vibrant coral-red accent that provides energetic focal points.

This approach ensures visual hierarchy is driven by contrast and saturation rather than chromatic complexity.

## 3. Typography

Typography is split between a geometric sans-serif for commanding display text and a humanist sans-serif for legible body copy. The system uses tight letter-spacing on large headlines to create compact, impactful statements that anchor the editorial layout.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 0.9 | 700 | -3px | Hero headlines and brand wordmark |
| heading | 42px | 1.1 | 500 | -0.9px | Section titles |
| body | 14px | 1.5 | 400 | -0.42px | General UI text and descriptions |
| label | 12px | 1.2 | 500 | 0.5px | Navigation links and tags |

**Type rules:**
- Use geometric sans-serif for massive display text and primary headlines.
- Use humanist sans-serif for body text and UI elements to maintain readability.
- Apply tight letter-spacing to large display text for a compact, impactful look.
- Ensure body text remains legible with a size of 14px or larger.

## 4. Spacing

Spacing follows a dual rhythm: tight, 4px-based increments for UI components and generous whitespace for editorial breathing room.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 10 / 12 / 16 / 20 / 24 / 30 / 48 / 64 px
- **Rhythm:** A combination of tight, 4px-based spacing for UI elements and generous whitespace for editorial sections.

## 5. Surfaces

Surface treatments are minimal, relying on high-quality photography and negative space rather than shadows or heavy borders. Borders are used sparingly, primarily to define interactive states on buttons and inputs.

- **Radius:** sm 2px · md 4px · lg 8px · pill 999px
- **Borders:** Borders are primarily used to define input states or button edges, typically 1px solid black.

## 6. Layout

The layout is structured around a full-bleed hero section that combines a massive typographic wordmark with a central product photograph against a dark background. This is followed by a two-column editorial section that uses generous whitespace to frame content.

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

**Skeleton:** A full-bleed hero section dominated by a massive typographic wordmark and a large product photograph, followed by a two-column editorial section.

## 7. Motion & Interaction

Motion is functional and restrained, focusing on fade-in animations for content and smooth color transitions for interactive elements. All transitions use linear timing to maintain a snappy, responsive feel without decorative flourish.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0, 0, 0.2, 1)`
- **Patterns:**
  - Fade-in animations for content elements.
  - Smooth color transitions for interactive elements.
  - Linear transitions for text and background color changes.

- **Hover:** Interactive elements like buttons and links change background or text color with a smooth 0.2s linear transition.
- **Click:** A subtle change in background or border color indicates the active state.
- **Transition:** Most interactive transitions use a 0.2s linear timing for a snappy, responsive feel.
- **Keyboard:** Standard keyboard navigation is supported, with visible focus states for interactive elements.

## 8. Voice & Don'ts

The voice is confident, inclusive, and scientifically grounded, with headlines that are bold, oversized, and direct. CTAs are simple and action-oriented, using clean typography and transparent button styles.

- **Tone:** Confident, inclusive, and scientifically grounded, with a touch of playfulness.
- **Headline style:** Bold, oversized, and direct, often using a single word or a short, impactful phrase.
- **CTA style:** Simple and action-oriented, using a clean sans-serif font and a transparent button style.
- **Avoid:** Avoid overly technical jargon, overly decorative elements, or a clinical, sterile aesthetic.

### Don'ts
- ❌ Don't use decorative or script fonts — the screenshot shows a consistent use of clean, geometric and humanist sans-serif typefaces.
- ❌ Don't use a light or colorful background for the hero section — the screenshot shows a dark charcoal background with white text.
- ❌ Don't use excessive shadows or borders on cards — the screenshot shows a clean, photography-driven layout without heavy containers.
- ❌ Don't use a multi-color palette — the screenshot shows a focused palette of black, white, and a single vibrant coral accent.
- ❌ Don't use large, rounded corners on buttons or inputs — the screenshot shows a 2px border-radius for a sharper, more tailored look.
- ❌ Don't use a small, cluttered layout — the screenshot shows massive typography and generous whitespace to create an editorial feel.

The system deliberately avoids decorative scripts, colorful backgrounds, excessive shadows, multi-color palettes, large rounded corners, and cluttered layouts.

## System Prompt (paste into AI tool)

```
This is a premium skincare brand website that uses bold, oversized typography and high-contrast photography to create a modern, editorial feel. The primary colors are a deep charcoal (#131212) and crisp white (#FFFFFF), with a vibrant coral-red (#FF454E) accent for key CTAs and interactive elements. The typography combines geometric sans-serifs for display and humanist sans-serifs for body text, with very tight letter-spacing on large headlines. Key design rules include: never use decorative or script fonts; avoid light backgrounds in the hero section; use a 2px border-radius for all components; and maintain a high-contrast, photography-driven layout with generous whitespace. The tone is confident, inclusive, and scientifically grounded.
```
