---
version: alpha
name: Obys
description: Award-show maximalism in monochrome — an off-black gallery canvas with stark white ink, a single acid lime-green accent, oversized editorial display type set tight, generous negative space, and the grainy, cursor-driven kineticism of a Webby/Awwwards creative studio.

colors:
  # Canvas + ink
  background: "#0e0e0e"
  surface: "#161616"
  surface-soft: "#1d1d1d"
  ink: "#f2f0eb"
  ink-pure: "#ffffff"
  ink-secondary: "#9a9a96"
  ink-muted: "#6b6b67"

  # Signature accent — acid lime
  primary: "#d8fd58"
  accent-hover: "#c4ea3f"

  # Functional
  link: "#f2f0eb"
  link-hover: "#d8fd58"
  focus: "#d8fd58"

  # Neutral scale (cool warm-grays over the off-black canvas)
  gray-100: "#e4e2dd"
  gray-300: "#9a9a96"
  gray-500: "#6b6b67"
  gray-700: "#3a3a38"
  gray-800: "#262625"
  gray-900: "#161616"

  # Borders / dividers (flattened low-alpha lines over the canvas)
  border: "#2a2a28"
  border-strong: "#3a3a38"

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

typography:
  display-hero:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 120px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -2px
  display:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1px
  editorial-serif:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.4px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 1.5px
  index-number:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.5px

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

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
  button-primary-hover:
    backgroundColor: "{colors.accent-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
    borderColor: "{colors.border-strong}"
  button-outline-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
    borderColor: "{colors.ink}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
    borderColor: "{colors.border}"

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

  card-project:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 0px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    padding: 24px 40px

  index-marker:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.index-number}"

  tag-service:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
    borderColor: "{colors.border}"
---

# Obys Design System

## Overview

Obys is a creative studio whose website behaves like an award show staged in a black box theater. The canvas is a near-black off-black (`{colors.background}`) — warmer and softer than pure `#000` — and the ink is a barely-warm off-white (`{colors.ink}`) rather than clinical white. Against that monochrome stage, a single acid lime-green (`{colors.primary}`) does all the talking: it is the cursor halo, the hover state, the one button fill, the moment of color in an otherwise grayscale composition. The restraint is the flex — one accent, used sparingly, reads louder than a rainbow.

Typography is the loudest instrument. Oversized condensed display type (`{typography.display-hero}` at 120px) is set tight and stacked into headlines that fill the viewport, occasionally answered by a contrasting high-contrast serif (`{typography.editorial-serif}`) for editorial cadence. Body copy drops to a quiet neutral sans, and technical metadata — project indices, category tags, navigation — runs in a wide-tracked monospace (`{typography.label-mono}`) that gives the page its "studio reel" voice. The type pairing (heavy display / clean sans / mono labels) is the structural backbone.

What separates Obys from generic dark portfolios is kineticism and texture. A subtle film grain sits over the canvas, custom cursors expand and magnetize toward interactive elements, images reveal with masked scroll transitions, and everything moves with eased, deliberate timing. The layout itself is gallery-spare: enormous negative space (`{spacing.4xl}` rhythm), numbered project entries, and dividers that are 1px hairlines rather than boxes. Color is functional and scarce; motion and scale carry the personality.

**Key Characteristics:**
- Off-black canvas (`{colors.background}`) with warm off-white ink (`{colors.ink}`) — never pure black/white
- One scarce acid-lime accent (`{colors.primary}`) for cursor, hover, and the single CTA
- Oversized condensed display type set tight, paired with a high-contrast serif and a wide-tracked mono
- Wide letter-spacing on mono labels (project indices, tags, nav) — the "studio reel" voice
- Film grain texture, custom magnetic cursor, masked scroll-reveal motion
- Gallery negative space and 1px hairline dividers instead of cards/boxes
- Numbered project entries (01–19) in monospace

## Colors

### Canvas & Ink
- **Off-Black** (`{colors.background}`): The stage. Warmer and softer than pure black.
- **Surface** (`{colors.surface}`): Raised cards, panels — one step off the canvas.
- **Off-White Ink** (`{colors.ink}`): Primary text and headlines. A warm near-white, not `#fff`.
- **Pure White** (`{colors.ink-pure}`): Reserved for maximum-contrast moments.
- **Secondary Ink** (`{colors.ink-secondary}`): Captions, metadata, muted labels.
- **Muted Ink** (`{colors.ink-muted}`): Disabled / lowest-priority text.

### Accent
- **Acid Lime** (`{colors.primary}`): The single brand color — cursor halo, hover state, the one button fill. Used scarcely.
- **Lime Hover** (`{colors.accent-hover}`): Pressed/hover variant of the accent.

### Neutral Scale
- **Gray 100** (`{colors.gray-100}`): Brightest neutral, near-ink.
- **Gray 300** (`{colors.gray-300}`): Secondary text.
- **Gray 500** (`{colors.gray-500}`): Muted metadata.
- **Gray 700** (`{colors.gray-700}`): Strong dividers, outlines.
- **Gray 800 / 900** (`{colors.gray-800}` / `{colors.gray-900}`): Surface tints over the canvas.

### Borders
- **Border** (`{colors.border}`): Hairline dividers and card outlines.
- **Border Strong** (`{colors.border-strong}`): Higher-contrast outlines, input underlines.

## Typography

### Font Family
- **Display**: `Anton` (condensed grotesque), fallback `Arial Narrow, sans-serif` — the oversized headline voice.
- **Editorial**: `Fraunces` (high-contrast serif), fallback `Georgia, serif` — contrast cadence.
- **Body / UI**: `Inter`, fallback `Helvetica, Arial, sans-serif`.
- **Labels**: `Space Mono`, fallback `ui-monospace, Menlo, monospace` — wide-tracked technical metadata.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 120px viewport-filling hero headlines |
| `display` | 80px section openers |
| `section-heading` | 56px feature titles |
| `editorial-serif` | High-contrast serif pull-quotes / editorial lines |
| `card-title` | Project / card titles |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-small` | Captions, secondary copy |
| `button-ui` | Buttons, links |
| `label-mono` | Wide-tracked mono labels, tags, nav |
| `index-number` | Numbered project indices |

### Principles
- **Scale as drama**: display type fills the viewport; the jump from body to display is intentional and steep.
- **Three voices**: condensed display (announce), clean sans (read), wide-tracked mono (label). Each has a strict role.
- **Tight display, wide mono**: headlines tighten (negative tracking); mono labels open up (+1.5px) — opposite ends of the spectrum.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is generous — section gaps run `{spacing.3xl}`–`{spacing.4xl}`. White space is a primary material.

### Grid & Container
- Full-bleed hero with edge margins at `{spacing.xl}`
- Project list: numbered entries separated by 1px hairlines
- Asymmetric, editorial grids rather than rigid columns

### Whitespace Philosophy
- **Gallery emptiness**: Massive vertical padding isolates each block.
- **Hairline separation**: Sections divide with 1px `{colors.border}` lines, not boxes or fills.
- **Scarcity of color**: The canvas stays monochrome so the single accent and the imagery carry impact.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, on `{colors.background}` | Page background, text blocks |
| Surface (Level 1) | `{colors.surface}` fill, 1px `{colors.border}` | Cards, panels |
| Hairline (Level 1b) | 1px `{colors.border}` divider | Section / list separation |
| Focus (Accessibility) | 2px `{colors.primary}` outline | Keyboard focus on interactive elements |

**Depth Philosophy**: Obys avoids drop shadows almost entirely — depth comes from surface tint steps over the off-black canvas and from motion (parallax, scroll-reveal masks), not from elevation shadows.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Inputs, image edges, hard-edged blocks |
| `xs` | 2px | Tiny chips |
| `sm` | 4px | Small containers |
| `md` | 8px | Project cards, media |
| `lg` | 16px | Panels, feature cards |
| `pill` | 9999px | Buttons, tags, badges |

## Components

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

### Buttons
- **`button-primary`** — Acid-lime fill, off-black text, pill radius. The single loud CTA.
- **`button-outline`** — Transparent on canvas with a strong hairline border; inverts to ink-fill on hover.

### Pills & Tags
- **`badge` / `tag-service`** — Mono label, surface or transparent fill, hairline border, pill radius. Used for categories and services.

### Cards
- **`card`** — Surface fill one step off the canvas, hairline border, 16px radius.
- **`card-project`** — Edge-to-edge media block; metadata (index + title + tags) sits below in mono.

### Inputs
- **`input`** — Underline-only (0px radius), transparent fill, strong hairline. Focus turns the underline acid-lime.

### Navigation
- **`nav-bar`** — Transparent over the canvas, wide-tracked mono links, generous edge padding.

### Distinctive Components
- **Index Marker** — Monospace `01`–`19` numbering before each project entry.
- **Magnetic Cursor** — Custom cursor with an acid-lime halo that expands and pulls toward interactive elements (behavioral, not a static token).

## Do's and Don'ts

### Do
- Keep the canvas off-black (`{colors.background}`) and ink off-white (`{colors.ink}`) — avoid pure `#000`/`#fff`
- Use the acid lime (`{colors.primary}`) scarcely — cursor, hover, one CTA
- Set display type oversized and tight; open mono labels wide
- Separate sections with 1px hairlines and big negative space
- Number project entries in monospace
- Lean on motion and grain for personality, not shadows

### Don't
- Don't introduce a second accent color — the lime is the whole palette's voice
- Don't use heavy drop shadows — depth is surface-tint + motion
- Don't box everything in cards — hairlines and whitespace do the dividing
- Don't tighten the mono labels — they read wide on purpose
- Don't fill the page with the accent — scarcity is the point

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, display type scales way down, nav collapses |
| Tablet | 600–1024px | Two-up project grids, reduced section padding |
| Desktop | 1024–1440px | Full editorial layout, asymmetric grids |
| Large Desktop | >1440px | Centered, maximum negative space, full display scale |

### Touch Targets
- Buttons use generous padding (16px vertical)
- Custom cursor disabled on touch; tap states use the accent
- Mono nav links spaced for tap comfort

### Collapsing Strategy
- Hero display: 120px → ~48px on mobile, tracking proportional
- Project list: maintains numbered hairline rows at all sizes
- Navigation: mono links → full-screen overlay menu
- Section spacing: `{spacing.4xl}` → `{spacing.2xl}` on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Off-Black `{colors.background}`
- Heading text: Off-White `{colors.ink}`
- Body text: Secondary `{colors.ink-secondary}`
- Accent / CTA: Acid Lime `{colors.primary}`
- Divider: 1px `{colors.border}`
- Focus ring: Acid Lime `{colors.primary}`

### Example Component Prompts
- "Create a hero on off-black `{colors.background}`. Headline in Anton 120px, line-height 0.92, letter-spacing -2px, color `{colors.ink}`. Below it a mono kicker (Space Mono 12px, letter-spacing 1.5px, `{colors.ink-secondary}`). One acid-lime pill CTA (`{colors.primary}` fill, off-black text, 9999px radius, 16px 32px padding)."
- "Build a numbered project row: mono index `01` (`{colors.ink-secondary}`), Anton 28px title (`{colors.ink}`), and service tags as transparent pill chips with hairline `{colors.border}` and mono labels. Separate rows with a 1px `{colors.border}` line."
- "Design an underline input: transparent fill, no radius, 1px `{colors.border-strong}` bottom border, body text `{colors.ink}`. On focus, turn the underline `{colors.primary}`."

### Iteration Guide
1. Keep it monochrome — the acid lime is the only color, used scarcely
2. Off-black not pure black; off-white not pure white
3. Display type oversized + tight; mono labels small + wide-tracked
4. Dividers are 1px hairlines, never boxes; whitespace does the separating
5. Depth comes from surface-tint steps and motion, not drop shadows

---

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