# 6Am Glass · Design system migration spec

> Source: https://6am.glass/en  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in using typography as the primary structural and expressive element, making it a perfect reference for high-end editorial and brutalist design.

## 1. Identity DNA

This design system operates on the principle of the brutalist gallery, where the typographic specimen itself becomes the structural exhibit. Text is not merely content but the primary architectural material, deployed with the weight and permanence of carved concrete.

**One-liner:** A high-contrast, type-driven design system with aggressive scale and radical spacing.
**Keywords:** high-contrast · typographic · architectural · minimalist
**Analogy:** A brutalist gallery exhibition where text is the sculpture.

## 2. Color

Color is a non-issue; the palette is a strict, binary opposition of pure white and deep black. This creates maximum luminous contrast, forcing all compositional energy into scale and position.

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

**Color principle:** Strict monochrome with maximum contrast.

The principle is stark economy: remove all chromatic noise to let typographic form and negative space speak alone.

## 3. Typography

The typographic voice is uniformly uppercase, industrial, and uncompromising, using bold grotesques like Univers and Founders Grotesk. It employs radical line-heights and tight negative tracking to forge dense, monumental text locks.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 0.75 | 400 | -1.44px | hero headlines, contact info, address |
| body | 15px | 1.2 | 400 | 0.15px | navigation links, footer links |
| caption | 14px | 1.5 | 400 | 0.15px | small labels, legal text |

**Type rules:**
- All typography is uppercase for high-impact statements.
- Tight negative letter-spacing is used to condense large text blocks.
- Radical line-heights create dense, architectural text locks.

## 4. Spacing

Spacing rhythm is deliberately irregular and asymmetric, rejecting even distribution in favor of dramatic, structural gaps.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Irregular and asymmetric, favoring large, dramatic gaps.

## 5. Surfaces

Surfaces are rendered as flat planes with the strictest possible delineation. The only shadow is a faint, single-pixel keyline that mimics a hard, physical edge.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.15) 0px 0px 0px 1px
- **Borders:** Solid black 1px lines used strictly for functional elements like buttons.

## 6. Layout

The layout skeleton is an asymmetrical grid, deliberately unbalanced and anchored by massive typographic masses at opposing corners. This creates a dynamic tension across the page, where alignment itself becomes a primary design gesture.

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

**Skeleton:** A dense, asymmetrical grid with text blocks anchoring opposite corners.

## 7. Motion & Interaction

Motion philosophy is one of near-invisibility, using only subtle fades or instantaneous transitions. The goal is to preserve the static, architectural integrity of the layout without introducing distracting kinetic energy.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 1, 0.5, 1)`
- **Patterns:**
  - subtle fades
  - instant transitions

- **Hover:** Cursor remains a pointer on text links; no visible style changes.
- **Click:** Direct and immediate.
- **Transition:** All transitions are unified and likely fast.
- **Keyboard:** Standard focus behavior.

## 8. Voice & Don'ts

The editorial voice is direct, authoritative, and silent—letting the massive typographic scale deliver impact without rhetorical flourish. Call-to-action elements are small, functional pills that recede into the background.

- **Tone:** Direct, authoritative, and silent.
- **Headline style:** Massive, aggressive, and architectural.
- **CTA style:** Subtle and functional, often presented as a small pill or link.
- **Avoid:** decorative elements / color accents / friendly greetings / complex gradients

### Don'ts
- ❌ don't use color accents — screenshot shows a strictly monochrome palette
- ❌ don't use soft or rounded shapes — screenshot shows sharp, geometric edges
- ❌ don't use decorative serif fonts — screenshot shows bold, industrial grotesques
- ❌ don't center-align large text blocks — screenshot shows radical left, right, and asymmetric alignments
- ❌ don't use generous body padding — screenshot shows tight, dense text locks
- ❌ don't use drop shadows or 3D effects — screenshot shows flat, 2D surfaces

This system deliberately rejects decorative elements, color accents, friendly greetings, and all soft geometries to maintain its severe, monumental purity.

## System Prompt (paste into AI tool)

```
This is a high-contrast, brutalist design system defined by extreme typographic scale and a strict monochrome palette. It utilizes industrial grotesque-sans fonts (Univers, Founders Grotesk) with aggressive negative tracking and dense line-heights to create architectural text locks. The layout is asymmetrical and stark, using a pure white (#FFFFFF) background and deep black (#000000) ink with no color accents. Key features include massive uppercase display text and minimal, functional UI elements. Critical constraints: absolutely no color accents, no soft or rounded geometry, no decorative serifs, no centered large text blocks, no generous spacing between text lines, and no drop shadows or 3D effects.
```