Kookie UI
A design system that applies what research has measured, such as tap size and contrast, and decides everything else once, so every screen stays consistent.
Kookie UI is a design system. A component library gives you parts and leaves the decisions to you. Kookie UI is the decisions: the rules, the patterns and the reason for each one. The components are how those decisions reach your screen.
Some design questions have measured answers. A fingertip needs a target of about 44 pixels, text needs enough contrast to read, and people group things that sit close together. Kookie UI applies these answers on every screen, and no prop can override them. Every other question is a judgment, such as a corner radius or the accent colour. Kookie UI makes each judgment once, in one place, so one change reaches every screen.
The same idea decides what a component is. Components are sorted by what they do, not by how they look, so tabs and a segmented control are two components, although both are a row of segments. Patterns, such as an app frame, a form or a dialog, are part of the system too, because consistency is won or lost where components meet.
The result is an app that stays consistent as it grows, because each decision is made in the system and not again in each file. It started from what I learned on Womp's Design System, but it has no code from it. Base UI supplies the behavior and the accessibility, and Kookie UI owns the API and all of the styles. It is open source but not on npm yet, so for now you build it from the repository.
invite.tsximport { Button, Card, Flex, Heading, Stack, Text } from "@kushagradhawan/kookie-ui-react";export function Invite() { return ( <Card> <Stack gap="5"> <Heading size="6">Invite your team</Heading> <Text emphasis="medium">Everyone you add can see this project.</Text> <Flex gap="3" justify="flex-end"> <Button emphasis="quiet">Not now</Button> <Button tone="accent" emphasis="loud">Send invites</Button> </Flex> </Stack> </Card> );}