← OpenDesign CURATED · OPEN · FREE
Config Figma
A bold, experimental conference event site featuring playful abstract art and high-contrast dark mode.
Event Bold Typography Experimental Dark Mode App UI
01
Identity DNA
Config Figma Event 404 Experimental Playful Bold
A playful, experimental design conference site using bold typography and high-contrast abstract art.
02
Color
#E2E2E2Ink
#000000BG
rgba(255, 255, 255, 0.24)Line
High-contrast dark mode foundation with vibrant, saturated graphic accents.
03
Typography
grotesque-sans · monospace
display 80px · 400h1 32px · 400Text is generally uppercase in navigation and UI elements. · Heavy negative letter-spacing is applied to larger text sizes.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent use of a 4px base unit for padding and gaps.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
1px solid rgba(255, 255, 255, 0.24) for interactive borders.
06
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Left-aligned textual content paired with right-aligned abstract graphic compositions.
07
Motion & Interaction
150ms micro
500ms small
800ms medium
cubic-bezier(0.6, 0, 0.4, 1) easing
Smooth 150ms transitions for standard color and background changes. · Longer 500ms transform transitions for complex elements.
Color changes via standard CSS transitions. · Standard pointer interaction.
08
Components
button Uppercase text links with 1px borders, or solid inverted buttons. card Overlapping abstract graphic blocks used as decorative elements. chip Text-based navigation links with uppercase styling. input Minimal, flat text inputs (not heavily featured). hero Split layout with large typographic error message on the left and stacked abstract art on the right. 09
Voice & Don'ts
Tone Direct, clear, and unpretentious. Headlines Large, uppercase, or heavily weighted sans-serif statements. CTAs Uppercase text links, often bordered. Don't use soft, muted palettes — screenshot shows a high-contrast black background with vibrant cyan, green, orange, and yellow graphics. Don't use serif or decorative fonts — screenshot shows a clean, geometric grotesque-sans typography. Don't use soft drop shadows — screenshot shows flat, overlapping graphic elements without depth effects. Don't use lowercase for navigation — screenshot shows all uppercase text for menu items like AGENDA and SPEAKERS. Don't center all content — screenshot shows a left-aligned text layout paired with right-aligned graphics. Don't use complex, multi-step forms — screenshot shows minimal, direct text links and buttons. Avoid: Fluffy marketing copy Avoid: Overly complex sentence structures Avoid: Serif typography 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
This is a bold, experimental event website for Figma's Config conference. It features a stark black background (#000000) with clean white or light gray text (#E2E2E2). The typography is a geometric grotesque-sans, used at very large scales with tight tracking and often uppercase. The design language is defined by high-contrast, flat, abstract graphic compositions in vibrant cyan, green, orange, and yellow. Critical constraints: avoid serif fonts, avoid soft muted palettes, and avoid complex drop shadows. Keep interactions smooth with 150ms transitions.
More from the library en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: Worth including for its strong, confident use of experimental graphic design paired with a highly functional, accessible dark mode UI.
