Overview
- Build a stripped-back product shell where typography and spacing do most of the work.
- Use only a handful of component treatments and keep them highly consistent.
- If motion exists, let it act as emphasis, not wallpaper.
Ascend
Ascend powers the growth of next-gen Web3 brands.
3dLarge TypeWeb3ParallaxGradientCryptoBlack WhiteGlassMarketingAnimationBig Background VideoDarkClean
4.0
8
Visits
Sections
Available Pages
Version History
Workflow Collections
Design Analysis
Ascend Home design analysis
Build a stripped-back product shell where typography and spacing do most of the work. Use only a handful of component treatments and keep them highly consistent. If motion exists, let it act as emphasis, not wallpaper. U...
Key Takeaways
- Build a stripped-back product shell where typography and spacing do most of the work.
- Use only a handful of component treatments and keep them highly consistent.
- If motion exists, let it act as emphasis, not wallpaper.
- Use sparse, controlled imagery or diagrams.
- Avoid decorative clutter that fights the minimal posture.
- Base the shell on FFFFFF and keep 111111 as the primary reading color.
Image Direction
- Use sparse, controlled imagery or diagrams.
- Avoid decorative clutter that fights the minimal posture.
Colors
- Base the shell on FFFFFF and keep 111111 as the primary reading color.
- Use 111111 as the main emphasis color and keep it scarce enough to preserve hierarchy.
- Let F5F5F5 and D8D8D8 separate secondary surfaces without introducing noisy ornament.
Typography
- Use sans-serif as the display voice. It should read as editorial display.
- Use Times for body copy, controls, and supporting metadata.
- Let scale and spacing create emphasis before adding extra font families or decorative effects.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Monochrome Editorial Hero Landing
A sparse landing-page system built from grayscale photography, a giant high-contrast serif hero, small rounded controls, and dramatic white-space drop-offs.
minimal, selective, and low-noise
Primary mode: lightcreative marketing landing pagesmotion-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
minimal, selective, and low-noise
Density
3
Variance
3
Motion
2
Signals
primary background #FFFFFF · primary action #111111 · display font sans-serif · body font Times
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Primary
#111111
Secondary
#FFFFFF
Neutral
#FFFFFF
Surface
#F5F5F5
On Surface
#111111
Usage rules
Keep #111111 reserved for intentional emphasis.
Use #F5F5F5 and #D8D8D8 to separate layers without over-framing them.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
0.5rem
sm
0.75rem
md
1rem
lg
1.5rem
xl
2.5rem
section_gap
clamp(4rem, 8vw, 7rem)
Token Radii
Corner radii tokens with a live surface sample.
control
14px
card
18px
full
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
sans-serif
editorial display
Body
Times
practical UI sans
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
4.5rem/—
Display
H2
2.75rem/—
H2
Body
1rem/—
Body
Label
0.9rem/—
Label
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Keep the display voice dominant in headlines only. · Use the body family consistently for UI and supporting text.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
150ms-220ms
Easing
cubic-bezier(.3,0,.2,1)
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 150ms-220ms |
easing | cubic-bezier(.3,0,.2,1) |
Layout Principles
Favor wide margins, direct sequencing, and as few layout types as possible.
Keep controls and cards aligned to a stable rhythm.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#FFFFFF
Text
#111111
Border
none
Radius
10px
Padding
0 16px
Min height
36px
Shadow
none
Font family
"Inter", system-ui, sans-serif
Font size
12px
Font weight
600
Specimen label
Get in Touch
Buttons secondary
Base Attributes
Background
rgba(110,110,110,0.55)
Text
#FFFFFF
Border
1px solid rgba(255,255,255,0.08)
Radius
999px
Padding
0 18px
Min height
36px
Shadow
none
Font family
"Inter", system-ui, sans-serif
Font size
12px
Font weight
500
Backdrop filter
blur(16px)
Specimen label
About
Cards default
Campaign Snapshot
Component preview content
Base Attributes
Background
rgba(255,255,255,0.08)
Text
#FFFFFF
Border
1px solid rgba(255,255,255,0.08)
Radius
18px
Padding
20px
Min width
280px
Shadow
none
Backdrop filter
blur(14px)
Specimen label
Campaign Snapshot
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
rgba(98,98,98,0.5)
Text
#FFFFFF
Height
40px
Backdrop filter
blur(14px)
Active text
#FFFFFF
Item padding
0 16px
Item radius
999px
Specimen label
Clients
Inputs default
Base Attributes
Background
rgba(255,255,255,0.08)
Text
#FFFFFF
Placeholder color
rgba(17,17,17,0.45)
Border
1px solid rgba(255,255,255,0.12)
Radius
12px
Padding
0 16px
Min height
42px
Font family
"Inter", system-ui, sans-serif
Font size
14px
Backdrop filter
blur(14px)
Placeholder
contact@ascendmarketing.xyz
Specimen label
contact@ascendmarketing.xyz
Spatial layers
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
supportive
Rules
- -Treat spatial layers as supportive atmosphere or proof framing.
- -Maintain full legibility when the 3D layer is absent.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not promote default browser blue links into the canonical palette.
- -Do not treat low-confidence DOM wrappers as polished component evidence.
- -Do not add extra accent colors that were not visually supported by the source.