DOREY | DESIGN_SYSTEM_v1.0

CORE_COMPONENTS | >> VECTOR_EXPANSIONS_LAB

01_Typography

Primary Data / Headers

VT323

High visibility, retro-tactical feel. Used for spot prices, primary headings, and data labels.

Interface / Precision

Geist Mono

Clean, modern monospace. Used for terminal output, technical metadata, and numeric tables.

Branding / Authority

Heavy pixel font. Reserved exclusively for the DOREY logo and major system status banners.

Specialized / HUD Applications

Geist Pixel

Custom pixel font variants for tactical displays:

  • • Grid: Primary data readouts, numeric displays
  • • Square: Metric values, tabular numbers
  • • Circle: Status indicators, badges
  • • Line: Labels, secondary metadata

Market Nodes Typography

Node_Label VT323 / 12px
$32.45 Geist Mono / 18px
VAULT Geist Mono / 8px

02_Color_Palette

CYAN_400 INTELLIGENCE
AMBER_500 WARNING
RED_500 CRITICAL
EMERALD_400 GROWTH
METAL_SILVER METADATA

03_Information_Design

The "Glance Test"

Users should decode state in < 500ms. Use directionality over signed numbers.

PASSIVE -2.45
HUD_ACTIVE
2.45

Data Hierarchy

Primary_Vector
$32.45
Secondary_Metric
VOL_HIGH [4.2%]

04_Custom_SVG_Assets

critical_vectors
ai_pulse
dore_bar
silver_coin
market_nodes
dorey_cli
signal_chatter
expand_toggle
stack_anim
flux_pulse
flux_pulse
group_layer
section_frame
tactical_pill
data_cluster
mining_drill

Custom SVGs use crispEdges and image-pixelated rendering to maintain tactical aesthetic.

05_Metric_Icon_Logic

Category Metric Icon_ID Logic_Ratio
INVENTORY COMEX Registered shield-check Verified / Guaranteed
INVENTORY LBMA Vaults landmark Institutional Storage
LOGIC Paper:Physical scale Leverage / Balance
PRICING Spot Prices trending-up Directional Flux
INDUSTRIAL Mining AISC drill (Custom) Physical Extraction

Heuristic: No icon should be redundant within the same visual column. Metro icons identify categories, while specific symbols identify data types.

06_Technical_Specs

Borders & Corners

  • • Radius: Always rounded-none
  • • Width: border-[1px] for rows, border-[3px] for columns.
  • • Interactive: Use .pixel-corners for hover states.

Glow & Texture

Emissive_Text_Effect
Brushed_Metal_Texture

07_Accessibility

Variation_Engineering

The Design Lab must be used to generate and test at least 3 variations for every new node before main-branch commit.

  • Maintain high contrast (minimum 4.5:1) for all data points.
  • Never use color alone to convey meaning (always pair with icons or labels).
  • Ensure tap targets for interactive buttons are at least 32px height.

08_UI_Badges_&_Pills

Status Badges

CRITICAL DANGER THREAT_DETECTED
WARNING CAUTION STATUS_UPDATE
STABLE GROWTH

Tactical Pills

STANDARD_PILL
METAL LIQUID

Taxonomy_Cross_Tab_v3.0

System_Module Group Category > Sub Indicator / Badge Icon_Ref Theme_Color
MARKET_NODES INVENTORY Vaults > Locations
LBMA_LONDON 		landmark
SILVER
" " Vaults > Locations
COMEX_NY 		building-2
SILVER
" " Vaults > Metrics
REGISTERED 		shield-check
CYAN
MARKET_NODES PRICING Spot > Futures
FUTURES_NOV 		clock-arrow-up
AMBER
" " Curve > Structure
CONTANGO 		trending-up
EMERALD
SIGNAL_CHATTER GLOBAL_FLOWS Arb > East/West
DRAINING_WEST 		arrow-down-to-line
CYAN
" " Macro > Central Banks
BRICS_FLOW 		globe
SILVER
SIGNAL_CHATTER INDUSTRIAL Tech > Solar
SOLAR_PV 		zap
EMERALD
" " Tech > EV
EV_SECTOR 		cpu
EMERALD
CRITICAL_VECTORS MINING Production > Cost
AISC_COST 		pickaxe
AMBER
" " Production > Stress
MARGIN_SQUEEZE 		alert-triangle
WHITE
CRITICAL_VECTORS MACRO Psychology > Fear
EXTREME_FEAR 		snowflake
CYAN
" " Psychology > Greed
EXTREME_GREED 		flame
AMBER
* Cross-reference: Market Nodes (Data Source), Signal Chatter (Live Feed), Critical Vectors (Alerts)
CYBER_TAG (SHARP)
SYSTEM_READY

09_Layout_Groupings

Container Logic

  • SECTION (High Level) Border: border-[3px] border-metalGray
    Used for specialized columns or major dashboard areas.
  • GROUP (Sub Level) Border: border-[1px] border-metalGray/60
    Used to cluster related nodes (e.g., "Precious Metals").
SECTION_HEADER
GROUP_HEADER

10_Naming_Convention

Tactical titling

To maintain the "Machine_Interface" aesthetic, all titles and labels should avoid spaces and use underscores.

Critical Alert CRITICAL_ALERT
Supply vs Demand SUPPLY_VS_DEMAND

Implementation Rule

text-transform: uppercase;
white-space: nowrap;
content: replace(' ', '_');