# Diiirect brand guide

> Logos, colors, typography, components, and usage principles for the Diiirect brand.

- Version: 2026
- Updated: 2026-06-08
- Canonical: https://www.diiirect.com/brandguide
- JSON: https://www.diiirect.com/brandguide.json

## Audience

- Internal teams
- Partners
- Press
- Event collaborators
- AI agents summarizing Diiirect

## Sections

- 01 Marks: Use the full wordmark by default. Compact marks are for square or constrained surfaces.
- 02 Color: Cream and moss neutrals carry the system. Lime is a scarce signature signal.
- 03 Typography: LT Soul Raela Pro sets an editorial, clear, and confident voice.
- 04 Components: Buttons, fields, and status chips stay compact and quiet until action is needed.
- 05 Compositions: Examples should feel like real product and marketing surfaces, not decorative cards.
- 06 Voice: Copy should sound clear, selective, human, and direct.
- 07 Principles: The system should feel calm before it feels styled.

## Assets

- Primary wordmark: https://www.diiirect.com/brand/diiirect-wordmark-lime.png (transparent PNG, 700 x 200) — Default logo for most partner, press, and product contexts.
- Small wordmark: https://www.diiirect.com/brand/diiirect-wordmark-lime-small.png (transparent PNG, 350 x 100) — Clear-space examples and smaller surfaces.
- Compact mark: https://www.diiirect.com/brand/diiirect-square.png (transparent PNG, 512 x 512) — Square or constrained placements.
- Favicon: https://www.diiirect.com/brand/diiirect-favicon.png (transparent PNG, 192 x 192) — Browser and app icon contexts.
- Standalone mark: https://www.diiirect.com/brand/diiirect-mark.png (transparent PNG, 512 x 512) — Compact brand presence where the wordmark cannot fit.

## Color

### Moss neutrals

- --moss-50: oklch(0.985 0.008 130) (Cream)
- --moss-100: oklch(0.965 0.012 130) (Surface)
- --moss-200: oklch(0.935 0.016 130) (Card)
- --moss-300: oklch(0.880 0.022 132) (Line)
- --moss-400: oklch(0.740 0.028 135) (Icon)
- --moss-500: oklch(0.585 0.026 142) (Meta)
- --moss-600: oklch(0.460 0.024 146) (Muted)
- --moss-700: oklch(0.345 0.022 150) (Body)
- --moss-800: oklch(0.245 0.020 152) (Heading)
- --moss-900: oklch(0.165 0.020 154) (Ink)
- --moss-950: oklch(0.105 0.018 154) (Deep)

### Support colors

- --accent: oklch(0.94 0.27 128) (Signature lime) — One CTA, focus, status pips, dark-surface triads.
- --mint-100: oklch(0.930 0.075 138) (Mint wash) — Soft grouped surfaces and quiet AI hint states.
- --ok: oklch(0.58 0.16 148) (Verified) — Success, verified, pre-vetted, live.
- --warn: oklch(0.72 0.14 70) (Warning) — Pending, draft, needs attention.
- --err: oklch(0.58 0.20 27) (Error) — Destructive actions and failed validation.
- --info: oklch(0.55 0.10 220) (Information) — Signals and secondary informational states.

## Typography

- Family: LT Soul Raela Pro
- Display and H1/H2: 500
- Buttons and H3/H4: 600
- Wordmark: 700
- .t-display: Display / 500 — Hire direct.
- .t-h2: Heading / 500 — The best work starts with a direct conversation.
- .t-body: Body / 400 — Clear language, calm confidence, and enough space for the important details to land.
- .t-meta: Meta / mono — VETTED / AVAILABLE / DIRECT

## Voice

- Use: Meet vetted senior operators already trusted by the teams hiring them.
- Avoid: Unlock a revolutionary talent ecosystem powered by cutting-edge synergy.
- Line: Clear. Selective. Human. Direct.

## Keep

- Cream is the base. White is reserved for elevated surfaces.
- Forest is the ink. Avoid pure black in branded interfaces.
- Lime is a signature, not a background system.
- Headings stay calm at medium weight and in sentence case.

## Avoid

- Flooding a hero or section with bright lime.
- Using bold weight for every heading.
- Adding glass, glow, or decorative gradient effects.
- Writing loud, inflated, or generic SaaS copy.

## Snippets

### React import

```tsx
import { Wordmark, ArrowTriad, Lockup } from "@diiirect/ui"
```

### CSS import

```css
@import "@diiirect/ui/styles/design-system.css";
```

### Button

```tsx
<button className="btn btn--primary btn--md">Primary action</button>
```