---
name: Cinderbloc
description: "A powerful example of how bold typography and a strict monochrome palette can create a strong, architectural brand identity."
version: alpha

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

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 62px
    lineHeight: 1.29
    fontWeight: 300
    letterSpacing: "4.96px"
  body:
    fontFamily: geometric-sans
    fontSize: 15px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "normal"

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 monochrome, typographically-driven identity with a strong geometric foundation.

*A bold, architectural foundation for digital design.*

## Colors

Extreme contrast using a strict black, white, and grey palette.

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

## Typography

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

- Uppercase all display text.
- Use light weight (300) for large display sizes.

## Layout

Large, clean blocks of space with precise geometric alignment.

*Rhythm:* Generous whitespace, large padding values for breathing room.

## Elevation & Depth

- Borders: Thin, precise lines (3px) used for geometric shapes.

## Shapes

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

## Components

- **button:** Geometric, high contrast, uppercase text.
- **card:** Defined by thin outlines and generous padding.
- **chip:** Simple, geometric shapes with high contrast.
- **input:** Clean, minimal, with precise borders.
- **hero:** Dominant typography with large, geometric background shapes.

## Do's and Don'ts

**Don't:**
- don't use multiple font families — screenshot shows a single geometric sans-serif.
- don't use bright, saturated colors — screenshot shows a strict monochrome palette.
- don't use rounded, playful shapes — screenshot shows sharp, geometric forms.
- don't use heavy font weights for display text — screenshot shows a light weight (300).
- don't use lowercase for headlines — screenshot shows uppercase text.
- don't add complex shadows or gradients — screenshot shows flat, clean surfaces.

---

## System Prompt (paste into AI agent)

```
This site is a monochrome, typographically-driven portfolio or studio site with a strong geometric foundation. Key hex colors are #000000 (bg) and #FFFFFF (ink), with #939598 as a muted tone. The primary font category is geometric-sans, used in light weight (300) for large display text and normal weight (400) for body copy. Critical donts: 1) Do not introduce any color outside the strict monochrome palette. 2) Do not use decorative or rounded shapes. 3) Do not use heavy font weights for large headlines. The design emphasizes bold typography, generous whitespace, and precise geometric forms.
```