---
version: alpha
name: Tanaya Khadke
description: A visual artist's playground — near-black canvas, chunky Boldonse display caps, monospaced technical labels, and electric accents (acid green, neon lime, violet) on draggable card stacks. Motion-first, experimental, expressive.

colors:
  # Canvas + ink
  background: "#050505"
  surface: "#131415"
  surface-soft: "#1a1a1b"
  surface-raised: "#27272a"
  ink: "#f1f1f1"
  ink-secondary: "#9ba1a5"
  ink-muted: "#8f8f8f"
  ink-faint: "#686a62"

  # Electric accents
  primary: "#0EE264"        # acid green
  accent-green: "#02BB7B"   # deep emerald
  accent-lime: "#d0ff71"    # neon lime
  accent-violet: "#903DF2"  # vivid purple
  accent-indigo: "#5e67e6"  # indigo
  accent-blue: "#0080ff"    # link blue

  # Light surface (occasional cream panel)
  cream: "#f9f7ef"
  cream-pink: "#fef7f6"
  lavender: "#eeedfd"

  # Neutral scale
  gray-900: "#131415"
  gray-800: "#27272a"
  gray-600: "#3f3f46"
  gray-400: "#8f8f8f"
  gray-300: "#b5b5b5"
  gray-200: "#d4d4d8"
  gray-100: "#e4e4e7"

  border-subtle: "#27272a"
  border-soft: "#303030"

  # On-color
  on-primary: "#050505"
  on-accent-violet: "#ffffff"
  on-ink: "#050505"

typography:
  display-hero:
    fontFamily: "Boldonse, system-ui, sans-serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1px
  display-section:
    fontFamily: "Boldonse, system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Boldonse, system-ui, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0px
  mono-label:
    fontFamily: "DM Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 1px
  mono-caption:
    fontFamily: "Fragment Mono, ui-monospace, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.5px
  body-large:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "DM Mono, ui-monospace, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0.5px
  caption:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  sm: 6px
  md: 10px
  lg: 16px
  xl: 24px
  pill: 9999px
  blob: 1520px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 22px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
    borderColor: "{colors.border-soft}"

  button-violet:
    backgroundColor: "{colors.accent-violet}"
    textColor: "{colors.on-accent-violet}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 22px

  badge:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.accent-lime}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 20px
    borderColor: "{colors.border-subtle}"

  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border-soft}"

  card-cream:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.on-ink}"
    rounded: "{rounded.lg}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.border-soft}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    padding: 16px 24px
    borderColor: "{colors.border-subtle}"

  tag:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.sm}"
    padding: 4px 10px
---

# Tanaya Khadke Design System

## Overview

Tanaya Khadke's portfolio is a visual artist's playground rendered as an interface. The canvas is near-black (`{colors.background}`) — not a flat tech-dark but a deep, theatrical void that lets work and color do the talking. Across it float draggable card stacks ("DRAG TO MOVE", "Tap to cycle through the cards"), a gesture-first navigation model that treats the page itself like a physical surface to push around rather than a document to scroll. The site is built in Framer, and it wears its motion-first, experimental thesis openly: shapes, motion, and experimentation as stated first principles.

The typographic identity is loud and structural. Headlines are set in **Boldonse**, a chunky, almost architectural display face used in caps — heavy, slightly compressed, impossible to ignore. This display weight is deliberately counter-balanced by monospaced supporting text (**DM Mono**, **Fragment Mono**, **Roboto Mono**) for labels, captions, and UI affordances, which lends the whole thing a technical, blueprint-like undertone. Long-form reading drops to **Inter**. The contrast — sculptural display caps over precise monospace — is the core voice.

Color is where the playfulness lives. Against the black, the system fires electric accents: an acid green (`{colors.primary}`), a deep emerald (`{colors.accent-green}`), a neon lime (`{colors.accent-lime}`), and a vivid violet/indigo pairing (`{colors.accent-violet}`, `{colors.accent-indigo}`). These aren't workflow-coded like an infra site — they're expressive, used to energize cards, tags, and interactive affordances. Occasional warm cream and pink-tinted panels (`{colors.cream}`, `{colors.cream-pink}`) break the dark for contrast, the way a gallery might spotlight one piece on a pale wall.

**Key Characteristics:**
- Near-black theatrical canvas (`{colors.background}`) — gallery void, not flat tech dark
- Boldonse chunky display caps as the headline signature
- Monospace supporting type (DM Mono / Fragment Mono) for labels and UI — blueprint undertone
- Electric expressive accents: acid green, neon lime, vivid violet/indigo
- Draggable, tap-to-cycle card stacks — gesture-first navigation
- Occasional cream/pink light panels for contrast against the dark
- Pill buttons and tags, generous rounded card corners
- Vertical text rhythm ("Visual Artist" stacked) as a layout motif

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Near-black page canvas, the theatrical void.
- **Surface** (`{colors.surface}`): Card and panel base, a hair above black.
- **Surface Soft** (`{colors.surface-soft}`) / **Surface Raised** (`{colors.surface-raised}`): Layered elevation steps for stacked cards and chips.
- **Ink** (`{colors.ink}`): Primary text, off-white for softness on black.
- **Ink Secondary** (`{colors.ink-secondary}`) / **Ink Muted** (`{colors.ink-muted}`): Supporting and caption text.

### Electric Accents
- **Acid Green** (`{colors.primary}`): The signature accent — primary CTAs, highlights.
- **Deep Emerald** (`{colors.accent-green}`): Secondary green for variety.
- **Neon Lime** (`{colors.accent-lime}`): Brightest pop, for tags and emphasis on dark.
- **Vivid Violet** (`{colors.accent-violet}`) / **Indigo** (`{colors.accent-indigo}`): The cool counterweight to the greens.
- **Link Blue** (`{colors.accent-blue}`): Inline links.

### Light Panels
- **Cream** (`{colors.cream}`) / **Cream Pink** (`{colors.cream-pink}`) / **Lavender** (`{colors.lavender}`): Occasional pale panels that spotlight content against the dark.

### Neutral Scale & Borders
- **Gray 900–100** (`{colors.gray-900}` … `{colors.gray-100}`): Elevation and divider scale.
- **Border Subtle** (`{colors.border-subtle}`) / **Border Soft** (`{colors.border-soft}`): Hairline card and input outlines on dark.

## Typography

### Font Family
- **Display**: `Boldonse` — chunky architectural caps for headlines.
- **Mono**: `DM Mono`, `Fragment Mono`, `Roboto Mono` — labels, captions, UI affordances.
- **Body**: `Inter` (with `Inter Placeholder` fallback) — long-form reading.

### Hierarchy

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 56px Boldonse caps — billboard headline |
| `display-section` | Section titles |
| `card-title` | Card / project headings |
| `mono-label` | Uppercase mono labels, nav, badges |
| `mono-caption` | Technical captions, metadata |
| `body-large` | Intro / lead paragraphs (Inter) |
| `body` | Standard reading text (Inter) |
| `body-small` | Compact UI text |
| `button-ui` | Mono button labels |
| `caption` | Fine print, metadata |

### Principles
- **Sculptural vs. precise**: Heavy Boldonse display caps set against precise monospace — the defining tension.
- **Mono as voice**: Monospaced labels give the portfolio a technical, blueprint undertone that frames expressive work.
- **Inter for reading**: Drop to Inter only where real prose needs comfort.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Loose, generous rhythm — sections breathe with `{spacing.3xl}`–`{spacing.4xl}` gaps so floating cards have room to move.

### Grid & Container
- Card-stack centerpiece — draggable, tap-to-cycle, layered with rotation/offset
- Vertical stacked text ("Visual Artist") as a rhythm motif
- Loose, off-grid placement over strict columns — experimental by design

### Whitespace Philosophy
- **The void as stage**: Black emptiness frames each card and color pop.
- **Motion needs room**: Generous padding so drag/cycle gestures feel physical.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 6px | Tags, small chips |
| `md` | 10px | Cards, inputs (the workhorse radius) |
| `lg` | 16px | Feature / cream panels |
| `xl` | 24px | Large containers |
| `pill` | 9999px | Buttons, badges |
| `blob` | 1520px | Oversized soft-corner decorative shapes |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Acid green fill, near-black mono label, pill.
- **`button-secondary`** — Dark surface, soft border, pill.
- **`button-violet`** — Vivid violet fill, white label, for accent CTAs.

### Pills & Tags
- **`badge`** — Raised dark chip with neon-lime mono label.
- **`tag`** — Subtle dark chip, muted ink, small radius.

### Cards
- **`card`** — Dark surface, hairline border, 10px radius — the draggable unit.
- **`card-feature`** — Slightly lifted surface, soft border, larger radius.
- **`card-cream`** — Pale cream panel with dark text, the spotlight contrast card.

### Inputs
- **`input`** — Dark surface, soft border, 10px radius.

### Navigation
- **`nav-bar`** — Black bar, uppercase mono labels, hairline bottom border. Sections: Board, Collabs, Illustrations, Films.

## Do's and Don'ts

### Do
- Keep the canvas near-black (`{colors.background}`) — let work and accents glow against it
- Set headlines in Boldonse caps; pair with monospace labels
- Use electric accents (green, lime, violet) expressively, not as workflow codes
- Use cream/pink panels sparingly as deliberate spotlights
- Make interactions feel physical — drag, cycle, rotate

### Don't
- Don't put dark `{colors.ink-faint}` text directly on `{colors.background}` for reading copy
- Don't use Boldonse for long body text — it's display-only
- Don't flatten the motion-first feel into a static document grid
- Don't dilute the accents into pastels — they're meant to be electric
- Don't set acid green or lime as the page background — they're foreground pops

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single stacked card, simplified drag; tap-to-cycle primary |
| Tablet | 600–1024px | Larger card stack, expanded padding |
| Desktop | >1024px | Full draggable canvas with off-grid placement |

### Touch Targets
- Pill buttons and cards sized for comfortable drag/tap
- Mono nav labels with adequate spacing

### Collapsing Strategy
- Card stack: full drag canvas → tap-to-cycle on mobile
- Hero Boldonse: scales down, retains caps weight
- Nav: horizontal mono links → compact menu

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: near-black `{colors.background}`
- Heading text: off-white `{colors.ink}` in Boldonse caps
- Body text: `{colors.ink-secondary}` (Inter)
- Primary CTA: acid green `{colors.primary}` with near-black mono label
- Accent CTA: vivid violet `{colors.accent-violet}`
- Tag pop: neon lime `{colors.accent-lime}`

### Example Component Prompts
- "Hero on near-black `{colors.background}`. Headline 56px Boldonse caps, `{colors.ink}`, line-height 1.05. Sub-line in DM Mono 12px uppercase, `{colors.ink-secondary}`, letter-spacing 1px. Acid-green pill button (`{colors.primary}`, near-black mono label, 9999px radius, 12px 22px padding)."
- "Draggable project card: surface `{colors.surface}`, hairline border `{colors.border-subtle}`, 10px radius, 20px padding. Title in Boldonse 22px caps. Mono caption metadata in `{colors.ink-muted}`."
- "Neon-lime tag chip: `{colors.surface-raised}` background, `{colors.accent-lime}` DM Mono label, pill radius, 4px 12px padding."
- "Spotlight cream panel: `{colors.cream}` background, dark `{colors.on-ink}` text, 16px radius — used to contrast against the dark canvas."

### Iteration Guide
1. Black canvas first; everything else is foreground glow.
2. Boldonse caps for display, monospace for labels, Inter for reading — never mix roles.
3. Accents are electric and expressive, not functional/workflow-coded.
4. 10px is the workhorse card radius; pills for buttons and tags.
5. Reach for a cream panel only when you want a deliberate gallery spotlight.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Tanaya Khadke. Brand names and trademarks belong to their respective owners.