Vigil

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/vigil.co -->
<!-- Extracted: 2026-10-19T19:19:01.367Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "Vigil"
description: "Vigil presents a professional web presence."
colors:
  primary: "#3e3f2c"
  tertiary: "#ceb487"
  surface: "#f0eee9"
  on-surface: "#000000"
  border: "#adb7ba"
  link: "#ffffff"
  error: "#d02e2e"
  success: "#56ad6a"
  surface-dark: "#424650"
typography:
  display-lg:
    fontFamily: "Ponte"
    fontSize: "14.4px"
    fontWeight: "400"
    lineHeight: "18.72px"
  headline-lg:
    fontFamily: "Ponte"
    fontSize: "24.96px"
    fontWeight: "400"
    lineHeight: "31.2px"
  headline-md:
    fontFamily: "Ponte"
    fontSize: "41.6px"
    fontWeight: "400"
    lineHeight: "45.76px"
  body-md:
    fontFamily: "Montserrat"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "25px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#3e3f2c"
    textColor: "#ffffff"
    rounded: "0px"
    padding: "8px 22px 8px 0px"
    fontSize: "13.3px"
    fontWeight: "400"
    borderColor: "#ffffff"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#ffffff"
    rounded: "0px"
    padding: "10.8px 18px"
    fontSize: "14.4px"
    fontWeight: "500"
    borderColor: "#000000"
    borderWidth: "1px"
---

# Vigil — Design System

## Overview

Vigil presents a professional web presence.

Key characteristics: professional.

**Key characteristics:**

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

## Colors

The palette draws on 17 distinct colors observed across the site, organized into semantic roles below.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#3e3f2c` | Charcoal |
| accent / tertiary | `#ceb487` | Tan |
| surface | `#f0eee9` | Linen |
| background | `#3e3f2c` | Charcoal |
| text | `#000000` | Black |
| border | `#adb7ba` | Silver |
| link | `#ffffff` | White |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#424650` | Dark Slate Gray |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| success | `#56ad6a` | Confirmations, positive states |
| error | `#d02e2e` | Failures, destructive actions |

## Typography

Type is set in Montserrat, Ponte, Montserrat, with hierarchy expressed through size and weight contrast rather than family-switching.

### Font families

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

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Ponte | 14.4px | 400 | 18.72px | — |
| Heading 2 | Ponte | 24.96px | 400 | 31.2px | — |
| Heading 3 | Ponte | 41.6px | 400 | 45.76px | — |
| Body | Montserrat | 16px | 400 | 25px | — |

### Conventions

- Heading case — uppercase
- Body line-height — 25px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| element | `rgb(0, 0, 0) 0px 0px 0px 1px` |
| button | `rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.06) 0px 1px 5px 0px` |

## Components

### Buttons

**Primary**

- Background — `#3e3f2c`
- Text — `#ffffff`
- Radius — `0px`
- Padding — `8px 22px 8px 0px`
- Font size — `13.3px`
- Font weight — `400`
- Border — ` solid #ffffff`
- Sample copy — "USD$"

**Secondary**

- Background — `#ffffff`
- Text — `#ffffff`
- Radius — `0px`
- Padding — `10.8px 18px`
- Font size — `14.4px`
- Font weight — `500`
- Border — `1px solid #000000`
- Sample copy — "Shop All"

## 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/vigil.co) | 100% |
| favicon | — | png | [link](brands/vigil.co/logo-0.png) | 95% |
| primary | — | png | [link](brands/vigil.co/logo-1.png) | 85% |
| secondary | — | png | [link](brands/vigil.co/logo-2.png) | 85% |

## Sources

- Official brand guidelines — https://www.acquia.com/glossary/brand-identity-kit
- Live brand page — https://extractvibe.com/brand/vigil.co
- Raw JSON — https://extractvibe.com/api/brand/vigil.co
- DESIGN.md (this file) — https://extractvibe.com/api/brand/vigil.co/design.md
- Extracted — 2026-10-19T19:19:01.367Z
- Generator — ExtractVibe vv1
- Quality score — 65/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md