Carrot

Appearance

Carrot Design System - AI Context ​

Post this file at the start of a conversation when building UI with Carrot.

Full API reference: https://developer.kapish.help - look up any package for all tokens, classes, props, events, slots, and usage examples.

Architecture ​

Three tiers, each independently importable:

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

CSS cascade layer order (lowest → highest priority):

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

Unlayered CSS always wins - white-label overrides need no !important.

Setup ​

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

Dark/light mode on the <html> element:

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

Component Variant System ​

Components use data-* attributes, not modifier classes:

html
<button class="btn" data-variant="primary" data-size="lg">Click</button>
<span class="badge" data-variant="success" data-dot></span>
<div class="card" data-variant="elevated" data-interactive></div>
  • data-variant - visual style (primary, secondary, ghost, danger, …)
  • data-size - size (sm, md, lg)
  • Boolean flags - presence = true (data-dot, data-loading)
  • State - use native/ARIA: :disabled, aria-selected, aria-expanded

Available Packages ​

Design Tokens - @carrot/design ​

Reference: https://developer.kapish.help/design/tokens/

PackageTokens
resetCSS reset
colors--color-* - full palette + semantic accent colours
typography--text-* --font-* - size scale, weight, line-height, families
spacing--space-* - 4px base scale
borders--border-* --radius-*
surfaces--surface-* --overlay-* --blur-* --opacity-*
elevation--shadow-* --ring-*
forms--input-* --btn-* --select-*
gradients--gradient-*
display--z-*
flexFlex utility classes
gridsGrid utility classes
layoutsLayout utility classes
sizingWidth/height utilities
imagesImage utility classes
filtersCompound filter effects
interactionsCursor, pointer, user-select utilities
transitions--duration-* --ease-* + transition utilities
responsive--breakpoint-*

CSS Components - @carrot/design-components ​

Reference: https://developer.kapish.help/design/components/

avatars · badges · buttons · calendar · cards · charts · dropdowns · graphs · images · inputs · lists · menus · modals · pagination · progress · responsive · sliders · spinners · tables · tabs · timeline · toasts · toggles · uploads

Each package provides: component tokens (--{name}-*), generated CSS classes, and TypeScript types ({Name}Variants, {Name}Sizes, {Name}StyleProps).

Vue Components - @carrot/design-vue ​

Reference: https://developer.kapish.help/design/vue/

avatars · badges · buttons · calendar · cards · charts · core · dropdowns · forms · graphs · hotspots · images · inputs · lists · menus · modals · pagination · progress · responsive · sliders · spinners · tables · tabs · timeline · toasts · toggles · uploads

Each package provides: Carrot{Name} Vue 3 SFCs, typed props (extending the CSS-level style props), and composables where needed. No CSS is bundled - styles come from @carrot/design-components.

Themes - @carrot/design-themes-default ​

Reference: https://developer.kapish.help/design/themes/default

Three accent themes: purple, electric, gold. Applied via data-theme on any ancestor:

html
<html data-theme="purple">

Each theme overrides --color-accent, --surface-*, and typography via @layer kapish.theme.

White-Labeling ​

Override semantic tokens with unlayered CSS (no !important needed):

css
:root {
  --color-accent: #0070f3;
  --color-accent-contrast: #fff;
  --surface-background: #09090b;
}

How to Use This Doc ​

When building UI with Carrot:

  1. Check this file to identify which package(s) are relevant.
  2. Fetch the package page from developer.kapish.help to get exact token names, class names, prop signatures, and examples.
  3. Use the data-attribute variant system - never add modifier classes manually.

Carrot