--- title: "Brand Guide | Carlos Arias" description: "The sumi-e brand system behind carlosarias.com: the story, the voice, the palette, the seal rule, the type scale and the layout rules — generated from the live design tokens." url: "https://carlosarias.com/brand-guide" --- Brand guide · v2 # Ink on paper, and one red seal. The design system behind this site. Every colour, size and duration below is read from brand/tokens.css when the page is built, and every contrast ratio is measured here rather than quoted — so this document cannot quietly fall out of step with the site it describes. The story ## Sumi-e, not minimalism. Traditional Japanese ink painting is three things: white paper, black sumi ink, and one red hanko stamp pressed at the end. That is the whole system, and it suits a signature-led identity, because a signature is a brush stroke and a personal seal at once. It sits adjacent to wabi-sabi rather than inside it. The two agree on negative space, asymmetry, restraint and natural imperfection, and we follow both there. They part on colour: wabi-sabi is earth-derived and desaturated, and a saturated red would break it. Sumi-e permits exactly one, used sparingly. The productive tension is that sumi-e wants emptiness while a firm deciding who to trust wants evidence. The resolution runs through every page: the opening is sparse and considered, and the sections behind it carry the proof. Restraint at the front, substance behind it. Positioning & voice ## An experienced operator, not a salesperson. Marketing Engineer for law firms. The label unifies marketing and engineering into one identity, but marketing judgment still leads; the engineering underneath is the reason to believe it, never a headline about tech. Audience decides the order: to a law firm, AI is how the work happens and never the product. To an agency, the engineering is the product, because it is the thing they cannot hire. - ### Direct Say what you believe, without padding. - ### Experienced Authority from depth and clarity, not exaggeration. - ### Analytical Diagnose first. Recommend second. - ### Hands-on Not a presentation and a disappearance. - ### Sceptical Question vanity metrics, hype and agency theatre. - ### Practical The question is always: does this help the firm? Sounds like this > If your SEO agency cannot explain what they did last month, you have a problem. > AI isn’t a marketing strategy. It’s a tool. The strategy still has to make sense. Never this > Your agency is stealing your money. Direct is not hostile, and the brand is not anti-agency. Avoid corporate, motivational, hype-driven and buzzword-heavy registers — and avoid sounding machine-written: no em-dash cadence, no “it’s not just X, it’s Y”. Colour ## Two grounds, one ramp, one seal. The ground is never pure white, and the near-black is blue-black rather than neutral grey — real sumi ink has a cool cast, and the whole ramp inherits it. That single bias is why the neutrals read as chosen rather than inherited. ### Grounds `--ca-paper` Page ground. Washi-toned, never pure white. - **Light**: #F6F5F2 - **Dark**: #111318 `--ca-paper-2` Raised surface: panels, form fields, quiet cards. - **Light**: #EFEEEA - **Dark**: #17181D `--ca-paper-3` Banded section, for alternating rhythm. - **Light**: #EAE8E3 - **Dark**: #1E2026 `--ca-rule` Hairlines and borders. The only separator we use. - **Light**: #DFDDD7 - **Dark**: #2A2C33 ### Ink ramp `--ca-ink` Headings and primary. Blue-black, not neutral grey. - **Light**: #111318 - **Dark**: #F1F0EC - **On ground**: 17.04:1 / 16.29:1 `--ca-ink-2` Body text, and any copy on a tinted surface. - **Light**: #3D3F47 - **Dark**: #C2C1BD - **On ground**: 9.63:1 / 10.31:1 `--ca-ink-3` Secondary text — on the base ground only. - **Light**: #6E7078 - **Dark**: #8C8D93 - **On ground**: 4.53:1 / 5.62:1 `--ca-ink-4` Decorative and disabled only. Never meaningful text. - **Light**: #9A9CA3 - **Dark**: #5E606A - **On ground**: 2.52:1 / 2.97:1 ### Seal `--ca-seal` Red TEXT and marks. Lifts on dark so it doesn't muddy. - **Light**: #D0342C - **Dark**: #E8564A - **On ground**: 4.58:1 / 5.19:1 `--ca-seal-solid` Red FILLED surfaces. Pinned in both themes. - **Light**: #D0342C - **Dark**: #D0342C - **On ground**: 4.58:1 / 3.72:1 Ratios are computed at build time against each theme’s own ground. --ca-ink-4 is decorative and disabled use only — the number above is exactly why it must never carry meaningful text. And --ca-ink-3 is rated against the base ground; on a tinted band it falls below the threshold, so body copy there uses --ca-ink-2. The seal rule ## Red is a seal, not a colour. Red always has a job. Only one element in a view may compete to be it. If two things are fighting to be the red thing, one of them is wrong — and that single discipline is what keeps this reading as Japanese minimalism rather than a startup page with a red button. ### Permitted - The seal mark and logo lozenge - Primary CTAs and filled numbered marks, in --ca-seal-solid - The brush underline, on one focal phrase per view - Section eyebrows on dark grounds, and the eyebrow rule anywhere - A single active state, and hairline accents ### Not permitted - Headlines or body copy - Large filled bands or page backgrounds - Two elements competing to be the red in one view - Small text on a tinted light ground - A filled surface painted in --ca-seal rather than the solid Why the seal is two tokens White on the lifted dark-mode seal is only 3.58:1 and fails. White on --ca-seal-solid is 4.99:1 and passes. So every filled red surface is painted in the solid, in both themes, and --ca-seal stays a text-and-mark colour. Type ## Three faces, one 1.333 scale. Fraunces for display and headings, Inter for body and UI, JetBrains Mono for eyebrows and meta. Wide intervals suit sparse layouts. Running text caps at 62ch, and headings balance. `--ca-s8` Display · serif · 4.209rem Marketing judgment first `--ca-s7` Page title · serif · 3.157rem Marketing judgment first `--ca-s6` Section heading · serif · 2.369rem Marketing judgment first `--ca-s5` Sub-heading · serif · 1.777rem Marketing judgment first `--ca-s4` Lede, pull-quote · sans · 1.333rem Marketing judgment first `--ca-s3` Body · sans · 1rem Marketing judgment first `--ca-s2` Small, captions, UI · sans · 0.875rem Marketing judgment first `--ca-s1` Eyebrow, meta, date · mono · 0.75rem Marketing judgment first Form, motion & imagery ## The rules that do the quiet work. ### Form Near-square 2px radius — nothing is rounded. Separation is always a hairline rule, never a shadow: there is no elevation anywhere in this system. Placement is asymmetric and off-grid; centring everything is the fastest way to make it look like a template. ### Motion Slow, and never asking to be watched. Nothing bounces, pulses or loops. The house reveal is a soft fade with a slight rise, and reduced motion is always honoured. - --ca-dur-quick 180ms - --ca-dur-base 280ms - --ca-dur-slow 620ms - --ca-dur-ink 1500ms ### Imagery Generated imagery is fine for texture, environment and project visuals. Never for portraits — on a site selling AI expertise, a detectably synthetic photo of the person is the one credibility hit that is hard to recover from. Portraits are real photography, graded to the palette. Avoid: glowing circuitry, neural-network motifs, holographic UI, saturated gradients, lens flares, glossy chrome, high-key studio lighting, symmetrical centred compositions, or more than one accent colour. In one table ## Do, and don’t. One red element per view Two things competing to be the red Seal-filled CTAs in --ca-seal-solid Filled red using --ca-seal Washi ground Pure #FFFFFF Near-square radius, 2px Rounded cards Asymmetric, off-grid placement Centring everything Hairline rules for separation Drop shadows and elevation Real photography for portraits Generated portraits Reuse the tokens and shared classes One-off styles and new hex values Source of truth: brand/tokens.css for values, brand/BRAND.md for the reasoning. This page is generated from the first of those. If something here disagrees with the site, the tokens win.