CURATED · OPEN · FREE

Fictional Typeface

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

TypographyExpressivePlayfulCuration
Fictional Typeface screenshot
↓ Download design system (3 MB)Open in OpenDesign

Visit: https://fictional-typeface.com

📦 Browse pack contents →

01

Identity DNA

comicplayfulquirkyloudfriendly

A pop-art comic book page brought to life

02

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.

03

Typography

humanist-sans

04

Spacing

4px
8px
16px
24px
32px
48px
64px
96px

Comic book panels with intentional overlaps and scattered elements

05

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)

06

Layout

1280container
1columns
24pxgutter
768 / 1024breakpoints

Scattered, non-linear comic panel composition

07

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

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

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