Pitch Black
#000000Primary text, filled pill buttons, full-bleed dark section backgrounds, icon strokes, hairline borders — the structural backbone of every page
DICE
dice.fmWebsite preview
The design language
DICE runs on a strictly monochromatic, high-contrast visual system that reads like a concert poster forced into an app store. Pure black and white carry the entire interface; color exists only inside the artwork of event posters and one neon-green confirmation screen. A custom condensed display face (Foggy) shouts at 100px+ in the hero, while Favorit handles every UI surface with a slightly loosened 0.06em tracking that makes even body copy feel editorial. Buttons are 40px-radius pills, images sit in soft 8px-rounded frames, and sections alternate between white canvas and full-bleed black bands to create a zine-like rhythm. The overall attitude is punk, confident, and typographically loud — restraint everywhere except the headlines.
Color palette
neutral
Paper White
#ffffffPage canvas, card surfaces, text on dark sections, button text on filled black buttons, search field fill
Ash Gray
#eeeeeeSoft image backgrounds, secondary surface tint, subtle card/poster fill behind event artwork
Concrete
#d9d9d9Hairline dividers, muted borders, input field outlines
Charcoal
#333333Secondary button fills, elevated dark surfaces, muted-on-dark text in nested components
Slate
#595959Muted body text, secondary navigation labels, supporting metadata
Stone
#808080Tertiary body text, disabled states, low-priority metadata
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
106px · 400 · 0.83 · 0px trackingThe quick brown fox jumps
heading
28px · 400 · 1.22 · 1.68px trackingThe quick brown fox jumps
heading-sm
24px · 350 · 1.25 · 1.44px trackingThe quick brown fox jumps
subheading
18px · 350 · 1.4 · 1.08px trackingThe quick brown fox jumps
body
16px · 400 · 1.4 · 0.96px trackingThe quick brown fox jumps
body-sm
14px · 400 · 1.33 · 0.84px trackingThe quick brown fox jumps
caption
12px · 700 · 1.21 · 0.72px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Favorit
- Weights
- 350, 400, 700
- Sizes
- 12, 14, 16, 18, 24, 28px
- Line height
- 1.15–1.50 (size-dependent)
- Letter spacing
- 0.06em (universal across all sizes — ~0.72px at 12px, ~1.68px at 28px)
- Fallback
- Inter, Söhne, or Neue Haas Grotesk
- Features
- "ss02" on, "ss03" on, "ss05" on, "ss06" on, "ss08" on
All UI text — navigation, body copy, buttons, labels, card metadata. Weight 400 is the default; 700 is used for section headings like 'Trending in Barcelona'; 350 is reserved for quiet helper text. The 0.06em tracking gives every line a slightly looser, editorial feel — body copy never feels cramped. Stylistic sets ss02/ss03/ss05/ss06/ss08 are always on and define the character of the typeface.
Additional typeface
Foggy
- Weights
- 400
- Sizes
- 106px
- Line height
- 0.83
- Letter spacing
- normal
- Fallback
- Druk Condensed, Tungsten Bold Condensed, or Antonio Bold
- Features
- "ss02" on, "ss03" on, "ss05" on, "ss06" on, "ss08" on
Hero display headlines only. The extreme condensed proportions, ultra-tight 0.83 line-height, and 106px size let 3–4 stacked words fill a half-screen. This is the signature element — it transforms standard product copy ('WELCOME TO THE ALTERNATIVE') into a gig poster.
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 16px
- Element gap
- 8px
Border radius
tags
100pxcards
8pxsmall
4pximages
8pxbuttons
40pxnavElements
20pxSpacing scale
1px2px4px8px10px12px16px17px20px22px23px24px25px30px32px40px42px48px50px60px80px87px120px124px150px213px296pxGuidelines
Do
- Use 40px border-radius on every button — the pill shape is the system, not a suggestion
- Set 0.06em letter-spacing on all Favorit text and always enable ss02/ss03/ss05/ss06/ss08
- Stack hero headlines in Foggy 106px/0.83 line-height to fill the vertical space — never let the display face sit on a single line
- Alternate full-bleed black sections with white sections to create a zine-like vertical rhythm; minimum 80px vertical padding inside each
- Lock the palette to black, white, and three grays (#eeeeee, #d9d9d9, #333333) — no chromatic accents in UI chrome
- Round event poster images and card media at 8px — softer than buttons, distinct from the pill system
- Use 24px as the base section padding and 8px for inline element gaps
Don’t
- Don't introduce any color into the UI chrome — if you need a status color, confine it to a confirmation screen or illustration artwork, never to a button, border, or text token
- Don't set buttons to sharp or lightly-rounded corners — 40px is mandatory
- Don't use Foggy for body copy or anything under 80px — it only works at display scale
- Don't use weight 500 or 600 with Favorit — the system only uses 350, 400, and 700
- Don't add drop shadows to cards or buttons — the design uses flat surfaces and solid color contrast, not elevation
- Don't use letter-spacing other than 0.06em on Favorit — the open tracking is a brand signal, not an accident
- Don't use decorative gradients — the system is strictly flat; the only color treatment is solid fills and the single green confirmation screen
Components
Filled Pill Button
Primary action — 'GET THE APP', 'VIEW TICKET'40px border-radius, Pitch Black (#000000) fill, Paper White (#ffffff) text, Favorit weight 700, 12px font-size, 22px horizontal padding / 12px vertical padding, all-caps, 0.06em tracking. The full pill shape is non-negotiable — no square or lightly-rounded variants exist.
Outlined Pill Button
Secondary navigation action — 'BROWSE EVENTS'40px border-radius, transparent fill, 1px Pitch Black (#000000) border, Pitch Black text, Favorit weight 700, 12px, 22px/12px padding. Appears on white backgrounds only. Inverts to white border + white text on black sections.
Search Field
Global event/venue/city search in navRounded rectangle (radius ~20px), Paper White fill, 1px border matching surrounding surface, search icon on left in Pitch Black. Placeholder 'Search by event, venue or city' in Stone (#808080), Favorit 14px. Sits inline with the primary nav.
Event Card
Trending/recommended event tileVertical card, 8px radius on poster image, no border, no shadow. Poster image fills the card; below sits event title (Favorit 16px weight 700), date (Favorit 14px Slate #595959), venue (Favorit 14px weight 700), and price (Favorit 14px). No padding inside the card — type sits flush against the poster edge with ~8px margin.
Hero Section
Above-the-fold brand statementTwo-column: left holds Foggy 106px/0.83 hero headline (3–4 stacked lines), sub-paragraph at Favorit 18px in Charcoal, and a filled pill CTA. Right holds a phone mockup with a confirmation screen (neon-green fill — the only color moment). White background, max-width 1200px centered, ~80px vertical padding.
Phone Mockup Frame
Product/app preview containerPitch Black (#000000) rounded rectangle (40px radius) acting as a stylized phone frame. Screen content sits inside with a small notch. Used to showcase app UI within hero/feature sections.
Dark Feature Band
Full-bleed alternating sectionPitch Black (#000000) full-width background, 80px+ vertical padding. White line-art mascot illustrations (chunky, cartoon, single-stroke) float above three centered white text columns (Favorit 16px, max-width ~280px each). Centered white section title at Favorit 28px weight 700 above.
Section Heading Block
Section openers like "Trending in Barcelona"Favorit 16px weight 700 in Pitch Black for the title, followed by a 1–2 line description in Favorit 16px weight 400 in Charcoal (#333333). Sits left-aligned in a max-width container, with a BROWSE EVENTS outlined pill anchored right.
Horizontal Event Carousel Row
Trending/featured event scrolling listRow of Event Cards on a white background, 8–16px gap between cards, horizontal overflow scroll. Cards bleed to the page edge with internal max-width padding to keep the row visually continuous.
What Else List
Secondary feature list with iconsLeft-aligned list of 3 items; each item is a small outlined icon (~24px) followed by Favorit 18px weight 400 text. One item is active (Pitch Black text + icon), the other two are dimmed (Stone #808080) to indicate future/secondary features.
Ticket Detail Card
In-app ticket preview within phone mockupPhone screen with neon-green (#7ffeb1-ish) background, small illustrated event icon, Favorit 18px weight 700 event info, artist/title block, and a centered filled black 'VIEW TICKET' pill. This green is the only color in the entire system and is confined to confirmation/success states.
Navigation Bar
Primary site navigationTop row: DICE mascot logo (left), Search Field (center-left), nav links (Browse events, Get help, Work with us, Log in / Sign up) in Favorit 14px, then filled black 'GET THE APP' pill on the far right. 1px bottom border in Concrete (#d9d9d9). Padding 24px vertical.
Mascot Illustrations
Brand character artwork on dark sectionsCustom hand-drawn DICE mascot in white single-stroke line art, variations show the character holding different objects (drinks, sparklers, etc.). ~200px square, no fill, consistent stroke weight, floats above each feature column.
Surfaces & elevation
Level 0
Paper White
#ffffffBase page canvas — all white sections, card surfaces, navigation background
Level 1
Ash Gray
#eeeeeeSoft fill behind poster images and subtle surface tinting
Level 2
Charcoal
#333333Secondary button fills and elevated dark surfaces
Level 3
Pitch Black
#000000Full-bleed dark section bands and primary filled buttons
The design intentionally avoids drop shadows entirely. All depth and hierarchy are achieved through color contrast (black on white), surface alternation (white sections vs full-bleed black bands), and typographic scale. Adding shadows would break the flat poster/zine aesthetic.
Event Card
none — flat, no shadow, separation achieved through white space on white background
Filled Pill Button
none — flat black fill against white
Phone Mockup
none — black frame on white, no cast shadow
Layout & imagery
Imagery
Event poster artwork is the primary visual content — each event card features a unique designed poster (concert flyers, album covers, festival graphics) in a wide variety of colors and treatments. Outside of posters, the only consistent illustration is the DICE mascot: a hand-drawn cartoon character in white single-stroke line art, appearing on dark sections holding props (drinks, sparklers, phones). Product imagery uses phone mockup frames (black rectangles with rounded corners) to preview the app. No photography, no abstract 3D, no decorative gradients.
Design notes
Agent Guide
**Quick Color Reference** - Text: #000000 - Background: #ffffff - Border: #d9d9d9 - Muted text: #595959 - Dark band background: #000000 - primary action: #000000 (filled action) **Example Component Prompts** 1. Build a filled black pill button: 40px radius, #000000 fill, #ffffff text, Favorit 12px weight 700, 0.06em tracking, 12px/22px padding, all-caps label like 'GET THE APP'. 2. Create a Primary Action Button: #000000 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 3. Build a dark feature band: #000000 full-bleed background, 80px vertical padding, centered Favorit 28px weight 700 white heading 'Weirdly easy ticketing', then a 3-column grid below with a white line-art mascot icon (~200px), a Favorit 16px white caption under each, equally spaced. 4. Build an event card row: horizontal flex with 16px gap, each card has an 8px-radius poster image (aspect 1:1), followed by a Favorit 16px weight 700 event title in #000000, then a Favorit 14px weight 400 date line in #595959, then venue (700) and price in #000000. 5. Build a section header: left-aligned Favorit 16px weight 700 title 'Trending in Barcelona' in #000000, a 1–2 line Favorit 16px weight 400 description in #333333 below it, and a 40px-radius outlined pill button 'BROWSE EVENTS' anchored to the right.
Typography Signature
The system runs on two custom faces with overlapping stylistic sets (ss02, ss03, ss05, ss06, ss08). Favorit handles everything below the hero with an unusually open 0.06em tracking — this slight looseness is what makes the UI feel editorial rather than generic SaaS. Foggy appears ONLY in the hero at 106px with 0.83 line-height; it's the loudest design choice in the system and must not be used elsewhere.
Similar brands
Bandsintown
Same concert-discovery focus with poster-driven event cards, though Bandsintown adds more color to its UI chrome
Resident Advisor (RA)
Editorial-leaning event platform with bold display type and high-contrast layouts, though RA uses red accents and a different type system
Songkick
Live music ticketing with similar card grids and ticket preview patterns, though Songkick leans warmer with purple/blue accents
Eventbrite
Ticketing scale and event card patterns, but Eventbrite's design is far more generic SaaS compared to DICE's zine-like typographic confidence
Pioneer Works / cultural institution sites
Same punk-zine aesthetic with massive condensed display type, full-bleed black bands, and strict monochrome palettes
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
