The argument
Why natural mathematics?
PHI
1.618033...
The golden ratio appears in nautilus shells, sunflower spirals, galaxy arms. We built the spacing scale from it.
Fibonacci
1, 1, 2, 3, 5, 8, 13...
The sequence that generates PHI. Every Renge size step follows it. Growth that feels inevitable.
Phyllotaxis
137.508°
The golden angle. Nature's solution to optimal packing — the logic behind leaves on a stem, seeds in a sunflower.
The system
Every token derived. Nothing arbitrary.
Tokens / Color
Color profiles.
Background
color.bg
--renge-color-bg
color.bgSubtle
--renge-color-bg-subtle
color.bgMuted
--renge-color-bg-muted
color.bgInverse
--renge-color-bg-inverse
Foreground
color.fg
--renge-color-fg
color.fgSubtle
--renge-color-fg-subtle
color.fgMuted
--renge-color-fg-muted
color.fgInverse
--renge-color-fg-inverse
Border
color.border
--renge-color-border
color.borderSubtle
--renge-color-border-subtle
color.borderFocus
--renge-color-border-focus
Interactive
color.accent
--renge-color-accent
color.accentHover
--renge-color-accent-hover
color.accentSubtle
--renge-color-accent-subtle
Status
color.success
--renge-color-success
color.successSubtle
--renge-color-success-subtle
color.warning
--renge-color-warning
color.warningSubtle
--renge-color-warning-subtle
color.danger
--renge-color-danger
color.dangerSubtle
--renge-color-danger-subtle
color.info
--renge-color-info
color.infoSubtle
--renge-color-info-subtle
Tokens / Spacing
Fibonacci spacing.
Tokens / Typography
PHI type scale.
Tokens / Motion
Natural easing.
Tokens / Radius
Border radius.
Get started
Install and consume.
pnpm add @renge-ui/tailwind @renge-ui/tokensOne plugin line. All tokens baked into your stylesheet at build time — no runtime injection, no flash.
# Install
pnpm add @renge-ui/tailwind
# globals.css
@import "tailwindcss";
@plugin "@renge-ui/tailwind/plugin";
# layout.tsx (or any root element)
<html data-profile="ocean">
# Use the utilities — all Tailwind variants work (hover:, md:, dark:, etc.)
<div class="bg-renge-bg text-renge-fg p-renge-5 rounded-renge-2">
<button class="bg-renge-accent hover:bg-renge-accent-hover
text-renge-fg-inverse px-renge-4 py-renge-3
rounded-renge-full duration-renge-2 ease-renge-ease-out
transition-colors">
Click me
</button>
</div>
# Switch profiles at runtime — no rebuild needed
document.documentElement.setAttribute("data-profile", "twilight");
document.documentElement.setAttribute("data-mode", "dark");@renge-ui/react
React components built on the token system. Proportional. Accessible. Composable.