Web pages

Every value lives in src/styles/globals.css as a Tailwind 4 token, with the names the apps use. Components use the token names, never a literal color; outside the site, copy the token block from the brand file.

bg-background

Page base. The only page background; sections do not alternate bands.

bg-card

One step of elevation: screenshot mats, code, an open sheet.

bg-secondary

Subtle fills: hover on a ghost control, a tag.

text-foreground

Text, the current navigation item, the letters of the mark.

text-muted-foreground

Leads, captions, metadata, inactive navigation.

bg-primary

The primary button, with text-primary-foreground. One per view.

border-border

Every hairline, rule and frame, at 10% alpha.

ring

Focus outline: 2 px solid, 3 px offset.

font-heading

Aoboshi One. h1 and h2 get it from the base layer.

font-sans

Geist, the default on body.

font-mono

Geist Mono, for data only.

rounded-lg

0.375rem, the system radius: controls and frames. rounded-md and rounded-sm for smaller parts.

ease-out-quint

cubic-bezier(0.22, 1, 0.36, 1), the only easing.

light:

Variant for the paper theme, active when <html> carries data-theme="light".

Fluid, with at least a 1.25 ratio between steps. Aoboshi One for the top three levels, Geist for reading, Geist Mono for data.

Generous space between sections, tight grouping inside them. Each section is built differently, so the page never turns into a grid of cards.

Container

container-page: max-width 76rem, centered, gutters of 1rem on phones, 1.5rem from 40rem wide, 2rem from 64rem.

Section rhythm

section-y: padding-block clamp(4rem, 2.75rem + 5vw, 7.5rem). Sections sit on the page background and are separated by one hairline.

Section head

A mono index (01 to 04), the title in Aoboshi One, then a lead in muted-foreground under 65 characters.

Composition

Asymmetric two columns from lg: the head on the narrow side, the content on the wide side. A single column on phones.

Depth

Borders only, at the 10% token. No shadows anywhere. Never a container inside a container.

Anchors

The header is fixed, so anchored sections keep a 5rem scroll padding.

The site’s pieces, rendered in both themes. Before building something new, use one of these.

Quiet. Two moments in the whole site, and nothing else.

Entrance

The hero’s 2×2 index only: each cell fades in and rises a few pixels, staggered, with ease-out-quint. Opacity and transform only.

Theme switch

A 300 ms crossfade of color, background and border color.

Never

Scroll-triggered reveals, parallax, hover lifts, bounce or elastic easing, animated layout properties.

Reduced motion

prefers-reduced-motion collapses every animation and transition to an instant change.

English and Spanish, complete in both. A new string ships in both languages at once.

Routes

English at /, Spanish under /es. Route segments and anchor ids stay English in both: #products, #software, #infrastructure, #devices, #contact.

Document

<html lang="en"> and <html lang="es-CO">; og:locale en_US and es_CO with the other as alternate; hreflang en, es and x-default; a canonical per locale.

Switch

EN / ES in mono in the header and the footer. It links to the same page in the other language and marks the current one with aria-current.

Copy

One typed dictionary per locale; the Spanish one is typed from the English one, so a missing key fails the build.

Register

English without contractions; Spanish with tú.

Schedule a call

Links to the booking page. Until one exists, it is a mailto to contact@quov.io with a subject in the page’s language.

Dark slate is the default for every first visit; the operating system preference is not consulted. Paper is one click away and stays chosen.

Toggle

An icon button in the header with an accessible label in the page’s language that names the target (“Switch to light theme”, “Cambiar a tema claro”) and aria-pressed.

Storage

localStorage under quov-theme, every access in try/catch. Without storage the site stays dark and still works.

No flash

An inline script in <head> sets data-theme="light" on <html> before the first paint.

Browser color

theme-color carries both values, and the toggle updates it.

<!-- In <head>, before any stylesheet paints: applies the stored theme. -->
<script>
  try {
    if (localStorage.getItem('quov-theme') === 'light') {
      document.documentElement.dataset.theme = 'light';
    }
  } catch {
    /* No storage: the page stays dark. */
  }
</script>

Screenshots

Real pages of shipped work only, in grayscale, in the bordered frame above. Alt text in both languages says what the image shows and invents nothing.

Never

Stock photography, illustrations, 3D shapes, generated images, portraits.

Contrast

WCAG 2.2 AA in both themes, checked with a contrast computation, not assumed.

Keyboard

The header and the sheet are reachable and operable by keyboard. Focus is always visible: 2 px ring, 3 px offset.

Structure

One h1 per page, h2 per section, h3 for items. Decorative SVG carries aria-hidden.

The rules of this page as a Markdown file for an agent: in a CLAUDE.md, a system prompt or attached to a request. Load quov-brand first; this file applies it and never overrides it. Identical content in English and Spanish.

• Englishquov-web.en.mdDownloadOpen
• Españolquov-web.es.mdDownloadOpen

curl -fLO https://quov.io/design-system/quov-brand.en.md
curl -fLO https://quov.io/design-system/quov-web.en.md
curl -fLO https://quov.io/design-system/quov-web.es.md