# Brand Guidelines

> Official Nauthera brand assets, color palette, logo usage rules, and typography guidelines.

## Logo

The Nauthera logo is a nautilus shell spiral representing layered security. It comes in two modes: a full **lockup** (icon + wordmark) and a standalone **icon**.

### Variants

<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 my-8">
  <div className="flex flex-col items-center gap-3 rounded-lg border bg-zinc-950 p-6">
    <Logo variant="dark" mode="lockup" size={40} />
    <span className="text-xs text-zinc-400">Dark background</span>
  </div>
  <div className="flex flex-col items-center gap-3 rounded-lg border bg-white p-6">
    <Logo variant="light" mode="lockup" size={40} />
    <span className="text-xs text-zinc-600">Light background</span>
  </div>
  <div className="flex flex-col items-center gap-3 rounded-lg border bg-[#005e44] p-6">
    <Logo variant="brand" mode="lockup" size={40} />
    <span className="text-xs text-white/70">Brand background</span>
  </div>
  <div className="flex flex-col items-center gap-3 rounded-lg border bg-gradient-to-br from-indigo-600 to-purple-700 p-6">
    <Logo variant="reversed" mode="lockup" size={40} />
    <span className="text-xs text-white/70">Reversed (colored background)</span>
  </div>
</div>

### Icon Only

<div className="flex gap-6 my-8">
  <div className="flex flex-col items-center gap-3 rounded-lg border bg-zinc-950 p-6">
    <Logo variant="dark" mode="icon" size={48} />
    <span className="text-xs text-zinc-400">Dark</span>
  </div>
  <div className="flex flex-col items-center gap-3 rounded-lg border bg-white p-6">
    <Logo variant="light" mode="icon" size={48} />
    <span className="text-xs text-zinc-600">Light</span>
  </div>
  <div className="flex flex-col items-center gap-3 rounded-lg border bg-[#005e44] p-6">
    <Logo variant="brand" mode="icon" size={48} />
    <span className="text-xs text-white/70">Brand</span>
  </div>
</div>

## Color Palette

| Swatch | Name | Hex | Usage |
|--------|------|-----|-------|
| <span className="inline-block w-6 h-6 rounded" style={{backgroundColor: "#0d3c2c"}} /> | Deep | `#0d3c2c` | Dark text, deep backgrounds |
| <span className="inline-block w-6 h-6 rounded" style={{backgroundColor: "#005e44"}} /> | Brand | `#005e44` | Primary brand color, CTAs |
| <span className="inline-block w-6 h-6 rounded" style={{backgroundColor: "#2e8568"}} /> | Light | `#2e8568` | Secondary accents, hover states |
| <span className="inline-block w-6 h-6 rounded" style={{backgroundColor: "#66ab90"}} /> | Dim | `#66ab90` | Muted accents, disabled states |
| <span className="inline-block w-6 h-6 rounded border" style={{backgroundColor: "#cbf0df"}} /> | Tint | `#cbf0df` | Highlights, light fills |

## Typography

- **Body text:** Inter — clean, neutral sans-serif optimized for screen reading
- **Code & wordmark:** JetBrains Mono — monospaced font used in the logo wordmark and all code blocks

The logo wordmark uses JetBrains Mono at weight 600 with slight negative letter-spacing.

## Clear Space & Minimum Size

- Maintain clear space equal to the height of the center circle on all sides of the logo
- Minimum size for the lockup: **120px wide**
- Minimum size for the icon: **16px**

## Usage Rules

**Do:**
- Use the provided variants for the appropriate background
- Maintain the aspect ratio at all times
- Use the `auto` variant in UI components for automatic theme adaptation

**Don't:**
- Stretch, skew, or rotate the logo
- Change the logo colors outside of the defined variants
- Place the logo on low-contrast or busy backgrounds
- Add drop shadows, outlines, or other effects to the logo
- Recreate or modify the nautilus shell paths