# Allcapstype · Design system migration spec

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

> This site is an excellent example of restrained, premium design where typography and a single bold accent color create a memorable, high-end identity.

## 1. Identity DNA

The system is conceived as a pristine gallery, where typography is the sole exhibit and the interface its architectural frame. Its identity is one of modern, bold curation, focusing entirely on the foundry's type specimens within a clean, high-contrast environment.

**One-liner:** A clean, typography-focused foundry site with a striking neon-magenta signature.
**Keywords:** type · foundry · modern · bold · display
**Analogy:** A pristine gallery where typography is the art.

## 2. Color

The palette is a strict monochrome of pure white and black, engineered for maximum contrast and clarity. A single, high-chroma neon-magenta accent is deployed surgically, reserved for interactive elements and the signature glow of the hero section.

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

**Color principle:** High-contrast monochrome with a single, intense neon-magenta accent.

The guiding principle is restraint: the accent color never overwhelms the core typographic content, maintaining the interface's editorial purity.

## 3. Typography

Typography serves as both the subject and the voice of the system, balancing expressive, display-scale grotesques with refined, tracked-out body copy. The typographic rules enforce a unified, airy feel through controlled weights and generous letter-spacing.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 432px | 1.0 | 500 | 0px | hero branding |
| heading | 32px | 1.1 | 400 | 0px | section titles |
| body | 12px | 1.5 | 400 | 0.15px | navigation and interface text |

**Type rules:**
- Use wide tracking for UI text to maintain a refined, airy feel.
- Keep font weights strictly to 400 and 500 for a unified, modern look.
- Allow display typography to be exceptionally large and expressive.

## 4. Spacing

The rhythm is asymmetric, defined by generous horizontal gaps that let each type specimen breathe within its container.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Asymmetric with generous horizontal gaps.

## 5. Surfaces

Depth is communicated not through shadows, but through deliberate spacing and the stark color contrast of the palette. Borders are absent; separation is achieved purely through layout and chromatic difference.

- **Radius:** sm 3px · md 4px · lg 16px · pill 999px
- **Borders:** None; relies on spacing and color for separation.

## 6. Layout

The layout skeleton begins with a full-width hero section that dominates the viewport with display type and a soft glow. This is followed by a spacious grid dedicated to showcasing type specimens, allowing generous whitespace to frame each exhibit.

- **Container max:** 1440px
- **Paragraph max:** 1200px
- **Grid:** 12 columns, gutter 18px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width hero section followed by a grid of type specimens.

## 7. Motion & Interaction

Motion is minimal and strictly functional, applied only to confirm interactive states. All transitions are smooth and consistent, using opacity and transform shifts to guide the user without distraction.

- **Durations:** micro 100ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth opacity and transform transitions for interactive elements.
  - Subtle scale or color shifts on hover.

- **Hover:** Subtle color shift or opacity change.
- **Click:** Immediate visual feedback.
- **Transition:** All interactive elements use a 0.3s transition.
- **Keyboard:** Focusable elements maintain clear outlines.

## 8. Voice & Don'ts

The editorial voice is professional, refined, and slightly playful, mirroring the foundry's own character. Headlines are bold and display-focused, while calls-to-action are direct and action-oriented, avoiding any casual or cluttered language.

- **Tone:** Professional, refined, and slightly playful.
- **Headline style:** Bold, display-focused, often with a neon glow.
- **CTA style:** Direct and action-oriented (e.g., 'Buy').
- **Avoid:** Avoid overly casual or conversational language. / Avoid cluttering the interface with unnecessary text. / Avoid using multiple competing accent colors.

### Don'ts
- ❌ Don't use a dark background as the primary surface — the screenshot shows a bright white canvas.
- ❌ Don't apply the neon-magenta accent to large text blocks — it is reserved for small interactive elements and the hero glow.
- ❌ Don't use rounded corners on most components — the screenshot shows mostly square or very slightly rounded elements.
- ❌ Don't use drop shadows for depth — the design relies on flat surfaces and color contrast.
- ❌ Don't use small, cramped typography — the design prioritizes large scale and generous whitespace.
- ❌ Don't use complex multi-color gradients — the palette is strictly monochrome plus a single accent.

The system deliberately forgoes multi-color gradients, heavy drop shadows, and decorative corners to preserve its monochrome-plus-accent discipline and typographic focus.

## System Prompt (paste into AI tool)

```
This is a premium typography foundry website with a clean, high-contrast aesthetic. The primary palette consists of a pure white background (#FFFFFF) and solid black text (#000000), with a single, vibrant neon-magenta accent (#FF009E) used sparingly for interactive elements and the hero's glow effect. The typography features a mix of bold, expressive grotesque-sans display fonts and refined, tracked-out body text. The layout is spacious and grid-based, allowing the typography to breathe. Critical constraints: Do not use the neon-magenta for body text; avoid heavy drop shadows; keep corners mostly square; maintain a strictly monochrome-plus-one-accent palette; and ensure generous whitespace between elements.
```