Carlos Arias
7fc99415b4
- .claude/skills/: brand skill (from BRAND.md) + ui-ux symlink, so the CLI loads design skills natively - cja_tasks queue (migration 011) + admintasks controller (create/list/get/cancel) - api/cli/tasks-next.php (atomic claim) + tasks-finish.php - runner: buildDesignPrompt, runDesignTask (clean-tree guard, build-gate, auto-publish commit or revert), drainTasks loop, POST /devconsole/tasks/run
5.2 KiB
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 |