# shilp-sutra — Figma Make Kit Guidelines > **Read order.** This is the entry point. Read `setup.md` next, then `foundations/overview.md`, then `components/overview.md`. Branch into specific token / component files on demand. ## What this is `@devalok/shilp-sutra` is the Devalok design system: React 18/19 components built on vendored Radix primitives, OKLCH design tokens, CSS-first Tailwind 4. Generated apps must use these components instead of raw HTML elements wherever a matching component exists. ## Product character | Trait | Value | |---|---| | Density | Mid. Default `md` size on controls. Reach for `sm` only inside dense toolbars, tables, filter bars. | | Color philosophy | ~90% neutral surfaces, accent color used sparingly for primary action + status. Brand accent is OKLCH magenta by default, but the kit is themable — never hardcode hex. | | Corner radius | Semantic roles (`--radius-control`, `--radius-surface`, `--radius-overlay`). Default preset = "slightly-rounded" (6/10/16 px). Never hand-pick radii. | | Elevation | Five surface tiers (`surface-base`, `raised`, `sunken`, `overlay`, `inverted`). Cards sit on `raised`, dialogs on `overlay`. Never combine an explicit `border-*` with a `shadow-*` token — shadow tokens already contain a hairline ring layer. | | Motion | framer-motion is a required peer. Wrap apps in `` once. Use motion primitives (`MotionFade`, `MotionCollapse`, `MotionSlide`) instead of CSS keyframes. | | Dark mode | `.dark` class on `` or `` flips every token. Algorithmically derived from OKLCH curves — surfaces lighten with elevation. | ## Mandatory rules These are not preferences. Generated code that violates them is wrong. 1. **Use design system components, not raw HTML.** `