Skip to content
prfct.dev

Foundations

The decisions every component is built from — color, type, space, shape, depth, motion and the rules that bind them.

Foundations are prfct's shared vocabulary. Components don't invent colors, sizes or timing; they compose these decisions. Change a foundation and every component follows.

ColorA generated OKLCH palette: twelve steps per hue, one job per step, contrast solved at build time.TypographyInter with optical sizing, semantic type roles and figures that line up.Spacing & layoutA 4px grid, five control heights, breakpoints and layering.ShapeOne base radius and concentric corners.ElevationFour levels of depth that work in light and dark.MotionDurations, easing curves and CSS springs with a single purpose: explaining change.IconographyLucide icons, sized with text, colored by context.AccessibilityWCAG 2.2 AA by construction — and how to keep it that way.ThemingBrand hue, neutral tint, radius and mode — globally or per subtree.Design tokensArchitecture, naming and exports for code and design tools.Voice & toneHow prfct products speak.