Refto
GTE

GTE

Trade anything, anywhere, anytime on the world's fastest blockchain and decentralized exchange.

Light ShadowWeb3ParallaxDrag DropCryptoBig Background ImageDarkTransitions
4.0
3
Visits
Visit

Categories

Web3Crypto

Available Pages

Home

Version History

Design Analysis

GTE Home design analysis

Speculative Market Ledger is a trading-platform marketing system that balances cinematic intensity with technical clarity. Black theater stages and serif headlines establish gravity, then white proof sections and dark di...

Key Takeaways

  • Primary ( 07080B): the main black theater field.
  • Secondary ( F7F7F5): text and light-surface counterpart.
  • Tertiary ( FF8B25): small but forceful signal color for actions and segment controls.
  • Display: sparse, high-stakes, and slightly luxurious.
  • Body: crisp and technical.
  • Utility: tiny mono-style labels for controls and segmentation.

Overview

Speculative Market Ledger is a trading-platform marketing system that balances cinematic intensity with technical clarity. Black theater stages and serif headlines establish gravity, then white proof sections and dark diagram modules explain the product with tighter control.

Image Direction

Use cinematic object photography and diagram-led graphics rather than generic stock finance imagery. Hero visuals should feel fast and high-stakes; explanatory visuals should feel exact, segmented, and structural.

Colors

The palette is sparse and high-contrast.

  • Primary ( 07080B): the main black theater field.
  • Secondary ( F7F7F5): text and light-surface counterpart.
  • Tertiary ( FF8B25): small but forceful signal color for actions and segment controls.

Typography

Use a light, elegant serif for high-level market statements and a clean sans for everything explanatory.

  • Display: sparse, high-stakes, and slightly luxurious.
  • Body: crisp and technical.
  • Utility: tiny mono-style labels for controls and segmentation.

Design.md

System Overview

Core identity and authoring metadata from the refto.one design model.

Speculative Market Ledger

A market-infrastructure system built from black theater stages, serif financial headlines, orange signal controls, and diagram-led chapters.

Speculative, precise, and high-stakes.

Primary mode: light-dark mixedtrading infrastructure marketingexperience-led

Theme

Fields outside the primary renderer remain visible here as structured fallback content.

Visual atmosphere
Summary
Speculative, precise, and high-stakes.
Density
4
Variance
6
Motion
4
Signals
black cinematic stage · serif market headlines · orange signal controls · technical diagram modules

Colors

Primitive palettes and resolved token colors for the active preview mode.

Palette colors
Exchange Black
#07080B
Ledger White
#F7F7F5
Signal Orange
#FF8B25
Iron Gray
#1D1E23
Mist White
#EEF0F3
Quiet Steel
#A6ADB7
Usage rules
Use black and white as the main contrast field.
Reserve orange for control, focus, and small signal moments.
Let the palette feel sparse and high-stakes.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(4.5rem, 9vw, 8rem)
group_gap
1rem
card_padding
1.25rem

Token Radii

Corner radii tokens with a live surface sample.

control
0.5rem
component
0.75rem
container
1rem

Typography Families

Font families from the current design YAML, including fallback stacks and usage character.

Display
Ogg Text
elegant serif for market-theater headlines
Body
Suisse Int'l
clean technical companion
Mono
"SF Mono"
small utility and control voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3rem, 8vw, 5.5rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
Body
1rem/—
Body
Caption
0.75rem/—
Caption

Typography Rules

Fields outside the primary renderer remain visible here as structured fallback content.

Rules
Use serif display to create the sense of market gravity. · Keep the supporting sans and mono layers crisp and technical. · Avoid playful type relationships.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
160ms-240ms
Easing
cubic-bezier(.22, .8, .22, 1)
Spring
stiffness 105, damping 20

Motion

Resolved motion token values.

PropertyValue
duration160ms-240ms
easingcubic-bezier(.22, .8, .22, 1)
springstiffness 105, damping 20

Layout Principles

Begin with a cinematic black stage.
Follow with restrained white proof grids.
Use diagram chapters to explain the product logic.
Keep orange concentrated in controls and signals.

Component Preview

Low-complexity component tokens rendered as design-system specimens.

Buttons primary
Base Attributes
Background
#FF8B25
Text
#07080B
Border
1px solid rgba(255,139,37,0.10)
Radius
{tokens.radii.control}->0.5rem
Padding
0.75rem 1rem
Min height
40px
Typography
caption
Buttons secondary
Base Attributes
Background
#1D1E23
Text
#F7F7F5
Border
1px solid rgba(255,255,255,0.10)
Radius
{tokens.radii.control}->0.5rem
Padding
0.625rem 0.875rem
Min height
36px
Typography
caption
Cards proof
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid rgba(17,17,17,0.08)
Radius
{tokens.radii.component}->0.75rem
Padding
1rem
Shadow
none
Cards diagram
Feature Card
Component preview content
Base Attributes
Background
#1D1E23
Text
#F7F7F5
Border
1px solid rgba(255,255,255,0.06)
Radius
{tokens.radii.container}->1rem
Padding
1.25rem
Shadow
none

Scroll motion

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Summary
Use scroll to move from market theater into diagram-led technical proof.

Image direction

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Summary
Combine cinematic object photography with precise diagram modules.

Responsive guidance

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

  • -
    Keep orange signals sparse on mobile.
  • -
    Preserve the serif headline gravity even when the layout stacks vertically.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No generic fintech blue gradients.
  • -
    No soft consumer-social palette.
  • -
    No bubbly pill-everything geometry.
  • -
    No cluttered data-dense dashboard on the marketing surface.
  • -
    No ornate serif decoration beyond the main display moments.