# Carlos Arias — Brand Guide

**v1 · locked 2026-07-22**

Machine-readable source of truth: [`tokens.css`](./tokens.css).
Visual reference: https://claude.ai/code/artifact/d7304e7a-1d43-43e6-ada8-6e5bdff8bfb9

---

## Direction

**Sumi-e.** Ink on paper, with a single vermillion seal.

Traditional Japanese ink painting is white paper, black sumi ink, and one red hanko stamp pressed at the end. That's the whole system. It suits a signature-style logo — a signature is a brush stroke and a personal seal at once.

This is *adjacent to* wabi-sabi, not identical. Wabi-sabi is desaturated and earth-derived; a saturated red would break it. Sumi-e permits exactly one saturated color, used sparingly. Where the two agree — negative space, asymmetry, restraint, natural imperfection — we follow both.

**Positioning it serves:** technical credibility first. Audience is engineers, CTOs, technical hiring managers. Projects lead; marketing experience is supporting context.

**The productive tension:** sumi-e wants emptiness, but a credibility-first portfolio wants evidence and density. Resolution — the homepage runs sparse and considered (few words, lots of air, three projects). Project index and detail pages get denser, because that's where someone evaluating you actually digs in. Restraint at the front, substance behind it.

---

## Palette

| Token | Light | Dark | Use |
|---|---|---|---|
| `--ca-paper` | `#F6F5F2` | `#121317` | Page ground |
| `--ca-paper-2` | `#EFEEEA` | `#191A1F` | Raised surface |
| `--ca-rule` | `#DFDDD7` | `#2A2C33` | Hairlines, borders |
| `--ca-ink-4` | `#9A9CA3` | `#5E606A` | Disabled, faint meta |
| `--ca-ink-3` | `#6E7078` | `#8B8D95` | Secondary text |
| `--ca-ink-2` | `#3D3F47` | `#C2C1BD` | Body text |
| `--ca-ink` | `#14151A` | `#EDECE8` | Headings, primary |
| `--ca-seal` | `#D0342C` | `#E8564A` | Seal — see rule below |

Two deliberate choices worth preserving:

- **The ground is never pure white.** Washi-toned. Pure `#FFF` reads as unconsidered default.
- **The near-black is blue-black, not neutral grey.** Real sumi ink has a cool cast. That bias runs through the entire grey ramp, which is why the neutrals read as chosen rather than inherited.

Dark mode uses a more luminous seal (`#E8564A`) because `#D0342C` muddies against near-black. It is not a naive inversion.

---

## The seal rule

**Red is a seal, not a color. Target 1–2% coverage per screen.**

This single discipline decides whether the site reads as Japanese minimalism or as a generic startup page with a red button. Same hex, entirely different design language.

**Red is permitted on:**
- The seal mark / logo lozenge
- One inline link or emphasis per view
- A single active state (current nav item, selected tag)
- Hairline accents at small scale

**Red is not permitted on:**
- Primary buttons — these are **ink**, not red
- Headlines or body copy
- Filled bands, blocks, or backgrounds
- More than one element competing for attention in the same view

If a screen has two things fighting to be the red thing, one of them is wrong.

---

## Type

1.333 modular scale. Wide intervals suit sparse layouts.

| Token | Size | Face | Role |
|---|---|---|---|
| `--ca-s8` | 67px | serif | Display |
| `--ca-s7` | 50px | serif | Page title |
| `--ca-s6` | 38px | serif | Section heading |
| `--ca-s5` | 28px | serif | Sub-heading |
| `--ca-s4` | 21px | sans | Lede, pull-quote |
| `--ca-s3` | 16px | sans | Body |
| `--ca-s2` | 14px | sans | Small, captions, UI |
| `--ca-s1` | 12px | mono | Eyebrow, meta, date — uppercase, `0.12em` tracking |

Running text caps at `62ch`. Headings get `text-wrap: balance`.

**Faces are unresolved.** The stacks in `tokens.css` are system placeholders — Mincho on macOS, Georgia elsewhere. Scale and role assignments are final; the specific typefaces need a licensing decision before launch.

---

## Logo

Current asset: `CarlosArias-Brand-Logo.svg` — signature wordmark, single-path black, 2077×520 (≈4:1).

- Renders in `--ca-ink`, never in red.
- Pair with a small seal mark rather than colorizing the wordmark itself.
- Minimum width 120px; below that the script becomes illegible.

**Known gap:** a 4:1 wordmark cannot serve as a favicon, social avatar, or app icon. A monogram or seal-lozenge variant is required.

The direction is settled — a **hanko** (判子), the Japanese seal pressed beside a signature on artwork. Signature plus seal is a *rakkan* (落款), and the red is *shuniku* (朱肉), which is where this palette's vermillion is named from. The 印 currently in use is a placeholder: a real hanko carries its owner's name, not the generic character for "seal."

Full concept note, including the four directions under consideration: [`.memory/hanko-seal.md`](../.memory/hanko-seal.md)

---

## Imagery

Generated imagery is permitted for texture, environment, and project visuals. **Not for portraits.** On a site whose pitch is AI expertise, a detectably synthetic photo of yourself is the one credibility hit that's hard to recover from. Portraits are real photography, treated to match the palette.

Photography direction — natural light, restrained grade, no HDR, generous negative space, asymmetric composition, muted saturation. Subjects lean toward hands, workspace texture, materials, and light rather than posed figures.

Prompt fragment for generation, keeping output on-palette:

> washi-paper ground, sumi ink blacks, single muted vermillion accent (#D0342C), natural directional light, soft film grain, generous negative space, asymmetric off-center composition, low saturation, matte finish, no gloss

Explicitly avoid — these read as "AI imagery" and would destroy the identity:

- Blue/cyan/purple glowing circuitry, neural-network motifs, holographic UI
- Saturated gradients, lens flares, bokeh light bursts
- Glossy tech-product rendering, chrome, high-key studio lighting
- Symmetrical centered compositions
- Anything with more than one accent color

---

## Do / don't

| Do | Don't |
|---|---|
| Ink primary buttons | Red primary buttons |
| One red element per view | Red as a general accent |
| Washi ground `#F6F5F2` | Pure white `#FFFFFF` |
| Near-square radius (2px) | Rounded cards |
| Asymmetric, off-grid placement | Centered everything |
| Hairline rules for separation | Drop shadows and elevation |
| Real photography for portraits | Generated portraits |

---

## Open

- [ ] Typeface licensing — scale settled, faces not
- [ ] Logo mark variant for favicon / avatar
- [ ] Real portrait photography
- [ ] Content volume per page type — mocks can't be trusted until a project page's real word count is known