---
name: Plansmith
version: 1.1.0
lastUpdated: 2026-07-14
url: https://www.plansmith.co
category: The planning agent
parentBrand: BrainGrid (https://braingrid.ai/brand.json)
modes:
  light:
    appliesTo: "The marketing site today, and the app in light mode after migration."
    colorScheme: light
    radius: "0px (square corners, matching the marketing surface)."
    tokens:
      background: "#fbf6eb"
      foreground: "#1d1b1a"
      card: "#fffdf7"
      card-foreground: "#1d1b1a"
      elevated: "#f2ece0"
      elevated-foreground: "#1d1b1a"
      popover: "#fffdf7"
      popover-foreground: "#1d1b1a"
      primary: "#1d1b1a"
      primary-foreground: "#fbf6eb"
      secondary: "#f2ece0"
      secondary-foreground: "#1d1b1a"
      muted: "#f2ece0"
      muted-foreground: "#68625b"
      accent: "#c79a46"
      accent-foreground: "#1a1205"
      destructive: "#b3462f"
      destructive-foreground: "#fffdf7"
      success: "#2f7d4f"
      success-foreground: "#fffdf7"
      border: "#e0dace"
      input: "#e0dace"
      ring: "#02261a"
  dark:
    appliesTo: "The app dark mode (target). A pine-tinted charcoal that replaces the older neutral-dark theme."
    colorScheme: dark
    radius: "0px (square corners)."
    tokens:
      background: "#1d1b1a"
      foreground: "#ebe9e7"
      card: "#262422"
      card-foreground: "#ebe9e7"
      elevated: "#312f2c"
      elevated-foreground: "#ebe9e7"
      popover: "#262422"
      popover-foreground: "#ebe9e7"
      primary: "#ebe9e7"
      primary-foreground: "#1d1b1a"
      secondary: "#312f2c"
      secondary-foreground: "#ebe9e7"
      muted: "#312f2c"
      muted-foreground: "#a8a49f"
      accent: "#c79a46"
      accent-foreground: "#1a1205"
      destructive: "#d96a5a"
      destructive-foreground: "#1d1b1a"
      success: "#5fb37a"
      success-foreground: "#1d1b1a"
      border: "#383633"
      input: "#383633"
      ring: "#c79a46"
typography:
  fonts:
    - { name: "Geist", cssVar: "--font-geist", utility: "font-marketing", weights: [400, 500, 600, 700] }
    - { name: "DM Sans", cssVar: "--font-dm-sans", utility: "font-body", weights: [400, 500, 600, 700] }
    - { name: "Geist Mono", cssVar: "--font-geist-mono", utility: "font-mono", weights: [400, 500] }
    - { name: "Besley", cssVar: "none", utility: "none", weights: [600], status: "Ships as outlined SVG paths in the lockup assets; never loaded as a webfont. Do not set UI text in Besley." }
spacing:
  scale: "Tailwind v4 default scale (0.25rem base). No custom scale, no tailwind.config."
  container: "max-w-6xl with px-6 side padding."
  sections: { sm: "py-12 md:py-16", md: "py-16 md:py-24", lg: "py-24 md:py-32" }
motion:
  curve: "cubic-bezier(0.16, 1, 0.3, 1)"
  reveal: "Content rises 24px and fades in over 0.7s on viewport entry."
---

# Plansmith Brand

## Overview

Plansmith is the planning agent: the business twin of the coding agent, built by BrainGrid. The brand is one visual language in two modes. Pine `#02261a` is the primary and carries the identity; antique brass `#c79a46` is the single secondary accent, used sparingly the way lime works against jungle. Backgrounds and neutrals come from radial: warm cream in light, warm charcoal in dark. Pine appears only as a foreground (buttons and ink in light mode), never a background. Components never name colors; they use semantic tokens, and the mode decides the mapping.

## Colors

Semantic token names are constant across modes; only the mapping changes. Use the tokens, never a hardcoded hex or a Tailwind palette class. Pine is the primary. Brass is the single secondary accent, and brass-ink is its only text color.

### Identity

| Color | Hex | CSS variable | Usage |
| --- | --- | --- | --- |
| Pine | `#02261a` | `--color-pine` | The core of the identity: the mark, and the focus ring in light mode. Never a background, never a filled slab, and never body text. At paragraph scale a deep green reads as a colour choice rather than as text, so the ink in both modes is charcoal. |
| Antique Brass | `#c79a46` | `--color-accent` | The single secondary accent, in both modes. The identity pop: kickers, the mark, active states, one-word highlights. Used sparingly. Muted so it reads gold, not orange. |
| Brass Ink | `#1a1205` | `--color-accent-foreground` | The only text color on brass. |

### Light mode

| Color | Hex | CSS variable | Usage |
| --- | --- | --- | --- |
| Cream | `#fbf6eb` | `--color-background` | The light canvas. Radial's warm cream. |
| Warm white | `#fffdf7` | `--color-card` | Cards and popovers in light mode. |
| Sand | `#f2ece0` | `--color-elevated` | Elevated surfaces, secondary buttons, muted fills. |
| Border (light) | `#e0dace` | `--color-border` | The crisp 1px border in light mode. |
| Foreground (light) | `#1d1b1a` | `--color-foreground` | Primary text in light mode: the same warm charcoal the dark canvas uses. Body copy is never green, because at paragraph scale pine reads as a colour choice rather than as text. |
| Primary (light) | `#1d1b1a` | `--color-primary` | The filled primary button in light mode. The same warm charcoal as the text and as the dark canvas, so both modes run a neutral primary with brass as the single accent. |
| Muted (light) | `#68625b` | `--color-muted-foreground` | Secondary text in light mode. |
| Success (light) | `#2f7d4f` | `--color-success` | Positive states in light mode. |
| Destructive (light) | `#b3462f` | `--color-destructive` | Errors in light mode. |

### Dark mode

| Color | Hex | CSS variable | Usage |
| --- | --- | --- | --- |
| Charcoal | `#1d1b1a` | `--color-background` | The dark canvas. Radial's warm near-black. No green on a background. |
| Dark surface | `#262422` | `--color-card` | Cards and popovers in dark mode. |
| Dark elevated | `#312f2c` | `--color-elevated` | Elevated surfaces, secondary buttons, muted fills. |
| Border (dark) | `#383633` | `--color-border` | The crisp 1px border in dark mode. |
| Foreground (dark) | `#ebe9e7` | `--color-foreground` | Primary text in dark mode. |
| Primary (dark) | `#ebe9e7` | `--color-primary` | The filled primary button in dark mode. The mirror of light: a neutral fill, with brass kept for the single accent. |
| Muted (dark) | `#a8a49f` | `--color-muted-foreground` | Secondary text in dark mode. |
| Success (dark) | `#5fb37a` | `--color-success` | Positive states in dark mode. |
| Destructive (dark) | `#d96a5a` | `--color-destructive` | Errors in dark mode. |

## Typography

Geist is the brand face for set text: every headline semibold with tight tracking, and all body copy. DM Sans sets app body text. Geist Mono sets code, data, and SPEC-n id chips. The wordmark alone is Besley SemiBold (600), a foundry Clarendon, shipped as outlined SVG paths and never loaded as a webfont. Kickers are uppercase, tracking-widest, brass or muted.

- **Hero H1**: Geist 600, 2.25rem, 3.75rem at md, One per page.
- **Section headline**: Geist 600, 1.875rem, 3rem at md, Section titles.
- **Kicker**: Geist 600, 0.75rem, Uppercase eyebrow, brass or muted.
- **Body large**: Geist 400, 1.125rem, Hero subtext and section leads, muted-foreground.
- **Body small**: Geist 400, 0.875rem, Capability bullets: bold lead, regular tail.

## Layout

Center content in a max-w-6xl with px-6 side padding. Section rhythm runs py-12 md:py-16 (small), py-16 md:py-24 (medium), py-24 md:py-32 (large). Keep generous padding. The capability-bullet pattern sets a bold lead and a regular muted tail at text-sm.

## Elevation

Borders do the work: 1px `border-border` everywhere, and shadows stay near-invisible. In light mode a card gains elevation by being whiter than the page; in dark mode by being a step lighter than the canvas.

## Motion

One curve: `cubic-bezier(0.16, 1, 0.3, 1)`. Content rises 24px and fades in over 0.7s on viewport entry. Motion restraint is a brand trait. All motion sits behind prefers-reduced-motion; reduced-motion renders everything settled. Nothing loops except the faint grid pulse and the slow hero drift.

## Shapes

Square corners across the system; the whole radius scale is zeroed, while `rounded-full` keeps dots and avatars circular. The squircle app icon is the one sanctioned rounded shape on the brand surface.

## Logo

The mark is "Nodes": four node-and-connector elbow units in pinwheel rotation. Specs are nodes, dependencies are the connectors; the plan is a connected graph. It shares construction DNA with the BrainGrid parent mark.

- The mark follows contrast: pine on light surfaces, brass on dark. Brass on cream is too washed out.
- Single color always, via currentColor. Never recolor into a second hue, outline, distort, or add effects.
- The wordmark is two-tone: "Plan" in the foreground token, "smith" in muted-foreground, Besley SemiBold outlined to paths. Wordmark only; UI text stays Geist.

### Wordmark colors

Besley SemiBold (600), a Clarendon born of the type foundries: forged type for a smith. Ships as outlined SVG paths in the lockup, never as a loaded webfont; UI text stays Geist. "Plan" takes the foreground token; "smith" takes muted-foreground. The mark follows contrast, not a fixed hue.

| Part | Token | Light | Dark |
| --- | --- | --- | --- |
| Plan | `--color-foreground` | `#1d1b1a` | `#ebe9e7` |
| smith | `--color-muted-foreground` | `#68625b` | `#a8a49f` |
| mark | `pine on light, brass on dark` | `#02261a` | `#c79a46` |

### Logo per mode

- **Light mode:** Pine mark, "Plan" in pine, "smith" in warm gray, on cream. Lockup: `/brand/plansmith-lockup-light.svg`. Mark: `/brand/plansmith-mark-pine.svg`.
- **Dark mode:** Brass mark, "Plan" in off-white, "smith" in muted gray, on charcoal. Lockup: `/brand/plansmith-lockup-dark.svg`. Mark: `/brand/plansmith-mark-brass.svg`.

## Voice and Content

Plansmith sounds like The Translator: someone who has lived both sides of the handoff. Quiet confidence, no hype, no exclamation marks. Craft verbs carry the writing: shape, forge, ground, score, hand off. Short sentences land the point. Rough. Shaping. Ready. Write in second person to a singular team: your dev team, your issue tracker, your context. The agent reads code; the user never does. No em dashes in site copy. Banned outright: revolutionize, supercharge, 10x, unleash, seamless, streamline.

### Terminology

Ontology, locked: Team -> Project -> Plan -> Spec. Never epic, requirement, or artifact. Say Connector, never integration or adapter. Say issue tracker, never bare tracker. Say build-ready, never dev-ready. Render readiness as Rough, Shaping, Ready and effort as Low, Med, High, never the raw numbers.

## Do's and Don'ts

**Do**

- Use semantic tokens only (bg-background, text-primary); the mapping, not the component, changes per mode.
- Take backgrounds and neutrals from radial: cream in light, charcoal in dark.
- Pine is the primary; brass is the single secondary accent, used sparingly.
- Use 1px borders for separation; keep shadows near-invisible.
- Square corners across the system.
- Render the mark in currentColor; brass for the identity pop.
- Split the wordmark two-tone: "Plan" in foreground, "smith" in muted-foreground.
- Render readiness as Rough, Shaping, Ready and effort as Low, Med, High, never raw numbers.
- Pair any code-access claim with: read access only; it never changes a line.

**Don't**

- Never write a dark: prefix or hardcode palette colors; the theme guard fails the build. Modes are handled by the tokens.
- Never use the green as a background or a surface; it is a foreground color only.
- Never let brass drift vivid; keep it muted so it reads gold, not orange.
- Never promote brass to the primary; it stays the secondary accent.
- Never add a second accent color or a gradient on a UI surface.
- Never recolor, outline, distort, or add effects to the mark; single color always.
- No em dashes anywhere in site copy.
- Never use the hype words in the banned list; state the bet plainly instead.
- No fabricated customers, logos, testimonials, case studies, or metrics; no compliance claims.
- Never disparage issue trackers; the enemy is the handoff.

## Assets

Machine-readable tokens: [/brand.json](https://www.plansmith.co/brand.json). Plain text: [/brand.txt](https://www.plansmith.co/brand.txt). Visual guidelines: [/brand](https://www.plansmith.co/brand).

- [Lockup, light mode](https://www.plansmith.co/brand/plansmith-lockup-light.svg)
- [Lockup, dark mode](https://www.plansmith.co/brand/plansmith-lockup-dark.svg)
- [Mark, pine (light mode)](https://www.plansmith.co/brand/plansmith-mark-pine.svg)
- [Mark, brass (dark mode)](https://www.plansmith.co/brand/plansmith-mark-brass.svg)
- [Mark PNG, pine 1024](https://www.plansmith.co/brand/plansmith-mark-pine-1024.png)
- [Mark PNG, brass 1024](https://www.plansmith.co/brand/plansmith-mark-brass-1024.png)
- [Mark, currentColor source](https://www.plansmith.co/brand/plansmith-mark.svg)
- [Light mode tile (pine on cream)](https://www.plansmith.co/brand/plansmith-mark-pine-on-paper.svg)
- [Dark mode tile (brass on charcoal)](https://www.plansmith.co/brand/plansmith-mark-brass-on-dark.svg)
- [App icon (Nodes squircle)](https://www.plansmith.co/brand/plansmith-app-icon.svg)