Carrot

Appearance

Design System ​

The Carrot Design System is a three-tier CSS and Vue 3 component library built on CSS cascade layers.

Architecture ​

@carrot/design              → CSS reset + tokens + utility classes
@carrot/design-components   → CSS component styles + TypeScript types
@carrot/design-vue          → Vue 3 components + composables

CSS cascade layer order:

kapish.reset → kapish.tokens → kapish.utilities → kapish.components → kapish.theme → kapish.accessibility

Unlayered CSS (tenant/white-label overrides) wins over all layers - no !important needed.

Quick Start ​

css
@import "@carrot/design";
@import "@carrot/design-components";
ts
import { CarrotButton, CarrotModal, toast } from "@carrot/design-vue";

Dark / Light Mode ​

html
<html>                      <!-- dark (default) -->
<html data-mode="light">    <!-- light -->
<html data-mode="system">   <!-- follow OS preference -->

Sections ​

  • Design Tokens - CSS custom properties for colour, spacing, typography, and more
  • CSS Components - Component styles with data-attribute variants and TypeScript types
  • Vue Components - Vue 3 SFCs, composables, and full accessibility
  • Themes - Scoped accent colour themes with dark/light support
Design SystemExplore the component library, design tokens, and themes interactively.

Carrot