Overview
Build a system that feels open, civic, and structurally calm. A spacious white ecosystem system built from cobalt calls to action, minimal side navigation, and open-field product staging.
Base
Base is an open stack that empowers builders, creators, and people everywhere to build apps, grow businesses, create what they love, and earn onchain.
3.0
15
Visits
Categories
Available Pages
Version History
Workflow Collections
Design Analysis
Base Home design analysis
Build a system that feels open, civic, and structurally calm. A spacious white ecosystem system built from cobalt calls to action, minimal side navigation, and open-field product staging.
Image Direction
Use sparse app proof, floating utility blocks, and restrained brand marks. Most of the visual experience should come from whitespace and clean placement.
Colors
Cobalt is the main action color. The rest of the page should stay white, light gray, and black, with only occasional mint signals inside product proof.
Typography
Use a sharp grotesk with little ornament. This system should feel broad, public, and straightforward rather than niche or decorative.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Cobalt Open Ledger
A spacious white ecosystem system built from cobalt calls to action, minimal side navigation, and open-field product staging.
open, civic, and intentionally sparse
Primary mode: lightecosystem platform marketingspatial-marketing
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
open, civic, and intentionally sparse
Density
2
Variance
2
Motion
2
Signals
white field dominance · cobalt action points · left rail navigation · floating utility blocks
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Base Cobalt
#1E32FF
Soft Gray
#F2F2F2
Open White
#FFFFFF
Ink Black
#111111
Fog Border
#E5E7EB
Cool Gray Text
#6B7280
Mint Signal
#D8FF3E
Usage rules
Leave most of the canvas white and let cobalt do the signaling.
Use light gray shells for secondary and floating controls, never darker than needed.
Small green or mint hits can appear in app proof, but cobalt remains the true action color.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
6px
sm
8px
md
16px
lg
24px
section
112px
Token Radii
Corner radii tokens with a live surface sample.
sm
8px
md
8px
lg
24px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Helvetica Neue
sharp civic display voice
Body
Helvetica Neue
minimal support copy voice
Mono
IBM Plex Mono
small systems label voice
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
4.9rem/—
Display
H2
2.4rem/—
H2
Body
1rem/—
Body
Caption
0.8125rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use a clean grotesk with lots of breathing room and no decorative noise. · Headlines should feel public-facing and declarative. · Mono labels can support system sections and side-rail utilities.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
160ms-220ms
Easing
cubic-bezier(.22,.8,.18,1)
Spring
stiffness 95, damping 18
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 160ms-220ms |
easing | cubic-bezier(.22,.8,.18,1) |
spring | stiffness 95, damping 18 |
Layout Principles
Give the main headline and the white field room to dominate before product proof appears.
Use the left rail as a structural navigation anchor rather than a decorative sidebar.
Introduce app proof and data surfaces as floating utilities inside the open field.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#1E32FF
Text
#FFFFFF
Border
1px solid #1E32FF
Radius
8px
Padding
12px 20px
Min height
42px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
#F2F2F2
Text
#111111
Border
1px solid #F2F2F2
Radius
8px
Padding
12px 20px
Min height
42px
Shadow
none
Typography
body
Cards utility
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #E5E7EB
Radius
24px
Padding
24px
Shadow
0 8px 18px rgba(17,17,17,0.04)
Cards floating block
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #E5E7EB
Radius
8px
Padding
16px
Shadow
0 6px 14px rgba(17,17,17,0.04)
Navigation side item
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#111111
Active text
#111111
Item padding
10px 10px
Item radius
8px
Badges rail label
Base Attributes
Background
transparent
Text
#6B7280
Border
1px solid transparent
Radius
0px
Padding
0px
Shadow
none
Inputs field
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #E5E7EB
Radius
8px
Padding
12px 16px
Min height
42px
Placeholder
rgba(17,17,17,0.42)
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
supportive
Media types
- -app ui
- -floating metric block
- -spatial brand field
Subject patterns
- -phone app proof, floating utilities, and restrained civic-brand symbols
Composition logic
- -Keep proof sparse and placed within a large white field.
- -Use only a few floating utility blocks at once.
Treatment rules
- -Let cobalt stay clean and solid.
- -Avoid decorative chrome around the app proof.
Generation cues
- -minimal white ecosystem landing page, cobalt button, floating app utility blocks
Avoid
- -No dark mode takeover.
- -No noisy gradients or busy illustrations.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not fill the site with dark cards or crypto spectacle.
- -Do not turn the cobalt buttons into pills.
- -Do not reduce the gray body text contrast below comfortable reading.