AI Design System

Karigar-AI

An AI design system inspired from India — Kalamkari, spice markets & handcraft

A culturally-grounded design language for AI experiences — LLM chat interfaces, voice assistants, terminal tools, payment flows, and data visualization. Every motif earns its place.

Kalamkari pattern

Indian folk art is inherently functional — every motif on a Kalamkari textile tells a story, every Warli figure communicates a scene. Karigar applies that same principle: every visual choice serves the AI experience. The color palette comes from spice markets and natural dyes. The rhythm comes from rangoli and kolam. The warmth comes from handcraft.

1. Style Foundations

Color, type, tokens, icons, and spacing — the atoms derived from Kalamkari dyes, spice bazaars, and the artisan's hand.

Design philosophy

  • Narrative clarity: Folk art tells stories without text. AI interfaces should communicate state and intent at a glance.
  • Earthen minimalism: Derived from natural dyes — turmeric, indigo, vermillion — not synthetic color theory.
  • Handcraft warmth: The Tiro Devanagari Hindi font brings the feeling of a hand-painted sign into the digital interface.
  • Ritual rhythm: The structured repetition of rangoli and kolam patterns applied to UI spacing and layout cadence.

Brand Inspiration

The visual language of Karigar is grounded in Indian handcraft traditions and natural ingredients. This gallery showcases the raw materials, textiles, and artifacts that inspired our design tokens.

Color palette

Every color traces back to a physical source — the dye vats of Machilipatnam, the spice bins of a Kerala market, the charcoal used for lamp-black Kalamkari outlines.

Primary & accent

Mehendi Green was chosen as the primary brand color to ground the AI in the physical world. While many tech platforms use energetic digital oranges or neon blues, this muted, earthy green traces its inspiration to crushed henna leaves and forest foliage—communicating organic intelligence, trustworthiness, and a deep connection to Indian folk art.

Charcoal Ink
#1C1612
Handloom White
#F7F3ED
Mehendi Green
#547053
Turmeric Gold
#D4A843
Natural Indigo
#2D4F6C

Semantic

Sage Green
#4A7C59
Turmeric
#D4A843
Kumkum Red
#B5342B

Neutral scale

50
#FAF8F5
200
#D5CEC4
400
#9A9087
600
#5C5347
900
#1C1612

Typography

Tiro Devanagari Hindi carries the energy of hand-lettering — painted shop signs in Jaipur, temple walls in Thanjavur. Source Code Pro handles body text and AI interface labels. JetBrains Mono powers the terminal.

Type scale
H1Karigar
H2Section heading
H3Subsection label
BodyThe quick brown fox jumps over the lazy dog.
Monoconst response = await model.generate(prompt);

Design tokens

/* Karigar design system tokens */ :root { --folk-ink: #1C1612; /* lamp-black Kalamkari */ --folk-paper: #F7F3ED; /* unbleached handloom */ --folk-accent: #547053; /* madder root / terra cotta */ --folk-turmeric: #D4A843; /* haldi stain */ --folk-indigo: #2D4F6C; /* neel dye vats */ --font-display: 'Tiro Devanagari Hindi', serif; --font-body: 'Source Code Pro', monospace; }

Iconography

Stroke-line icons at 24×24, stroke-width 2. Organic line weight echoing folk illustrations.

Chat
Voice
Terminal
Card
User
Alert

Spacing

8px base grid — modular rhythm from kolam and rangoli patterns.

--space-1: 4px; --space-2: 8px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;

2. Component Library

Components designed for AI interaction contexts — prompts, generated output, payment flows, and data visualization.

Buttons

Types
States

Folk architecture containers (Cards)

Inspired by India's structural heritage — Haveli arched jharokhas, Mughal domes, stepped Mandapa pillars, and organic brass matkas. These distinctive shapes turn simple cards into beautiful storytelling canvases.

Shape forms
Haveli Jharokha
Scalloped arch framing, perfect for portraits, hero cards, and primary context blocks.
Mughal Dome
Ogee arch top, ideal for primary focus points, premium tiers, and calls to action.
Mandapa Step
Stepped robust polygon container reflecting ancient temple pillars. Excellent for code snippets and terminal blocks.
Matka / Kalash
Organic swollen curves reminiscent of clay vessels. Organic flow for statistics or facts.

Form elements

Input, textarea, dropdown
Checkbox, radio, toggle

Feedback

Modal
Toasts
Response copied to clipboard
Payment processed ₹4,999
Token limit approaching
API rate limit exceeded
Progress bar

Token usage: 68% (2,720 / 4,000)

Data display

Table & badges
DraftActiveDeployedRate limitedFailedProcessing
Agent Model Status
Research Assistant GPT-4o Active
Code Reviewer Claude Sonnet Testing
Payment Bot Gemini Pro Processing

Payment gateway

A clean checkout flow with UPI, card, and netbanking tabs. The earthy green CTA anchors the conversion moment.

Checkout flow
Total amount
₹4,999
Secure
💳 Card
📱 UPI
🏦 Bank

🔒 Secured by Karigar Payment Gateway

Graph node canvas

Nodes use the spice palette to distinguish different AI agent types. Edges connect through clean straight lines. Think LangGraph or n8n with folk art warmth.

AI Agent pipeline
System Prompt Builder
• Role definition: Karigar assistant
• Tone: warmth, precision, folk art
• Output: structured JSON
My Prompt
☑ Context attached
☑ Style guide referenced
☐ Examples embedded
Ground Chat RUNNING
The grounded conversation loop references indexed documents and validates claims before generating…
Karigar LLM
• Model: kalamkari-1
• Temp: 0.7
Synthesize
Merge grounded output with context window.
Feedback Loop
RLHF scoring: thumbs up/down signals routed back to fine-tuning.
Response Card
Final structured output delivered to the user interface.

3. AI Components

Purpose-built for LLM-powered interfaces. Each component is grounded in folk art metaphor while serving a precise functional need.

Spice box loader

The Indian masala dabba holds six essential spices in a circular arrangement. This loader maps six processing states to six spice colors.

Loading indicator — 6 spices
Thinking…
Chilli
Turmeric
Mustard
Cardamom
Cinnamon
Kumkum
Spice spinner — single ring
Processing…

Chat bubbles

User messages sit right in earthy green. AI responses sit left on handloom white. Thinking dots cycle through spice colors — chilli, turmeric, indigo.

Prompt suggestions & Empty State

Welcome to Karigar

How can I help you pattern your thoughts today?

🎨 Design System Setup Create a new color palette based on natural dyes.
📝 Code Generation Write a React component for a Kalmakari card.
🔍 Audit Accessibility Check contrast ratios on the indigo palette.
💬 Review Copy Make this text sound more approachable.
Planning
Kalamkari-1 (High)
Chat conversation with citations & feedback
Explain the symbolism of the peacock motif in Kalamkari textiles.
Karigar
The peacock in Kalamkari represents divine grace and immortality 1. In the Srikalahasti tradition, artisans use the peacock to frame narrative scenes — its tail feathers become a natural border pattern, each "eye" symbolizing cosmic awareness 2.
1. Handbook of Indian Folk Art, Chapter 4: Kalamkari Motifs (p. 112).
2. Srikalahasti Textile Traditions, Journal of Asian Art (2022).
Planning
Kalamkari-1 (High)

Voice AI

The voice orb uses concentric ripple animations inspired by kolam patterns. Burnt mehendi core pulses outward — like sound waves, like the expanding rings of a rangoli.

Karigar Voice — listening state
Listening…
"Tell me about the history of natural indigo dyeing in India"
Karigar Voice — speaking state
Speaking…
"Indigo dyeing in India dates back to 3000 BCE. The Indigofera plant was cultivated along the banks of the Narmada…"

Terminal / CLI

The terminal uses the Karigar palette for syntax highlighting — turmeric for keywords, mehendi for the prompt, sage for success. Think Claude Code with handcraft warmth.

Karigar Terminal session
karigar — ~/projects/karigar
karigar "refactor this component to use design tokens"
⠿ Analyzing component structure...
✓ Found 12 hardcoded color values
✓ Found 8 hardcoded spacing values
⚠ 2 values have no matching token — creating new ones
 
karigar apply --dry-run
- background: #547053;
+ background: var(--folk-accent);
- padding: 16px;
+ padding: var(--space-4);
 
✓ 20 replacements ready. Run `karigar apply` to commit.

4. Applications

These three examples demonstrate the Karigar system in context — a ChatGPT-style chat (Karigar), a voice assistant (Karigar Voice), and a terminal (Karigar CLI).

Karigar — Chat application

Laptop — Karigar Chat
Karigar
Today
Kalamkari patterns
Spice box design
Payment UI review
Kalamkari patternsGPT-4o
What are the main Kalamkari traditions?
KARIGAR
Two main traditions: Srikalahasti (pen-drawn) and Machilipatnam (block-printed).
Tell me more about natural dyes
Planning
Kalamkari-1 (High)

Karigar CLI — Terminal

Laptop — Karigar CLI (Claude Code style)
karigar-cli v0.1 — ~/karigar
karigar "create a spice-box loading component"
⠿ Planning component structure...
✓ Created src/components/SpiceLoader.tsx
✓ Created src/styles/spice-loader.css
⚠ Added 2 new design tokens to tokens.css
── Preview ──
const SpiceLoader = () => (
  <div className="spice-loader">
    {spices.map(s => <circle color={s} />)}
  </div>);
────────────
✓ Ready. Run `karigar apply` to write files.

Karigar Developer Docs

Browser — API Documentation
Karigar Docs
Getting Started
Authentication Quickstart
Endpoints
Chat Completions Voice Embeddings
Endpoints

Chat Completions

Given a list of messages comprising a conversation, the model will return a response patterned after Indian visual traditions.

POST https://api.karigar.dev/v1/chat/completions
cURL Python Node.js
curl https://api.karigar.dev/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $KARIGAR_API_KEY" \
  -d '{ "model": "karigar-kalamkari-1", "messages": [{"role": "user", "content": "Hello!"}] }'

Karigar API Dashboard

Browser — API Keys & Usage
Karigar Developer Console
API Keys
Manage your spice rack of API keys — each key unlocks a different flavor of the Karigar platform.
Name
Key
Requests
Status
Kalamkari Production
Created Feb 12
sk-masala-prod-•••••••••••••7kQ4
12,847
Active
Indigo Staging
Created Feb 28
sk-masala-stg-•••••••••••••nR8x
3,201
Active
Turmeric Dev (deprecated)
Created Jan 5
sk-masala-dev-•••••••••••••xP2m
Revoked
March Usage
₹1,240 / ₹5,000
Total Requests
16,048
Active Model
karigar-kalamkari-1
Browser — Billing & Invoices
Karigar Developer Console
Billing
Track your spice consumption and manage your payment method.
March 2026
₹1,240 / ₹5,000 limit
Mar 1Mar 5
Cost Breakdown
API Calls (kalamkari-1) ₹980
Embeddings ₹180
Fine-tuning jobs ₹80
Payment Method
•••• 7291
Exp 09/28
Edit
Invoices
Feb 2026 ₹3,120 PDF
Jan 2026 ₹2,840 PDF
Dec 2025 ₹1,680 PDF

Plan Selection

Tier Selection (Mandapa Cards)

Choose Your Plan

Select the tier that best shapes your creative journey.

Mitti
Clay / Basic
Free
• 100 Karigar Tasks
• Standard Patterns
• Community Support
Kansa
Bronze / Pro
₹499/mo
• Unlimited Tasks
• Premium Kalamkari
• Priority rendering
• Email Support
Suvarna
Gold / Ultra
₹1299/mo
• Everything in Pro
• Dedicated capacity
• Custom finetuning
• 24/7 Phone Support

5. Governance

Contribution

  • Token-first: Every new value must map to an existing token or justify a new one.
  • Source your color: New colors must trace back to a physical material — dye, spice, clay, fiber.
  • AI context required: Every component must document its AI use case (chat, voice, terminal, finance, or data).

Versioning

  • Semantic versioning: Major (breaking), minor (new components), patch (fixes).
  • Changelog: Every release documents what changed and why, in plain language.

Accessibility

  • WCAG 2.1 AA: All color combinations meet minimum contrast ratios.
  • Keyboard navigation: Every interactive element is reachable via Tab.
  • Reduced motion: The spice loader and voice orb respect prefers-reduced-motion.

The hand of the artisan meets the mind of the machine.

Karigar Design System · v1.0