---
name: brand
description: The Carlos Arias website brand system (carlosarias.co) — a sumi-e identity: ink on washi paper with a single vermillion seal. Use whenever designing, building, restyling, or reviewing any page, component, or image for this site, so the work stays on-brand. Covers the palette, the seal rule (how sparingly red may appear), the type scale, radii, spacing, imagery direction, and the do/don't list. Source of truth: brand/BRAND.md and the tokens in app/src/styles.css.
---

# Skill: Carlos Arias brand system (sumi-e)

You are designing for **carlosarias.co** — the portfolio of an Agentic AI & Automation
Engineer whose audience is engineers, CTOs, and technical hiring managers. Technical
credibility comes first; projects lead, marketing is supporting context.

The identity is **sumi-e**: traditional Japanese ink painting — white paper, black sumi ink,
and one red *hanko* seal pressed at the end. That is the whole system. Adjacent to wabi-sabi
(negative space, asymmetry, restraint, natural imperfection) but permits exactly one
saturated color.

**Always match the existing design system first.** Read `app/src/styles.css` (the `--ca-*`
tokens and the `.ca-*` component classes) and the nearby components before inventing anything.
Reuse existing `.ca-*` classes rather than adding new styles. Full guide: `brand/BRAND.md`.

## The one rule that matters most — the seal rule

**Red is a seal, not a color. Target 1–2% coverage per screen.** This single discipline is
what makes the site read as Japanese minimalism instead of a generic startup page with a red
button. Same hex, entirely different design language.

Red (`--ca-seal`, `#D0342C` light / `#E8564A` dark) is permitted **only** on:
- the seal mark / logo lozenge (the 印),
- **one** inline link or emphasis per view,
- **one** active state (current nav item, selected tag),
- hairline accents at small scale.

Red is **never** allowed on:
- primary buttons — these are **ink** (`--ca-ink`), never 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. When in doubt,
make it ink and leave the seal for the single most important accent.

## Palette (use the tokens, never raw hex)

| Token | Light | Dark | Use |
|---|---|---|---|
| `--ca-paper` | `#F6F5F2` | `#121317` | Page ground — **never pure `#FFF`** |
| `--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, buttons |
| `--ca-seal` | `#D0342C` | `#E8564A` | The seal — see the rule above |

Two choices to preserve: the ground is **washi-toned, never pure white**; the near-black is
**blue-black, not neutral grey** (sumi ink has a cool cast, and that bias runs through the
whole grey ramp). Dark mode uses a more luminous seal on purpose — it is not a naive inversion.

## Type

1.333 modular scale, wide intervals. Serif for display/headings, sans for body, mono for
eyebrows/meta. Eyebrows/meta are uppercase with `0.12em` tracking. Running text caps at
`62ch`; headings get `text-wrap: balance`. Use the existing `--ca-s1`…`--ca-s8` scale tokens
and the `.ca-*` type classes — don't introduce new sizes.

## Form & layout

- **Near-square radius (2px).** No rounded cards.
- **Hairline rules** for separation. No drop shadows, no elevation.
- **Asymmetric, off-grid** placement. Not centered-everything.
- Density: the homepage runs sparse and airy; project index and detail pages are intentionally
  denser (that's where evaluators dig in). Restraint at the front, substance behind it.

## Imagery

Generated imagery is fine for texture, environment, and project visuals — **never for
portraits** (a detectably synthetic photo of the person is an unrecoverable credibility hit on
an AI-expertise site). Portraits are real photography, graded to the palette. On-palette
generation fragment:

> 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 destroy the identity): blue/cyan/purple
glowing circuitry or neural-network motifs, holographic UI, saturated gradients, lens flares,
bokeh bursts, glossy chrome tech-product rendering, high-key studio lighting, symmetrical
centered compositions, or 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 |
| Reuse existing `.ca-*` classes/tokens | Inventing new one-off styles |