---
version: alpha
name: No Good Studio
description: Open-source design studio with a printer's sensibility — warm cream canvas, near-black ink, and a single acid-lime highlight. Untitled Sans grotesque for reading, Offbit pixel-display for headlines. Square 2px corners, hairline ink borders, focus rings glowing lime.
colors:
  # Canvas + ink
  background: "#fbfaf3"      # --primary-light (cream paper)
  surface: "#fbfaf3"
  surface-alt: "#f4f1e7"     # --bgColor-alt: muted over cream, flattened
  ink: "#1c1c1c"             # --primary-dark
  ink-alt: "#2c2c2c"         # --primary-dark-alt
  ink-secondary: "#515a63"   # --medium
  ink-muted: "#677483"       # --primary-dark-hover / link hover

  # Signature highlight
  highlight: "#d8ff7c"       # --highlight (acid lime)
  highlight-hover: "#adcf5b" # --highlight-hover / badge active

  # Secondary accents
  process: "#fdeb65"         # --process (printer yellow)
  radio: "#e94736"           # --radio (vermillion red)

  # Neutrals / warm grays
  muted: "#e9e5db"           # --muted (warm border tint)
  muted-hover: "#c9c3b1"     # --muted-hover
  offwhite: "#f4f1ed"        # --offwhite: muted 0.5 over cream
  border-line: "#1c1c1c"     # --border (hairline ink rule)
  border-faint: "#d8d6cf"    # rgba(28,28,28,.15) over cream
  border-input: "#c5c2b8"    # rgba(28,28,28,.3) over cream

  # Status
  success: "#2d8049"         # hsl(144,50%,35%)
  error: "#b14033"           # hsl(6,55%,45%)

  # On-color
  on-ink: "#fbfaf3"          # cream text on dark
  on-highlight: "#1c1c1c"    # ink text on lime
  on-process: "#1c1c1c"
  on-radio: "#fbfaf3"

typography:
  display-hero:
    fontFamily: "Offbit, 'Space Mono', monospace"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 0px
  display:
    fontFamily: "Offbit, 'Space Mono', monospace"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: 0px
  heading:
    fontFamily: "Offbit, 'Space Mono', monospace"
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0px
  sub-heading:
    fontFamily: "UntitledSans-Bold, Arial, Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0px
  card-title:
    fontFamily: "UntitledSans-Bold, Arial, Helvetica, sans-serif"
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.30
    letterSpacing: 0px
  body-large:
    fontFamily: "UntitledSans-Regular, Arial, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "UntitledSans-Regular, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-bold:
    fontFamily: "UntitledSans-Bold, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.50
    letterSpacing: 0px
  body-small:
    fontFamily: "UntitledSans-Regular, Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  label:
    fontFamily: "Offbit, 'Space Mono', monospace"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: 0.5px
  caption:
    fontFamily: "UntitledSans-Regular, Arial, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  micro:
    fontFamily: "Offbit, 'Space Mono', monospace"
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 30px
  2xl: 48px
  3xl: 80px

rounded:
  none: 0px
  square: 2px
  pill: 999px
  full: 9999px

components:
  # Primary CTA — ink fill, lime on hover
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.square}"
    padding: 12px 24px
    borderColor: "{colors.ink}"
  button-primary-hover:
    backgroundColor: "{colors.highlight}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.square}"
    padding: 12px 24px
    borderColor: "{colors.highlight}"

  # Secondary — cream fill, ink hairline, inverts on hover
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.square}"
    padding: 12px 24px
    borderColor: "{colors.ink}"
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.square}"
    padding: 12px 24px
    borderColor: "{colors.ink}"

  # Badge — lime pill
  badge:
    backgroundColor: "{colors.highlight}"
    textColor: "{colors.ink}"
    typography: "{typography.micro}"
    rounded: "{rounded.square}"
    padding: 2px 8px
    borderColor: "{colors.highlight}"

  # Standard card — cream, faint hairline
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.square}"
    padding: 24px
    borderColor: "{colors.border-faint}"

  # Inverted dark card — links render lime
  card-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    rounded: "{rounded.square}"
    padding: 24px
    borderColor: "{colors.ink}"

  # Input — cream, ink hairline, lime focus ring
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.square}"
    padding: 10px 12px
    borderColor: "{colors.border-input}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.square}"
    borderColor: "{colors.ink}"

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

  # Link
  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
  link-hover:
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"

  # Avatar / round media
  avatar:
    backgroundColor: "{colors.muted}"
    rounded: "{rounded.full}"
    width: 40px
    height: 40px
    borderColor: "{colors.border-faint}"
---

# No Good Studio Design System

## Overview

No Good Studio looks like a print shop that learned to code. The canvas is warm cream paper (`{colors.background}`), not the usual white — a stationery off-white that signals craft, risograph posters, and gold screen prints rather than SaaS sterility. On top of that paper sits near-black ink (`{colors.ink}`), and exactly one loud color: an acid-lime highlight (`{colors.highlight}`) that does all the shouting. The result reads as editorial, open-source, and a little punk — bold and playful without ever feeling corporate.

The typographic system is a deliberate two-voice pairing. Headlines are set in **Offbit**, a pixel-grotesque display face that gives titles a low-res, terminal, zine-poster character — the studio's signature move. Everything you actually read is **Untitled Sans**, a clean Klim-style neo-grotesque that keeps body copy quiet and legible. The contrast between the chunky pixel headline and the calm sans body is the whole personality: tech-forward but hand-made.

Chrome is intentionally flat and square. Corners are a tight 2px (`{rounded.square}`) — barely rounded, more "cut paper" than "soft UI." Borders are hairline ink rules (`{colors.border-line}`) or faint warm-gray dividers (`{colors.border-faint}`), never heavy. Shadows are whisper-level (`0px 4px 16px rgba(28,28,28,0.08)`). Depth comes from the ink-on-cream contrast and the occasional fully-inverted dark block (`{colors.card-dark}`) where links flip to lime.

Interaction is where the lime earns its keep. The primary button is ink-filled and flips to lime on hover; secondary buttons invert ink↔cream. Every focusable element gets a 2px lime glow ring (`0px 0px 0px 2px {colors.highlight}`) — the accessibility and the brand are the same gesture. Two minor accents round it out: a printer yellow (`{colors.process}`) and a vermillion red (`{colors.radio}`) used for process/status flourishes and the live "radio" feature.

**Key Characteristics:**
- Warm cream paper canvas (`{colors.background}`) instead of white — print-shop warmth
- Single acid-lime highlight (`{colors.highlight}`) carrying all the emphasis and every focus ring
- Two-voice type: Offbit pixel-display headlines + Untitled Sans grotesque body
- Tight 2px square corners throughout — cut-paper, not soft-UI
- Hairline ink borders and whisper-level shadows; depth from contrast
- Hover inversions: primary ink→lime, secondary ink↔cream
- Fully-inverted dark blocks where links render lime
- Minor printer-yellow and vermillion accents for process/status

## Colors

### Canvas & Ink
- **Cream** (`{colors.background}`): Page and surface — the warm paper canvas.
- **Surface Alt** (`{colors.surface-alt}`): Muted cream for alternating sections, info blocks.
- **Ink** (`{colors.ink}`): Primary text, borders, dark fills. Near-black, slightly warm.
- **Ink Secondary** (`{colors.ink-secondary}`): Secondary copy, captions, disabled labels.
- **Ink Muted** (`{colors.ink-muted}`): Link hover, tertiary text.

### Signature Highlight
- **Acid Lime** (`{colors.highlight}`): The one loud color — badges, primary hover fill, focus rings, dark-block links.
- **Lime Hover** (`{colors.highlight-hover}`): Pressed/active lime, active badge.

### Secondary Accents
- **Printer Yellow** (`{colors.process}`): Process/step flourishes.
- **Vermillion** (`{colors.radio}`): The live "radio" feature, danger states.

### Neutrals
- **Muted** (`{colors.muted}`): Warm border tint, avatar fill, disabled surfaces.
- **Offwhite** (`{colors.offwhite}`): Subtle section tint.
- **Border Line** (`{colors.border-line}`): Hairline ink rule between sections and nav.
- **Border Faint** (`{colors.border-faint}`): Faint card/divider hairline.
- **Border Input** (`{colors.border-input}`): Input outline at rest.

### Status
- **Success** (`{colors.success}`) and **Error** (`{colors.error}`): Form and button feedback.

## Typography

### Font Family
- **Display**: `Offbit` — a pixel-grotesque face for headlines, labels, and uppercase technical voice. Google fallback: `Space Mono`, then `monospace`.
- **Text**: `Untitled Sans` (`UntitledSans-Regular` / `UntitledSans-Bold`) — neo-grotesque for all reading. Fallback: `Arial, Helvetica, sans-serif`.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | Offbit pixel hero — poster impact |
| `display` | Large section titles, Offbit |
| `heading` | Section headings, Offbit |
| `sub-heading` | Untitled Sans bold sub-sections |
| `card-title` | Project/shop card titles |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-bold` | Emphasized inline text |
| `body-small` | Compact UI text |
| `label` | Offbit uppercase buttons/labels |
| `caption` | Metadata, fine print |
| `micro` | Tiny Offbit badges |

### Principles
- **Two voices, strict roles**: Offbit pixel-display announces (headlines, labels, badges); Untitled Sans reads (everything else). Never set body copy in Offbit.
- **Pixel as identity**: The low-res Offbit face is the studio's signature — keep it for short, loud strings.
- **Quiet body**: Untitled Sans stays at neutral tracking and comfortable 1.55 line-height — let the headline carry character.
- **Labels uppercase-ish in Offbit**: Buttons and nav use the Offbit `label` token for a terminal/zine feel.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. The studio's signature section gap is 80px (`{spacing.3xl}`) on desktop, tightening to 30px (`{spacing.xl}`) inside denser blocks.

### Grid & Container
- Generous max content width with wide outer margins
- Card grids for shop items and project showcases (2–3 columns)
- Full-width 1px solid `{colors.border-line}` ink rules separating major sections
- Hero: single column with oversized Offbit headline

### Whitespace Philosophy
- **Paper margins**: Treat the cream like a printed page — wide, calm margins around dense content.
- **Rules, not boxes**: Sections are separated by hairline ink rules rather than background shifts.
- **Inversion for impact**: A fully dark (`{colors.ink}`) block occasionally interrupts the cream for emphasis; links inside flip to lime.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Default — text on cream |
| Hairline | `1px solid {colors.border-faint}` | Cards, dividers |
| Ink rule | `1px solid {colors.border-line}` | Section + nav separation |
| Soft | `0px 4px 16px rgba(28,28,28,0.08)` | Raised cards, popovers |
| Tooltip | `0px 4px 12px rgba(28,28,28,0.12)` | Tooltips |
| Focus | `0px 0px 0px 2px {colors.highlight}` | Every focusable element |

**Shadow Philosophy**: Almost none. The system is built on contrast (ink on cream) and hairlines, not elevation. The only consistently "glowing" element is the lime focus ring, which doubles as the brand's interaction signature.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Hard edges, image blocks |
| `square` | 2px | Buttons, cards, inputs, badges — the default |
| `pill` | 999px | Occasional pill tags |
| `full` | 9999px | Avatars, round media, dot indicators |

## Components

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

### Buttons
- **`button-primary`** — Ink fill, cream text, 2px corners. Hovers to lime fill with ink text.
- **`button-secondary`** — Cream fill with ink hairline; inverts to ink-on-cream→cream-on-ink on hover.
- Both gain a 2px lime focus ring.

### Badges
- **`badge`** — Lime fill, ink text, Offbit micro label, square corners.

### Cards
- **`card`** — Cream, faint hairline border, 24px padding.
- **`card-dark`** — Inverted ink block; links inside render lime.

### Inputs
- **`input`** — Cream surface, ink-30% hairline at rest, ink border + 2px lime ring on focus. Lime fill on checked checkboxes/radios.

### Navigation
- **`nav-bar`** — Cream header, Offbit labels, bottom ink rule.

### Distinctive Components
- **Live Radio / Zap feed**: Vermillion (`{colors.radio}`) accent block with a Nostr "zap" chat feed; first message highlighted lime.
- **Shop cards**: Print-product cards (screen prints, monograph) on cream with hairline borders.

## Do's and Don'ts

### Do
- Use cream (`{colors.background}`) as the canvas — never plain white
- Reserve lime (`{colors.highlight}`) for emphasis, hover fills, badges, and focus rings
- Set headlines and labels in Offbit; body in Untitled Sans
- Keep corners at 2px (`{rounded.square}`)
- Separate sections with hairline ink rules, not background color
- Invert to a dark block for emphasis and let links flip to lime
- Give every focusable element the 2px lime focus ring

### Don't
- Don't set body copy in the Offbit pixel font — it's display-only
- Don't introduce a second loud accent alongside lime in chrome
- Don't use heavy shadows — the system is hairline-and-contrast
- Don't round corners past 2px on UI chrome (avatars excepted)
- Don't use pure white surfaces — keep the warm cream
- Don't drop the lime focus ring — it's both a11y and brand

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, 30px gaps, hamburger nav |
| Tablet | 600–1024px | 2-column card grids |
| Desktop | 1024–1400px | Full layout, 80px section gaps |
| Large | >1400px | Centered with wide paper margins |

### Touch Targets
- Buttons use 12px×24px padding for comfortable taps
- Nav collapses to a toggle on mobile
- Inputs at 10px×12px padding with generous tap area

### Collapsing Strategy
- Offbit hero scales down but stays oversized relative to body
- Card grids: 3 → 2 → 1 column
- Section gap: 80px → 30px on mobile
- Ink rules persist at all sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Cream `{colors.background}`
- Heading/body text: Ink `{colors.ink}`
- Emphasis / hover / focus: Acid Lime `{colors.highlight}`
- Secondary text: `{colors.ink-secondary}`
- Border (section): `1px solid {colors.border-line}`
- Border (card): `1px solid {colors.border-faint}`
- Focus ring: `0px 0px 0px 2px {colors.highlight}`

### Example Component Prompts
- "Create a hero on cream `{colors.background}`. Headline in Offbit (fallback Space Mono) at 64px weight 700, color `{colors.ink}`. Body in Untitled Sans 18px weight 400, `{colors.ink}`. Primary button: ink fill `{colors.ink}`, cream text, 2px corners, hover to lime fill `{colors.highlight}` with ink text."
- "Design a card: cream background, 1px `{colors.border-faint}` border, 2px corners, 24px padding. Title in Untitled Sans bold 19px `{colors.ink}`, body 16px `{colors.ink-secondary}`."
- "Build a lime badge: `{colors.highlight}` fill, `{colors.ink}` text, Offbit 10px weight 700, 2px corners, 2px 8px padding."
- "Create an input: cream surface, 1px `{colors.border-input}` border, 2px corners; on focus, ink border plus `0px 0px 0px 2px {colors.highlight}` ring."
- "Make a dark interrupt block: `{colors.ink}` background, cream `{colors.on-ink}` text, links render `{colors.highlight}`."

### Iteration Guide
1. Cream canvas, never white — warmth is the brand
2. One loud color only: lime, for emphasis + every focus ring
3. Offbit announces, Untitled Sans reads
4. 2px square corners everywhere except round avatars
5. Separate with hairline rules; invert to dark for impact
6. Shadows stay whisper-level — lean on contrast

---

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