Shape & Cutout · Creator Design System

Shapes

The geometry the system is allowed to draw, and the maths behind it. The rule that matters most: inner radius = outer radius − padding, or nested corners look parallel instead of concentric.

dot ring arc squircle pill play blob φ rect

.shape-* — every one is a single element, no SVG

2D — regular polygons on the unit circle

triangle rhombus pentagon hexagon hex · pointy octagon star arrow plus

Rings from conic gradients — no SVG, no JS

62% 25% φ turn

.shape-triangle .shape-pentagon .shape-hexagon .shape-octagon .shape-star .shape-arrow .shape-plus · .shape-ring-progress — point n = (50% + 50%·cos θ, 50% + 50%·sin θ), θ stepping by 360/n from −90°

Constant	Value	Where it's used
`--r-golden`	1.618	hero splits, article rails
`--r-silver`	1.414	print, A-series, the resume
`--r-wide`	1.778	16:9 — everything broadcast
`--r-cinema`	2.333	21:9 — the webseries letterbox
`--a-iso`	30°	isometric grids
`--a-blade`	60°	shutter blades — 360 ÷ 6
`--optic-triangle`	1.10	a triangle needs ~10% more area to read as the same size

the numbers are tokens so a new shape is derived, not eyeballed

Inner radius = outer − padding. Corners stay concentric.

.nest / .nest__inner · set --nest-pad

.div-fade · .div-dot · .div-notch · .div-ticks