← All UI styles
Comic Panel
Panels with heavy ink borders and halftone dots doing the shading.
HalftoneexpressiveEntertainment productsStory and reading appsCampaign microsites
Construction · Halftone
Every tone is a dot screen coarse enough to count, printed inside a heavy ink outline. No smooth fills anywhere.
Every style renders this same screen, so the only thing changing between two of them is the style. The component above is the file below, running.
Prompt
Design this interface in the Comic Panel style. Heavy ink borders around every panel, halftone dot texture instead of gradients, and display type set like a caption box. Shading is dots, never blur. Build every surface
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- heavy ink panel borders
- halftone dot shading
- caption box type
- no gradients
What this style refuses
- soft gradients
- thin borders
- muted palettes
- rounded corners
The refusals are the half that keeps generated interfaces from converging — a prompt that only says what to add gets the default look.
Tokens
Palette
RoleLightDark
Background
#fdf6e3#131313Surface
#fffdf7#1c1b19Border
#141414#f2efe6Text
#141414#f7f3e8Muted text
#4c4c4c#a29d92Accent
#d62828#ff5b5bOn accent
#fffdf7#1a0303Shape and type
Radius0 / 2 / 4 px
Border3px solid
Shadowhard-offset
DisplayImpact
BodyHelvetica Neue
MonoCourier New
Type scale11 · 13 · 15 · 18 · 24 · 36 px
Weights500 / 800 / 900
Line height1.35
Tracking0em
Spacing4px grid · regular
Surfacegrain
Accentblock
Separatorhairline
Labelsuppercase
Blurnone
Measured contrast — body 17.08:1 light, 16.76:1 dark; secondary text 7.96:1 and 6.88:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Comic Panel
*
* Panels with heavy ink borders and halftone dots doing the shading.
*
* One complete product screen, rendered from the token object below —