Overview
Use a sharp data-terminal language: huge uppercase headlines, alternating black and pale pages, acid-lime CTAs, pixel bullets, floating protocol marks, and bordered pricing cards.
Available Pages
Version History
Workflow Collections
Design Analysis
Codex Home design analysis
Use a sharp data-terminal language: huge uppercase headlines, alternating black and pale pages, acid-lime CTAs, pixel bullets, floating protocol marks, and bordered pricing cards.
Colors
Use black for launch stages and F9F9F9 for product/pricing pages. Use lime only for CTAs, cube glow, and high-value accents. Purple can mark a highlighted plan or API category.
Typography
Use a precise neo-grotesk. Hero text can be 73px / 73px, uppercase, and regular-weight. Keep labels small and technical.
Layout
Let the headline dominate. Surround it with technical symbols rather than marketing illustrations. Pricing and feature pages should use large cards with thin borders.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Neon Data Terminal
A high-contrast data API design language with giant uppercase grotesk headlines, black and pale shells, acid-lime CTAs, pixel bullets, floating protocol orbs, neon glass cubes, and bordered pricing cards.
Fast, technical, terminal-like, and data-dense without feeling old-fashioned.
Primary mode: mixedreal-time market and network data APIui-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Fast, technical, terminal-like, and data-dense without feeling old-fashioned.
Density
5
Variance
4
Motion
3
Signals
black hero · giant uppercase type · acid lime CTA · pixel bullets · floating glass cubes · thin bordered pricing cards
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Terminal Black
#111111
Paper Gray
#F9F9F9
Carbon Nav
#2B2B2B
Acid Lime
#E5FF5D
Muted Stone
#B7B3A2
Signal Purple
#B84CFF
Usage rules
Use lime as a sharp action color; do not wash the whole UI in it.
Alternate black launch surfaces with pale product/pricing pages.
Use pixel details for bullets and icons to reinforce data-terminal character.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
page_margin
clamp(24px, 4vw, 44px)
hero_padding
150px 44px 80px
section_gap
96px
card_padding
46px
button_padding
17px 28px
Token Radii
Corner radii tokens with a live surface sample.
small
4px
nav
0 0 0 8px
card
20px
button
8px
orb
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Neo-grotesk
wide, uppercase, precise
Body
Neo-grotesk
clear technical prose
Mono
System mono
API snippets, metrics, and data labels
Typography Scale
Top-level typography scale rendered as live text specimens.
Hero
73px/1
Hero
Page title
53px/1.08
Page title
Metric
73px/—
Metric
Card title
24px/—
Card title
Body
22px/1.35
Body
Label
12px/1.2
Label
Typography Line Heights
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
hero | 1 |
page_title | 1.08 |
body | 1.35 |
label | 1.2 |
Typography Weights
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
display | 400 |
body | 400 |
label | 600 |
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use uppercase display type for hero and major page titles. · Use mono only where data or API context benefits from it.
Borders
Border tokens with resolved values.
Light
1px solid rgba(17, 17, 17, 0.12)
Dark
1px solid rgba(249, 249, 249, 0.12)
Purple
1px solid #B84CFF
Shadows
Shadow tokens with resolved values and shadow samples where applicable.
Lime glow
0 24px 90px rgba(229, 255, 93, 0.30)
None
none
Borders
Resolved border token values.
| Property | Value |
|---|---|
light | 1px solid rgba(17, 17, 17, 0.12) |
dark | 1px solid rgba(249, 249, 249, 0.12) |
purple | 1px solid #B84CFF |
Shadows
Resolved shadow token values.
| Property | Value |
|---|---|
lime_glow | 0 24px 90px rgba(229, 255, 93, 0.30) |
none | none |
Layout Principles
Let the headline dominate the viewport.
Use floating symbols and cubes as technical context around copy.
Keep navigation blocky and terminal-like.
Use large bordered cards for pricing and feature comparisons.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#E5FF5D
Text
#111111
Border
0
Radius
{tokens.radii.button}->8px
Padding
{tokens.spacing.button_padding}->17px 28px
Min height
52px
Icon
pixel-square
Typography
label
Buttons secondary
Base Attributes
Background
#2B2B2B
Text
#F9F9F9
Border
0
Radius
{tokens.radii.button}->8px
Padding
{tokens.spacing.button_padding}->17px 28px
Min height
52px
Cards pricing
Feature Card
Component preview content
Base Attributes
Background
#F9F9F9
Text
#111111
Border
{tokens.borders.light}->1px solid rgba(17, 17, 17, 0.12)
Radius
{tokens.radii.card}->20px
Padding
{tokens.spacing.card_padding}->46px
Shadow
none
Cards highlighted plan
Feature Card
Component preview content
Base Attributes
Background
#EADAF0
Text
#111111
Border
{tokens.borders.purple}->1px solid #B84CFF
Radius
{tokens.radii.card}->20px
Padding
{tokens.spacing.card_padding}->46px
Shadow
none
Navigation block
OverviewFeaturesDocs
Base Attributes
Background
#2B2B2B
Text
#F9F9F9
Cta background
#E5FF5D
Cta text
#111111
Item padding
0 16px
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not use soft pastel SaaS styling.
- -Do not make CTAs blue.
- -Do not remove pixel details from bullets/icons.
- -Do not use rounded friendly nav pills.