SquareKit Next · ParentSquare design system
Design it in Figma.
Ship it from code.
Each component in the Figma library has a coded twin with the same options. You lay out a page in Figma, and engineers build it from the same parts.
Color
Districts chose 10,827 brand colors. We fit them into 20 palettes.
Every school brings its own colors to ParentSquare. SquareKit V2 matches each one to the closest of 20 palettes we maintain, and each palette runs 11 steps from 50 to 950 in light and dark.
10,827 colors, as districts chose themEach dot is one color a district chose. Shades are illustrative.
Platforms
One palette reaches web, iOS, and Android.
Primitives sit at the bottom. Each platform maps them to its own semantic tokens, and components read only those tokens. Pick a palette and watch all three apps change.
The 3D stack needs WebGL. The table below shows the same mapping.
Web
bg-brand-solid← brand 600#224B17
iOS
Accents.Tint← Brand 700#16400C
Android
Schemes.Primary← Brand 800#083601
Start with the docs.
- ComponentsButtons, inputs, tables, messaging, and the rest, with code for each.
- ColorThe 20 palettes and the semantic tokens built on them.
- PrinciplesRules for accessibility, writing, interaction, and motion.
Token packages for web, iOS, and Android come with the V2 alpha. Until then, the docs track the latest version.