From 8e7d20a9acf6e8a569ca43163a015c4f536f199a Mon Sep 17 00:00:00 2001 From: Abubakar Khawaja Date: Tue, 8 Sep 2026 04:07:13 +0500 Subject: [PATCH 01/26] Replace the placeholder brand mark with the Execil wordmark MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The header and footer carried a placeholder: a teal rounded square with a green square inside, next to the name in live text. Both are replaced by the real wordmark — "Execil" in Satoshi Black with the tittle of the "i" swapped for a cross badge, drawn from a client reference image. The letterforms are outlines, not . The badge has to land exactly where the dot was at every size, which live text cannot promise across fallback fonts. Wordmark carries the paths inline rather than pointing at the file in public/brand/, so the letters can take currentColor and the badge can take theme tokens; an could do neither. Two token changes fall out of that: textOnBrand, because the cross sits on the brand fill and needs a colour that survives the Dark theme. Button currently uses surfaceRaised for this, which the Dark theme turns translucent — a latent bug, left alone here. surfaceBrand overridden to teal600 on the inverse surface, because teal700 on ink900 leaves the badge reading as an unstyled dot. Nothing else on a dark subtree uses surfaceBrand today. public/brand/ also holds the second direction the client asked to keep. Nothing references it; see the README there. --- public/brand/README.md | 39 ++++++++ public/brand/cross-dot/execil-mark.svg | 5 ++ .../brand/cross-dot/execil-wordmark-mono.svg | 31 +++++++ .../brand/cross-dot/execil-wordmark-notag.svg | 15 ++++ .../cross-dot/execil-wordmark-reversed.svg | 31 +++++++ public/brand/cross-dot/execil-wordmark.svg | 31 +++++++ .../brand/plus-split/execil-lockup-mono.svg | 46 ++++++++++ .../plus-split/execil-lockup-reversed.svg | 46 ++++++++++ .../plus-split/execil-lockup-stack-only.svg | 20 +++++ public/brand/plus-split/execil-lockup.svg | 46 ++++++++++ public/brand/plus-split/execil-plus.svg | 4 + public/favicon.svg | 5 +- src/base/BrandMark.tsx | 31 ------- src/base/Wordmark.tsx | 88 +++++++++++++++++++ src/sections/SiteFooter.tsx | 14 +-- src/sections/SiteHeader.tsx | 18 +--- src/styles/theme.ts | 5 ++ src/styles/tokens.stylex.ts | 4 + 18 files changed, 420 insertions(+), 59 deletions(-) create mode 100644 public/brand/README.md create mode 100644 public/brand/cross-dot/execil-mark.svg create mode 100644 public/brand/cross-dot/execil-wordmark-mono.svg create mode 100644 public/brand/cross-dot/execil-wordmark-notag.svg create mode 100644 public/brand/cross-dot/execil-wordmark-reversed.svg create mode 100644 public/brand/cross-dot/execil-wordmark.svg create mode 100644 public/brand/plus-split/execil-lockup-mono.svg create mode 100644 public/brand/plus-split/execil-lockup-reversed.svg create mode 100644 public/brand/plus-split/execil-lockup-stack-only.svg create mode 100644 public/brand/plus-split/execil-lockup.svg create mode 100644 public/brand/plus-split/execil-plus.svg delete mode 100644 src/base/BrandMark.tsx create mode 100644 src/base/Wordmark.tsx diff --git a/public/brand/README.md b/public/brand/README.md new file mode 100644 index 0000000..eb3e7b2 --- /dev/null +++ b/public/brand/README.md @@ -0,0 +1,39 @@ +# Brand assets + +Two directions were drawn from client-supplied reference images. **`cross-dot/` +is the chosen one** and is what the site ships; `plus-split/` is kept for +reference and is not referenced by any code. + +Every file is real vector outlines — Satoshi Variable instanced at the weight +below and converted to paths. There is no font dependency at render time and no +`` element, so the marks render identically wherever they land. + +## cross-dot — in use + +"Execil" at wght 900, with the tittle of the "i" replaced by the cross badge. + +| file | use | +| ------------------------------ | ------------------------------------------------------- | +| `execil-wordmark.svg` | primary, with the MEDICAL BILLING tagline | +| `execil-wordmark-reversed.svg` | on `ink900` — white letters, `teal600` badge | +| `execil-wordmark-mono.svg` | `currentColor` throughout, one-colour contexts | +| `execil-wordmark-notag.svg` | no tagline — small sizes, where it cannot be read | +| `execil-mark.svg` | badge alone. Shorter, heavier cross so it survives 16px | + +`src/base/Wordmark.tsx` carries the same geometry inline, so the letterforms can +take `currentColor` and the badge can take theme tokens. It is the component +that renders in the header and footer; these files are for anything outside the +app — email signatures, decks, the client's own use. **They are two copies of +one drawing: change one and change the other.** + +`public/favicon.svg` is `execil-mark.svg` fitted to a 32×32 box. + +## plus-split — not in use + +"+ execil" lowercase at wght 900, cut by a diagonal two-tone split through the +"c", with the name stacked alongside. Kept at the client's request. + +Note the reversed variant is compromised: the palette's brightest teal is +`teal600`, which lands about 3.3:1 on `ink900`, so the accent falls back to +`teal100` and reads as pale mint rather than teal. Adding a brighter teal to the +ramp would fix it. diff --git a/public/brand/cross-dot/execil-mark.svg b/public/brand/cross-dot/execil-mark.svg new file mode 100644 index 0000000..2d00dc7 --- /dev/null +++ b/public/brand/cross-dot/execil-mark.svg @@ -0,0 +1,5 @@ + + Execil + + + diff --git a/public/brand/cross-dot/execil-wordmark-mono.svg b/public/brand/cross-dot/execil-wordmark-mono.svg new file mode 100644 index 0000000..bb76f0f --- /dev/null +++ b/public/brand/cross-dot/execil-wordmark-mono.svg @@ -0,0 +1,31 @@ + + Execil + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/brand/cross-dot/execil-wordmark-notag.svg b/public/brand/cross-dot/execil-wordmark-notag.svg new file mode 100644 index 0000000..af1be29 --- /dev/null +++ b/public/brand/cross-dot/execil-wordmark-notag.svg @@ -0,0 +1,15 @@ + + Execil + + + + + + + + + + + + + diff --git a/public/brand/cross-dot/execil-wordmark-reversed.svg b/public/brand/cross-dot/execil-wordmark-reversed.svg new file mode 100644 index 0000000..4e47575 --- /dev/null +++ b/public/brand/cross-dot/execil-wordmark-reversed.svg @@ -0,0 +1,31 @@ + + Execil + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/brand/cross-dot/execil-wordmark.svg b/public/brand/cross-dot/execil-wordmark.svg new file mode 100644 index 0000000..9b583d2 --- /dev/null +++ b/public/brand/cross-dot/execil-wordmark.svg @@ -0,0 +1,31 @@ + + Execil + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/brand/plus-split/execil-lockup-mono.svg b/public/brand/plus-split/execil-lockup-mono.svg new file mode 100644 index 0000000..0362021 --- /dev/null +++ b/public/brand/plus-split/execil-lockup-mono.svg @@ -0,0 +1,46 @@ + + Execil — Medical Billing + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/brand/plus-split/execil-lockup-reversed.svg b/public/brand/plus-split/execil-lockup-reversed.svg new file mode 100644 index 0000000..60cb723 --- /dev/null +++ b/public/brand/plus-split/execil-lockup-reversed.svg @@ -0,0 +1,46 @@ + + Execil — Medical Billing + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/brand/plus-split/execil-lockup-stack-only.svg b/public/brand/plus-split/execil-lockup-stack-only.svg new file mode 100644 index 0000000..7356832 --- /dev/null +++ b/public/brand/plus-split/execil-lockup-stack-only.svg @@ -0,0 +1,20 @@ + + Execil — Medical Billing + + + + + + + + + + + + + + + + + + diff --git a/public/brand/plus-split/execil-lockup.svg b/public/brand/plus-split/execil-lockup.svg new file mode 100644 index 0000000..01cedd9 --- /dev/null +++ b/public/brand/plus-split/execil-lockup.svg @@ -0,0 +1,46 @@ + + Execil — Medical Billing + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/brand/plus-split/execil-plus.svg b/public/brand/plus-split/execil-plus.svg new file mode 100644 index 0000000..ff7b3c7 --- /dev/null +++ b/public/brand/plus-split/execil-plus.svg @@ -0,0 +1,4 @@ + + Execil + + diff --git a/public/favicon.svg b/public/favicon.svg index 825b0df..07c6b37 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1,4 +1,5 @@ - - + + + diff --git a/src/base/BrandMark.tsx b/src/base/BrandMark.tsx deleted file mode 100644 index 85ef5ed..0000000 --- a/src/base/BrandMark.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import * as stylex from '@stylexjs/stylex' - -import { color, radius } from '../styles/tokens.stylex' - -const styles = stylex.create({ - mark: { - alignItems: 'center', - backgroundColor: color.surfaceBrand, - borderRadius: radius.md, - display: 'flex', - height: '32px', - justifyContent: 'center', - width: '32px', - }, - inner: { - backgroundColor: color.textSuccess, - borderRadius: radius.sm, - height: '12px', - width: '12px', - }, -}) - -/** The logo lockup's square. Purely decorative — the brand link carries the - * accessible name, so this is always aria-hidden. */ -export function BrandMark() { - return ( -