Skip to main content

φ° = 137.508°

Proportion as a
first principle.

Renge is a design system built on natural mathematics. PHI. Fibonacci. The ratios that appear in every living thing.

Explore the system
φ° = 137.508°

The argument

Why natural mathematics?

PHI

1.618033...

1φ = 1.618φ² = 2.618

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-bgoklch(99% 0.01 210)
color.bgSubtle--renge-color-bg-subtleoklch(93% 0.02 210)
color.bgMuted--renge-color-bg-mutedoklch(95% 0.02 210)
color.bgInverse--renge-color-bg-inverseoklch(50% 0.08 210)

Foreground

color.fg--renge-color-fgoklch(20% 0.02 210)
color.fgSubtle--renge-color-fg-subtleoklch(35% 0.03 210)
color.fgMuted--renge-color-fg-mutedoklch(46% 0.04 210)
color.fgInverse--renge-color-fg-inverseoklch(99% 0.01 210)

Border

color.border--renge-color-borderoklch(80% 0.02 210)
color.borderSubtle--renge-color-border-subtleoklch(90% 0.01 210)
color.borderFocus--renge-color-border-focusoklch(60% 0.12 210)

Interactive

color.accent--renge-color-accentoklch(60% 0.12 210)
color.accentHover--renge-color-accent-hoveroklch(60% 0.14 200)
color.accentSubtle--renge-color-accent-subtleoklch(92% 0.04 210)

Status

color.success--renge-color-successoklch(50% 0.2 130)
color.successSubtle--renge-color-success-subtleoklch(92% 0.08 130)
color.warning--renge-color-warningoklch(62% 0.2 40)
color.warningSubtle--renge-color-warning-subtleoklch(92% 0.08 40)
color.danger--renge-color-dangeroklch(55% 0.2 2)
color.dangerSubtle--renge-color-danger-subtleoklch(92% 0.08 2)
color.info--renge-color-infooklch(60% 0.14 200)
color.infoSubtle--renge-color-info-subtleoklch(92% 0.08 200)

Tokens / Spacing

Fibonacci spacing.

1
1 × 4 = 4pxspace[1] · --renge-space-1
2
2 × 4 = 8pxspace[2] · --renge-space-2
3
3 × 4 = 12pxspace[3] · --renge-space-3
4
5 × 4 = 20pxspace[4] · --renge-space-4
5
8 × 4 = 32pxspace[5] · --renge-space-5
6
13 × 4 = 52pxspace[6] · --renge-space-6
7
21 × 4 = 84pxspace[7] · --renge-space-7
8
34 × 4 = 136pxspace[8] · --renge-space-8

Tokens / Typography

PHI type scale.

Proportion.
4xl · 177.44pxfontSize.4xl
Proportion.
3xl · 109.67pxfontSize.3xl
Proportion.
2xl · 67.78pxfontSize.2xl
The ratios that appear in living things.
xl · 41.89pxfontSize.xl
The ratios that appear in living things.
lg · 25.89pxfontSize.lg
The ratios that appear in living things.
base · 16.00pxfontSize.base
The ratios that appear in living things.
sm · 14.19pxfontSize.sm
The ratios that appear in living things.
xs · 12.58pxfontSize.xs

Tokens / Motion

Natural easing.

ease-out
ease-in
ease-in-out
spring

Tokens / Radius

Border radius.

radius.1
4px
radius.2
8px
radius.3
12px
radius.4
20px
radius.5
32px
radius.full
pill

Tokens / Layout

PHI-derived dimensions.

Container widths — 200px × φⁿ

sm
200 × φ² = 524pxcontainer.sm · --renge-container-sm
md
200 × φ³ = 847pxcontainer.md · --renge-container-md
lg
200 × φ⁴ = 1371pxcontainer.lg · --renge-container-lg
xl
200 × φ⁵ = 2218pxcontainer.xl · --renge-container-xl

Aspect ratios — φ-derived

11:1
φ1:φ
1/φφ:1 portrait
16/9widescreen
4/3legacy
Explorer

All tokens, searchable.

Every token is mathematically derived and named semantically. Search by name or formula to find what you need.
--renge-space-00 × 4px
0px
--renge-space-11 × 4px (Fib[0])
4px
--renge-space-22 × 4px (Fib[1])
8px
--renge-space-33 × 4px (Fib[2])
12px
--renge-space-45 × 4px (Fib[3])
20px
--renge-space-58 × 4px (Fib[4])
32px
--renge-space-613 × 4px (Fib[5])
52px

Get started

Install and consume.

pnpm add @renge-ui/tokens

One 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");
Available now

@renge-ui/react

44 React components built on the token system. Proportional. Accessible. Composable.

StackGridSectionTextHeadingDividerButtonInputFormFieldCardBadgeChipAvatarStatAlertSpinnerProgressNavbarEnergyRingPulseFlowFieldSelectCheckboxRadioSwitchTextareaSliderTableTooltipAccordionTimelineSkeletonTabsBreadcrumbPaginationAnchorToastModalAspectRatioContainerSpacerIconButtonButtonGroupCopyButton
Available now

One system. React, Vue, and Svelte.

The same tokens, petals, and mathematical proportions — across the three frameworks that matter to you.

React
@renge-ui/react
44 components
forwardRef. Inline tokens. No class names.
View components →
Vue
@renge-ui/vue
Composables + components
useRenge, useProfile, useTokens.
View composables →
Svelte
@renge-ui/svelte
Stores + actions
rengeStore, profileStore, token actions.
View stores →
Using Tailwind?
One plugin. Full utility coverage. v3 preset and v4 plugin both available.
View docs →
Scale6.0