---
version: alpha
name: Balky Studio
description: Award-winning creative-dev energy — near-black canvas, oversized tight-tracked display type, and a single electric lime-green accent that does all the heavy lifting. Bold, playful, motion-forward minimalism where one acid color and big type carry the whole identity.

colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#121212"
  surface-soft: "#1a1a1a"
  ink: "#f5f5f5"
  ink-secondary: "#a3a3a3"
  ink-muted: "#6b6b6b"

  # Signature accent — electric lime
  primary: "#c6f432"
  primary-hover: "#d4f95a"
  accent-deep: "#a4d810"

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

  # Neutral scale
  gray-900: "#0a0a0a"
  gray-800: "#1a1a1a"
  gray-700: "#262626"
  gray-500: "#6b6b6b"
  gray-300: "#a3a3a3"
  gray-100: "#e5e5e5"

  # Borders + dividers
  border: "#262626"
  border-soft: "#1a1a1a"

typography:
  display-hero:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 88px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -3.5px
  display-large:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: -2.5px
  section-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.8px
  sub-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1.0px
  card-title:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.2px
  body:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  label-mono:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1.5px

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

rounded:
  none: 0px
  sm: 6px
  md: 12px
  lg: 20px
  xl: 32px
  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.primary-hover}"
    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.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.gray-700}"
  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.xl}"
    padding: 24px
    borderColor: "{colors.border-soft}"
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
    borderColor: "{colors.border}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.border-soft}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 14px 18px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"
---

# Balky Studio Design System

## Overview

Balky Studio is an independent creative-development studio, and its site reads like a manifesto for "pure digital originality" — a near-black stage (`{colors.background}`) where almost nothing competes for attention except oversized type and a single, deliberately abrasive accent. The aesthetic is bold and playful without being noisy: the restraint of a one-color palette is exactly what lets the work, the motion, and the typography feel loud. This is the award-site playbook (Awwwards / FWA energy) distilled to its essentials.

The typographic move is the identity. Display headings run enormous — up to ~88px — with aggressive negative tracking (`-3.5px` at hero scale) and a sub-1.0 line-height, so multi-line headlines lock together into a dense, sculptural block. Set in a geometric grotesk (here mapped to Space Grotesk, the closest Google equivalent to the quirky, slightly mechanical display faces studios like Balky favor), the type feels engineered and a little weird in the best way. Body copy relaxes the tracking and opens line-height for readability against the dark canvas.

The whole system pivots on one electric lime-green (`{colors.primary}`, ~#c6f432). It is the entire color story: CTAs, active states, links, badges, and the occasional oversized graphic accent. Against the black, this acid green vibrates. Because it carries so much weight, it is used surgically — never as a fill for large surfaces, only as a signal. Surfaces step up in near-black tints (`{colors.surface}`, `{colors.surface-soft}`), and borders stay whisper-quiet (`{colors.border}`) so cards read as subtle planes rather than outlined boxes.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with off-white ink (`{colors.ink}`) — never pure black/white, micro-softness
- Single electric lime accent (`{colors.primary}`) carrying CTAs, links, and active states only
- Oversized display type (up to 88px) with aggressive negative tracking (-3.5px) and sub-1.0 line-height
- Geometric grotesk for everything — display and body share one family
- Pill-shaped buttons; large rounded radii on project cards
- Quiet near-black surface steps for depth instead of heavy borders or shadows
- Uppercase letter-spaced micro-labels (`{typography.label-mono}`) for meta/eyebrow text
- Motion-forward minimalism: stillness on the page, energy in the interaction

## Colors

### Canvas & Ink
- **Canvas Black** (`{colors.background}`): The page stage. Near-black, not pure — slightly warm depth.
- **Surface** (`{colors.surface}`): Card and panel backgrounds, one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Project tiles, hover surfaces, deeper panels.
- **Ink** (`{colors.ink}`): Primary text and headings — off-white for comfortable contrast.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting body copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, disabled text, fine print.

### Signature Accent
- **Electric Lime** (`{colors.primary}`): The entire brand. CTAs, links, active states, accent graphics. Used surgically.
- **Lime Hover** (`{colors.primary-hover}`): Brighter hover state on the accent.
- **Accent Deep** (`{colors.accent-deep}`): A deeper lime for pressed states or layering.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Canvas-equivalent black.
- **Gray 800 / 700** (`{colors.gray-800}` / `{colors.gray-700}`): Surface steps and stronger borders.
- **Gray 500** (`{colors.gray-500}`): Muted text.
- **Gray 300** (`{colors.gray-300}`): Secondary text.
- **Gray 100** (`{colors.gray-100}`): High-contrast light text where needed.

### Borders
- **Border** (`{colors.border}`): Card and divider lines — barely-there against the canvas.
- **Border Soft** (`{colors.border-soft}`): The quietest separation, near-invisible.

## Typography

### Font Family
- **Primary**: `Space Grotesk`, with fallbacks: `Arial, sans-serif` — a geometric grotesk standing in for Balky's quirky display face. One family across display and body.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 88px hero — sculptural, multi-line, maximum compression |
| `display-large` | 64px section openers |
| `section-heading` | 48px feature titles |
| `sub-heading` | 32px sub-sections |
| `card-title` | Project / card headings |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Fine print, meta |
| `button-ui` | Buttons, nav links |
| `label-mono` | Uppercase letter-spaced eyebrows / meta labels |

### Principles
- **Compression as identity**: Display type uses extreme negative tracking (-3.5px at hero) and sub-1.0 line-height so headlines read as dense blocks.
- **One family, two voices**: The same grotesk announces (700/600, tight) and reads (400, relaxed tracking).
- **Uppercase micro-labels**: Eyebrow and meta text use +1.5px positive tracking — the only place positive tracking appears.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, jumping fast to large gaps (`{spacing.3xl}`–`{spacing.4xl}`) for the gallery-like vertical rhythm.

### Grid & Container
- Generous max content width with wide outer margins
- Hero: oversized headline, often left-aligned, with massive top padding
- Project work: large rounded tiles in a 1–2 column rhythm
- Sections separated by whitespace, not dividers

### Whitespace Philosophy
- **Stage emptiness**: The black canvas is the design; type and accent are the only actors.
- **Big jumps**: Spacing scale leaps to 96px–160px between major sections.
- **Energy in motion**: The page is still and spacious; interaction (hover, scroll, reveal) carries the playfulness.

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Electric lime fill, black text, full pill. The signature CTA.
- **`button-secondary`** — Dark surface, off-white text, quiet border, full pill.

### Cards
- **`card`** — Surface step above canvas, large radius (`{rounded.lg}`), whisper-quiet border.
- **`card-project`** — Larger radius (`{rounded.xl}`) work tiles on the softest surface.

### Badges & Labels
- **`badge`** — Dark pill with lime text and a quiet border for tags/status.

### Inputs
- **`input`** — Dark surface, off-white text. Focus swaps the border to electric lime (`{colors.primary}`).

### Navigation
- **`nav-bar`** — Black header, off-white links, lime accent on the active/CTA item.

## Do's and Don'ts

### Do
- Keep the canvas near-black (`{colors.background}`) and ink off-white (`{colors.ink}`)
- Let the lime accent (`{colors.primary}`) carry CTAs, links, and active states — and nothing more
- Push display type huge with aggressive negative tracking and sub-1.0 line-height
- Use one grotesk family for everything
- Build depth from near-black surface steps, not heavy shadows
- Use pill buttons and large rounded radii on work tiles

### Don't
- Don't fill large surfaces with the lime accent — it's a signal, not a field
- Don't introduce a second bright accent color
- Don't use pure black (#000) or pure white (#fff)
- Don't add positive tracking to body or display type (only uppercase micro-labels)
- Don't outline cards with loud borders — keep separation quiet
- Don't crowd sections; the whitespace is the point

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down but keeps tight tracking |
| Tablet | 600–1024px | Project tiles begin 2-up, padding expands |
| Desktop | 1024–1440px | Full layout, oversized display type |
| Large Desktop | >1440px | Centered with generous outer margins |

### Collapsing Strategy
- Hero: 88px → scales down proportionally, negative tracking preserved
- Navigation: links → minimal menu toggle
- Project tiles: 2-column → single column, radius preserved
- Section spacing: 160px → ~64px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Near-black `{colors.background}`
- Heading / body ink: Off-white `{colors.ink}`
- Accent / CTA: Electric lime `{colors.primary}`
- Surfaces: `{colors.surface}` / `{colors.surface-soft}`
- Borders: `{colors.border}` (quiet)

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline at 88px Space Grotesk weight 700, line-height 0.95, letter-spacing -3.5px, color `{colors.ink}`. Lime pill CTA (`{colors.primary}` fill, black text, 9999px radius, 14px 28px padding)."
- "Design a project tile: `{colors.surface-soft}` background, `{rounded.xl}` radius, quiet `{colors.border-soft}` border, 24px padding. Title at 24px Space Grotesk weight 600, letter-spacing -0.5px."
- "Build an eyebrow label: uppercase, 12px Space Grotesk weight 500, letter-spacing +1.5px, color `{colors.primary}`."

### Iteration Guide
1. Black canvas + off-white ink + one lime accent — that's the whole system
2. Letter-spacing scales with size: -3.5px at 88px, -1.8px at 48px, ~0 at body
3. The lime is a signal: CTAs, links, active states only — never a large fill
4. Depth comes from near-black surface steps, not shadows
5. Pill buttons; large rounded radii on work tiles

---

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