# Cinderbloc · Design system migration spec

> Source: https://www.cinderbloc.com  ·  Curated by OpenDesign  ·  en

> A powerful example of how bold typography and a strict monochrome palette can create a strong, architectural brand identity.

## 1. Identity DNA

This design system is engineered like a monochrome, typographically-driven foundation. Its identity is a bold, architectural framework for digital construction, built on geometric forms and extreme contrast.

**One-liner:** A monochrome, typographically-driven identity with a strong geometric foundation.
**Keywords:** architectural · structural · bold · geometric · monochrome
**Analogy:** A bold, architectural foundation for digital design.

## 2. Color

The system operates on a strict monochrome principle, using black, white, and a single neutral grey. This extreme contrast defines every element, from large fields to fine details.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#939598` | placeholder |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** Extreme contrast using a strict black, white, and grey palette.

The guiding principle is maximum clarity through a complete, deliberate restriction of color.

## 3. Typography

Voice is established through a single geometric sans-serif, set in uppercase for all display text. The typographic hierarchy relies on a light weight for headlines, creating a stark, structural presence.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 62px | 1.29 | 300 | 4.96px | Large headlines and logotype |
| body | 15px | 1.6 | 400 | normal | Body copy and smaller text |

**Type rules:**
- Uppercase all display text.
- Use light weight (300) for large display sizes.

## 4. Spacing

The rhythm is defined by generous whitespace and large padding, allowing the geometric elements to breathe and command the space.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace, large padding values for breathing room.

## 5. Surfaces

Depth is communicated through flat, clean surfaces defined only by thin, precise lines. There are no shadows; form is articulated solely through geometry and border.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** Thin, precise lines (3px) used for geometric shapes.

## 6. Layout

The layout is built on large, clean blocks arranged with precise geometric alignment. This creates a powerful, structured skeleton that organizes content with architectural rigor.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Large, clean blocks of space with precise geometric alignment.

## 7. Motion & Interaction

Motion is restrained and sophisticated, employing smooth transitions with custom cubic-bezier easing. Elements fade and transform with measured, elegant timing to maintain the system's structural integrity.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.43, 0.195, 0.02, 1)`
- **Patterns:**
  - Smooth, sophisticated transitions with custom cubic-bezier easing.
  - Elements fade in with slight transforms.

- **Hover:** Subtle state changes, often involving opacity or slight transforms.
- **Click:** Immediate visual feedback through transitions.
- **Transition:** All properties transition with a smooth cubic-bezier curve.
- **Keyboard:** Focus states likely follow high-contrast principles.

## 8. Voice & Don'ts

The editorial voice is authoritative, structural, and confident, mirroring the design's own bold geometry. Headlines and calls to action are direct, uppercase, and unadorned.

- **Tone:** Authoritative, structural, and confident.
- **Headline style:** Bold, uppercase, and often geometrically arranged.
- **CTA style:** Clear, uppercase, and direct.
- **Avoid:** Playful or casual language. / Decorative or ornate elements. / Complex color palettes.

### Don'ts
- ❌ 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.

The system deliberately rejects playful language, decorative elements, and any visual complexity that would compromise its stark, monochrome foundation.

## System Prompt (paste into AI tool)

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