Foundations

Owner rule

Changed only with two product consumers in mind, and stable first.

Size budget

115.0 kB gzip for the whole domain; it only goes down.

Entries

24 entries, 17 used by live products and sites.

• BadgeA short status or label: a tone, two sizes, an optional dot that can pulse.126 files import it
• ButtonThe action: six looks, three sizes, two shapes (an 8 px radius, the pill) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.258 files import it
• CardThe composed chassis of every card: a media with overlays, a body with a title, a description, stats and a footer.95 files import it
• cnJoins class names and resolves Tailwind conflicts: the last class wins.49 files import it
• KbdA key or a keyboard shortcut, set as keys: one Kbd per key.8 files import it
• SeparatorA line between groups of content, horizontal or vertical, decorative by default.2 files import it
• SkeletonA placeholder the shape of what is loading — lines, circles, blocks, or the real component turned into its own skeleton (SkeletonShape) — crossed by one reflection of the brand light.6 files import it
• Skip linkThe first tab stop of a page: a link that skips the navigation and lands on the content — hidden until it is focused.5 files import it
• SlotSlot merges its props and classes into its only child — the engine of asChild — and VisuallyHidden names things for screen readers only.
• SpinnerThe Krizaka spinner: light traced around a hexagon, its node breathing — indeterminate, or growing to a value; still and legible under reduced motion.4 files import it
• ThemeDark, light or the system's: ThemeProvider, ThemeScript against the flash, and ThemeToggle.62 files import it
• ChipBetaA selectable pill: alone a toggle, in a group a single or multiple choice, or a removable tag. Also the tags of a workspace: TagChip, with a colour marker from the closed palette.21 files import it
• Chip linkBetaA chip that is a link — a filter that is an address — with the look of Chip, the current one marked, and chipVariants to style anything else; server-safe.11 files import it
• Chip rowBetaA row of chip links that scrolls sideways with scroll-snap on a phone (the edge fades) and wraps from md: an audience picker, a page's filters.
• Copy buttonBetaA button that copies a value, says “Copied” in a live region, and falls back to a selected field when the clipboard is unavailable.1 files import it
• Floating action buttonBetaThe screen's one main action, floating above the content in the accent, clear of the safe area and the tab bar.
• IsoBetaThe isometric kit: luminous objects built from the Krizaka vocabulary (hexagons, cut corners, the node) on a perspective grid — a hero driven by data (IsoHub) or composed from primitives.
• LoaderBetaA wait from start to end: nothing for the first instants, then the Krizaka glyph with its words, a percentage and an ETA, held long enough to read, ending on a check or a cross that is drawn and announced — and LoadingRegion, which hands a region over to a skeleton of its shape.5 files import it
• MascotsBetaThe Krizaka flock: nine figures (falcon, owl, duck, flamingo, pigeon, lovebird, crane, magpie — and the beaver) in five moods, drawn in the product's brand colours — and the phoenix, the comeback.42 files import it
• RecipesBetaThe variants of a component written once, as classes of the Krizaka tokens: the web wears them with tv(recipe), React Native reads the same classes into styles on the theme's roles with nativeRecipe(recipe).resolve(props, theme). Button, Badge, Chip and Card are built this way, so the two platforms cannot name different tokens.
• Route stateBetaThe URL is the state: useRouteState keeps a selection (a tab, a type, a filter) in a search parameter, and Tabs, Chip.Group and ChoiceGrid bind to it with routeKey.4 files import it
• SitesBetaThe Krizaka family as data: every site (the company, the products, the open-source projects, GitHub) with its address, kind, status, mark and repository, and the family's words in English and French — read by the bar's family switcher and the common footer.18 files import it
• Text styleBetaThe look of one text role chosen by a person — font, size, weight, spacing, alignment, case, italic and tone — as a plain value the app stores, a live preview, and the same value drawn safely by StyledText.
• TxtBetaText in the platform's type scale, coloured by a role of the current theme.