# Aditya Joshi - Design System (AI Agent Skill Guide) **Version:** 1.0.0 **Home:** `design.adityajoshi.online` **Stylesheet:** `https://design.adityajoshi.online/aditya.css` This guide defines the **mandatory** standards for building any web UI in Aditya Joshi's design system. It is framework-agnostic (plain HTML, React, Vue, Svelte, anything). AI agents MUST follow these rules so every project - regardless of stack or repo - looks like it belongs to the same brand. If a rule here conflicts with your defaults, this file wins. The aesthetic: **clean, light, Google-style.** Roboto type, a blue-primary palette with red/yellow/green accents, generous whitespace, soft Material elevation, pill buttons, 8px geometry. Calm and legible, never loud. --- ## Strict Mandates for AI Agents 1. **Always link the stylesheet** and never re-declare its tokens: ```html ``` 2. **Add the `aj` class to ``** so base typography and colors apply: ``. 3. **Use the design tokens** (CSS variables) for every color, radius, shadow, and spacing value. Do NOT hardcode hex colors or arbitrary pixel spacing. 4. **Light theme only** (for now). White/near-white surfaces, dark ink. No dark mode unless explicitly requested. 5. **Blue is the primary.** Red, yellow, and green are accents for state (danger/warning/success) or data viz - not for primary actions. 6. **Roboto everywhere.** Roboto for UI/display, Roboto Mono for code. Do not introduce other fonts. 7. **Accessibility is not optional.** WCAG 2.2 AA: 4.5:1 text contrast, visible focus states (the CSS provides them - keep them), real labels on inputs. 8. **No em-dashes (`-` only) and no emojis** in code, content, or comments. 9. **Prefer the provided component classes** over bespoke CSS. Only write custom CSS when the system genuinely lacks a pattern, and reuse tokens when you do. --- ## Design Tokens (the contract) All tokens are CSS variables prefixed `--aj-`. Reference them; never replace them. **Brand palette** - Blue (primary) `--aj-blue` `#1a73e8`, hover `--aj-blue-hover` `#1557b0`, soft `--aj-blue-soft` `#e8f0fe` - Red `--aj-red` `#ea4335` / `--aj-red-strong` `#d93025` - Yellow `--aj-yellow` `#fbbc04` / `--aj-yellow-strong` `#f9ab00` - Green `--aj-green` `#34a853` / `--aj-green-strong` `#188038` **Semantic**: `--aj-primary`, `--aj-danger`, `--aj-warning`, `--aj-success`. **Surfaces (light)**: `--aj-bg` / `--aj-surface` `#ffffff`, `--aj-surface-2` `#f8f9fa`, `--aj-surface-3` `#f1f3f4`, borders `--aj-border` `#dadce0` / `--aj-border-soft` `#e8eaed`. **Text**: `--aj-text` `#202124`, `--aj-text-secondary` `#5f6368`, `--aj-text-tertiary` `#80868b`, `--aj-on-primary` `#ffffff`. **Type**: `--aj-font` (Roboto), `--aj-font-mono` (Roboto Mono). **Radius**: `--aj-radius-sm` 4px, `--aj-radius` 8px, `--aj-radius-lg` 16px, `--aj-radius-pill` 999px. **Elevation**: `--aj-shadow-1/2/3` (Material-style). **Spacing (8pt scale)**: `--aj-space-1` 4px ... `--aj-space-7` 64px. Use these for margins/padding/gaps. Do not invent one-off pixel values. --- ## Components (use these class names) **Layout** - `.aj-container` (max 1200px, centered) - add `.aj-container--narrow` for 800px. - `.aj-section` (vertical rhythm), `.aj-stack` (spaces children), `.aj-row` (flex), `.aj-grid` + `.aj-grid--2` / `.aj-grid--3` (responsive, collapses on mobile). **Buttons** (all pill-shaped) - `.aj-btn` plus one variant: - `.aj-btn--filled` (primary action), `.aj-btn--tonal` (secondary), `.aj-btn--outline`, `.aj-btn--text`. Exactly one filled primary per view. **Card**: `.aj-card` (+ `.aj-card--hover` for lift on hover, `.aj-card__title`). **Chip / Badge**: `.aj-chip`; `.aj-badge` + `--blue/--green/--red/--yellow` for status. **Forms**: `.aj-input`, `.aj-textarea`, `.aj-select` (focus ring built in). **Nav**: `.aj-nav`, `.aj-nav__brand`, `.aj-nav__links`. **Utilities**: `.aj-text-secondary`, `.aj-muted`, `.aj-text-center`, `.aj-elev-1/2`, `.aj-rounded`. --- ## Minimal Example ```html My Project

Do one thing well

A clean, Google-style starting point wired to the design system.

Fast

Tokens, not guesswork.

Stable

Consistent

Same brand, every repo.

Core

Accessible

AA by default.

WCAG 2.2

``` --- ## Prohibited Patterns (Do NOT Do These) - Do NOT hardcode colors/spacing; use `--aj-*` tokens. - Do NOT introduce fonts other than Roboto / Roboto Mono. - Do NOT ship dark mode unless asked (light theme is the brand). - Do NOT use more than one `.aj-btn--filled` primary per view. - Do NOT remove focus outlines or drop below AA contrast. - Do NOT use em-dashes or emojis. - Do NOT nest cards inside cards inside cards. Keep hierarchy shallow. --- ## Implementation Checklist - [ ] `aditya.css` linked; ``. - [ ] All colors/spacing/radii/shadows come from `--aj-*` tokens. - [ ] Layout uses `.aj-container` + `.aj-grid` / `.aj-stack`. - [ ] Exactly one filled primary button per view; others tonal/outline/text. - [ ] Inputs have labels; focus states intact; contrast >= AA. - [ ] Roboto only. No em-dashes, no emojis. - [ ] Responsive: verified at mobile width (grids collapse). --- ## Versioning This file and the stylesheet are versioned together. Breaking changes bump the major (`2.0.0`); a new version is published alongside old ones, which stay frozen. Pin to a version in long-lived projects: `https://design.adityajoshi.online/ai/DESIGN-SKILL.1.0.0.md`.