> ## Documentation Index
> Fetch the complete documentation index at: https://partners.usecharlie.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Brand and design system.

> Charlie's visual language — logo, color, type, and the tokens behind every surface.

Charlie's identity centers on a **hand-drawn face mark** — two closed eyes, a nose, two cheeks — rendered in a chalky, organic style on deep forest green. That warmth is the deliberate counterweight to a precise, operational product. Use these specs whenever you represent Charlie in proposals, decks, or client-facing materials.

<Info>
  Primary color is **deep forest green** `#0F5C45`. The typeface is **Inter**. The tone is precise, calm, and operational — Polaris-grade density with a warmer personality.
</Info>

## Logo.

The mark is white on the brand green. It is the only illustrative element in the system — everything else stays clean and flat. Never recolor, stretch, rotate, or add effects, and always keep clear space equal to the mark's width on every side.

<CardGroup cols={2}>
  <Card title="Primary — white on green" icon="image">
    White mark on `#0F5C45`. Primary usage on dark and brand surfaces.
  </Card>

  <Card title="Reversed — green on white" icon="image">
    Green mark (`#0F5C45`) on white. For light backgrounds and documents.
  </Card>

  <Card title="Mono dark" icon="image">
    Dark mark (`#0D1F1A`) on white. For single-color print and stamps.
  </Card>

  <Card title="Mono light" icon="image">
    White mark on a neutral tile. For photography and dark imagery.
  </Card>
</CardGroup>

## Color.

A five-step green primary scale and a six-step neutral ramp, with muted status colors that never compete with the UI. Flat, solid fills throughout — **no gradients in the product**, with one exception: the signature title gradient below.

### Primary scale.

<div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: "12px", marginTop: "16px" }}>
  {[
        ["primary-100", "#E8F5F0"],
        ["primary-200", "#B8E0D2"],
        ["primary-300", "#5EAA8D"],
        ["primary-400", "#0F5C45"],
        ["primary-500", "#072E23"],
      ].map(([name, hex]) => (
        <div key={name}>
          <div style={{ height: "64px", background: hex, borderRadius: "4px", border: "1px solid #C4CCC8" }} />
          <div style={{ fontSize: "12px", marginTop: "6px", fontFamily: "monospace" }}>{name}<br />{hex}</div>
        </div>
      ))}
</div>

`primary-400` (`#0F5C45`) is the action color. `primary-500` (`#072E23`) anchors headings and the deepest surfaces.

### Neutral scale.

<div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: "12px", marginTop: "16px" }}>
  {[
        ["neutral-50", "#F7FAF9"],
        ["neutral-100", "#E8EDEB"],
        ["neutral-200", "#C4CCC8"],
        ["neutral-300", "#8A9691"],
        ["neutral-400", "#4A5651"],
        ["neutral-600", "#0D1F1A"],
      ].map(([name, hex]) => (
        <div key={name}>
          <div style={{ height: "64px", background: hex, borderRadius: "4px", border: "1px solid #C4CCC8" }} />
          <div style={{ fontSize: "12px", marginTop: "6px", fontFamily: "monospace" }}>{name}<br />{hex}</div>
        </div>
      ))}
</div>

### Semantic tokens.

| Token                        | Hex       | Use                                           |
| ---------------------------- | --------- | --------------------------------------------- |
| `surface`                    | `#FFFFFF` | Cards, panels, base surface                   |
| `surface-raised` / `page-bg` | `#F7FAF9` | Page background, faint green-tinted off-white |
| `border`                     | `#C4CCC8` | Default 1px borders                           |
| `border-subtle`              | `#E8EDEB` | Card edges, hairlines                         |
| `text-primary`               | `#0D1F1A` | Headings, body                                |
| `text-secondary`             | `#4A5651` | Helper text, captions                         |
| `text-disabled`              | `#8A9691` | Placeholder, disabled                         |

### Status colors.

Muted, not saturated — background plus text, paired.

| Status  | Background | Text      |
| ------- | ---------- | --------- |
| Success | `#E8F5F0`  | `#0F5C45` |
| Warning | `#FFF8E1`  | `#8B6914` |
| Error   | `#FDE8E8`  | `#9B1C1C` |
| Info    | `#E8F0FE`  | `#1A56DB` |

### Signature title gradient.

Reserved for hero titles only — never body, never UI.

<div style={{ height: "72px", borderRadius: "6px", marginTop: "16px", background: "linear-gradient(90deg, #072E23 0%, #072E23 30%, #2EAD85 85%, #5EAA8D 100%)" }} />

```css theme={null}
linear-gradient(90deg, #072E23 0%, #072E23 30%, #2EAD85 85%, #5EAA8D 100%)
```

## Typography.

**Inter** for everything humans read. **DM Mono** for code, order IDs, timestamps, and data labels. Tight letter-spacing at large sizes, slight positive tracking at small sizes. **Maximum weight is 600 (Semibold)** — no bold (700) anywhere in the system.

| Style      | Size | Weight | Line height | Tracking |
| ---------- | ---- | ------ | ----------- | -------- |
| Display    | 48px | 600    | 1.1         | -0.02em  |
| H1         | 36px | 600    | 1.2         | -0.015em |
| H2         | 28px | 600    | 1.25        | -0.01em  |
| H3         | 22px | 600    | 1.3         | -0.005em |
| H4         | 18px | 600    | 1.35        | 0        |
| Body large | 17px | 400    | 1.5         | 0        |
| Body       | 15px | 400    | 1.5         | 0        |
| Body small | 13px | 400    | 1.45        | 0.005em  |
| Caption    | 12px | 500    | 1.4         | 0.01em   |
| Label      | 13px | 600    | 1.2         | 0.02em   |
| Mono       | 13px | 400    | 1.5         | 0        |

## Spacing.

A **4px base unit** — every value is a multiple. Dense but not cramped: table rows \~44px, sidebar items \~36px, inputs \~40px.

| Token     | Value | Token      | Value |
| --------- | ----- | ---------- | ----- |
| `space-1` | 2px   | `space-6`  | 24px  |
| `space-2` | 4px   | `space-7`  | 32px  |
| `space-3` | 8px   | `space-8`  | 48px  |
| `space-4` | 12px  | `space-9`  | 64px  |
| `space-5` | 16px  | `space-10` | 96px  |

## Borders and radius.

Default radius is **4px**; **6px** maximum for larger containers and modals; pill (`9999px`) only for status badges and toggles. Never exceed 8px on any element. Borders are 1px solid, never thicker — `#C4CCC8` in light mode, `#1A3D2B` in dark mode.

| Token         | Value  | Use                            |
| ------------- | ------ | ------------------------------ |
| `radius-sm`   | 2px    | Inline chips, small controls   |
| `radius-md`   | 4px    | Buttons, inputs, cards, badges |
| `radius-lg`   | 6px    | Larger containers, modals      |
| `radius-pill` | 9999px | Status pills, toggles          |

## Shadows and elevation.

Three levels only. Shadows use green-tinted black (`rgba(13, 31, 26, …)`), never pure black. **No blur or glass effects.**

| Level                      | Value                                                         |
| -------------------------- | ------------------------------------------------------------- |
| None                       | `none`                                                        |
| Subtle (cards)             | `0 1px 3px rgba(13,31,26,.08), 0 1px 2px rgba(13,31,26,.04)`  |
| Raised (dropdowns, modals) | `0 4px 12px rgba(13,31,26,.10), 0 2px 4px rgba(13,31,26,.06)` |

## Iconography.

[Lucide](https://lucide.dev) icons, stroke-only at 1.5px weight — 24px default, 20px for nav, 16px inline. No filled icons, no emoji, no custom icon font.

## Dark mode.

A full token inversion with green-tinted darks. Page background `#0A1A15`, surfaces `#0F2318`, borders `#1A3D2B`, primary text `#F0FAF6`, and the action color brightens to `#2EAD85`.

## Voice.

Professional and calm. Charlie writes for operators as peers — direct, second person, sentence case everywhere.

<CardGroup cols={2}>
  <Card title="Do" icon="check">
    Sentence case for all UI text. Action-oriented buttons (verb + noun): "Create order", "Route shipment". Past participle for completed states ("Fulfilled", "Routed"), present participle for in-progress ("Pending", "Processing"). Numerals always.
  </Card>

  <Card title="Don't" icon="xmark">
    Exclamation marks or urgency language. Title Case or ALL CAPS (except short badges like "DRAFT"). Emoji. Filler adjectives: "game-changing", "powerful", "innovative". Bold weight above 600.
  </Card>
</CardGroup>

## Materials.

<Card title="Need assets or the full design system?" icon="envelope" horizontal href="mailto:hello@usecharlie.ai">
  Contact the Charlie team and we'll send you logos, tokens, and templates.
</Card>