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
101 lines
5.2 KiB
Markdown
101 lines
5.2 KiB
Markdown
---
|
||
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 |
|