# Quov brand: instructions for AI agents

Load this file before producing anything that carries the Quov name: a web page, a printable document, an HTML artifact, an application screen, a slide, a post or a piece of copy. It is the base of the Quov design system. The other guides apply it to one medium each and never override it; when two guides disagree, this one wins.

| Guide             | English                                            | Spanish                                            |
| ----------------- | -------------------------------------------------- | -------------------------------------------------- |
| Brand (this file) | https://quov.io/design-system/quov-brand.en.md     | https://quov.io/design-system/quov-brand.es.md     |
| Web pages         | https://quov.io/design-system/quov-web.en.md       | https://quov.io/design-system/quov-web.es.md       |
| Documents         | https://quov.io/design-system/quov-documents.en.md | https://quov.io/design-system/quov-documents.es.md |
| Artifacts         | https://quov.io/design-system/quov-artifacts.en.md | https://quov.io/design-system/quov-artifacts.es.md |
| Application UI    | https://quov.io/design-system/quov-app.en.md       | https://quov.io/design-system/quov-app.es.md       |

The rendered guides, with every rule shown in both themes, live at https://quov.io/design-system.

## Identity

- **Name:** Quov. A capital Q, then lowercase. Never "QUOV", "quov" or "QuOV" in running text; the capitals live only inside the mark.
- **Legal name:** Quov S.A.S. Use it only where an entity must be named (a footer, a document, a contract), and add nothing to it: never a NIT or any other registration number, never wording that the entity is pending, in formation or in progress.
- **What Quov is:** a Colombian company that builds software and runs the infrastructure beneath it.
- **Four lines of business:** products (Kin, Merxes and Heak; Merxes and Heak are independent brands owned by Quov), tailored software, infrastructure, and devices (management of a company's laptops and phones).
- **Domain and contact:** `quov.io`, `contact@quov.io`.
- **Who speaks:** "Quov" or "we". Never a person: no names, founders, portraits, team pages or personal signatures.

## The mark

Four letters, Q U O V, in a 2×2 grid inside a circle: QU on the top row, OV on the bottom row. Quov offers four things, so the 2×2 grid is also the structure of its pages. The geometry is fixed. Never set the letters in a font and never redraw them.

### Files

Base URL: `https://quov.io/design-system/logo/`. People can browse them at https://quov.io/design-system/brand#downloads.

| File                  | What it is                                   | Use it on                                             |
| --------------------- | -------------------------------------------- | ----------------------------------------------------- |
| `quov-mark-dark.svg`  | Black disc, white letters                    | Dark surfaces                                         |
| `quov-mark-light.svg` | White disc, black letters                    | Light surfaces                                        |
| `quov-letters.svg`    | The four letters alone, black on transparent | Single-color use: embossing, a stamp, one-color print |

Every file also exists as a PNG with a transparent background at widths 32, 64, 128, 256, 512 and 1024 px, named `<file name without extension>-<width>.png`, for example `quov-mark-dark-512.png`.

```bash
curl -fLO https://quov.io/design-system/logo/quov-mark-dark.svg
curl -fLO https://quov.io/design-system/logo/quov-mark-light-1024.png
```

- **Web pages and artifacts:** the SVG, as `<img>` or inline (below).
- **Documents and print:** the light SVG or the letters alone; if the tool only accepts bitmaps, the 1024 px PNG.
- **Slides, social posts, third-party tools:** a PNG at least twice the size it is displayed at.

### Inline SVG

When a page must not depend on the network, embed the mark inline. These are the official outlines on a 24 × 24 viewBox; copy them exactly.

```html
<svg viewBox="0 0 24 24" width="32" height="32" role="img" aria-label="Quov">
  <circle cx="12" cy="12" r="12" fill="var(--mark)" />
  <path
    fill="var(--foreground)"
    d="M18.5088 12.8187C18.3968 12.8187 18.3328 12.8427 18.3168 12.8907L16.0208 18.2987C16.0101 18.32 16.0048 18.3493 16.0048 18.3867C16.0048 18.4347 16.0208 18.4693 16.0528 18.4907C16.0848 18.5067 16.1194 18.5147 16.1568 18.5147V18.6667H14.6768V18.5147C14.7141 18.5147 14.7488 18.5067 14.7808 18.4907C14.8128 18.4693 14.8288 18.4347 14.8288 18.3867C14.8288 18.3493 14.8235 18.32 14.8128 18.2987L12.5168 12.8907C12.5008 12.8427 12.4368 12.8187 12.3248 12.8187V12.6667H13.8768V12.8187C13.8128 12.8187 13.7701 12.8347 13.7488 12.8667C13.7274 12.8987 13.7248 12.9307 13.7408 12.9627L15.4448 17.1067L17.1008 12.9627C17.1114 12.9307 17.0928 12.8987 17.0448 12.8667C17.0021 12.8347 16.9488 12.8187 16.8848 12.8187V12.6667H18.5088V12.8187Z"
  />
  <path
    fill="var(--foreground)"
    d="M8.89704 18.7947C8.27837 18.7947 7.7237 18.6533 7.23304 18.3707C6.7477 18.0827 6.36904 17.704 6.09704 17.2347C5.83037 16.76 5.69704 16.2587 5.69704 15.7307C5.69704 15.1973 5.82504 14.6853 6.08104 14.1947C6.33704 13.6987 6.7077 13.296 7.19304 12.9867C7.67837 12.6773 8.24637 12.5227 8.89704 12.5227C9.5317 12.5227 10.089 12.6693 10.569 12.9627C11.049 13.256 11.417 13.648 11.673 14.1387C11.929 14.624 12.057 15.1547 12.057 15.7307C12.057 16.2427 11.929 16.736 11.673 17.2107C11.4224 17.68 11.057 18.0613 10.577 18.3547C10.097 18.648 9.53704 18.7947 8.89704 18.7947ZM8.90504 17.7387C9.30504 17.7387 9.66237 17.656 9.97704 17.4907C10.297 17.32 10.545 17.0827 10.721 16.7787C10.9024 16.4693 10.993 16.12 10.993 15.7307C10.993 15.32 10.9077 14.952 10.737 14.6267C10.5664 14.3013 10.321 14.0453 10.001 13.8587C9.68104 13.6667 9.30237 13.5707 8.86504 13.5707C8.46504 13.5707 8.1077 13.6667 7.79304 13.8587C7.4837 14.0453 7.24104 14.304 7.06504 14.6347C6.88904 14.9653 6.80104 15.3307 6.80104 15.7307C6.80104 16.1467 6.90237 16.5067 7.10504 16.8107C7.31304 17.1147 7.57704 17.3467 7.89704 17.5067C8.22237 17.6613 8.55837 17.7387 8.90504 17.7387Z"
  />
  <path
    fill="var(--foreground)"
    d="M15.6397 11.288C15.149 11.288 14.7117 11.1867 14.3277 10.984C13.9437 10.7813 13.645 10.488 13.4317 10.104C13.2184 9.71466 13.1117 9.25866 13.1117 8.73599V5.43999C13.1117 5.41332 13.0877 5.39199 13.0397 5.37599C12.997 5.35999 12.9544 5.35199 12.9117 5.35199V5.19999H14.4557V5.35199C14.413 5.35199 14.3677 5.35999 14.3197 5.37599C14.277 5.39199 14.2557 5.41332 14.2557 5.43999V8.49599C14.2557 9.07199 14.3704 9.51466 14.5997 9.82399C14.8344 10.1333 15.181 10.288 15.6397 10.288C16.141 10.288 16.4744 10.128 16.6397 9.80799C16.8104 9.48799 16.8957 9.07199 16.8957 8.55999V5.43999C16.8957 5.41332 16.8717 5.39199 16.8237 5.37599C16.781 5.35999 16.7384 5.35199 16.6957 5.35199V5.19999H18.2477V5.35199C18.205 5.35199 18.1597 5.35999 18.1117 5.37599C18.069 5.39199 18.0477 5.41332 18.0477 5.43999V8.59199C18.0477 9.43999 17.853 10.1013 17.4637 10.576C17.0797 11.0507 16.4717 11.288 15.6397 11.288Z"
  />
  <path
    fill="var(--foreground)"
    d="M12.0355 10.448L11.0595 11.456L10.9555 11.352C10.9821 11.3253 11.0035 11.2907 11.0195 11.248C11.0355 11.2107 11.0328 11.184 11.0115 11.168L10.5475 10.736C10.0141 11.1253 9.43281 11.32 8.80347 11.32C8.19014 11.32 7.63814 11.1813 7.14747 10.904C6.66214 10.6267 6.28081 10.2533 6.00347 9.784C5.73147 9.31466 5.59547 8.80266 5.59547 8.248C5.59547 7.672 5.72881 7.14133 5.99547 6.656C6.26747 6.16533 6.64881 5.776 7.13947 5.488C7.63547 5.19466 8.20347 5.048 8.84347 5.048C9.44081 5.048 9.96881 5.19466 10.4275 5.488C10.8915 5.776 11.2488 6.16533 11.4995 6.656C11.7555 7.14133 11.8835 7.672 11.8835 8.248C11.8835 8.536 11.8301 8.832 11.7235 9.136C11.6221 9.43466 11.4728 9.72 11.2755 9.992L11.7315 10.416C11.7368 10.4213 11.7475 10.424 11.7635 10.424C11.7901 10.424 11.8195 10.416 11.8515 10.4C11.8835 10.3787 11.9075 10.3573 11.9235 10.336L12.0355 10.448ZM8.82747 10.312C9.19014 10.312 9.52347 10.2293 9.82747 10.064L8.98747 9.288C8.98214 9.28266 8.97147 9.28 8.95547 9.28C8.92881 9.28 8.89947 9.29066 8.86747 9.312C8.83547 9.328 8.81147 9.34666 8.79547 9.368L8.68347 9.256L9.66748 8.256L9.77147 8.36C9.74481 8.38666 9.72348 8.42133 9.70747 8.464C9.69147 8.50133 9.69414 8.528 9.71547 8.544L10.5955 9.36C10.8088 9.02933 10.9155 8.66666 10.9155 8.272C10.9155 7.86133 10.8248 7.48533 10.6435 7.144C10.4675 6.79733 10.2195 6.52266 9.89947 6.32C9.58481 6.11733 9.22747 6.016 8.82747 6.016C8.41681 6.016 8.04614 6.112 7.71547 6.304C7.38481 6.49066 7.12614 6.752 6.93947 7.088C6.75814 7.424 6.66747 7.8 6.66747 8.216C6.66747 8.64266 6.76081 9.016 6.94747 9.336C7.13414 9.65066 7.39014 9.89333 7.71547 10.064C8.04614 10.2293 8.41681 10.312 8.82747 10.312Z"
  />
</svg>
```

With the tokens below, `--mark` and `--foreground` reproduce the dark file on the dark theme and the light file on paper. Outside a themed page, use the fixed pairs only: `fill="black"` on the circle with `fill="white"` on the letters (the dark file), or the reverse (the light file). No other colors.

### Rules

- **Which file:** the dark file on dark surfaces, the light file on light surfaces, the letters alone where only one color is possible.
- **Lockup:** the mark followed by the word "Quov" set in Aoboshi One 400, vertically centered on the mark, with a gap of about a third of the mark's diameter. The word is set in the font; the mark never is.
- **Clear space:** at least a quarter of the mark's diameter on every side.
- **Minimum size:** 16 px for favicons only; 24 px or larger everywhere else.
- **Never:** redraw it, retype the letters, rearrange the grid, recolor it, add a stroke, shadow, glow or gradient, stretch, rotate or crop it, or place it on a busy photograph.

## Palette

Restrained to the point of monochrome. There is no accent hue: the point of view comes from type and structure. Two themes share one set of token names and only the values change:

- **Dark (default):** cold slate, hue 260. Every surface opens dark unless the reader has chosen otherwise.
- **Light (paper):** warm sugar-cane paper, hue 75. Never pure white.

| Token                    | Dark (default)          | Light (paper)           | Role                                                     |
| ------------------------ | ----------------------- | ----------------------- | -------------------------------------------------------- |
| `--background`           | `oklch(0.11 0.01 260)`  | `oklch(0.95 0.02 75)`   | Page base                                                |
| `--card`                 | `oklch(0.15 0.01 260)`  | `oklch(0.98 0.015 75)`  | One step of elevation: frames, code, a table header band |
| `--secondary`            | `oklch(0.2 0.01 260)`   | `oklch(0.91 0.02 75)`   | Subtle fills: the active navigation item, tags, hover    |
| `--muted`                | `oklch(0.2 0.01 260)`   | `oklch(0.91 0.02 75)`   | Inactive and disabled surfaces                           |
| `--foreground`           | `oklch(0.93 0.01 260)`  | `oklch(0.18 0.01 75)`   | Primary text, the letters of the mark                    |
| `--secondary-foreground` | `oklch(0.85 0.01 260)`  | `oklch(0.25 0.01 75)`   | Text on a secondary fill                                 |
| `--muted-foreground`     | `oklch(0.64 0.01 260)`  | `oklch(0.48 0.01 75)`   | Leads, captions, metadata                                |
| `--primary`              | `oklch(0.93 0 0)`       | `oklch(0.18 0 0)`       | The primary button fill                                  |
| `--primary-foreground`   | `oklch(0.13 0 0)`       | `oklch(0.95 0.02 75)`   | Text on primary                                          |
| `--border`               | `oklch(1 0 0 / 10%)`    | `oklch(0 0 0 / 10%)`    | Every hairline, rule and frame                           |
| `--input`                | `oklch(1 0 0 / 12%)`    | `oklch(0 0 0 / 8%)`     | Form control borders                                     |
| `--ring`                 | `oklch(0.55 0.01 260)`  | `oklch(0.48 0.02 75)`   | Focus outline                                            |
| `--mark`                 | `oklch(0.06 0.005 260)` | `oklch(0.995 0.005 75)` | The disc behind the letters of the mark                  |

`--card-foreground` equals `--foreground`. The dark `--muted-foreground` is `0.64`: the product apps ship `0.55`, which measures 4.2:1 on the background and fails WCAG AA for body text. `0.64` is the documented value, and the apps should adopt it.

Color exists only in application UI, for financial and status meaning (gain, loss, warn, destructive), always paired with a sign or a label. Marketing pages, documents and brand material stay monochrome. The semantic values are in `quov-app`.

### Token block

```css
:root {
  color-scheme: dark;
  --radius: 0.375rem;
  --background: oklch(0.11 0.01 260);
  --foreground: oklch(0.93 0.01 260);
  --card: oklch(0.15 0.01 260);
  --card-foreground: oklch(0.93 0.01 260);
  --primary: oklch(0.93 0 0);
  --primary-foreground: oklch(0.13 0 0);
  --secondary: oklch(0.2 0.01 260);
  --secondary-foreground: oklch(0.85 0.01 260);
  --muted: oklch(0.2 0.01 260);
  --muted-foreground: oklch(0.64 0.01 260);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 12%);
  --ring: oklch(0.55 0.01 260);
  --mark: oklch(0.06 0.005 260);
}
:root[data-theme='light'] {
  color-scheme: light;
  --background: oklch(0.95 0.02 75);
  --foreground: oklch(0.18 0.01 75);
  --card: oklch(0.98 0.015 75);
  --card-foreground: oklch(0.18 0.01 75);
  --primary: oklch(0.18 0 0);
  --primary-foreground: oklch(0.95 0.02 75);
  --secondary: oklch(0.91 0.02 75);
  --secondary-foreground: oklch(0.25 0.01 75);
  --muted: oklch(0.91 0.02 75);
  --muted-foreground: oklch(0.48 0.01 75);
  --border: oklch(0 0 0 / 10%);
  --input: oklch(0 0 0 / 8%);
  --ring: oklch(0.48 0.02 75);
  --mark: oklch(0.995 0.005 75);
}
```

### sRGB equivalents

Only for tools that cannot take OKLCH (office documents, slide software, image editors). Translucent tokens are given as they render over their theme's background. Wherever OKLCH works, use OKLCH.

| Token                        | Dark      | Light     |
| ---------------------------- | --------- | --------- |
| `--background`               | `#030407` | `#F7EDE0` |
| `--card`                     | `#090B0F` | `#FFF7EE` |
| `--secondary`, `--muted`     | `#13161B` | `#E9E0D3` |
| `--foreground`               | `#E4E8EF` | `#14110D` |
| `--secondary-foreground`     | `#CACED4` | `#24211C` |
| `--muted-foreground`         | `#898C92` | `#615D57` |
| `--primary`                  | `#E8E8E8` | `#121212` |
| `--primary-foreground`       | `#070707` | `#F7EDE0` |
| `--border` (over background) | `#1C1E20` | `#DED5CA` |
| `--ring`                     | `#6E7278` | `#645C51` |
| `--mark`                     | `#010101` | `#FFFDFA` |

### Contrast

Every text pair meets WCAG 2.2 AA (4.5:1) in both themes. Ratios computed from the OKLCH values, rounded down:

| Pair                              | Dark   | Light  |
| --------------------------------- | ------ | ------ |
| foreground on background          | 16.6:1 | 16.2:1 |
| foreground on card                | 16.0:1 | 17.7:1 |
| secondary-foreground on secondary | 11.4:1 | 12.2:1 |
| muted-foreground on background    | 6.0:1  | 5.6:1  |
| muted-foreground on card          | 5.8:1  | 6.1:1  |
| muted-foreground on muted         | 5.3:1  | 5.0:1  |
| primary-foreground on primary     | 16.4:1 | 16.1:1 |
| ring on background (3:1 needed)   | 4.2:1  | 5.6:1  |

## Typography

Three families with fixed jobs. Hierarchy comes from scale and weight, never from decoration.

| Role        | Family      | Weights       | Use                                                                                          |
| ----------- | ----------- | ------------- | -------------------------------------------------------------------------------------------- |
| Speaks      | Aoboshi One | 400 only      | Statements, page and section titles, product names, the "Quov" wordmark                      |
| Explains    | Geist       | 400, 500, 600 | All running text and interface: paragraphs, leads, buttons, navigation, labels               |
| Labels data | Geist Mono  | 400, 500      | Data only: indexes (01 to 04), domains, statuses, figures, dates, codes, the language switch |

- **Aoboshi One** is never body text and never bold or italic: it has one weight, and a synthesized bold is a defect.
- **Geist Mono** never sets a sentence. Every amount, percentage and date uses it with tabular figures (`font-variant-numeric: tabular-nums`), so columns align.
- **Body size:** 16 to 17 px on screen, 10.5 pt on paper; line length capped near 65 characters. Light text on the dark theme gets slightly more line height (1.65) than dark text on paper (1.6).
- **Scale:** fluid, with at least a 1.25 ratio between steps.
- No fourth family.

### Loading the fonts

With a bundler, self-host them through Fontsource:

```css
@import '@fontsource/aoboshi-one/latin-400.css';
@import '@fontsource-variable/geist';
@import '@fontsource-variable/geist-mono';

:root {
  --font-heading: 'Aoboshi One', ui-serif, Georgia, serif;
  --font-sans: 'Geist Variable', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono Variable', 'Geist Mono', ui-monospace, Menlo, monospace;
}
```

Without a bundler, load "Aoboshi One", "Geist" and "Geist Mono" from Google Fonts:

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Aoboshi+One&family=Geist:wght@400..600&family=Geist+Mono:wght@400..500&display=swap"
/>
```

The font stacks above name both the Fontsource family ("Geist Variable") and the Google Fonts family ("Geist"), so one stack works with either source.

## Structure

- **Depth:** borders only, at the `--border` alpha. No shadows anywhere.
- **Radius:** `0.375rem` on controls and frames. Not round, not sharp.
- **Containers:** ruled lists and tables instead of cards. Never a container inside a container.
- **Data looks like data:** mono only where something is data.
- **Imagery:** real screenshots of shipped work only, in grayscale, in a hairline frame. No stock photography, illustrations, 3D shapes, generated images or portraits. Before capturing a screen that shows client data, replace every person's and organization's name with a sample one (John Doe, Doe Residence) in the page itself; leave the rest of the data as it is.
- **Motion:** quiet. Opacity and transform only, ease-out, nothing that bounces, and `prefers-reduced-motion` always honored.

## Voice

Precise, exact, a little cold, always formal. Quov states what it delivers and stops there.

- **Register:** formal in tone in both languages. English without contractions ("it is", "do not"). Spanish addresses the reader as _tú_ ("Escríbenos", "Agenda una llamada"), never _usted_ and never slang.
- **Claims:** state what is delivered, plainly. No superlatives ("the best", "world-class", "revolutionary"), no prices in public material, no competitor names, no invented figures or metrics, no urgency.
- **Statements, not transcripts:** headlines and leads suggest; structure states. A headline never enumerates what an index, table or list on the same page already shows, and a lead never opens with "We serve companies in four ways" or a similar inventory. Exactness lives in the ledgers, spec lists and facts.
- **People:** none. Quov speaks as "Quov" or "we".
- **Punctuation:** no em dashes, and no double hyphen standing in for one. Use a comma, a colon, parentheses or two sentences.
- **Languages:** English first, Spanish complete. A new string ships in both at once, and the Spanish is a full translation, never a shortened copy.

| Write                                                           | Not                                                              |
| --------------------------------------------------------------- | ---------------------------------------------------------------- |
| Quov designs, builds and operates software for a single client. | We build world-class software that will transform your business. |
| The first call defines scope and next steps.                    | Book now, spots are limited.                                     |
| Escríbenos a contact@quov.io.                                   | Escríbanos a contact@quov.io.                                    |
| Company email addresses on your own domain.                     | Cheaper than [competitor], from [price] a month.                 |
| From the first line of code to the last device.                 | Quov builds software and runs the infrastructure beneath it.     |

## Anti-references

Quov fails if its work could be mistaken for any of these, even when it technically works:

- **SaaS landing clichés:** hero metrics, gradient text or accents, glassmorphism, identical icon-card grids, side-stripe borders.
- **A generic dashboard:** rounded everything, floating shadowed cards, nested cards, decorative icons standing in for data, figures dressed up in tiles.
- **Imagery:** stock photography, illustrations, generated images.
- **People:** any person, name, founder, portrait or team reference.
- **The entity:** the NIT, registration numbers, or any wording that the legal entity is pending or in progress.
- **Selling:** superlatives, prices, competitor names, invented metrics.
- **Translation:** a Spanish version that is partial or weaker than the English one.

## Before you finish

1. Is the mark one of the official files or the inline SVG above, unaltered, with its clear space?
2. Is every color a token from the tables above, with no accent hue?
3. Does Aoboshi One only speak, Geist explain and Geist Mono label data?
4. Is the copy formal, free of superlatives, prices, competitors, invented figures and people?
5. Are there zero em dashes, and does the Spanish use _tú_ throughout?