CURATED · OPEN · FREE

Cinderbloc

A monochrome, typographically-driven identity with a strong geometric foundation.

Bold TypographyMonochromeGeometricStudio

↓ Download design system (0 MB)Open in OpenDesign

Visit: https://www.cinderbloc.com

📦 Browse pack contents →

Identity DNA

architecturalstructuralboldgeometricmonochrome

A bold, architectural foundation for digital design.

Color

#FFFFFFInk

#000000BG

#939598Muted

rgba(0,0,0,1)Line

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

Typography

geometric-sans

display62px · 300
body15px · 400

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

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous whitespace, large padding values for breathing room.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

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

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Large, clean blocks of space with precise geometric alignment.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.43, 0.195, 0.02, 1)easing

Smooth, sophisticated transitions with custom cubic-bezier easing. · Elements fade in with slight transforms.

Subtle state changes, often involving opacity or slight transforms. · Immediate visual feedback through transitions.

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.

Voice & Don'ts

Tone Authoritative, structural, and confident.
Headlines Bold, uppercase, and often geometrically arranged.
CTAs Clear, uppercase, and direct.

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.
Avoid: Playful or casual language.
Avoid: Decorative or ornate elements.
Avoid: Complex color palettes.

Inside the pack — real screenshots

Cinderbloc — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko