---
name: 10Xdesigners
description: "This site serves as an excellent reference for high-contrast, typography-driven design with bold editorial aesthetics."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  tertiary: "#FF1841"
  neutral: "#949494"
  line: "rgba(148, 148, 148, 0.3)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 300px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-12px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 18px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: grotesque-sans
    fontSize: 13px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 2px
  md: 12px
  lg: 20px
  pill: 999px

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

---

## Overview

A high-contrast, typography-driven hub for designers to share and discover resources.

*A high-end, minimal gallery of tools and assets for designers.*

## Colors

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

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Accent (`#FF1841`)** — uses `accent` token
- **Muted (`#949494`)** — uses `muted` token
- **Borders (`rgba(148, 148, 148, 0.3)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Strict 4px baseline grid with generous, intentional spacing between elements.

## Elevation & Depth

- none
- Borders: 1px solid rgba(148, 148, 148, 0.3) used sparingly for dividers and input states.

## Shapes

- `sm`: 2px
- `md`: 12px
- `lg`: 20px
- `pill`: 999px

## Components

- **button:** Pill-shaped primary action buttons with high-contrast colors and clean typography.
- **card:** Minimalist cards focusing on content with clear typography and subtle borders.
- **chip:** Radio-style selection chips with distinct active and inactive states.
- **input:** Clean text inputs with rounded borders and smooth focus transitions.
- **hero:** Full-screen, immersive hero section dominated by a massive typographic statement.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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