Quov

/design-system/brand

Brand

The base of everything else: the name, the mark, both palettes, the three type roles and the voice. Web pages, documents, artifacts and application UI apply these rules; none of them changes them.

Agent filequov-brand.en.mdquov-brand.es.md

01

Identity

Quov is a Colombian company that builds software and runs the infrastructure beneath it. It speaks as “Quov” or “we”, never through a person.

Name
Quov
Legal name
Quov S.A.S., and nothing more.
Domain
quov.io
Contact
contact@quov.io
Lines of business
Products, tailored software, infrastructure and devices. Four lines, as the mark has four letters.

Do

  • Write the name as Quov: a capital Q, then lowercase.
  • Use the legal name, Quov S.A.S., only where an entity must be named: a footer, a document, a contract.
  • Speak as “Quov” or “we”.

Do not

  • QUOV, quov or QuOV in running text. The capitals live only inside the mark.
  • A NIT, a registration number, or any wording that the entity is pending or in progress.
  • Any person: no founder, team member, portrait or personal name.

02

The mark

Four letters, Q U O V, in a 2×2 grid inside a circle. Quov offers four things, so the mark’s grid is also the structure of its pages. The geometry is fixed: always use the official files.

quov-mark-dark: black disc, white letters. On dark surfaces.
quov-mark-light: white disc, black letters. On light surfaces.
quov-letters: the letters alone, for single-color use.
Lockup: the mark, then “Quov” in Aoboshi One. On a themed page the disc takes --mark and the letters take --foreground, which reproduces the dark file on the dark theme and the light file on paper.
Quov

dark, default

Quov

light, paper

Sizes

64 px
32 px
24 px
16 px
Construction
QU on the top row, OV on the bottom row, centered in a circle. The four outlines are fixed; nothing is set in a font.
Which file
The dark file on dark surfaces, the light file on light surfaces, the letters alone where only one color is possible (embossing, a stamp, single-color print).
Lockup
The mark followed by “Quov” 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 is never.
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.

Do

  • Use the official SVG, or the PNG at twice the size it is displayed.
  • Choose the file by the surface: dark on dark, light on light.
  • Keep the mark round and upright, with its clear space.

Do not

  • Redraw it, retype the letters in a font, or rearrange the grid.
  • Recolor it, or add a stroke, shadow, glow or gradient.
  • Stretch, rotate or crop it, or place it on a busy photograph.

03

Logo files

SVG for anything that scales, PNG with a transparent background from 32 to 1024 px. The same files are served at https://quov.io/design-system/logo/.

04

Palette

Restrained to the point of monochrome. Both themes share one set of token names and only the values change: dark slate at hue 260 is the default, sugar-cane paper at hue 75 is the alternative. There is no accent hue; the point of view comes from type and structure.

Surfaces in use

01

Infrastructure

Networks, access rules and isolated storage, defined as code.

Card surface with foreground text.

Muted foreground for metadata.

Schedule a callcontact@quov.iosecondary

dark, default

01

Infrastructure

Networks, access rules and isolated storage, defined as code.

Card surface with foreground text.

Muted foreground for metadata.

Schedule a callcontact@quov.iosecondary

light, paper

  • --background

    Page base.

    dark, defaultoklch(0.11 0.01 260)
    light, paperoklch(0.95 0.02 75)

  • --card

    One step of elevation: frames, code, a table header band.

    dark, defaultoklch(0.15 0.01 260)
    light, paperoklch(0.98 0.015 75)

  • --secondary

    Subtle fills: the active navigation item, tags, hover.

    dark, defaultoklch(0.2 0.01 260)
    light, paperoklch(0.91 0.02 75)

  • --muted

    Inactive and disabled surfaces.

    dark, defaultoklch(0.2 0.01 260)
    light, paperoklch(0.91 0.02 75)

  • --foreground

    Primary text and the letters of the mark.

    dark, defaultoklch(0.93 0.01 260)
    light, paperoklch(0.18 0.01 75)

  • --secondary-foreground

    Text on a secondary fill.

    dark, defaultoklch(0.85 0.01 260)
    light, paperoklch(0.25 0.01 75)

  • --muted-foreground

    Leads, captions, metadata. The dark value corrects the apps’ 0.55, which fails AA.

    dark, defaultoklch(0.64 0.01 260)
    light, paperoklch(0.48 0.01 75)

  • --primary

    The primary button fill. Achromatic: there is no brand hue.

    dark, defaultoklch(0.93 0 0)
    light, paperoklch(0.18 0 0)

  • --primary-foreground

    Text on primary.

    dark, defaultoklch(0.13 0 0)
    light, paperoklch(0.95 0.02 75)

  • --border

    Every hairline, rule and frame. Structure comes from borders, never shadows.

    dark, defaultoklch(1 0 0 / 10%)
    light, paperoklch(0 0 0 / 10%)

  • --input

    Form control borders.

    dark, defaultoklch(1 0 0 / 12%)
    light, paperoklch(0 0 0 / 8%)

  • --ring

    Focus outline, 2 px.

    dark, defaultoklch(0.55 0.01 260)
    light, paperoklch(0.48 0.02 75)

  • --mark

    The disc behind the letters of the mark, a step beyond the page.

    dark, defaultoklch(0.06 0.005 260)
    light, paperoklch(0.995 0.005 75)

Color exists only in application UI, for financial and status meaning: gain, loss, warn and destructive, always paired with a sign or a label. Marketing pages, documents and brand material stay monochrome. See Application UI.

05

Contrast

Every text pair meets WCAG 2.2 AA (4.5:1) in both themes, computed from the OKLCH values. The apps’ dark muted-foreground, 0.55, measures 4.2:1 and fails; the corrected 0.64 is the documented value, and the apps should adopt it.

  • foreground on background

    Running text

    dark16.6:1
    light16.2:1

  • foreground on card

    Text on a frame

    dark16.0:1
    light17.7:1

  • secondary-foreground on secondary

    Tags, active items

    dark11.4:1
    light12.2:1

  • muted-foreground on background

    Leads, captions

    dark6.0:1
    light5.6:1

  • muted-foreground on card

    Captions in a frame

    dark5.8:1
    light6.1:1

  • muted-foreground on muted

    Disabled labels

    dark5.3:1
    light5.0:1

  • primary-foreground on primary

    Primary button

    dark16.4:1
    light16.1:1

  • ring on background

    Focus outline (3:1 needed)

    dark4.2:1
    light5.6:1

06

Type

Three families with fixed jobs: Aoboshi One speaks, Geist explains, Geist Mono labels data. Hierarchy comes from scale and weight, never from decoration.

Speaks

Aoboshi One

400 only

@fontsource/aoboshi-one

From the first line of code to the last device.

Statements, page and section titles, product names, the “Quov” wordmark. Never body text, never bold.

Explains

Geist

400, 500, 600

@fontsource-variable/geist

When no product fits, Quov designs, builds and operates software for a single client, from definition to operation.

All running text and interface: paragraphs, leads, buttons, navigation, form labels. 16 to 17 px on screen.

Labels data

Geist Mono

400, 500

@fontsource-variable/geist-mono

01 kin.quov.io By invitation 2026-10-25

Data only, never a sentence: indexes, domains, statuses, figures, dates, codes, the language switch. Always tabular figures.

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, so each level is unmistakable.
Figures
Every amount, percentage and date is set in Geist Mono with tabular figures, so columns align.
Never
A sentence in mono, body text in Aoboshi One, a bold or italic Aoboshi One (it has one weight), or a fourth family.
With a bundler: Fontsource packages
/* Self-hosted, as the site and the apps load them. */
@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: Google Fonts
<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"
/>

07

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.
Statements
Headlines and leads suggest; structure states. A headline never lists what an index, table or list on the same page already shows.
Claims
State what is delivered, plainly. No superlatives, no prices in public material, no competitor names, no invented figures.
People
None. No names, founders, portraits or team. 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.

Do

  • Quov designs, builds and operates software for a single client.
  • Quov diseña, construye y opera software para un solo cliente.
  • The first call defines scope and next steps.
  • Escríbenos a contact@quov.io.
  • From the first line of code to the last device.

Do not

  • We build world-class software that will transform your business.
  • We’re the team you’ve been looking for.
  • Escríbanos a contact@quov.io.
  • Quov builds software and runs the infrastructure beneath it.
  • Cheaper than [competitor], from [price] a month.

08

Anti-references

Quov fails if a page could be mistaken for any of these, even when it technically works.

SaaS clichés
Hero metrics, gradient text or accents, glassmorphism, identical icon-card grids, side-stripe borders.
Generic dashboard
Rounded everything, floating shadowed cards, nested cards, decorative icons standing in for data, figures dressed up in tiles.
Imagery
Stock photography, illustrations, 3D shapes, generated images. Real screenshots only, in grayscale, in a bordered frame.
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, urgency.
Translation
A Spanish page that is a partial or weaker copy of the English one.

Agent file

The rules of this page as a Markdown file for an agent: in a CLAUDE.md, a system prompt or attached to a request. It is the base file: load it before any other guide. Identical content in English and Spanish.

Fetch from the command line
curl -fLO https://quov.io/design-system/quov-brand.en.md
curl -fLO https://quov.io/design-system/quov-brand.es.md