# 10Xdesigners · Design system migration spec

> Source: https://10xdesigners.co  ·  Curated by OpenDesign  ·  en

> This site serves as an excellent reference for high-contrast, typography-driven design with bold editorial aesthetics.

## 1. Identity DNA

The system is conceived as a high-end, minimal gallery for design tools and assets. It is a typographic-driven hub where resources are curated and amplified through a stark, high-contrast lens. The design functions as a clean exhibition space, where content is the primary artifact.

**One-liner:** A high-contrast, typography-driven hub for designers to share and discover resources.
**Keywords:** design resources · curation · sharing · amplifying work
**Analogy:** A high-end, minimal gallery of tools and assets for designers.

## 2. Color

The palette is a strict exercise in binary contrast, using a stark black-and-white base to achieve maximum legibility and focus. A single, high-chroma red accent is reserved exclusively for primary actions and critical state indicators, ensuring it commands attention without visual clutter.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#949494` | placeholder |
| `--accent` | `#FF1841` | single accent |
| `--line` | `rgba(148, 148, 148, 0.3)` | divider |

**Color principle:** Stark, high-contrast minimalism using a strict black-and-white base with a single high-chroma red accent.

The underlying principle is stark minimalism, where color is used as a functional tool rather than a decorative element.

## 3. Typography

The typographic voice is defined by massive, expressive display text set with extremely tight letter-spacing for visual cohesion. This bold editorial statement is supported by a disciplined system that maintains a consistent normal weight (400) across all elements, creating a clean and uniform reading experience.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 300px | 1.0 | 400 | -12px | Massive hero headline spanning the full width |
| heading | 32px | 1.2 | 400 | -0.5px | Subheadings and secondary emphasis |
| body | 18px | 1.4 | 400 | 0px | Main content and descriptive text |
| small | 13px | 1.4 | 400 | 0px | Metadata and spacing text |

**Type rules:**
- Use extremely tight letter-spacing (-12px) for massive display text to maintain visual cohesion.
- Maintain consistent normal font-weight (400) across all elements to keep the design clean and uniform.

## 4. Spacing

The design is built on a strict 4px baseline grid, enforcing a rhythmic structure throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strict 4px baseline grid with generous, intentional spacing between elements.

## 5. Surfaces

Surfaces are defined by their flat, high-contrast nature, deliberately avoiding shadows or 3D effects. Depth is suggested solely through typographic scale and generous whitespace, with sparingly used subtle borders to delineate input states and dividers.

- **Radius:** sm 2px · md 12px · lg 20px · pill 999px
- **Shadows:**
  - none
- **Borders:** 1px solid rgba(148, 148, 148, 0.3) used sparingly for dividers and input states.

## 6. Layout

The layout skeleton begins with a full-width, immersive hero section dominated by a massive typographic statement. This bold introduction transitions into a structured, grid-based content area designed for clarity and focused resource discovery.

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

**Skeleton:** Full-width hero with massive typography, followed by a structured, grid-based content area.

## 7. Motion & Interaction

Motion is treated with restraint, favoring smooth, linear transitions for core UI state changes. Interactive feedback is kept subtle and immediate, with hover effects that indicate interactivity through slight shifts in color or opacity rather than complex animation.

- **Durations:** micro 100ms · small 200ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Smooth, linear visibility transitions for UI state changes.
  - Subtle hover effects on interactive elements.

- **Hover:** Subtle color shifts or opacity changes to indicate interactivity.
- **Click:** Immediate, responsive feedback without complex animations.
- **Transition:** Smooth 0.3s ease-in-out transitions for visibility and state changes.
- **Keyboard:** Standard focus states with visible outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is direct, confident, and professional, crafted for a design-savvy audience. It prioritizes clear hierarchy and generous spacing over dense prose, ensuring every element serves a clear purpose in the interface.

- **Tone:** Direct, confident, and professional, speaking to a design-savvy audience.
- **Headline style:** Bold, massive, and typographically expressive, often using tight spacing.
- **CTA style:** Clear, action-oriented, and visually prominent, guiding the user to the next step.
- **Avoid:** Avoid overly decorative fonts or excessive color palettes. / Avoid dense paragraphs; use generous spacing and clear hierarchy. / Avoid complex animations that distract from the core content.

### Don'ts
- ❌ Don't use a wide variety of font weights — screenshot shows exclusively weight 400.
- ❌ Don't use multiple accent colors — screenshot shows only a single red accent (#FF1841).
- ❌ Don't use soft or muted background colors — screenshot shows a stark, pure black background.
- ❌ Don't use tight, dense spacing — screenshot shows generous whitespace and large typographic scale.
- ❌ Don't use complex, decorative UI elements — screenshot shows clean, minimalist components.
- ❌ Don't use heavy drop shadows or 3D effects — screenshot shows flat, high-contrast surfaces.

The system deliberately avoids decorative fonts, multiple accent colors, and complex animations, committing instead to a focused, high-contrast clarity.

## System Prompt (paste into AI tool)

```
A high-contrast, typography-driven resource hub for designers. Key features include a stark black background (#000000), pure white text (#FFFFFF), and a single vibrant red accent (#FF1841). The design relies heavily on grotesque-sans typography with massive display sizes (up to 300px) and extremely tight letter-spacing (-12px). Critical constraints: maintain a strict 400 font-weight throughout, avoid multiple accent colors, and preserve generous whitespace to highlight the bold typographic elements. Ensure components remain minimalist, using only a single red accent for primary actions and state indicators.
```
