<!-- Generated by ExtractVibe — https://extractvibe.com/brand/druidai.com -->
<!-- Extracted: 2026-09-05T22:08:18.149Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "Druid AI"
description: "Agentic AI orchestration with AI agents and intelligent apps - Druid AI presents a professional web presence."
colors:
  primary: "#00df5a"
  secondary: "#eef2f8"
  tertiary: "#ffffff"
  neutral: "#747379"
  surface: "#ffffff"
  on-surface: "#12171e"
  on-surface-secondary: "#747379"
  border: "#dbe2eb"
  link: "#12171e"
  surface-dark: "#12171e"
typography:
  display-lg:
    fontFamily: "Satoshi"
    fontSize: "40px"
    fontWeight: "500"
    lineHeight: "46px"
  headline-lg:
    fontFamily: "Satoshi"
    fontSize: "48px"
    fontWeight: "500"
    lineHeight: "55.2px"
  headline-md:
    fontFamily: "Satoshi"
    fontSize: "10px"
    fontWeight: "500"
    lineHeight: "12px"
    letterSpacing: "1px"
  headline-sm:
    fontFamily: "Satoshi"
    fontSize: "10px"
    fontWeight: "500"
    lineHeight: "12px"
    letterSpacing: "1px"
  body-md:
    fontFamily: "Satoshi"
    fontSize: "18px"
    fontWeight: "500"
    lineHeight: "27px"
rounded:
  sm: "8px"
  lg: "14px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#12171e"
    rounded: "8px"
    padding: "8px 12px"
    fontSize: "14px"
    fontWeight: "500"
    borderColor: "#12171e"
  button-primary:
    backgroundColor: "#d2fdb1"
    textColor: "#004650"
    rounded: "8px"
    padding: "11px 24px"
    fontSize: "16px"
    fontWeight: "500"
    borderColor: "#004650"
---

# Druid AI — Design System

## Overview

The Druid AI interface embodies a clinical precision tailored for agentic orchestration. It rejects decorative excess in favor of functional clarity, establishing a visual language that prioritizes data density and operational speed. The atmosphere is sterile yet empowering, mirroring the reliability of autonomous systems. Users encounter a workspace that feels less like a consumer application and more like a high-performance command center, where every pixel serves a logical purpose in managing intelligent workflows. This design ethos aligns with enterprise-grade tooling, ensuring that the complexity of AI orchestration remains transparent and manageable. The interface does not attempt to be playful or casual; it is strictly professional, acting as a neutral vessel for complex computational tasks. Trust is established through consistency and restraint, avoiding trends that might date the product or distract from its core utility. The visual hierarchy is rigid and predictable, allowing agents and developers to navigate the system with muscle memory rather than cognitive load. This approach signals that Druid AI is a serious infrastructure layer, not a novelty toy. The design space is defined by what it omits: no gradients for the sake of aesthetics, no rounded corners that soften the digital edge, and no animations that delay interaction. Instead, the focus remains squarely on the output of the AI agents, with the UI receding into the background to highlight the intelligence at work. The result is a cohesive, authoritative presence that commands respect in technical environments.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The palette leverages #00df5a as a singular, high-contrast accent against a pure white surface. This specific green conveys active status, success, and growth without the aggression of red or the caution of yellow. It functions as a precise indicator for agent activity and system health. The white background ensures maximum readability and a sense of spaciousness, preventing the interface from feeling cluttered despite the density of information. This minimal color strategy reduces cognitive load, allowing users to instantly distinguish between active processes and static data, reinforcing the brand's focus on clarity and operational efficiency.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#00df5a` | Spring Green |
| secondary | `#eef2f8` | White Smoke |
| accent / tertiary | `#ffffff` | White |
| background | `#ffffff` | White |
| text | `#12171e` | Near-Black |
| secondary text | `#747379` | Gray |
| border | `#dbe2eb` | Ice Blue |
| link | `#12171e` | Near-Black |
| muted | `#747379` | Gray |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#12171e` | Near-Black |

## Typography

Satoshi serves as the sole typeface, chosen for its geometric clarity and modern sans-serif structure. Its variable weight capabilities allow for a strict, logical hierarchy without introducing visual noise. Headings are bold and authoritative, guiding the eye through complex agent workflows, while body text remains highly legible at small sizes to accommodate dense data tables. The consistent use of Satoshi across all UI elements creates a unified visual identity that feels technical and precise. This typographic discipline ensures that information is processed quickly, supporting the professional and efficient nature of the Druid AI platform.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Satoshi | body | self-hosted | 400, 500 |
| Satoshi | heading | self-hosted | 500 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Satoshi | 40px | 500 | 46px | — |
| Heading 2 | Satoshi | 48px | 500 | 55.2px | — |
| Heading 3 | Satoshi | 10px | 500 | 12px | 1px |
| Heading 4 | Satoshi | 10px | 500 | 12px | 1px |
| Body | Satoshi | 18px | 500 | 27px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 27px

## Layout

- Base spacing unit — `2px`

## Shapes

Border-radius scale:

- `sm` — 8px
- `lg` — 14px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#ffffff`
- Text — `#12171e`
- Radius — `8px`
- Padding — `8px 12px`
- Font size — `14px`
- Font weight — `500`
- Border — ` solid #12171e`
- Sample copy — "Request a demo"

**Primary**

- Background — `#d2fdb1`
- Text — `#004650`
- Radius — `8px`
- Padding — `11px 24px`
- Font size — `16px`
- Font weight — `500`
- Border — ` solid #004650`
- Sample copy — "Request a demo"

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/druidai.com) | 100% |
| favicon | — | ico | [link](brands/druidai.com/logo-0.ico) | 95% |
| favicon | — | png | [link](brands/druidai.com/logo-1.png) | 95% |
| favicon | — | png | [link](brands/druidai.com/logo-2.png) | 95% |
| primary | — | svg | [link](brands/druidai.com/logo-3.svg) | 85% |
| primary | color | svg | [link](brands/druidai.com/logo-4.svg) | 85% |
| primary | color | svg | [link](brands/druidai.com/logo-5.svg) | 85% |
| primary | color | svg | [link](brands/druidai.com/logo-6.svg) | 85% |
| primary | color | svg | [link](brands/druidai.com/logo-7.svg) | 85% |
| primary | color | svg | [link](brands/druidai.com/logo-8.svg) | 85% |
| primary | color | svg | [link](brands/druidai.com/logo-9.svg) | 85% |
| primary | color | png | [link](brands/druidai.com/logo-10.png) | 85% |

## Sources

- Official brand guidelines — https://docs.clevertap.com/docs/brand-kit
- Live brand page — https://extractvibe.com/brand/druidai.com
- Raw JSON — https://extractvibe.com/api/brand/druidai.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/druidai.com/design.md
- Extracted — 2026-09-05T22:08:18.149Z
- Generator — ExtractVibe vv1
- Quality score — 65/100