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
Newsreader
font-serif · font-heading
Headings and editorial display
Serif. Weights 400 to 500, with italic reserved for emphasis inside headlines.
Aa
Inter
font-sans
Body copy and interface text
Sans-serif. The default face applied to the whole document.
Aa
DM Mono
font-mono
Labels, buttons and eyebrows
Monospace. Always uppercase with wide letter-spacing.
Display
Rise
Newsreader · up to 104px · line-height 1.02
Heading 1
Redefining mobility
Newsreader · 72px
Heading 2
Custom-sized and refined
Newsreader · 60px
Heading 3
Precision engineering
Newsreader · 48px
Body Large
Designed for simplicity and ease, offering the perfect balance of function and style.
Inter · 18px · relaxed leading
Body
A modern foldable cane that blends precision engineering with all-day comfort.
Inter · 16px
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.
