# Hle · Design system migration spec

> Source: https://hle.io  ·  Curated by OpenDesign  ·  en

> This design is worth including for its masterful use of monochrome typography and neumorphism to create a premium, editorial feel with a very strong, consistent identity.

## 1. Identity DNA

The Hle design system operates like a luxury brand monograph—every element is chosen with the discipline of a curated exhibition. It is a stark, high-contrast dark canvas with massive typography, positioning itself as a premium axis for talent and content.

**One-liner:** A stark, high-contrast dark canvas with massive typography, positioning itself as a premium axis for talent and content.
**Keywords:** minimalist · editorial · premium · dark
**Analogy:** A luxury brand monograph.

## 2. Color

The palette is a study in restraint: a near-black field serves as the foundational plane, against which pure white typography and a muted grey accent create a hierarchy of extreme contrast. Every color value is a deliberate choice in a strictly monochrome world.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#101011` | main background |
| `--bg-soft` | `#2B2B2B` | card background |
| `--bg-quiet` | `#383838` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#717172` | placeholder |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** Extreme contrast: pure white type on a near-black field, with subtle grey accents for secondary UI elements.

The principle is absolute: contrast is the primary tool for defining space and importance.

## 3. Typography

Typography is the system's dominant feature, delivered through a geometric sans-serif at regular weight for clean legibility and a monospace for specific UI elements. The scale ranges from a massive hero headline to small metadata, all maintaining a consistent, confident voice.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 118px | 1.0 | 400 | -2px | Massive hero headline |
| body | 15px | 1.3 | 400 | 0px | Standard body text |
| caption | 10px | 1.5 | 400 | 0px | Small labels and metadata |

**Type rules:**
- The primary sans-serif is geometric, clean, and highly legible.
- The monospace font is used for specific UI elements and labels.
- All typography is set at regular weight (400).

## 4. Spacing

All spacing is governed by a simple 4px base grid, creating a predictable internal rhythm that supports the layout's vertical emphasis.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px
- **Rhythm:** A simple 4px base grid governs all spacing, with generous padding (40px-48px) for section containers.

## 5. Surfaces

Depth is suggested, not stated, through a neumorphic approach. Subtle inset and outset shadows on dark surfaces create a tactile quality, while borders appear as thin, low-opacity lines or dark solids used with great discretion.

- **Radius:** sm 0px · md 12px · lg 50px · pill 999px
- **Shadows:**
  - A subtle neumorphic effect using inset and outset shadows creates depth on cards and buttons.
  - Shadows use low-opacity blacks and greys to blend with the dark background.
- **Borders:** Thin, low-opacity white borders or dark solid borders are used sparingly.

## 6. Layout

The skeleton is a clean, column-based layout defined by generous whitespace and a strong vertical rhythm. This structure provides the necessary breathing room for massive typography to dominate the composition without clutter.

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

**Skeleton:** A clean, column-based layout with generous whitespace and a focus on vertical rhythm.

## 7. Motion & Interaction

Motion is applied with surgical precision, used sparingly to draw attention to key moments like the hero text reveal. All interactive transitions follow a smooth, consistent timing, reinforcing the system's measured pace.

- **Durations:** micro 220ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - The hero headline appears to have a typing or reveal animation.
  - Transforms and transitions are used for interactive states.

- **Hover:** Subtle changes in shadow depth or color intensity on interactive elements.
- **Click:** A subtle scale or transform effect on buttons and links.
- **Transition:** All interactive elements use smooth transitions, typically 0.3s to 0.5s with ease-in-out timing.
- **Keyboard:** Standard focus states are implied but not explicitly shown.

## 8. Voice & Don'ts

The editorial voice is confident, direct, and minimalist, with headlines styled as bold, declarative statements. The system actively avoids colorful gradients, playful illustrations, and busy layouts in favor of focused content.

- **Tone:** Confident, direct, and minimalist.
- **Headline style:** Massive, bold, and declarative, using a 'statement' style.
- **CTA style:** Subdued and integrated into the neumorphic design system.
- **Avoid:** Colorful gradients / Playful illustrations / Busy layouts

### Don'ts
- ❌ Don't use bright, saturated accent colors — the screenshot shows a strictly monochrome palette.
- ❌ Don't use decorative serifs — the screenshot shows a clean, geometric sans-serif for all text.
- ❌ Don't use heavy, opaque drop shadows — the screenshot shows subtle, neumorphic shadow techniques.
- ❌ Don't create cluttered layouts — the screenshot shows a minimalist, high-contrast design with vast empty space.
- ❌ Don't use bold or heavy font weights — the screenshot shows all text at a regular (400) weight.
- ❌ Don't use rounded, soft corners everywhere — the screenshot shows a mix of sharp and highly rounded (50%) radii.

They deliberately eschew bright accent colors, decorative serifs, heavy shadows, bold font weights, and uniformly rounded corners to preserve the system's stark, typographic authority.

## System Prompt (paste into AI tool)

```
This is a minimalist, dark-mode design system for a premium editorial or talent platform. The palette is strictly monochrome: a near-black background (#101011) with pure white (#FFFFFF) for headlines and a medium grey (#717172) for muted text. Typography is the primary feature, using a clean, geometric sans-serif in a massive scale (up to 118px) at regular weight. Layouts are spacious and column-based. Key donts: Never use bright accent colors, never use decorative serif fonts, and avoid heavy, opaque drop shadows in favor of subtle neumorphic effects. The system prioritizes stark contrast, generous whitespace, and a confident, declarative typographic voice.
```