holydocs — AI-Native Documentation Platform

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/holydocs.com -->
<!-- Extracted: 2026-05-02T00:04:33.110Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "holydocs — AI-Native Documentation Platform"
description: "HolyDocs projects a sophisticated, technically adept, and forward-thinking image, positioning itself as a premium, AI-native solution for documentation. It balances a serious, infrastructure-focused message with a subtle touch of playfulness and enthusiasm, appealing to a global, tech-savvy audience."
colors:
  tertiary: "#1c1020"
  neutral: "#b5a9ae"
  surface: "#f0ece9"
  on-surface: "#4a3e44"
  on-surface-secondary: "#1a1218"
  border: "#e4ddd6"
  link: "#4a3e44"
typography:
  display-lg:
    fontFamily: "Fraunces"
    fontSize: "96px"
    fontWeight: "400"
    lineHeight: "100.8px"
    letterSpacing: "-1.92px"
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: "48px"
    fontWeight: "400"
    lineHeight: "48px"
    letterSpacing: "-0.96px"
  headline-md:
    fontFamily: "Fraunces"
    fontSize: "20px"
    fontWeight: "400"
    lineHeight: "28px"
  headline-sm:
    fontFamily: "Sora"
    fontSize: "12px"
    fontWeight: "500"
    lineHeight: "16px"
    letterSpacing: "1.8px"
  body-md:
    fontFamily: "Sora"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    textColor: "#1a1218"
    rounded: "3.35544e+07px"
    padding: "16px 32px"
    fontSize: "16px"
    fontWeight: "400"
    borderWidth: "1px"
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px"
---

# holydocs — AI-Native Documentation Platform — Design System

## Overview

HolyDocs embodies the Creator and Sage archetypes, manifesting a design atmosphere that is sophisticated, technical, and modern. Our aesthetic draws inspiration from industry leaders like Vercel, Stripe, Linear, and Mintlify, establishing a premium, AI-native presence. This design system prioritizes clarity, precision, and a forward-thinking sensibility, reflecting our commitment to advanced documentation solutions. We leverage clean lines, thoughtful spacing, and a refined visual hierarchy to convey expertise and innovation, ensuring that every interface element reinforces our position as a leader in AI-driven documentation.

This design is not whimsical or overtly playful. It avoids bright, saturated color palettes and overly decorative elements. We do not employ gradients or skeuomorphic textures. The design eschews any aesthetic that might suggest immaturity, amateurism, or a lack of technical rigor. Our visual language is intentionally understated yet impactful, focusing on functional elegance rather than superficial ornamentation. The goal is to provide a seamless, intuitive, and highly performant user experience that resonates with a global, tech-savvy audience.

**Key characteristics:**

- Vibe — AI-Native, Sophisticated, Technical, Modern, Premium, Global
- Archetypes — The Creator, The Sage
- Comparable to — Vercel, Stripe, Linear, Mintlify
- Design era — contemporary-minimal
- Emotional tone — authoritative-innovative
- Target audience — Developers, technical writers, product managers, and engineering teams within tech companies who prioritize cutting-edge AI integration, robust infrastructure, and a polished user experience for their documentation needs.
- Visual energy — 6/10 (moderate)

## Colors

The HolyDocs color philosophy centers on a minimalist yet impactful approach. The absence of a primary brand color emphasizes content and functionality, allowing the UI to adapt dynamically without distraction. Our foundational surface color, #f7f4f2, provides a warm, inviting, and professional base, signaling a premium and sophisticated environment. This neutral palette ensures accessibility and scalability, allowing for subtle accentuation through interaction states and iconography without overwhelming the user or diluting the brand's serious, infrastructure-focused message.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| accent / tertiary | `#1c1020` | Near-Black |
| surface | `#f0ece9` | Linen |
| background | `#f7f4f2` | White Smoke |
| text | `#4a3e44` | Charcoal |
| secondary text | `#1a1218` | Near-Black |
| border | `#e4ddd6` | Gainsboro |
| link | `#4a3e44` | Charcoal |
| muted | `#b5a9ae` | Dark Silver |

## Typography

The HolyDocs type system employs Sora and Fraunces to establish a clear, sophisticated, and modern visual voice. Sora, a geometric sans-serif, provides excellent readability for body text and functional UI elements, conveying technical precision and modernity. Fraunces, a high-contrast serif, is reserved for headings and prominent display text, injecting a touch of classic elegance and authority, reinforcing the Sage archetype. This deliberate contrast creates a robust typographic hierarchy, guiding the user's eye and communicating information with clarity and a premium feel, aligning with our AI-native and sophisticated brand identity.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Sora | body | self-hosted | 400 |
| Fraunces | heading | self-hosted | 400 |
| Sora | heading | self-hosted | 500 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Fraunces | 96px | 400 | 100.8px | -1.92px |
| Heading 2 | Fraunces | 48px | 400 | 48px | -0.96px |
| Heading 3 | Fraunces | 20px | 400 | 28px | — |
| Heading 4 | Sora | 12px | 500 | 16px | 1.8px |
| Body | Sora | 16px | 400 | 24px | — |

### Conventions

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

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` |
| element | `color(srgb 0.599412 0.578235 0.606471) 1.5px 1.5px 1.5px 0px inset, rgb(5, 1, 10) -1.5px -1.5px 1.5px 0px inset, rgba(0, 0, 0, 0.14) 0px 3px 6px 0px` |

### Gradients

- `linear-gradient(to right in oklab, rgb(201, 160, 178) 0%, rgb(168, 176, 200) 100%)`
- `linear-gradient(oklab(0.968828 0.00236905 0.00351071 / 0.8) 0%, oklab(0.968828 0.00236905 0.00351071 / 0.6) 50%, oklab(0.968828 0.00236905 0.00351071 / 0.9) 100%)`
- `linear-gradient(to right in oklab, rgba(0, 0, 0, 0) 0%, rgb(228, 221, 214) 50%, rgba(0, 0, 0, 0) 100%)`

## Components

### Buttons

**Outline**

- Text — `#1a1218`
- Radius — `3.35544e+07px`
- Padding — `16px 32px`
- Font size — `16px`
- Font weight — `400`
- Shadow — `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
- Sample copy — "View Docs"

## Do's and Don'ts

### Do

- Utilize Sora (400 weight) for all body text with a line-height of 24px.
- Employ Fraunces (400 weight) for primary headings and Sora (500 weight) for secondary headings, always in sentence-case.
- Maintain a light mode color palette with #1c1020 as the accent, #f7f4f2 as the background, and #4a3e44 for primary text.
- Implement outline buttons with text color #1a1218, a pill-shaped border-radius (3.35544e+07px), 16px vertical and 32px horizontal padding, and no visible shadow.
- Integrate subtle gradients, specifically linear-gradient(to right in oklab, rgb(201, 160, 178) 0%, rgb(168, 176, 200) 100%) and linear-gradient(oklab(0.968828 0.00236905 0.00351071 / 0.8) 0%, oklab(0.968828 0.00236905 0.00351071 / 0.8) 100%), for background elements or subtle visual interest.
- Apply a subtle inset shadow to interactive elements using color(srgb 0.599412 0.578235 0.606471) 1.5px 1.5px 1.5px 0px inset, rgb(5, 1, 10) for a sense of depth.
- Craft CTAs using action-oriented imperative verbs combined with benefit-driven phrases, such as 'View Docs' or 'Get Started'.
- Maintain a consistent base unit of 2px for all spacing and sizing to ensure visual harmony.

### Don't

- Avoid using emojis in any marketing or product copy.
- Do not use exclamations frequently; reserve them for rare, high-impact moments.
- Refrain from using strong, multi-layered drop shadows on elements other than cards, as the brand's shadow style is generally subtle and often inset.
- Do not use a flat design aesthetic; incorporate subtle depth through gradients and inset shadows.
- Avoid overly casual or overly enthusiastic language; maintain a balanced tone that is primarily formal and serious with a touch of playfulness.
- Do not use a wide variety of bright, vibrant colors; stick to the defined, muted color palette with a single accent color.
- Do not use any font families other than Sora and Fraunces, and adhere strictly to their specified weights.
- Avoid using title case for any headings; all headings must be in sentence-case.

*Source — inferred*

## Voice

### Tone (1–10 scale)

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

### Copywriting style

- Avg. sentence length — 9 words
- Vocabulary — moderate
- Jargon — heavy
- CTA style — action-oriented imperative verbs with benefit-driven phrases
- Rhetorical devices — alliteration, repetition

### Sample copy

> Docs thatship with you

> The Mintlify alternative built for the AI era.

> Not another wiki with a search bar. This is documentation infrastructure.

> Three commands to production

> Ship docs that keep up with your code

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| logomark | — | svg | [link](https://extractvibe.com/api/assets/brands/holydocs.com/logo-svg-1.svg) | 98% |
| favicon | — | svg | [link](https://extractvibe.com/api/assets/brands/holydocs.com/logo-0.svg) | 62% |

## Sources

- Live brand page — https://extractvibe.com/brand/holydocs.com
- Raw JSON — https://extractvibe.com/api/brand/holydocs.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/holydocs.com/design.md
- Extracted — 2026-05-02T00:04:33.110Z
- Generator — ExtractVibe vv1
- Quality score — 90/100

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