Overview
This design language is a dark, polished system for creative asset workflows. It should feel like a premium desktop tool: black canvas, luminous blue controls, large app-window proof, and feature cards that behave like workflow panels.
Eagle
A better way to collect, search and organize your design files in a logical way and all in one place.
4.0
12
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Eagle Home design analysis
This design language is a dark, polished system for creative asset workflows. It should feel like a premium desktop tool: black canvas, luminous blue controls, large app-window proof, and feature cards that behave like w...
Colors
Use 000000 as the dominant canvas and 0B1118 for dark section depth. Use 121A24 for raised panels, purchase flows, inputs, and nested cards. Use F8FAFC for main text and A8B0BA for secondary copy. Use 0072EF for primary actions and selection. Use 6AAFFF, cyan, violet, and orange as small feature-mode accents or gradient headline edges.
Typography
Use an Inter-style grotesk throughout. Hero and section headlines sit around 60px / 66px with medium-heavy weight. Card titles are compact and confident, around 20px / 30px. Use gradient text only for select headline words, numeric moments, or section markers. Body copy should stay short and muted.
Layout
Lead with one large product window or browser-window proof object. Section headers are centered, followed by wide cards or media panels. Feature pages can use one active row inside a large card to show the current workflow mode. Store and support flows should stay contained in dark rounded panels with clear internal dividers.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Luminous Asset Vault
A dark creative-asset product language with black canvas depth, blue utility actions, luminous gradient headings, app-window proof surfaces, and large rounded feature cards.
Deep, polished, technical, and creator-focused, with product screenshots doing most of the persuasion.
Primary mode: darkcreative asset managementui-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Deep, polished, technical, and creator-focused, with product screenshots doing most of the persuasion.
Density
5
Variance
4
Motion
3
Signals
near-black page background · large glossy desktop app screenshots · cyan-blue primary actions · soft gradient text accents · dark rounded panels with subtle borders · tiny colored feature icons
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Vault Black
#000000
Panel Navy
#0B1118
Raised Slate
#121A24
Cloud Text
#F8FAFC
Dim Text
#A8B0BA
Action Blue
#0067D8
Glow Blue
#6AAFFF
Signal Orange
#FF974D
Usage rules
Keep most surfaces black or navy; let screenshots and tiny icons carry color.
Use blue for utility action and selection, not as a full-page fill.
Use gradient text sparingly on section headlines and major numeric moments.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
page_margin
clamp(24px, 4vw, 48px)
content_max_width
1180px
hero_gap
24px
section_gap
112px
card_gap
16px
card_padding
24px
control_padding
10px 16px
Token Radii
Corner radii tokens with a live surface sample.
small
6px
card
16px
panel
20px
media
12px
pill
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Inter-style Grotesk
clean, modern, app-native, and highly legible on dark backgrounds
Body
Inter-style Grotesk
compact, direct, and product-oriented
Mono
System mono
only for shortcuts, file metadata, and technical commands
Typography Scale
Top-level typography scale rendered as live text specimens.
Hero
60px/66px
Hero
Section title
60px/66px
Section title
Subhead
28px/36px
Subhead
Card title
20px/—
Card title
Body
16px/24px
Body
Control
14px/20px
Control
Caption
12px/—
Caption
Typography Line Heights
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
hero | 66px |
section_title | 66px |
subhead | 36px |
body | 24px |
control | 20px |
Typography Weights
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
display | 600 |
title | 600 |
control | 600 |
body | 400 |
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use large centered headlines with medium-heavy weight. · Use gradient color on a few key words, not whole paragraphs. · Keep card copy short so screenshots remain dominant.
Borders
Border tokens with resolved values.
Hairline
1px solid rgba(248, 250, 252, 0.12)
Panel
1px solid rgba(248, 250, 252, 0.18)
Blue
1px solid rgba(106, 175, 255, 0.65)
Shadows
Shadow tokens with resolved values and shadow samples where applicable.
None
none
Blue glow
0 0 56px rgba(0, 114, 239, 0.32)
Media float
0 28px 90px rgba(0, 0, 0, 0.45)
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration fast
140ms
Duration base
220ms
Easing
cubic-bezier(.2, 0, 0, 1)
Borders
Resolved border token values.
| Property | Value |
|---|---|
hairline | 1px solid rgba(248, 250, 252, 0.12) |
panel | 1px solid rgba(248, 250, 252, 0.18) |
blue | 1px solid rgba(106, 175, 255, 0.65) |
Shadows
Resolved shadow token values.
| Property | Value |
|---|---|
none | none |
blue_glow | 0 0 56px rgba(0, 114, 239, 0.32) |
media_float | 0 28px 90px rgba(0, 0, 0, 0.45) |
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration_fast | 140ms |
duration_base | 220ms |
easing | cubic-bezier(.2, 0, 0, 1) |
Layout Principles
Lead with one large product window, not abstract illustration.
Use centered section headers and wide media panels.
Build feature areas from large dark cards with a single active row.
Use colored sections to indicate mode changes: collect, organize, search, browse.
Keep purchase and support flows in contained dark panels.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#0067D8
Text
#FFFFFF
Border
1px solid #0067D8
Radius
{tokens.radii.small}->6px
Padding
{tokens.spacing.control_padding}->10px 16px
Min height
40px
Shadow
{tokens.shadows.blue_glow}->0 0 56px rgba(0, 114, 239, 0.32)
Typography
control
Buttons secondary
Base Attributes
Background
rgba(248, 250, 252, 0.06)
Text
#F8FAFC
Border
{tokens.borders.hairline}->1px solid rgba(248, 250, 252, 0.12)
Radius
{tokens.radii.small}->6px
Padding
{tokens.spacing.control_padding}->10px 16px
Min height
40px
Typography
control
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#000000
Text
#A8B0BA
Border
1px solid rgba(248, 250, 252, 0.10)
Item padding
8px 12px
Item radius
{tokens.radii.small}->6px
Cards feature
Feature Card
Component preview content
Base Attributes
Background
rgba(248, 250, 252, 0.04)
Text
#F8FAFC
Border
{tokens.borders.hairline}->1px solid rgba(248, 250, 252, 0.12)
Radius
{tokens.radii.card}->16px
Padding
{tokens.spacing.card_padding}->24px
Shadow
none
Cards purchase
Feature Card
Component preview content
Base Attributes
Background
#121A24
Text
#F8FAFC
Border
{tokens.borders.panel}->1px solid rgba(248, 250, 252, 0.18)
Radius
{tokens.radii.panel}->20px
Padding
28px
Shadow
none
Inputs dark field
Base Attributes
Background
#0B1118
Text
#F8FAFC
Border
{tokens.borders.panel}->1px solid rgba(248, 250, 252, 0.18)
Radius
10px
Padding
12px 16px
Min height
48px
Placeholder
#5D6875
Iconography
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Summary
Use glossy rounded-square utility icons, small browser logos, download arrows, and file-management symbols.
Responsive guidance
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
- -Below 820px, stack feature cards and keep product screenshots full-width.
- -Collapse nav to brand plus primary action and menu trigger.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not flatten the dark system into plain gray.
- -Do not use broad saturated color panels behind every section.
- -Do not replace real app-window proof with abstract blobs.
- -Do not make feature cards equal-weight when one active workflow row should guide attention.