---
version: 1.0.0
name: Obney.ai
description: AI-era greenfield software studio. Engineering clarity, human warmth.
canonical_tokens: colors_and_type.css
colors:
  # Brand core — almost every composition rests on midnight + ocean
  midnight: "#142C37"
  ocean: "#68E4E9"
  cream: "#F5F1EA"
  white: "#FFFFFF"
  # Accents — use ONE at a time, never stacked
  accent:
    green: "#95FFA6"
    orange: "#FFC2A7"
    pink: "#F5B0FF"
    yellow: "#F1FF73"
  # Midnight scale (the only neutral system — no separate gray)
  midnight-scale:
    "950": "#08141A"
    "900": "#0E1F28"
    "800": "#142C37" # brand midnight
    "700": "#1F3F4E"
    "600": "#2E5364"
    "500": "#466A7B"
    "400": "#6B8A98"
    "300": "#9CB1BB"
    "200": "#C8D4DA"
    "100": "#E6ECEF"
    "50": "#F4F7F8"
  ocean-scale:
    "700": "#1D9CA1"
    "600": "#2DBCC2"
    "500": "#4ED3D8"
    "400": "#68E4E9" # brand ocean
    "300": "#8FECEF"
    "200": "#B5F2F4"
    "100": "#DCF8F9"
    "50": "#EEFBFC"
  semantic:
    bg: "{colors.white}"
    bg-muted: "{colors.midnight-scale.50}"
    bg-inverse: "{colors.midnight-scale.800}"
    bg-card: "{colors.white}"
    bg-accent: "{colors.ocean-scale.100}"
    fg-1: "{colors.midnight-scale.800}"
    fg-2: "{colors.midnight-scale.600}"
    fg-3: "{colors.midnight-scale.400}"
    fg-on-dark: "{colors.white}"
    fg-link: "{colors.ocean-scale.700}"
    border: "{colors.midnight-scale.100}"
    border-strong: "{colors.midnight-scale.200}"
    border-focus: "{colors.ocean-scale.600}"
    accent: "{colors.ocean}"
    success: "#4FCC65"
    warning: "#E8A03A"
    danger: "#D9534F"
    info: "{colors.ocean-scale.700}"
typography:
  fontFamily:
    sans: "Figtree, ui-sans-serif, system-ui, -apple-system, sans-serif"
    mono: "IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    display: "Cal Sans, Figtree, system-ui, sans-serif" # display-only, >=48px
  fontSize:
    display-1: "96px"
    display-2: "72px"
    display-3: "56px"
    h1: "48px"
    h2: "36px"
    h3: "28px"
    h4: "22px"
    subheading-1: "20px"
    subheading-2: "16px"
    body-1: "18px"
    body-2: "16px"
    body-3: "14px"
    helper-1: "13px"
    helper-2: "12px"
  fontWeight:
    light: 300 # marketing only
    regular: 400
    medium: 500
    semibold: 600
    bold: 700
    extrabold: 800 # marketing only
    black: 900 # marketing only
  lineHeight:
    tight: 1.05
    snug: 1.18
    base: 1.45
    loose: 1.6
  letterSpacing:
    tight: "-0.02em"
    normal: "0"
    mono: "0.02em"
    eyebrow: "0.08em"
rounded:
  xs: "4px"
  sm: "8px" # inputs
  md: "12px" # cards
  lg: "16px" # cards
  xl: "24px"
  pill: "999px" # buttons + labels — non-negotiable
spacing:
  "1": "4px"
  "2": "8px"
  "3": "12px"
  "4": "16px"
  "5": "20px"
  "6": "24px"
  "8": "32px"
  "10": "40px"
  "12": "48px"
  "16": "64px"
  "20": "80px" # product section padding
  "24": "96px" # marketing section padding
elevation:
  shadow-xs: "0 1px 2px rgba(20,44,55,0.06)"
  shadow-sm: "0 2px 6px rgba(20,44,55,0.08)"
  shadow-md: "0 6px 16px rgba(20,44,55,0.10)"
  shadow-lg: "0 14px 36px rgba(20,44,55,0.14)"
  shadow-focus: "0 0 0 3px rgba(104,228,233,0.45)"
motion:
  ease-standard: "cubic-bezier(0.2,0.7,0.1,1)"
  ease-emphasized: "cubic-bezier(0.16,1,0.3,1)"
  duration-fast: "120ms"
  duration-base: "200ms"
  duration-slow: "360ms"
components:
  button:
    rounded: "{rounded.pill}"
    typography: "{typography.fontFamily.sans} {typography.fontWeight.semibold}"
    height: "44px" # md
    padding: "0 20px"
    variants:
      primary:
        {
          backgroundColor: "{colors.midnight-scale.800}",
          textColor: "{colors.white}",
        }
      accent:
        {
          backgroundColor: "{colors.ocean}",
          textColor: "{colors.midnight-scale.800}",
        }
      secondary:
        {
          backgroundColor: "{colors.white}",
          textColor: "{colors.semantic.fg-1}",
          border: "1px {colors.semantic.border-strong}",
        }
      ghost:
        {
          backgroundColor: "transparent",
          textColor: "{colors.semantic.fg-link}",
        }
  label:
    rounded: "{rounded.pill}"
    typography: "{typography.fontFamily.mono} uppercase {typography.letterSpacing.eyebrow}"
    padding: "2px 10px"
    note: "mono-caps pill; one accent at a time; optional status dot"
  card:
    backgroundColor: "{colors.white}"
    border: "1px {colors.semantic.border}"
    rounded: "{rounded.md}"
    padding: "24px"
    note: "inverse variant = midnight fill, no border (the signature dark card)"
  eyebrow:
    typography: "{typography.fontFamily.mono} uppercase {typography.letterSpacing.eyebrow}"
    textColor: "{colors.semantic.fg-3}"
    note: "the '— Section label' kicker before nearly every heading"
  input:
    backgroundColor: "{colors.white}"
    border: "1px {colors.semantic.border-strong}"
    rounded: "{rounded.sm}"
    note: "focus = border-focus + shadow-focus ring"
---

# Obney.ai — design.md

> **AI-era greenfield software studio. Engineering clarity, human warmth.**
> This file is the [DESIGN.md](https://github.com/google-labs-code/design.md) for Obney: machine-readable tokens above, the human rationale below. Coding agents and people both read this one file to build on-brand.
>
> Canonical token source: [`colors_and_type.css`](colors_and_type.css). Full bundle docs: [`README.md`](README.md). Agent Skill: [`SKILL.md`](SKILL.md). Source of truth: [`assets/Obney.ai-Brand-Guidelines.pdf`](assets/Obney.ai-Brand-Guidelines.pdf) (Feb 2026).

## Overview

Obney builds **greenfield software** for the AI era, with deliberate architecture up front so systems absorb new AI tooling without a rebuild. The brand carries two ideas at once:

- **Engineering clarity** — precise, legible, calm. Mono labels, exact numbers, crisp 1px edges, no decoration for its own sake.
- **Human warmth** — a cream/off-white ground (never cold), an approachable voice, soft cool-tinted shadows. Technical without being sterile.

The look is **flat fills + crisp borders + quiet motion**, built on a single color pairing (midnight + ocean) and a strict type system. The signature mark is the **brain-circuit** logo. There are **no gradients, no emoji, no textures** out of the box.

## Voice & Tone

Three rules (guidelines p.17):

1. **Approachable expert** — expert guidance with warmth and clarity; the reader feels _"I can do this too."_
2. **Tasteful and refined with personality** — language mirrors the quality of the work. **No emoji. Not overly casual.** Personality lives in the sharpness of ideas, not the punctuation.
3. **Uplifting rather than critical** — lead with possibility, not what's lacking.

How copy reads: **sentence-case headlines** (ALL-CAPS only on mono eyebrows); **first-person plural** ("we"); short and declarative (headlines 5–10 words); **specifics over hedging** ("eighteen months," not "a while"); names tradeoffs openly; long-game framing ("build it to last"). Avoid superlatives ("blazing-fast"), aggressive imperatives ("Crush your…"), and AI-buzzword stacking.

The five values underneath the voice: **our best at our expense · our word is a contract · partners not projects · outcomes not tasks · how not if.**

## Colors

**Primary pairing: Midnight `#142C37` + Ocean `#68E4E9`.** Almost every composition rests on it. **Cream `#F5F1EA`** (or `--midnight-50`) is the preferred light ground in marketing; pure **white** is for cards and inputs. The **Midnight scale is the only neutral** — no separate gray; page background through text all inherit from it.

| Role                      | Token                             | Value                             |
| ------------------------- | --------------------------------- | --------------------------------- |
| Ink / dark surface        | `--midnight-800`                  | `#142C37`                         |
| Signature accent          | `--color-ocean`                   | `#68E4E9`                         |
| Light ground (marketing)  | `--color-cream`                   | `#F5F1EA`                         |
| App ground / muted        | `--bg-muted` (`--midnight-50`)    | `#F4F7F8`                         |
| Cards / inputs            | `--bg-card`                       | `#FFFFFF`                         |
| Primary text              | `--fg-1`                          | `#142C37`                         |
| Secondary / tertiary text | `--fg-2` / `--fg-3`               | `#2E5364` / `#6B8A98`             |
| Link                      | `--fg-link`                       | `#1D9CA1` (ocean-700)             |
| Border / strong / focus   | `--border` / `-strong` / `-focus` | `#E6ECEF` / `#C8D4DA` / `#2DBCC2` |

**Accents** — `green #95FFA6 · orange #FFC2A7 · pink #F5B0FF · yellow #F1FF73`. Used **one at a time** as a category signal or tertiary logo color; **never stacked**. Full midnight/ocean/accent scales (50–950) live in `colors_and_type.css`. AA contrast holds on every approved pairing (`preview/color-combinations.html`).

## Typography

Three families (loaded by `colors_and_type.css`; Cal Sans self-hosted from `fonts/`):

| Family            | Role                            | Weights on product      | Notes                                                        |
| ----------------- | ------------------------------- | ----------------------- | ------------------------------------------------------------ |
| **Figtree**       | headings + body + UI            | Regular 400 → Bold 700  | Light/ExtraBold/Black = **marketing only**                   |
| **IBM Plex Mono** | eyebrows, labels, numbers, code | Regular 400, Medium 500 | uppercased + tracked `0.08em` as a label — a brand signature |
| **Cal Sans**      | display headers only            | Regular                 | hero / big marketing moments; never body, never `<48px`      |

Hierarchy: Display 1–3 (Cal Sans, 96/72/56) → H1–H4 (Figtree, 48/36/28/22) → Subheading 1/2 → Body 1–3 (18/16/14) → Helper 1/2. Headlines track tight (`-0.02em`); mono eyebrows track open (`0.08em`). Apply via `.o-h1`, `.o-display-1`, `.o-body-1`, `.o-subheading-1-mono`, etc. **A mono eyebrow precedes nearly every section heading.**

## Layout & Spacing

4px base scale (`--space-1 … --space-32`). **Generous whitespace** — marketing sections breathe at `96px` vertical padding, product surfaces at `48–64px`. Flat solid backgrounds (midnight, cream, or white); large-area accent fills (`ocean-100`, midnight) are the only acceptable "color shift." **No gradients. No repeating textures.** Eyebrows are part of the vertical rhythm.

## Elevation & Depth

**Borders carry more weight than shadows.** Default `1px --border`; `--border-strong` for emphasis. Shadows are restrained and Midnight-tinted at low alpha (`--shadow-xs … -lg`); prefer a sharp 1px edge over a soft halo. No inner shadows on product surfaces, no backdrop blur in default treatments. Focus = `--shadow-focus` (3px ocean ring) + `--border-focus`.

## Shapes

Restrained radii: **pill (`999px`) for buttons and labels — non-negotiable**; `md`/`lg` (12/16) for cards; `sm` (8) for inputs; `xs` (4) for inline code and small chips.

## Components

The three exported primitives live in `components/` (`.jsx` + `.d.ts`) and `_ds_bundle.js`. Larger compositions (Nav, Hero, Work, Values, Method, CTA, Footer) are in `ui_kits/marketing/App.jsx` — copy from, don't bundle.

| Component   | Shape                                                                    | Variants / props                                                                                                            |
| ----------- | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------- |
| **Button**  | pill, 1.5px stroke on outlined; hover shifts one step on the brand scale | `primary` (midnight fill) · `accent` (ocean fill, midnight text) · `secondary` (white + border) · `ghost`; sizes `sm/md/lg` |
| **Label**   | mono-caps pill + optional status dot                                     | tinted accent bg + matching text; one accent each                                                                           |
| **Eyebrow** | `— Section label` mono kicker                                            | color prop; precedes most headings                                                                                          |
| **Card**    | white fill, 1px border, `md/lg` radius, 18–28px pad                      | inverse = midnight fill no border (signature dark card); accent = `ocean-100` fill                                          |
| **Input**   | white, `border-strong`, `sm` radius                                      | focus ring (`shadow-focus`)                                                                                                 |

Hover → one stop on the scale; press → two stops or invert; focus → 3px ocean ring. **Icons:** none ship — substitute [Lucide](https://lucide.dev) at 24px / stroke 1.75, always paired with a label, never emoji.

## Motion

Quiet and for confirmation, not decoration. Hover/focus 120–200ms on `--ease-standard` `cubic-bezier(.2,.7,.1,1)`. No bounce, spring, or long fades. Respect `prefers-reduced-motion`.

## Do's and Don'ts

**Do** — midnight + ocean as the spine · cream/off-white grounds · pill buttons · 1px crisp borders · mono eyebrows over headings · one accent at a time · sentence-case copy · generous whitespace.

**Don't** — bluish-purple gradients · emoji (anywhere, even CTAs) · stacked accents · colored-left-border cards · hand-drawn/sketchy SVGs · Inter/Roboto fallbacks (use system-sans) · Cal Sans below 48px or in body · Figtree Light/ExtraBold/Black on product · exclamation-mark-heavy or superlative copy.

## Consuming this design system

Same tokens, three build targets. The token CSS is the contract in all three.

### 1 · Static HTML assets

```html
<link rel="stylesheet" href="colors_and_type.css" />
<!-- optional interactive primitives -->
<script src="_ds_bundle.js"></script>
<script>
  const { Button, Label, Eyebrow } = window.ObneyAiDesignSystem_019e1d;
</script>
```

Style with CSS vars (`var(--color-ocean)`, `var(--midnight-800)`) and the `.o-*` / `.eyebrow` classes. Copy marks from `assets/logos/`. Every token has a live specimen in `preview/*.html`.

### 2 · Minimal React apps

- Import `colors_and_type.css` once at the root.
- Import the primitives directly — they're plain React, zero deps: `import { Button } from ".../components/Button.jsx"` (also `Label`, `Eyebrow`).
- Lift compositions from `ui_kits/marketing/App.jsx`. **Don't** pull a UI library — the three primitives + tokens cover most of it. Keep it minimal.

### 3 · Grain apps (Clojure / Hiccup + Tailwind v4)

Follows the ops-workshop pattern: runtime CSS vars **bridged** into Tailwind utilities. Starter files in [`targets/grain/`](targets/grain/).

1. Copy `targets/grain/tokens.css` into the app (the obney tokens as runtime vars).
2. In `css/main.css`: `@import "tailwindcss"; @import "./tokens.css";` then a `@theme` block aliasing vars to utilities (`--color-accent: var(--accent)` → `bg-accent`/`text-accent`) and `@source "../components/*/src/**/*.clj";` so class names in Hiccup are scanned. See `targets/grain/main.css`.
3. Self-host Cal Sans (copy `fonts/`); `@import` Figtree + IBM Plex Mono from Google.
4. In Hiccup: `[:button.rounded-full.bg-accent.text-midnight ...]`, `[:span.font-mono.uppercase.tracking-eyebrow.text-fg-3 "— eyebrow"]`.

> **ops-workshop migration:** it currently ships a _different_ palette (sage/plum/clay/mushroom + Instrument Sans / JetBrains Mono). Aligning it = swap its `tokens.css` for the obney one and the fonts for Figtree/IBM Plex Mono; map its earthy accents onto the obney accent set (green/orange/pink/yellow) or drop them. See `targets/grain/`.

## Agent Prompt Guide

When asked to design or build an Obney surface:

- Pair **Midnight `#142C37` + Ocean `#68E4E9`**; ground in cream/off-white; white cards.
- **Figtree** for everything; **IBM Plex Mono** for eyebrows/labels/numbers; **Cal Sans** display-only (≥48px).
- **Pill buttons. 1px crisp borders. Quiet shadows. Flat fills.**
- A **mono-caps eyebrow** precedes each section. One accent at a time.
- **No gradients, no emoji, no Inter/Roboto.** Sentence-case, first-person-plural, no superlatives, no exclamation marks.
- Load `colors_and_type.css`; reuse `Button`/`Label`/`Eyebrow`; copy logos from `assets/logos/`; check a `preview/*.html` for any token in context.

## Provenance & canon

- **Authoritative source:** `assets/Obney.ai-Brand-Guidelines.pdf` (Feb 2026, 21pp).
- **Canonical tokens:** `colors_and_type.css` (this bundle, the official Claude Design export, assembled May 12 2026). The bundle's `README.md` + `SKILL.md` document it in full.
- **Canonical color decision (2026-06-25):** the official DS wins. The live obney-ai marketing site (and an early client mockup) currently ship a **drift variant** (warm paper `#FAF8F4` + a `#18ABB8` working teal + a warm sand-neutral system); those are _not_ canonical and should be reconciled back to cream `#F5F1EA` + `#68E4E9` over time.
- **Client application pattern:** `examples/client-application.md`.
- **Not part of the DS:** `assets/motifs/` (FactoryPipeline, circuit-bg) are live-site marketing set-pieces, kept for reuse but not canonical.