Colophon

Brand reference for mecatl.dev — colors, typography, and design rationale. All tokens are CSS custom properties defined in website/src/css/custom.css.

Mascot & origin

Mecatito — a Xoloitzcuintli puppy with a teal rope collar and copper ears, serving as the mecatl mascot

Mecatito is a Xoloitzcuintli (Xolo) puppy — Mexico's ancient hairless dog, companion to the dead in Aztec mythology. The name mecatl is Nahuatl for "rope" or "cord", reflected in the rope collar and the project's rope-as-harness metaphor.

The color palette is derived directly from the mascot illustration: the charcoal body becomes the background, the teal collar becomes the primary accent, and the copper ears and tail become the secondary accent. The rope provides the warm neutral.

Created by Ozz. Source: assets/mecatito.png.

Color tokens

Dark-only site — one set of tokens, no light/dark split. All tokens are on :root and [data-theme='dark'].

#141210

Background--mec-bgPage background

#1e1b18

Surface--mec-surfaceNavbar, footer, cards

#272320

Surface 2--mec-surface-2Code blocks, table headers

#2a9d8f

Teal--mec-tealPrimary accent — collar

#3dbdad

Teal (bright)--mec-teal-brightHover, active, h3

#1d7068

Teal (dim)--mec-teal-dimSubtle borders, table rule

#c87941

Copper--mec-copperSecondary accent — ears/tail

#e08f52

Copper (bright)--mec-copper-brightHover

#d4a76a

Rope--mec-ropeWarm neutral, inline code

#f0ece8

Text--mec-textPrimary text

#9e9690

Text (muted)--mec-text-mutedSecondary text, subtitles

#332f2b

Border--mec-borderDividers, card edges

Typography

All three families loaded from Google Fonts via a single @import in custom.css. No self-hosted font files required.

Space GroteskGoogle Fonts · Headings, navbar, labels, CTAs

A cloud-native agentic harness

300400500600700

'Space Grotesk', system-ui, sans-serif

InterGoogle Fonts · Body text

The port model lets you swap any adapter without touching the engine loop.

400500

'Inter', system-ui, -apple-system, sans-serif

JetBrains MonoGoogle Fonts · Code, terminal output

go run ./cmd/mecademo

400500

'JetBrains Mono', 'SFMono-Regular', Menlo, monospace

Type scale

h1Home: clamp(2.2rem, 4vw, 3.4rem) / docs: 3rem desktopSpace Grotesk 700Page titles

h2Home: clamp(1.85rem, 3vw, 2.45rem) / docs: 2rem desktopSpace Grotesk 600 or 700Section titles

h3Home: 1rem / docs: 1.5rem desktopSpace Grotesk 600Subsections and card titles

body1rem (16px)Inter 400All body copy

small / muted0.9remInter 400Subtitles, card bodies

label / eyebrow0.7–0.75remSpace Grotesk 600Uppercase labels, sidebar categories

code0.88emJetBrains Mono 400Inline code, code blocks, terminal

UI specimens

Buttons

Read the docs View on GitHub

Inline code

Import the engine module: github.com/stacklok/mecatl/engine and wire a port.LLMProvider.

Admonitions

note

The engine module has its own Go module path with a stable API contract.

warning

engine/adapter/* reference adapters carry no stability promise.

Design decisions

Dark-only: The mascot's dark charcoal body makes the dark palette the canonical one. A light mode would require a different mascot treatment. Simplify: one mode, done well.
Space Grotesk over a more "technical" face: Space Grotesk is geometric and confident without being cold. It reads as a developer tool without feeling generic. Alternatives considered: Syne (too editorial), IBM Plex Sans (too IBM), Geist (too Vercel).
Copper as secondary accent: Copper (ear / tail color) provides contrast against teal and warmth against the charcoal background. Used sparingly for labels and eyebrows where a second color is needed.
Landing page at /: Docs at /docs, product page at /. Consumer-facing open-source projects need a pitch before the reference. The outline/intro doc is the first sidebar item, not the root URL.