<!-- Generated by ExtractVibe — https://extractvibe.com/brand/consularis.ai -->
<!-- Extracted: 2026-11-05T17:41:18.895Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "Consularis"
description: "Consularis projects a serious, matter-of-fact, and highly efficient personality, focused on practical solutions for complex organizational challenges. It's a brand that values clarity, accuracy, and direct communication, aiming to be the reliable, up-to-date source of truth for internal processes."
colors:
  primary: "#ff6b35"
  tertiary: "#ff6b35"
  neutral: "#68645b"
  surface: "#faf9f5"
  on-surface: "#1c1b18"
  on-surface-secondary: "#68645b"
  border: "#fde4d9"
  link: "#1c1b18"
  error: "#c0392b"
  warning: "#d4a843"
  success: "#27ae60"
  info: "#3d5fa8"
typography:
  display-lg:
    fontFamily: "Chillax"
    fontSize: "52px"
    fontWeight: "600"
    lineHeight: "59.8px"
    letterSpacing: "-1.04px"
  headline-lg:
    fontFamily: "Chillax"
    fontSize: "40.8px"
    fontWeight: "600"
    lineHeight: "43.248px"
    letterSpacing: "-0.816px"
  headline-md:
    fontFamily: "Chillax"
    fontSize: "18.72px"
    fontWeight: "700"
    lineHeight: "28.08px"
  headline-sm:
    fontFamily: "ui-monospace"
    fontSize: "11px"
    fontWeight: "600"
    lineHeight: "16.5px"
    letterSpacing: "0.88px"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "6px"
  md: "10px"
  lg: "12px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#ff6b35"
    textColor: "#ffffff"
    rounded: "10px"
    padding: "7px 14px"
    fontSize: "12.8px"
    fontWeight: "500"
    borderColor: "#ff6b35"
    borderWidth: "1px"
  button-outline:
    textColor: "#1c1b18"
    rounded: "50%"
    padding: "0px"
    fontSize: "13.3333px"
    fontWeight: "400"
    borderWidth: "1px"
  button-secondary:
    backgroundColor: "#faf9f5"
    textColor: "#1c1b18"
    rounded: "6px"
    padding: "4px 8px"
    fontSize: "11px"
    fontWeight: "600"
    borderColor: "#1c1b18"
    boxShadow: "color(srgb 0.109804 0.105882 0.0941176 / 0.09) 0px 1px 4px 0px"
---

# Consularis — Design System

## Overview

Consularis design embodies the archetypes of The Sage and The Ruler, manifesting as a serious, matter-of-fact, and highly efficient digital experience. The interface prioritizes clarity, accuracy, and direct communication, serving as the reliable, up-to-date source of truth for complex organizational processes. Drawing inspiration from the functional elegance of platforms like Asana, Notion, Monday.com, and Jira, Consularis delivers practical solutions without extraneous embellishment. Every element is purpose-driven, designed to facilitate immediate comprehension and efficient interaction, ensuring users can navigate and manage information with absolute confidence.

This design system rejects frivolity and decorative excess. It is not playful, whimsical, or overly artistic. Instead, Consularis is grounded in a modern, authoritative aesthetic that reinforces its role as a critical tool for organizational efficiency. The visual language is clean, precise, and understated, reflecting a brand that values substance over style, and utility above all else. Its emotional register is one of calm competence and unwavering reliability, designed to instill trust and facilitate focused work.

**Key characteristics:**

- Vibe — efficient, authoritative, direct, serious, practical, modern
- Archetypes — The Sage, The Ruler
- Comparable to — Asana, Notion, Monday.com, Jira
- Design era — contemporary-functional
- Emotional tone — trustworthy-efficient
- Target audience — Operations managers, project managers, team leads, and executives in mid-to-large enterprises seeking to streamline and accurately document internal processes.
- Visual energy — 6/10 (moderate)

## Colors

The Consularis color palette is built around a singular, impactful primary color: #ff6b35. This vibrant yet serious hue acts as a clear focal point, signaling key actions and critical information with authoritative precision. Paired with a pristine #ffffff surface, the contrast ensures optimal readability and a sense of clean, uncluttered efficiency. This direct and minimal approach to color reinforces the brand's practical, modern character, avoiding distraction and emphasizing clarity in all interactions.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#ff6b35` | Tomato |
| accent / tertiary | `#ff6b35` | Tomato |
| surface | `#faf9f5` | Off-White |
| background | `#ffffff` | White |
| text | `#1c1b18` | Near-Black |
| secondary text | `#68645b` | Dim Gray |
| border | `#fde4d9` | Misty Rose |
| link | `#1c1b18` | Near-Black |
| muted | `#68645b` | Dim Gray |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| success | `#27ae60` | Confirmations, positive states |
| warning | `#d4a843` | Caution, intermediate states |
| error | `#c0392b` | Failures, destructive actions |
| info | `#3d5fa8` | Neutral information, tips |

## Typography

Consularis employs a robust type system anchored by Inter for primary text and Chillax for display, complemented by ui-monospace for code and data. This combination establishes a clear hierarchy that prioritizes readability and information density. Inter provides exceptional legibility for body copy, while Chillax lends a modern, authoritative voice to headings and key statements. The monospace font ensures technical accuracy. Together, these choices communicate precision, efficiency, and a commitment to clear, unambiguous communication.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Inter | body | self-hosted | 400, 500, 600 |
| Chillax | heading | self-hosted | 600, 700 |
| ui-monospace | heading | system | 600 |
| Chillax | body | self-hosted | 700 |
| Arial | body | system | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Chillax | 52px | 600 | 59.8px | -1.04px |
| Heading 2 | Chillax | 40.8px | 600 | 43.248px | -0.816px |
| Heading 3 | Chillax | 18.72px | 700 | 28.08px | — |
| Heading 4 | ui-monospace | 11px | 600 | 16.5px | 0.88px |
| Body | Inter | 16px | 400 | 24px | — |

### Conventions

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

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| navigation | `color(srgb 1 1 1 / 0.35) 0px 1px 0px 0px inset` |
| button | `color(srgb 0.109804 0.105882 0.0941176 / 0.09) 0px 1px 4px 0px` |
| button | `color(srgb 0.109804 0.105882 0.0941176 / 0.14) 0px 2px 8px 0px` |

### Gradients

- `radial-gradient(circle, color(srgb 0.407843 0.392157 0.356863 / 0.24) 0.75px, rgba(0, 0, 0, 0) 0.9px)`

## Shapes

Border-radius scale:

- `sm` — 6px
- `md` — 10px
- `lg` — 12px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#ff6b35`
- Text — `#ffffff`
- Radius — `10px`
- Padding — `7px 14px`
- Font size — `12.8px`
- Font weight — `500`
- Border — `1px solid #ff6b35`
- Sample copy — "Book a demo"

**Outline**

- Text — `#1c1b18`
- Radius — `50%`
- Padding — `0px`
- Font size — `13.3333px`
- Font weight — `400`

**Secondary**

- Background — `#faf9f5`
- Text — `#1c1b18`
- Radius — `6px`
- Padding — `4px 8px`
- Font size — `11px`
- Font weight — `600`
- Border — ` solid #1c1b18`
- Shadow — `color(srgb 0.109804 0.105882 0.0941176 / 0.09) 0px 1px 4px 0px`
- Sample copy — "Split"

## Do's and Don'ts

### Do

- Utilize #ff6b35 as the primary accent color for key elements like primary buttons and highlights, ensuring high contrast against the #ffffff background.
- Employ Chillax (weights 600, 700) for all headings, rendered in sentence-case, with ui-monospace (weight 600) as an alternative for specific heading contexts.
- Use Inter (weights 400, 500, 600) for body text and general UI elements, maintaining a body line-height of 24px for readability.
- Design primary CTA buttons with a #ff6b35 background, #ffffff text, 10px border-radius, and 7px 14px padding, with no visible shadow.
- Incorporate subtle shadows for depth on interactive elements, specifically `color(srgb 0.109804 0.105882 0.0941176 / 0.09) 0px 1px 4px 0` for secondary buttons and `color(srgb 0.109804 0.105882 0.0941176 / 0.14) 0px 2px 8px 0` for more prominent interactive components.
- Apply a consistent border-radius system: 6px for small elements, 10px for medium (like primary buttons), and 12px for larger components.
- Maintain a clean, white (#ffffff) background for primary content areas, with #faf9f5 used for secondary background elements to provide subtle visual separation.
- Use direct, action-oriented imperatives for CTAs, such as 'Book a demo', and informational links.
- Incorporate a single, subtle radial gradient `radial-gradient(circle, color(srgb 0.407843 0.392157 0.356863 / 0.24) 0.75px, rg)` sparingly for background texture or subtle visual interest.

### Don't

- Avoid using emoji or exclamations in any marketing copy or UI text, as the brand maintains a serious and matter-of-fact tone.
- Do not use title case for headings; all headings should strictly adhere to sentence-case convention.
- Refrain from using overly playful or casual language; the brand's tone is serious and accessible, not informal.
- Do not introduce additional font families beyond Inter, Chillax, and ui-monospace to maintain typographic consistency.
- Avoid sharp, unrounded corners; all interactive and structural elements should utilize the defined border-radius system (6px, 10px, 12px).
- Do not use a monochrome color palette; leverage the #ff6b35 accent color to provide visual energy and highlight key information.
- Do not apply heavy or multi-layer shadows on primary buttons; they should remain clean with no shadow, or a very subtle single layer if absolutely necessary for interaction states.
- Avoid vague or indirect calls to action; all CTAs should be direct and clearly state the intended action.
- Do not use complex or animated visual effects; the design should remain clean, functional, and focused on clarity.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 3/10 | formal |
| Playful ↔ Serious | 9/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 8/10 | matter-of-fact |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 6/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct, action-oriented imperatives and informational links
- Rhetorical devices — repetition, rhetorical question

### Sample copy

> Your process hub, kept up to date by your team.

> How your company works changes every week. Its documentation rarely keeps up.

> You can't keep what was never written down. So we map it from what your people say, and keep it current with them.

> Consularis interviews the people who do the work and turns what they say into one map of your company, with every process documented.

> Every step backed by what people said

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/consularis.ai) | 100% |
| favicon | — | svg | [link](brands/consularis.ai/logo-0.svg) | 95% |
| favicon | — | png | [link](brands/consularis.ai/logo-1.png) | 95% |
| favicon | — | png | [link](brands/consularis.ai/logo-2.png) | 95% |
| logomark | — | svg | [link](brands/consularis.ai/logo-svg-3.svg) | 90% |
| logomark | — | svg | [link](brands/consularis.ai/logo-svg-4.svg) | 90% |
| logomark | — | svg | [link](brands/consularis.ai/logo-svg-5.svg) | 90% |

## Sources

- Live brand page — https://extractvibe.com/brand/consularis.ai
- Raw JSON — https://extractvibe.com/api/brand/consularis.ai
- DESIGN.md (this file) — https://extractvibe.com/api/brand/consularis.ai/design.md
- Extracted — 2026-11-05T17:41:18.895Z
- Generator — ExtractVibe vv1
- Quality score — 90/100