# Fictional Typeface · Design system migration spec

> Source: https://fictional-typeface.com  ·  Curated by OpenDesign  ·  en

> This site stands out as a masterclass in expressive typography-focused design, using comic-book visual language to showcase a typeface while maintaining clear communication through structured chaos.

## 1. Identity DNA

This is a type specimen that refuses to be a quiet PDF. It is a **pop-art comic book page** brought to life, where the architecture of the page is built on intentional collisions, overlaps, and loud, graphic declarations rather than orderly columns.

**One-liner:** A loud, comic-book-inspired type specimen for a quirky geometric typeface.
**Keywords:** comic · playful · quirky · loud · friendly
**Analogy:** A pop-art comic book page brought to life

## 2. Color

The color system is a deliberate rejection of muted palettes. High-chroma red, green, purple, and yellow accents punctuate a soft peach ground, treating color as a graphic element—more like a fill in a comic panel than a subtle UI tool.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFE9CE` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#666666` | secondary text |
| `--muted` | `#9D968E` | placeholder |
| `--accent` | `#FD4B38` | single accent |
| `--line` | `rgba(255,255,255,1.0)` | divider |

**Color principle:** High-chroma pop colors (red, yellow, green, purple) on a soft peach background, creating a playful, chaotic, yet cohesive comic-book aesthetic.

Color here is not decorative; it is structural, defining the personality of every speech bubble and starburst.

## 3. Typography

Typography is the singular voice of this system, voiced exclusively by a custom humanist-sans typeface. Its category choices are rooted in the playful and approachable, eschewing serif formality for the friendly legibility needed to carry bold, often rotated, all-caps headlines.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 201.6px | 1.2 | 400 | 0px | Main title |
| heading | 50.4px | 1.2 | 400 | 0px | Secondary headings |
| body | 21.6px | 1.67 | 400 | 0px | Body text and speech bubbles |

## 4. Spacing

Rhythm is dictated by the comic-book panel: elements scatter, overlap, and collide with deliberate irregularity.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Comic book panels with intentional overlaps and scattered elements

## 5. Surfaces

Surfaces are flat and graphic. Borders are minimal or white, and shadows are absent; the only depth cue is a consistent yellow outer ring that acts as a sticker or panel outline, keeping the aesthetic firmly in the realm of print.

- **Radius:** sm 4px · md 8px · lg 15px · pill 999px
- **Shadows:**
  - 0px 0px 0px 2px rgb(251, 215, 12)
- **Borders:** Minimal or white borders, no dark outlines on shapes

## 6. Layout

The layout skeleton is a scattered, non-linear comic composition. It prioritizes expressive placement and layered storytelling over grid-based alignment, treating each screen as a page to be explored.

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

**Skeleton:** Scattered, non-linear comic panel composition

## 7. Motion & Interaction

Motion is physical and energetic, borrowing from the kinetic language of comic art. Interactions use bouncy, elastic transforms to make elements feel like they are popping, sliding, or bouncing into place with a sense of fun.

- **Durations:** micro 150ms · small 220ms · medium 400ms
- **Easing:** `cubic-bezier(0.34, 1.56, 0.64, 1)`
- **Patterns:**
  - Bouncy scale transforms on hover
  - Energetic comic-book style animations

- **Hover:** Bouncy scale transform (1.1-1.2) with elastic easing
- **Click:** Pressed state with slightly smaller scale
- **Transition:** Transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1)
- **Keyboard:** Standard focus navigation

## 8. Voice & Don'ts

The editorial voice is loud, enthusiastic, and unapologetically playful. It communicates through bold, angled headlines and action-oriented calls to action that mimic the emphasis of a comic-book exclamation.

- **Tone:** Loud, enthusiastic, playful
- **Headline style:** All caps, bold, often rotated at angles
- **CTA style:** Action-oriented with comic-style visual emphasis
- **Avoid:** Corporate / Formal / Subtle / Minimalist

### Don'ts
- ❌ don't use muted palettes — screenshot shows high-chroma pop colors
- ❌ don't align elements to strict grids — screenshot shows intentionally scattered elements
- ❌ don't use subtle shadows — screenshot shows flat color shapes with no drop shadows
- ❌ don't keep text horizontal — screenshot shows multiple rotated text elements
- ❌ don't use serif fonts — screenshot shows humanist sans-serif for everything
- ❌ don't maintain consistent spacing — screenshot shows overlapping elements with varied gaps

It deliberately avoids all corporate, formal, or subtle restraint, treating minimalism not as an option but as a principle to actively contradict.

## System Prompt (paste into AI tool)

```
This is a playful, comic-book-inspired typeface specimen site. The visual language uses scattered, overlapping comic elements (speech bubbles, starbursts, stickers) on a soft peach background (#FFE9CE). Typography is exclusively a custom humanist-sans typeface in black (#000000). High-chroma accent colors include red (#FD4B38), green (#3CCB09), purple (#8A53FF), and yellow (#FFD80C). Elements are intentionally rotated, overlapping, and scattered rather than following strict grids. Interactions use bouncy, elastic transforms. Critical donts: Never use muted or corporate palettes, never align elements to rigid grids, never use subtle shadows or borders, and never present text horizontally without playful rotation.
```