---
name: Newglyph
description: "This site is a prime example of using bold color and massive typography to create a strong, memorable brand identity for a creative product."
version: alpha

colors:
  background: "#161616"
  primary: "#FFFFFF"
  secondary: "#8D8D8D"
  tertiary: "#5A00FA"
  neutral: "#C6C6C6"
  line: "rgba(255,255,255,1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 100px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.5
    fontWeight: 500
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 12px
  lg: 12px
  pill: 9999px

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

---

## Overview

A bold, high-contrast type foundry site that showcases letterforms as the central product.

*A brutalist art gallery for letterforms, where the type itself is the primary exhibit.*

## Colors

Dark neutral canvas with vibrant, high-chroma blocks to frame typography.

- **Background (`#161616`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#8D8D8D`)** — uses `ink-soft` token
- **Accent (`#5A00FA`)** — uses `accent` token
- **Muted (`#C6C6C6`)** — uses `muted` token
- **Borders (`rgba(255,255,255,1.0)`)** — uses `line` token

## Typography

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

- Headlines are often uppercase with tight tracking for impact.
- Body text is set in a highly legible humanist sans-serif.
- Use monospace for technical or code-like elements.

## Layout

Full-width, edge-to-edge color blocks for major sections, containing centered content.

*Rhythm:* Consistent 4px base grid used for padding, gaps, and component spacing.

## Elevation & Depth

- 0 4px 24px rgba(0,0,0,0.2)
- Borders: 1px solid used for subtle dividers, often matching the text color.

## Shapes

- `sm`: 4px
- `md`: 12px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Pill-shaped with black text on white background, featuring a right arrow icon.
- **card:** Large, solid color blocks with rounded corners that serve as containers for major content.
- **chip:** Not prominently featured.
- **input:** Not prominently featured.
- **hero:** A massive, high-contrast typographic statement set against a vibrant background color.

## Do's and Don'ts

**Don't:**
- Don't use subtle, low-contrast color palettes — the screenshot shows bold, high-chroma blocks.
- Don't use light backgrounds as the default — the primary canvas is a very dark near-black.
- Don't use thin, delicate typefaces for headlines — the screenshot uses extremely heavy, bold weights.
- Don't use square or sharp corners on primary containers — the screenshot shows consistent use of rounded corners.
- Don't use complex, multi-layered shadows — the screenshot shows minimal or subtle shadow depth.
- Don't use serif fonts for the primary display type — the screenshot exclusively uses sans-serif for headlines.

---

## System Prompt (paste into AI agent)

```
This is a type foundry website with a bold, high-contrast design. Positioning: A modern, premium type foundry selling variable fonts. Key colors: Very dark near-black (#161616) canvas, white (#FFFFFF) text, and vibrant accent blocks in electric purple (#5A00FA), bright yellow (#FFFF00), and light mint green. Font categories: Primarily geometric-sans for display, humanist-sans for body. Critical donts: 1) Don't use low-contrast or muted palettes; the design is intentionally loud. 2) Don't use light backgrounds for the main site frame; it is dark. 3) Don't use thin, delicate typefaces for headlines; they must be extremely heavy and impactful.
```