Capra, Cribl's Design System
4 days ago
- Startups often rely on third-party UI libraries for quick development, but this can lead to issues like constant style overrides, misaligned design, and accessibility problems as the product evolves.
- Cribl faced significant frontend challenges, including visual divergence, brittle code from overrides, and accessibility failures, prompting them to build their own design system called Capra.
- A design system is more than UI components; it includes design standards (like design tokens), a frontend component library, and a commitment to accessibility, which is crucial in the era of agentic programming.
- Cribl's Platform UI team partnered with Design to refresh UX, create new design tokens using the Design Token Community Group spec, and chose React Aria Components as a foundation for its accessibility and unstyled approach.
- The design system documentation was made accessible to both humans via Storybook and LLMs via Markdown conversion, ensuring ease of use for all.
- Rollout of Capra is ongoing, with over 25% migration progress; lessons learned include balancing final component states with pragmatic adoption to ease the transition for engineers.
- Capra is now publicly available on NPM for Cribl Apps customers, and future plans include expanding base components and supporting higher-level ones to improve consistency and code health.