# Brand Guide > 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. ## 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. ## 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”. ## 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 | Token | Use | Light | Dark | | -------------- | ------------------------------------------------- | ------- | ------- | | `--ca-paper` | Page ground. Washi-toned, never pure white. | #F6F5F2 | #111318 | | `--ca-paper-2` | Raised surface: panels, form fields, quiet cards. | #EFEEEA | #17181D | | `--ca-paper-3` | Banded section, for alternating rhythm. | #EAE8E3 | #1E2026 | | `--ca-rule` | Hairlines and borders. The only separator we use. | #DFDDD7 | #2A2C33 | ### Ink ramp | Token | Use | Light | Dark | On ground | | ------------ | ---------------------------------------------------- | ------- | ------- | ----------------- | | `--ca-ink` | Headings and primary. Blue-black, not neutral grey. | #111318 | #F1F0EC | 17.04:1 / 16.29:1 | | `--ca-ink-2` | Body text, and any copy on a tinted surface. | #3D3F47 | #C2C1BD | 9.63:1 / 10.31:1 | | `--ca-ink-3` | Secondary text — on the base ground only. | #63656B | #8C8D93 | 5.34:1 / 5.62:1 | | `--ca-ink-4` | Decorative and disabled only. Never meaningful text. | #9A9CA3 | #5E606A | 2.52:1 / 2.97:1 | ### Seal | Token | Use | Light | Dark | On ground | | ----------------- | ------------------------------------------------------ | ------- | ------- | --------------- | | `--ca-seal` | Red TEXT and marks. Lifts on dark so it doesn't muddy. | #D0342C | #E8564A | 4.58:1 / 5.19:1 | | `--ca-seal-solid` | Red FILLED surfaces. Pinned in both themes. | #D0342C | #D0342C | 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**. ## 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. ## 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. | Token | Use | Face | Size | | --------- | ------------------- | ----- | -------- | | `--ca-s8` | Display | serif | 4.209rem | | `--ca-s7` | Page title | serif | 3.157rem | | `--ca-s6` | Section heading | serif | 2.369rem | | `--ca-s5` | Sub-heading | serif | 1.777rem | | `--ca-s4` | Lede, pull-quote | sans | 1.333rem | | `--ca-s3` | Body | sans | 1rem | | `--ca-s2` | Small, captions, UI | sans | 0.875rem | | `--ca-s1` | Eyebrow, meta, date | mono | 0.75rem | ## 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. ## Do, and don’t. | Do | 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. --- Source: https://carlosarias.co/brand-guide/