---
version: alpha
name: Kala
description: Bold dark-mode studio aesthetic — near-black canvas with bright-white display type, a single warm signal accent, geometric directional arrows, sharp-to-soft radii, and gallery-grade whitespace for a premium web-design agency.

colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#141414"
  surface-soft: "#1c1c1c"
  ink: "#ffffff"
  ink-secondary: "#a3a3a3"
  ink-muted: "#6b6b6b"

  # Accent — single warm signal
  primary: "#e8e0d4"
  accent-warm: "#d8b48a"

  # Lines + chrome
  border: "#262626"
  border-soft: "#1f1f1f"

  # On-color
  on-primary: "#0a0a0a"
  on-ink: "#0a0a0a"

  # States
  hover-surface: "#222222"
  focus-ring: "#d8b48a"

typography:
  display-hero:
    fontFamily: "Sora, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -2.16px
  display:
    fontFamily: "Sora, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.68px
  section-heading:
    fontFamily: "Sora, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1.2px
  card-title:
    fontFamily: "Sora, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.48px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.5px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

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

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.accent-warm}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.hover-surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"
  card-project:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 0px
    borderColor: "{colors.border-soft}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 14px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.border-soft}"
---

# Kala Design System

## Overview

Kala is a web design and development studio, and its own site is the portfolio piece — a dark-mode showcase built to feel premium, kinetic, and confident. The canvas is a deep near-black (`{colors.background}`) that lets bright-white display type (`{colors.ink}`) and full-bleed project imagery do the talking. This is the agency-reel aesthetic: gallery emptiness, oversized headlines, and WebGL-driven motion that makes the page feel alive rather than static.

Typography carries the brand. Display headlines run large and tight — 72px with negative tracking — so the hero reads as a statement, not a label. A geometric grotesque (mapped here to Sora) handles all display and heading work; a neutral humanist sans (Inter) handles body copy for readability against the dark canvas. A monospace voice (Space Mono) appears in small uppercase-leaning labels and section markers, lending the technical, build-credible tone agencies use to signal craft.

Color is deliberately restrained. Rather than a saturated brand hue, Kala leans on a single warm, near-neutral signal accent (`{colors.primary}` / `{colors.accent-warm}`) — the warm putty/sand tone that reads as expensive against black. CTAs use this warm fill with dark text; everything else is achromatic. Depth comes from a tight ladder of dark surfaces (`{colors.surface}` → `{colors.surface-soft}`) and thin low-contrast borders (`{colors.border}`), never from heavy shadow.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with bright-white display type
- Oversized, tightly-tracked display headlines (72px, -2.16px tracking)
- Single warm putty/sand accent (`{colors.primary}`) on an otherwise achromatic palette
- Geometric grotesque for display, humanist sans for body, mono for technical labels
- Thin low-contrast dark borders instead of shadows for elevation
- Geometric directional-arrow motifs as interactive accents
- Gallery-grade whitespace and full-bleed project imagery

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Near-black page canvas.
- **Surface** (`{colors.surface}`): Card and panel surface, one step off the canvas.
- **Surface Soft** (`{colors.surface-soft}`): Nested / project-tile surface.
- **Ink** (`{colors.ink}`): Primary text, display headlines — bright white.
- **Ink Secondary** (`{colors.ink-secondary}`): Body and supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled text.

### Accent
- **Primary** (`{colors.primary}`): Warm putty/sand signal color for CTAs and emphasis.
- **Accent Warm** (`{colors.accent-warm}`): Deeper warm tone for hover/active states.

### Lines & Chrome
- **Border** (`{colors.border}`): Card and input outlines.
- **Border Soft** (`{colors.border-soft}`): Subtle section dividers, nav underline.

## Typography

### Font Family
- **Display / Headings**: `Sora`, with fallbacks `Arial, sans-serif` — geometric grotesque for impact.
- **Body / UI**: `Inter`, with fallbacks `Arial, sans-serif`.
- **Mono / Labels**: `Space Mono`, with fallbacks `ui-monospace, Menlo, monospace`.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 72px hero statement |
| `display` | Large feature headlines |
| `section-heading` | Section titles |
| `card-title` | Project / feature card titles |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-medium` | Emphasized body, nav |
| `button-ui` | Buttons and links |
| `label-mono` | Technical labels, section markers |
| `caption` | Metadata, fine print |

### Principles
- **Display compression**: headlines run large with negative tracking (-2.16px at 72px) for a confident, engineered feel.
- **Two-family contrast**: geometric grotesque for display vs humanist sans for body keeps long copy readable on dark.
- **Mono as signal**: Space Mono labels mark sections and add build-credible texture without color.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.3xl}`, `{spacing.4xl}`) reserved for the wide vertical rhythm between sections.

### Grid & Container
- Max content width approximately 1280px, generous side gutters.
- Hero: full-width single column, oversized headline, arrow CTA.
- Project grid: 2-column full-bleed image tiles, collapsing to single column.

### Whitespace Philosophy
- **Gallery emptiness**: large vertical padding (`{spacing.3xl}`–`{spacing.4xl}`) between sections; imagery and headlines breathe.
- **Dark calm**: depth from layered dark surfaces and thin borders, never heavy shadow.

## Components

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

### Buttons
- **`button-primary`** — warm putty fill (`{colors.primary}`), dark text, full pill. The signature CTA.
- **`button-secondary`** — dark surface with thin `{colors.border}` outline, white text.

### Cards
- **`card`** — dark surface, `{rounded.lg}`, thin border, generous padding.
- **`card-project`** — full-bleed project tile, image-forward, minimal padding.

### Inputs
- **`input`** — dark surface, thin border, warm focus ring (`{colors.focus-ring}`).

### Badges & Labels
- **`badge`** — pill on `{colors.surface-soft}` with mono label text.

### Navigation
- **`nav-bar`** — transparent-over-black header, white links, thin bottom divider.

## Do's and Don'ts

### Do
- Keep the canvas near-black and let white display type carry contrast.
- Use the single warm accent (`{colors.primary}`) sparingly — CTAs and emphasis only.
- Build elevation from layered dark surfaces and thin borders, not shadow.
- Run headlines large with negative tracking.
- Use mono labels to mark sections.

### Don't
- Don't introduce saturated brand hues into the chrome — the accent is warm-neutral.
- Don't use heavy drop shadows on the dark canvas.
- Don't set body copy in the display grotesque — use the humanist sans.
- Don't crowd sections; whitespace is the design.
- Don't put white text on the warm accent fill — accent fills take dark text.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, stacked tiles |
| Tablet | 600–1024px | 2-column project grid begins |
| Desktop | 1024–1280px | Full layout, max content width |
| Large | >1280px | Centered, generous margins |

### Collapsing Strategy
- Hero: 72px → scales down, maintains negative tracking proportionally.
- Project grid: 2-column → single column full-bleed.
- Navigation: inline links → hamburger menu.
- Section spacing: 96px+ → ~48px on mobile.

---

## Agent Prompt Guide

### Quick Color Reference
- Background: near-black `{colors.background}`
- Heading text: white `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Primary CTA: warm putty `{colors.primary}` with dark text
- Border: `{colors.border}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline 72px Sora weight 700, line-height 1.02, letter-spacing -2.16px, color `{colors.ink}`. Subtitle 20px Inter weight 400, `{colors.ink-secondary}`. Warm putty pill CTA (`{colors.primary}`, dark text, 9999px radius, 14px 28px padding)."
- "Design a project card: full-bleed image, `{colors.surface-soft}` base, 12px radius, thin `{colors.border-soft}`. Title 24px Sora weight 600. Mono label `{colors.ink-secondary}` above."
- "Build a mono section marker: Space Mono 13px, `{colors.ink-secondary}`, uppercase feel, paired with a 40px Sora section heading."

---

## 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 Kala. Brand names and trademarks belong to their respective owners.