Overview
Build a system that feels rare, dramatic, and invitation-only. A noir event microsite built from black stage space, luminous cobalt ticket pills, giant serif statements, and tiny all-caps metadata.
Reflection
Join us at Department Leeds Dock for 'Reflection,' the second in-person Anyone Creative Meetup! After a long hiatus, we're back with an evening of inspirational talks, creative collaboration, and forward-thinking conversations.
3.0
6
Visits
Sections
Available Pages
Version History
Workflow Collections
Design Analysis
Reflection Home design analysis
Build a system that feels rare, dramatic, and invitation-only. A noir event microsite built from black stage space, luminous cobalt ticket pills, giant serif statements, and tiny all-caps metadata.
Image Direction
Use black stage space, luminous orb forms, and tiny event ephemera. The hero should feel like a fashion invitation more than a busy conference landing page.
Colors
Cobalt is the event signal. Most of the page should stay black, white, and silver-gray so the ticket action and sculptural blue elements feel electric.
Typography
Use giant serif display type for the headline system, then counter it with tiny monospaced event metadata. Support text should remain sparse.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Electric Noir Salon
A noir event microsite built from black stage space, luminous cobalt ticket pills, giant serif statements, and tiny all-caps metadata.
moody, elegant, and electric
Primary mode: darkevent microsite designimmersive-event
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
moody, elegant, and electric
Density
2
Variance
4
Motion
3
Signals
black field · large serif statement · cobalt ticket pill · micro all-caps schedule text
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Electric Cobalt
#3158FF
Noir Black
#060606
Serif White
#F4F4F0
Line Gray
#9A9A9A
Shell White
#FFFFFF
Orb Blue
#4A52FF
Muted Charcoal
#171717
Usage rules
Keep most of the page black and quiet so the serif headline and ticket pill feel heightened.
Cobalt should behave like a luminous event signal, not a general-purpose text color.
Metadata can go small and pale, but never so faint that timing and location become unreadable.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
6px
sm
8px
md
16px
lg
24px
section
128px
Token Radii
Corner radii tokens with a live surface sample.
sm
999px
md
999px
lg
24px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Cormorant Garamond
giant salon display voice
Body
Inter
micro-event support voice
Mono
IBM Plex Mono
all-caps metadata voice
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
6rem/—
Display
H2
2.6rem/—
H2
Body
1rem/—
Body
Caption
0.75rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Let the serif hero feel almost oversized enough to break the frame. · Use tiny monospaced labels and all-caps metadata to sharpen the event-system feel. · Keep support copy minimal and secondary to the atmospheric stage.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
220ms-320ms
Easing
cubic-bezier(.24,.78,.22,1)
Spring
stiffness 86, damping 18
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 220ms-320ms |
easing | cubic-bezier(.24,.78,.22,1) |
spring | stiffness 86, damping 18 |
Layout Principles
Lead with the black stage, giant serif wordmark, and a single luminous ticket action.
Use extreme negative space to make the event feel rare and self-possessed.
Bring in white sections only as sharp contrast chapters, not as the default page mode.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#3158FF
Text
#FFFFFF
Border
1px solid #3158FF
Radius
999px
Padding
10px 18px
Min height
44px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
#000000
Text
#FFFFFF
Border
1px solid rgba(255,255,255,0.18)
Radius
999px
Padding
10px 18px
Min height
44px
Shadow
none
Typography
body
Cards stage
Feature Card
Component preview content
Base Attributes
Background
#060606
Text
#F4F4F0
Border
none
Radius
24px
Padding
0px
Shadow
none
Cards inverse
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #E5E5E5
Radius
24px
Padding
24px
Shadow
none
Navigation micro
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#F4F4F0
Active text
#F4F4F0
Item padding
8px 16px
Item radius
0px
Badges meta
Base Attributes
Background
transparent
Text
#F4F4F0
Border
1px solid rgba(255,255,255,0.38)
Radius
999px
Padding
6px 12px
Shadow
none
Inputs field
Base Attributes
Background
#171717
Text
#F4F4F0
Border
1px solid rgba(255,255,255,0.16)
Radius
999px
Padding
12px 16px
Min height
44px
Placeholder
rgba(244,244,240,0.45)
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
load-bearing
Media types
- -orb sculpture
- -noir stage
- -micro event card
Subject patterns
- -black voids, luminous blue spheres, giant serif type, and tiny event cards or labels
Composition logic
- -Use one dramatic sculptural composition in the hero and leave a lot of negative space around it.
- -Reserve inverse white sections for sharp pacing changes later in the scroll.
Treatment rules
- -Keep ticket pills electric and obvious.
- -Let all-caps metadata sit small but still readable against black.
Generation cues
- -black event microsite, giant serif word, cobalt pill CTA, luminous blue orb
Avoid
- -No bright multicolor festival palette.
- -No compressed cluttered navigation bars.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not replace the cobalt ticket pill with a neutral outline button.
- -Do not set tiny metadata in unreadably low-contrast gray.
- -Do not crowd the hero stage with multiple equally loud controls.