---
name: Sharp Type
description: "This site is worth including as a premier example of how typography-focused design can use extreme restraint in color and layout to create a highly professional and premium user experience."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  neutral: "#BDBDBD"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 40px
    lineHeight: 1.25
    fontWeight: 700
    letterSpacing: "-0.4px"
  body:
    fontFamily: humanist-sans
    fontSize: 21px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0.02px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.35
    fontWeight: 400
    letterSpacing: "0.02px"

rounded:
  sm: 2px
  md: 10px
  lg: 14px
  pill: 999px

spacing:
  xs: 7px
  sm: 14px
  md: 21px
  lg: 28px
  xl: 35px
  2xl: 42px
  3xl: 49px

---

## Overview

A sophisticated, typography-forward website for a global digital type foundry.

*A pristine gallery catalog for premium typefaces.*

## Colors

Minimalist black and white with highly saturated, varied dot indicators for typeface categorization.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#BDBDBD`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

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

- Use bold weight (700) strictly for headings and specific highlighted words.
- Maintain tight letter-spacing (negative values) for large display text.
- Use a standard weight (400) for all body and navigation elements.

## Layout

A fluid layout that transitions from a single column on mobile to a three-column grid for the typeface catalog.

*Rhythm:* A 7px base unit is used consistently for padding, gaps, and margins.

## Elevation & Depth

- rgb(128, 128, 128) 0px 0px 5px 0px
- Borders: Thin 1px black lines are used for primary separators, while light gray (rgb(189, 189, 189)) is used for secondary borders.

## Shapes

- `sm`: 2px
- `md`: 10px
- `lg`: 14px
- `pill`: 999px

## Components

- **button:** Ghost button with a 2px blue border, rounded ends, and uppercase blue text.
- **card:** Minimal card-like rows for typeface listings, separated by thin lines.
- **chip:** Small, circular color indicators (dots) placed next to typeface names.
- **input:** Not visible in the provided screenshots.
- **hero:** A minimalist hero featuring a large, descriptive headline with mixed font weights and a single colored dot.

## Do's and Don'ts

**Don't:**
- Don't use a dominant high-chroma accent color for large backgrounds — the screenshot shows color is strictly used for small dot indicators.
- Don't use dark mode or colored backgrounds — the screenshot shows a strictly white (#FFFFFF) background.
- Don't use heavy drop shadows on all elements — the screenshot shows only a single, subtle shadow on one specific element.
- Don't use serif fonts for the main UI or navigation — the screenshot shows a sans-serif typeface (categorized as humanist-sans) for these elements.
- Don't use centered text for navigation or lists — the screenshot shows all navigation and typeface lists are strictly left-aligned.
- Don't use multiple accent colors simultaneously in a single component — the screenshot shows one color per typeface entry.

---

## System Prompt (paste into AI agent)

```
This site is a sophisticated, minimalist portfolio for a global type foundry. Its design DNA is defined by an ultra-clean, high-contrast black (#000000) and white (#FFFFFF) palette, where color is used sparingly as small, saturated circular indicators next to typeface names. The typography relies on a humanist-sans for the body and a geometric-sans for display elements, featuring tight letter-spacing on headings and a 7px-based spacing rhythm. Critical design constraints include: 1) Maintain a strict monochrome base with no colored backgrounds, 2) Ensure all navigation and text remain strictly left-aligned, and 3) Use color only as a precise categorization tool via small dot indicators, never as a primary UI background.
```