Overview
Midnight Signal Atelier is a gallery-first portfolio system. Black space is not empty filler here; it is an active structural material that makes typography, project posters, and signal accents feel deliberate and expensive.
Koto
Meet Koto — a creative studio that partners with brands to shape the future with optimism, collaboration, and craft. Come see what we’re building.
3.0
3
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Koto Home design analysis
Midnight Signal Atelier is a gallery-first portfolio system. Black space is not empty filler here; it is an active structural material that makes typography, project posters, and signal accents feel deliberate and expens...
Key Takeaways
- Primary ( 040404): the dominant black field.
- Secondary ( F2EEE9): quiet warm white for type and minimal chrome.
- Tertiary ( E9E54B): a rare signal accent, used for small identity or status moments.
- Display: large and calm, never ornamental.
- Body: minimal and low-noise.
- Utility: tiny, edge-positioned, and secondary.
Image Direction
Treat imagery like curated campaign posters hung in sequence. Each visual should feel self-sufficient, bold, and large enough to carry a section on its own. Avoid thumbnail thinking, stock-photo behavior, or image overload.
Colors
Color works through scarcity.
- Primary ( 040404): the dominant black field.
- Secondary ( F2EEE9): quiet warm white for type and minimal chrome.
- Tertiary ( E9E54B): a rare signal accent, used for small identity or status moments.
Typography
Use a neutral modern grotesk for the main voice, then a tiny mono-like layer for utility labels.
- Display: large and calm, never ornamental.
- Body: minimal and low-noise.
- Utility: tiny, edge-positioned, and secondary.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Midnight Signal Atelier
A black-gallery agency system built from sparse utility chrome, luminous signal accents, live spatial surfaces, and poster-scale project imagery.
Severe, cinematic, and sharply curated.
Primary mode: darkcreative portfolio marketingexperience-led
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Severe, cinematic, and sharply curated.
Density
3
Variance
6
Motion
5
Signals
near-black gallery field · tiny mono-like utility chrome · luminous signal yellow · poster-scale portfolio imagery
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Gallery Black
#040404
Soft White
#F2EEE9
Signal Yellow
#E9E54B
Smoked Gray
#1A1A1A
Poster Copper
#C98A6A
Whisper Border
rgba(255,255,255,0.10)
Usage rules
Let black dominate.
Use yellow as a single live signal, never as a blanket surface.
Allow project imagery to introduce temporary secondary color worlds.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
section_gap
clamp(5rem, 10vw, 10rem)
group_gap
0.75rem
card_padding
1rem
Token Radii
Corner radii tokens with a live surface sample.
control
999px
component
0
container
0.5rem
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Helvetica Neue
neutral modern display with gallery restraint
Body
Helvetica Neue
quiet supporting grotesk
Mono
"SF Mono"
tiny utility chrome for timestamps, labels, and filters
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
clamp(3rem, 7vw, 5.5rem)/—
Display
H2
clamp(2rem, 4vw, 3.25rem)/—
H2
Body
1rem/—
Body
Caption
0.75rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use display type sparingly and let negative space magnify it. · Keep utility text tiny, mono-like, and low emphasis. · Avoid decorative type effects that compete with the art direction.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
180ms-300ms
Easing
cubic-bezier(.18, .9, .22, 1)
Spring
stiffness 90, damping 18
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 180ms-300ms |
easing | cubic-bezier(.18, .9, .22, 1) |
spring | stiffness 90, damping 18 |
Layout Principles
Use large black pauses as active layout material.
Treat projects like posters hung in a dark gallery.
Keep chrome tiny and peripheral.
Let one centered statement reset the pace between image-led moments.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
transparent
Text
#F2EEE9
Border
1px solid rgba(255,255,255,0.18)
Radius
{tokens.radii.control}->999px
Padding
0.625rem 0.875rem
Min height
36px
Typography
caption
Buttons secondary
Base Attributes
Background
#1A1A1A
Text
rgba(242,238,233,0.72)
Border
1px solid rgba(255,255,255,0.08)
Radius
{tokens.radii.control}->999px
Padding
0.5rem 0.75rem
Min height
32px
Typography
caption
Cards project
Feature Card
Component preview content
Base Attributes
Background
#0A0A0A
Text
#F2EEE9
Border
none
Radius
0
Padding
0
Shadow
none
Cards utility
Feature Card
Component preview content
Base Attributes
Background
#121212
Text
#F2EEE9
Border
1px solid rgba(255,255,255,0.08)
Radius
{tokens.radii.container}->0.5rem
Padding
0.75rem
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
rgba(242,238,233,0.62)
Active text
#F2EEE9
Item padding
0
Item radius
0
Scroll motion
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Summary
Use long pauses, chaptered reveals, and poster arrival timing as part of the narrative pacing.
Custom cursor
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Summary
Use cursor emphasis only to clarify art surfaces and high-value hover zones.
Three d scene
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Summary
Spatial light fields may support key sections, but they must remain secondary to typography and project art.
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Summary
Treat imagery as gallery posters and campaign worlds rather than generic thumbnails.
Responsive guidance
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
- -Preserve the black gallery pacing on mobile by stacking projects with generous interstitial space.
- -Move utility chrome to the edges and keep it quiet at all sizes.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -No cheerful SaaS card grid.
- -No soft pastel palette.
- -No large persistent navigation bar.
- -No drop-shadow-heavy floating components.
- -No spatial effects that obscure the project art.