Overview
Build a system that feels like joyful printed ephemera brought online. A poster-like event system built from cream paper, chunky bubble display, outlined stickers, and candy-bright ticket controls.
FlowFest
The No.1 Fest for Web Designers & Devs. Friday 8th August, Manchester, UK. Get Your Ticket for Community-Led Event of the Year.
4.0
8
Visits
Categories
Sections
Available Pages
Version History
Workflow Collections
Design Analysis
FlowFest Home design analysis
Build a system that feels like joyful printed ephemera brought online. A poster-like event system built from cream paper, chunky bubble display, outlined stickers, and candy-bright ticket controls.
Image Direction
Use framed speaker portraits, sticker labels, playful stripe graphics, and big cream-paper fields. The site should feel like a festival poster that happens to scroll.
Colors
Cream is the paper substrate. Pink, orange, yellow, and coral can get loud, but they need black outlines and black type anchors to stay legible and intentional.
Typography
Let the display typography go bubbly and retro, but keep body copy straightforward. This system should feel fun, not illegible.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Poster Camp Carnival
A poster-like event system built from cream paper, chunky bubble display, outlined stickers, and candy-bright ticket controls.
playful, hand-made, and high-contrast
Primary mode: lightevent microsite marketingposter-event
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
playful, hand-made, and high-contrast
Density
5
Variance
5
Motion
3
Signals
cream paper background · bubble display type · pink ticket pills · orange slab labels
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Ticket Pink
#F88AB2
Poster Orange
#FF9F1C
Sun Yellow
#FFC300
Cream Paper
#F8EFC8
Poster Black
#151515
Card White
#FFFDF7
Hot Coral
#FF6F3C
Usage rules
The page should feel like printed festival ephemera layered onto cream paper.
Every bright color needs a black outline or a dark anchor nearby.
Pink belongs to tickets and playful buttons; orange and yellow can own slabs and stripes.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
6px
sm
8px
md
16px
lg
24px
section
88px
Token Radii
Corner radii tokens with a live surface sample.
sm
12px
md
18px
lg
32px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Arial Rounded MT Bold
chunky retro bubble headline voice
Body
Inter
plain event support voice
Mono
IBM Plex Mono
tiny schedule and annotation voice
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
4.3rem/—
Display
H2
2.35rem/—
H2
Body
1rem/—
Body
Caption
0.75rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Display type should feel bubbly and hand-cut, but body copy stays readable and grounded. · Use all-caps or sticker labels selectively to avoid exhausting the page. · Support text should remain simple so the poster treatment can stay playful.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
180ms-260ms
Easing
cubic-bezier(.24,.82,.2,1)
Spring
stiffness 90, damping 17
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 180ms-260ms |
easing | cubic-bezier(.24,.82,.2,1) |
spring | stiffness 90, damping 17 |
Layout Principles
Treat the page like a sequence of poster chapters with strong dark resets between cream sections.
Use stickers, slabs, and framed speaker panels to keep the energy moving.
Let major ticketing moments recur without making the full page feel repetitive.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#F88AB2
Text
#151515
Border
1px solid #151515
Radius
999px
Padding
10px 18px
Min height
42px
Shadow
2px 3px 0 rgba(21,21,21,0.18)
Typography
body
Buttons secondary
Base Attributes
Background
#FFFDF7
Text
#151515
Border
1px solid #151515
Radius
999px
Padding
10px 18px
Min height
42px
Shadow
2px 3px 0 rgba(21,21,21,0.12)
Typography
body
Cards poster
Feature Card
Component preview content
Base Attributes
Background
#FFFDF7
Text
#151515
Border
1px solid #151515
Radius
32px
Padding
24px
Shadow
0 10px 0 rgba(21,21,21,0.12)
Cards reset band
Feature Card
Component preview content
Base Attributes
Background
#151515
Text
#FFFDF7
Border
1px solid #151515
Radius
0px
Padding
24px
Shadow
none
Navigation sticker
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#151515
Active text
#151515
Item padding
0px
Item radius
0px
Badges slab
Base Attributes
Background
#FF9F1C
Text
#151515
Border
1px solid #151515
Radius
8px
Padding
8px 14px
Shadow
2px 3px 0 rgba(21,21,21,0.14)
Inputs field
Base Attributes
Background
#FFFDF7
Text
#151515
Border
1px solid #151515
Radius
8px
Padding
12px 16px
Min height
42px
Placeholder
rgba(21,21,21,0.42)
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
load-bearing
Media types
- -poster card
- -event photography
- -sticker slab
Subject patterns
- -festival portrait cards, outlined speaker frames, sticker labels, and playful stripe graphics
Composition logic
- -Use a mix of framed portrait panels and large typographic stickers.
- -Let dark reset sections sharpen the rhythm between cream chapters.
Treatment rules
- -Keep black outlines visible on bright surfaces.
- -Preserve cream paper as the underlying substrate.
Generation cues
- -cream poster page, pink ticket pill, bubble display text, orange sticker slab
Avoid
- -No minimal monochrome flattening.
- -No low-contrast pastel-on-cream labels.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not swap the poster outlines for soft shadow-only cards.
- -Do not make the ticket buttons rectangular and corporate.
- -Do not use weak gray text on cream paper.