seedproject-web/brand/BRAND.md

Carlos Arias — Brand Guide

v1 · locked 2026-07-22

Machine-readable source of truth: 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

---

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