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