Overview
Use a nearly black canvas, visible measurement grids, faint geometric signal marks, and sparse mono controls. The feeling is precise and nocturnal: more instrument panel than marketing site.
Unmoth
Let the world see what you’ve been working on in the dark with Unmoth — Brand design studio
5.0
23
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Unmoth Home design analysis
Use a nearly black canvas, visible measurement grids, faint geometric signal marks, and sparse mono controls. The feeling is precise and nocturnal: more instrument panel than marketing site.
Colors
Keep the system almost monochrome. Use 08090A for the page shell, 1A1B1D for grid structure, and white for primary copy. Use 00FF57 only as a tiny live/status marker.
Typography
Use a soft glyphic serif for short hero claims around 48px. Use a small mono for navigation, captions, numbers, IDs, and footer lists.
Layout
Build on a fixed-feeling grid. Leave large empty regions around the hero before revealing work. Work sections can use rigid image tiles with tiny captions and numeric markers.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Nocturnal Signal Studio
A dark brand-sprint design language with measurement grids, faint signal geometry, serif display type, mono utility labels, sparse CTAs, and image-led work tiles.
Nocturnal, precise, mysterious, and intentionally sparse.
Primary mode: darkbrand studio and creative sprintcontent-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Nocturnal, precise, mysterious, and intentionally sparse.
Density
3
Variance
3
Motion
2
Signals
black canvas · thin measurement grid · constellation-like geometry · tiny mono captions · single green status dot
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Void Black
#08090A
Grid Line
#1A1B1D
White Signal
#FFFFFF
Dim Graphite
#5C5D5E
Ghost Panel
#0C0D0E
Sprint Green
#00FF57
Usage rules
Keep the interface almost black; let white typography and grid lines do most of the work.
Use green only as a tiny live/status signal.
Do not brighten cards; images should carry the visual variation.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
page_margin
clamp(24px, 10vw, 160px)
header_height
80px
grid_unit
91px
section_gap
96px
tile_gap
40px
button_padding
18px 36px
Token Radii
Corner radii tokens with a live surface sample.
none
0
button
0
tile
0
signal
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Glyphic serif
soft, literary, unusual, and slow
Body
Glyphic serif
used sparingly for short poetic claims
Mono
Compressed utility mono
small navigation, labels, coordinates, and IDs
Typography Scale
Top-level typography scale rendered as live text specimens.
Hero
48px/1.12
Hero
Section title
28px/1.2
Section title
Body
18px/1.4
Body
Mono
12px/1.2
Mono
Caption
10px/—
Caption
Typography Line Heights
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
hero | 1.12 |
section_title | 1.2 |
body | 1.4 |
mono | 1.2 |
Typography Weights
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
display | 400 |
body | 400 |
mono | 400 |
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use serif display copy as a quiet focal point rather than a marketing shout. · Use mono labels for all navigation and metadata.
Borders
Border tokens with resolved values.
Grid
1px solid rgba(255, 255, 255, 0.06)
Button
1px solid rgba(255, 255, 255, 0.08)
Shadows
Shadow tokens with resolved values and shadow samples where applicable.
None
none
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
180ms
Easing
linear
Borders
Resolved border token values.
| Property | Value |
|---|---|
grid | 1px solid rgba(255, 255, 255, 0.06) |
button | 1px solid rgba(255, 255, 255, 0.08) |
Shadows
Resolved shadow token values.
| Property | Value |
|---|---|
none | none |
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 180ms |
easing | linear |
Layout Principles
Build pages on a visible measurement grid.
Use large empty areas before showing work.
Make CTAs feel like instrument controls, not friendly buttons.
Let work tiles vary through imagery while the frame stays rigid.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#0C0D0E
Text
#FFFFFF
Border
{tokens.borders.button}->1px solid rgba(255, 255, 255, 0.08)
Radius
{tokens.radii.button}->0
Padding
{tokens.spacing.button_padding}->18px 36px
Min height
40px
Shadow
none
Marker
#00FF57
Typography
mono
Buttons ghost
Base Attributes
Background
transparent
Text
#FFFFFF
Border
{tokens.borders.button}->1px solid rgba(255, 255, 255, 0.08)
Radius
0
Padding
{tokens.spacing.button_padding}->18px 36px
Min height
40px
Typography
mono
Cards work tile
Feature Card
Component preview content
Base Attributes
Background
#08090A
Text
#FFFFFF
Border
{tokens.borders.grid}->1px solid rgba(255, 255, 255, 0.06)
Radius
0
Padding
0
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#08090A
Text
#FFFFFF
Border
{tokens.borders.grid}->1px solid rgba(255, 255, 255, 0.06)
Height
{tokens.spacing.header_height}->80px
Item padding
18px 36px
Item radius
0
Texture
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Summary
Use fine dotted grids, thin rays, coordinate numerals, and low-contrast oversized wordmarks.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -No rounded SaaS cards.
- -No colorful brand gradients.
- -No dense explanatory copy blocks.
- -No friendly pill-heavy component language.