Electric Violet
#8a53ffSection color blocks, circular badge fills, sticker bursts — the cool anchor of the palette
Fictional
fictional-typeface.comWebsite preview
The design language
Fictional is a sticker-bombed tabletop for a display typeface: cream canvas, oversized rounded type, and saturated color blocks behaving like die-cut decals. The page refuses grid discipline — speech bubbles, starbursts, pills, and diagonal tags scatter across the hero at free angles, each carrying a short shout in a vivid solid fill. Cards and sections are full-bleed color fields; type sits directly on them with no shadows, no gradients, no neumorphism. The only depth cue is a 2px solid yellow outline wrapping certain controls, which doubles as the system's entire elevation vocabulary. Layout reads as a collage pinned to corkboard, not a dashboard.
Color palette
brand
Coral Blaze
#fd4b38Starburst stickers, red section blocks, urgent decorative shouts
Sunburst Yellow
#ffd80cSticker fills, section blocks, and the only shadow color in the system (2px solid ring around active controls)
Lime Spark
#3ccb09Round sticker badges and pill tags — the fresh-pop accent in sticker compositions
accent
Deep Indigo
#0500a3Inverted heading text on light cards and accent text inside color blocks — the cool counterweight to Coral Blaze
neutral
Cream Blush
#ffe9cePage canvas, hero background — the warm off-white that everything else sticks to
Paper White
#ffffffSpeech bubble fills, text on saturated color blocks, card reverse
Ink Black
#000000Primary text, hero wordmark, sticker outlines, all display typography
Slate Gray
#666666Secondary body text, link underline, muted helper copy
Near Black
#101010Input text and input border — the UI control ink
Mist Gray
#ddddddDisabled button fill, low-emphasis surface
Pale Gray
#ccccccInactive link border, disabled underline
Typography
Type scale
Perfect Fourth (1.333) · 22px basehero
346px · 400 · 0.9 · 4.15px trackingThe quick brown fox jumps
display-xl
202px · 400 · 0.9 · 2.42px trackingThe quick brown fox jumps
display
115px · 400 · 1 · 1.38px trackingThe quick brown fox jumps
heading-lg
72px · 400 · 1 · 0.86px trackingThe quick brown fox jumps
heading
50px · 400 · 1.1 · 0.6px trackingThe quick brown fox jumps
text-48
48px · 400 · 1.1The quick brown fox jumps
heading-sm
43px · 400 · 1.2 · 0.52px trackingThe quick brown fox jumps
text-40
40px · 400 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Fictional
- Weights
- 300, 400, 600, 700, 800
- Sizes
- 16, 22, 29, 36, 40, 43, 48, 50, 72, 115, 202, 346
- Line height
- 0.90, 1.00, 1.10, 1.20, 1.30, 1.40, 1.67, 1.71, 1.88
- Letter spacing
- 0.0120em across all sizes — uniformly positive tracking, unusually open for a display face
- Fallback
- Quicksand (closest free analogue — rounded geometric with warm terminals) or Fredoka for a chunkier stand-in
- Features
- "ss01" on, "dlig" on — stylistic set 01 and discretionary ligatures shape the personality
The only typeface. Body, display, and UI voice. The five-weight family (Light through UltraBold) maps to a single size-and-voice axis: bigger and bolder is the entire hierarchy. The whisper-light 300 is reserved for captioning the type itself; UltraBold 800 owns the hero wordmark and sticker shouts.
Spacing & shape
Spacing
- Density
- spacious
- Base unit
- 6px
- Section gap
- 60px
- Card padding
- 29px
- Element gap
- 12-29px
Border radius
tags
10pxcards
15pxpills
144pxbuttons
5pxSpacing scale
8px12px24px29px30px32px36px43px49px52px58px60px108pxGuidelines
Do
- Use 5px radius for buttons, 15px for cards, 144px for circular tags — these three radii are the entire shape vocabulary
- Set line-height to 0.90–1.10 for any display size above 72px; the type is designed to lock up tight
- Set type color to Ink Black on Cream Blush and Paper White on every saturated color block — never invert within a block
- Rotate stickers between -15° and 15°; energy comes from the angle, not from varied colors within one composition
- Use the 2px solid Sunburst Yellow ring as the only elevation cue on buttons and selected stickers
- Keep section rhythm as alternating full-bleed color blocks (violet → yellow → red) rather than white/gray bands
- Activate 'ss01' and 'dlig' font features on every Fictional text node — the ligatures and alternate forms carry the personality
Don’t
- Don't use drop shadows, blur, or opacity layering — the system has exactly one shadow, and it's a solid 2px ring
- Don't set body line-height above 1.40; the face tightens as it grows and reading copy stays compact
- Don't introduce muted or desaturated tints of the brand colors — all five are used at full saturation
- Don't use Light weight (300) for any display size above 72px; the whisper weights live at 16–29px captions only
- Don't separate stickers with gray dividers or whitespace gutters — let them overlap and stack
- Don't use gray fill buttons; buttons sit inside color blocks and use the yellow ring as their accent
- Don't exceed four sticker colors in a single composition — the page is a collage, not a kaleidoscope
Components
Hero Wordmark
The product name set as the page's first impressionFictional set at 202–346px, weight 800 (UltraBold), Ink Black on Cream Blush, line-height 0.90, letter-spacing 4.15px. Sits on the cream canvas with sticker overlays scattered around it. No headline above it — the wordmark IS the headline.
Starburst Sticker
Decorative shout overlay floating over the hero and section blocks12-point or 16-point jagged star shape, solid Coral Blaze or Sunburst Yellow fill, white or Ink Black text at 22–29px weight 700, rotated -8° to 12°. No border, no shadow. Carries single shout words like 'KABOOOM' or 'BANG'.
Speech Bubble Tag
Conversational annotation pinned to the wordmark or specimenPaper White fill, 15px radius, Ink Black text at 29–36px weight 400, with a small triangular tail pointing toward its referent. Sits at slight rotation. 29px vertical padding, 43px horizontal padding.
Circular Badge Sticker
Round tag for compact shouts like 'NEW!' or 'OUT NOW'144px border-radius (full circle), Electric Violet or Lime Spark fill, Paper White text at 16–22px weight 700, centered both axes. Reads as a physical button badge.
Diagonal Sticker Label
Rectangular angled tag for longer shout lines like 'FREE TRIAL AVAILABLE'Solid Coral Blaze fill, Ink Black text at 22px weight 700, 5px radius, rotated -12° to -20°, no border. 8px vertical padding, 29px horizontal padding. Layered above other stickers.
Weight Specimen Card
Large color-block card listing the type family's weightsElectric Violet background, 15px radius, 60px vertical padding, 43px horizontal padding. Weight names stacked vertically (Light through UltraBold) in Paper White at 36–43px weight 400. Used to present the family at a glance.
Specimen Description Card
Companion card to the weight list, holding the brand pitchSunburst Yellow background, 15px radius, 58px vertical padding, 43px horizontal padding. Ink Black body text at 29px weight 400, line-height 1.40. A short horizontal Ink Black rule with a centered dot divider sits below the text.
Character Set Display
Full-width red panel showing the typeface's glyph coverageCoral Blaze full-bleed block, 15px radius on the visible specimen rectangle. Inset outlined tile in Sunburst Yellow 2px border marks the first glyph. A 144px-radius large 'A' sits in the bottom-right as a watermark.
Action Button (Yellow Ring)
The only interactive control in the systemPaper White fill, 5px radius, Sunburst Yellow 2px solid ring (the entire elevation system), Ink Black text at 16–22px weight 700, 8px vertical padding, 24px horizontal padding. On hover, the fill flips to Ink Black and text flips to Paper White.
Inline Link
Text link with a visible underline ruleInk Black or Slate Gray text at 29px weight 400 with a 1px Slate Gray or Pale Gray bottom border. No underline-offset trickery — the border IS the underline, sitting directly under the baseline.
Text Input
Form field for any capture contextPaper White fill, 1px Near Black border, 5px radius, Near Black text at 16px weight 400, 8px vertical padding, 12px horizontal padding. No focus ring color is added — the existing border thickens to 2px on focus.
Scroll Prompt Sticker
Directional cue floating in the lower heroElectric Violet circle (144px radius), Paper White text at 22px weight 400 reading 'scroll down ↓', centered. Floats free, no shadow.
Section Color Block
Full-width panel that flips the page temperatureFull-bleed background in Electric Violet, Coral Blaze, or Sunburst Yellow, 60–80px vertical padding, 43–58px horizontal padding for inner content. Always paired with a contrasting block (the page rhythm is color-flipped sections, not white/gray alternation).
Surfaces & elevation
Level 1
Cream Blush Canvas
#ffe9ceDefault page and hero background — the tabletop everything sticks to
Level 2
Color Block Section
#8a53ffFull-bleed violet sections that flip the canvas temperature and act as a secondary background
Level 3
Sticker Fill
#fd4b38Decorative overlays and reverse sections carrying urgency
Level 4
Paper White Reverse
#ffffffSpeech bubbles, specimen cards, and reverse type plates that need a neutral within a colored section
No drop shadows. The only depth in the system is a 2px solid Sunburst Yellow outline (rgb(251, 215, 12) 0px 0px 0px 2px) that wraps active controls and select stickers — a hard ring, not a soft glow. Depth is created by layering, rotation, and color contrast, never by blur.
Active Button / Sticker Ring
rgb(251, 215, 12) 0px 0px 0px 2px
Layout & imagery
Layout
Full-bleed, no max-width container. The page is a vertical stack of color-block sections, each filling the viewport edge to edge: cream hero on top, then alternating violet / yellow / red / cream blocks down the page. Within each block, content is padded generously (43–58px horizontal) but elements are not constrained to a column grid — the hero is a free composition with the wordmark center-anchored and stickers scattered at angles around it. Cards inside color blocks sit as inset rectangles, not as floating tiles. Navigation is minimal: a small diagonal 'GET IT HERE' sticker in the upper-left corner of the hero replaces a traditional nav bar. Section transitions are hard color flips, not fades or gradients. The overall rhythm is a pinboard — pieces overlap, rotate, and crowd each other — not a magazine grid.
Imagery
No photography, no product screenshots, no rendered type specimens in raster form. The visual language is entirely typographic and graphic: Fictional set huge, paired with flat geometric shapes (starbursts, circles, pills, rounded rectangles) in five vivid solid fills. Icons are absent — text inside the geometric shapes functions as the only iconography. Every visual element is vector, flat-color, and rotated. The closest thing to a photograph is the cream canvas itself, which reads as a tabletop surface rather than a digital background.
Design notes
Agent Guide
Quick Color Reference • page canvas: #ffe9ce • text on canvas: #000000 • text on color blocks: #ffffff or #0500a3 • card / section blocks: #8a53ff, #fd4b38, #ffd80c, #3ccb09 • border / input rule: #101010 • accent ring: #ffd80c (2px solid) • primary action: no distinct CTA color Example Component Prompts 1. Hero wordmark: cream #ffe9ce full-bleed background. The word 'Fictional' set at 346px, Fictional weight 800, line-height 0.90, letter-spacing 4.15px, color #000000, centered. Scatter three stickers around it: a Coral Blaze 16-point starburst at 72px saying 'KABOOOM' in white 22px weight 700 rotated -8°; a Paper White speech bubble (15px radius) with Ink Black 29px weight 400 reading 'A friendly & quirky typeface' rotated 4°; an Electric Violet circle (144px radius) reading 'OUT NOW' in white 22px weight 700. 2. Weight specimen card: Electric Violet #8a53ff full card, 15px radius, 60px vertical and 43px horizontal padding. Stack five lines of weight names in Paper White at 43px weight 400, line-height 1.20: Fictional Light, Fictional Regular, Fictional SemiBold, Fictional Bold, Fictional UltraBold. 3. Specimen description card: Sunburst Yellow #ffd80c background, 15px radius, 58px vertical and 43px horizontal padding. Ink Black body text at 29px weight 400, line-height 1.40, reading 'Fictional is a friendly, playful typeface, full of warmth and personality. Perfect for cheerful branding, packaging, game interfaces, and children's books.' A 1px Ink Black horizontal rule with a centered filled dot sits 24px below the text. 4. Action button: Paper White #ffffff fill, 5px radius, 2px solid Sunburst Yellow #ffd80c ring, Ink Black text at 16px weight 700, 8px vertical and 24px horizontal padding. The 2px ring is the only shadow in the entire system. 5. Section color block transition: full-bleed Coral Blaze #fd4b38 section, 72px vertical padding, containing a single Cream Blush #ffe9ce speech bubble (15px radius) with Ink Black 36px weight 400 text 'with a cartoonesque character', rotated -3°. Below it, a Lime Spark #3ccb09 circular badge (144px radius) reading 'scroll down ↓' in white 22px weight 400.
Similar brands
Pangram Pangram
Type foundry showcase using full-bleed color blocks, oversized specimen type, and scattered decorative shapes with rotated angles
Grilli Type
Friendly geometric typefaces presented on warm cream canvases with confident, sticker-like layout decisions and minimal nav
Ohno Type
Quirky display families marketed through playful, collage-style hero compositions with bursts and pill labels
Dinamo (Font of the Month)
Bold specimen pages that treat the typeface as a poster — full-bleed color fields, no shadows, type doing the visual work
Future Fonts
Foundry marketplace aesthetic with vivid block colors, rounded type, and informal sticker-annotation overlays
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
