---
name: Hle
description: "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."
version: alpha

colors:
  background: "#101011"
  primary: "#FFFFFF"
  neutral: "#717172"
  bg-soft: "#2B2B2B"
  bg-quiet: "#383838"
  line: "rgba(255,255,255,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 118px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2px"
  body:
    fontFamily: geometric-sans
    fontSize: 15px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 10px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 12px
  lg: 50px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A stark, high-contrast dark canvas with massive typography, positioning itself as a premium axis for talent and content.

*A luxury brand monograph.*

## Colors

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

- **Background (`#101011`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Muted (`#717172`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.1)`)** — uses `line` token

## Typography

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

- 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).

## Layout

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

*Rhythm:* A simple 4px base grid governs all spacing, with generous padding (40px-48px) for section containers.

## Elevation & Depth

- 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.

## Shapes

- `sm`: 0px
- `md`: 12px
- `lg`: 50px
- `pill`: 999px

## Components

- **button:** Neumorphic dark buttons with subtle highlights and shadows, often featuring a 50% border-radius for pill shapes.
- **card:** Dark cards with subtle neumorphic shadows and 12px border-radius.
- **chip:** Not prominently visible in the provided screenshots.
- **input:** Not prominently visible in the provided screenshots.
- **hero:** A full-screen, dark hero section dominated by a massive, left-aligned headline that types out or is revealed.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```