---
name: Mistral
description: "Worth including for its mastery of the 'editorial tech' style, where restrained UI allows bold brand patterns and clear typography to shine."
version: alpha

colors:
  background: "#FAFAF8"
  primary: "#000000"
  neutral: "#92928A"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  headline:
    fontFamily: humanist-sans
    fontSize: 44px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  subhead:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "-0.2px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 11px
    lineHeight: 1.45
    fontWeight: 500
    letterSpacing: "0.3px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

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

---

## Overview

A premium B2B AI platform that uses restrained, editorial design with a distinctive brand pattern to project technical authority.

*A clean, high-end workshop for building the future of AI.*

## Colors

High-contrast neutral background with a primary pattern providing all visual energy.

- **Background (`#FAFAF8`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#92928A`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

- Use the display font for major hero statements.
- Use uppercase and monospace for technical tags and labels.
- Maintain tight negative letter-spacing for large headlines.

## Layout

Asymmetrical split hero (left-aligned text, right-aligned image) transitioning to full-width content blocks.

*Rhythm:* Strict 4px base grid with generous whitespace for an editorial feel.

## Elevation & Depth

- 0px 1px 2px rgba(21, 21, 31, 0.02)
- 0px 2px 4px rgba(21, 21, 31, 0.02)
- 0px 4px 8px rgba(21, 21, 31, 0.02)
- Borders: Thin 1px solid borders used strictly for card and button edges.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Two distinct styles: an outlined 'ghost' button for secondary actions and a solid black 'pill' button for primary calls to action.
- **card:** Clean white containers with a 1px border and subtle corner radius (8px-12px).
- **chip:** Small uppercase tags using 11px monospace font, used for categorization.
- **input:** Minimal styling with thin borders, focusing on high readability.
- **hero:** Massive typography paired with a bold, blocky geometric pattern or interface mockup.

## Do's and Don'ts

**Don't:**
- Don't use playful or rounded typography — screenshot shows a structured, geometric humanist-sans.
- Don't apply heavy drop shadows — screenshot shows only very faint, functional elevation.
- Don't use a multi-color palette — screenshot shows a neutral UI relying on a specific orange/red pattern.
- Don't center-align major headlines — screenshot shows strong left-alignment for text blocks.
- Don't use overly decorative borders — screenshot shows strictly 1px functional borders.
- Don't use a dark mode for the main UI — screenshot shows a light, off-white editorial background.

---

## System Prompt (paste into AI agent)

```
This is a premium, developer-focused B2B website for an AI platform. It features a clean, editorial layout with a high-contrast neutral palette (#FAFAF8, #000000, #92928A). Typography is a structured humanist-sans (Inter-like) with an expressive blocky pattern providing brand energy. Critical donts: Don't use heavy gradients or drop shadows; the UI is strictly flat and functional. Don't use playful or script fonts; maintain technical authority. Don't multi-align text; stick to a clean left-aligned grid for readability. Key colors are off-white for backgrounds and deep black for primary text, with orange/red accents reserved entirely for the geometric hero graphic.
```