Design system
A single reference for the colors, type, controls and rhythm that keep Rise consistent across every page. Everything shown here is live, pulled from the same tokens the site is built on.
Colors
A grounded, botanical range: warm creams and lime brand accents set against deep greens and near-black ink.
Cream
bg-cream
Page base, text on dark sections
Sage
bg-sage
Soft tinted surfaces and cards
Brand
bg-brand
Primary accent, lime CTAs, highlight
Moss
bg-moss
Mid green, secondary accents
Olive
bg-olive
Green buttons and blocks
Forest
bg-forest
Dark sections and overlays
Ink
bg-ink
Primary text and black buttons
Stone
bg-stone
Muted text and captions
On dark
Cream and brand read clearly on forest and ink backgrounds.
Text selection
Highlight this sentence to see the selection style: brand lime behind forest-green text.
Typography
Three families work together: a serif for editorial headlines, a clean sans for reading, and a mono for structural labels.
Aa
Tiempos Text
font-serif · font-heading
Headings and editorial display
Serif. Licensed and self-hosted. Weights 400 to 700, with italic in Regular and Medium for emphasis inside headlines.
Aa
Aeonik
font-sans
Body copy and interface text
Sans-serif. The default face applied to the whole document. Regular 400 for all body copy, with Medium 500 and Bold 700 available.
Aa
DM Mono
font-mono
Labels, buttons and eyebrows
Monospace. Always uppercase with wide letter-spacing.
Display
Rise
Tiempos Text · up to 104px · line-height 1.02
Heading 1
Redefining mobility
Tiempos Text · 72px
Heading 2
Custom-sized and refined
Tiempos Text · 60px
Heading 3
Precision engineering
Tiempos Text · 48px
Body
Designed for simplicity and ease, offering the perfect balance of function and style.
Aeonik Regular · 24px · line-height 1.2 · tracking 0
Body Small
A modern foldable cane that blends precision engineering with all-day comfort.
Aeonik Regular · 18px · line-height 1.2
Eyebrow / Label
Who we are
DM Mono · 11px · uppercase · tracking 0.1em
Corner radius
A single base radius scales into a full set of tokens. Cards and buttons favour the larger, softer end.
rounded-sm
6px
rounded-md
8px
rounded-lg
10px
rounded-xl
14px
rounded-2xl
18px
rounded-3xl
22px
Iconography
Lucide line icons, kept to a few consistent sizes. No emoji, ever.
Layout & motion
Generous whitespace, a wide max width, and restrained motion that only ever supports the content.
Spacing
- Max content width: 1728px, centered
- Page padding: 24px, growing to 48px from small screens up
- Section rhythm: 96px vertical, 128px on desktop
Reveal motion
Fade and rise
Elements ease up 24px as they settle in, over 0.8s.