CURATED · OPEN · FREE

Fictional Typeface

A loud, comic-book-inspired type specimen for a quirky geometric typeface.

TypographyExpressivePlayfulCuration

↓ Download design system (3 MB)Open in OpenDesign

Visit: https://fictional-typeface.com

📦 Browse pack contents →

Identity DNA

comicplayfulquirkyloudfriendly

A pop-art comic book page brought to life

Color

#FD4B38Accent

#000000Ink

#666666Ink soft

#FFE9CEBG

#FFFFFFBG soft

#9D968EMuted

rgba(255,255,255,1.0)Line

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

Typography

humanist-sans

display201px · 400
heading50px · 400
body21px · 400

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Comic book panels with intentional overlaps and scattered elements

Surfaces

sm · 4px

md · 8px

lg · 15px

pill · 999px

Minimal or white borders, no dark outlines on shapes

0px 0px 0px 2px rgb(251, 215, 12)

Layout

1280container

1columns

24pxgutter

768 / 1024breakpoints

Scattered, non-linear comic panel composition

Motion & Interaction

150msmicro

220mssmall

400msmedium

cubic-bezier(0.34, 1.56, 0.64, 1)easing

Bouncy scale transforms on hover · Energetic comic-book style animations

Bouncy scale transform (1.1-1.2) with elastic easing · Pressed state with slightly smaller scale

Components

button Rounded pill buttons with bold background colors, often rotated
card Comic book speech bubbles and starburst shapes
chip Rotated labels with solid color backgrounds
hero Large chaotic arrangement of overlapping comic elements

Voice & Don'ts

Tone Loud, enthusiastic, playful
Headlines All caps, bold, often rotated at angles
CTAs Action-oriented with comic-style visual emphasis

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
Avoid: Corporate
Avoid: Formal
Avoid: Subtle
Avoid: Minimalist

Inside the pack — real screenshots

Fictional Typeface — 桌面首屏（hero） — 桌面首屏（hero）

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

Captured from the live site · real computed styles

System prompt

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.

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