Craft · Adjacent Competency

Brand work, done from inside the product

Brand has been part of every product job I have had and never the job itself, and this page is written in that order. A bank’s identity pushed through a theme layer so that re-branding the product stopped being a code change. A marketing site I designed and built myself in Webflow. A homepage whose visual styling was tested against the control instead of argued about. This site, whose type and colour render from one token source. And before 2016, at five companies, marketing surfaces were simply part of the work. What this page does not show is an identity invented from a blank page — the name, the mark, the first typeface — and that is said here before the evidence rather than after it.

Specialization
Brand Inside the SystemTheme layers, marketing sites, asset sets
Surfaces Shipped
Web, White-Label, AssetsWebflow site, bank-branded web components, generative sets
Core Tooling
Figma, Webflow, TokensCSS custom properties, Tokens Studio, style references
Honest Limit
No Identity From Zero ShownName, mark and first typeface have been someone else’s brief
6 mo → 2 wks Velocity
Putting a New Bank’s Brand on the Product (upSWOT)
+6.73% Conversion
Lift From Styling Alone, Structure Held Constant (Uvoteam)
5.38 : 1 Typography
Accent Contrast on This Site, Light Theme; 8.60 : 1 in Dark
5 Type
Self-Hosted Faces of One Family on This Site
01 · Evidence

Where this showed up in real products

upSWOTWhite-Label Theming
A Bank’s Brand as a Token Set, Not a Re-Skin
Modules ship as web components inside a bank’s own online banking, so each one wears the bank’s identity on a page we did not control. Brand values resolve in a third token layer that components never reference directly, and every component carried a written boundary of what a bank may change and what it may not. Putting a new bank’s brand on the product went from six months to two weeks.
Read the case →
UvoteamWeb Design, Measured
Visual Styling as the Isolated Variable
Two homepage variants with identical block structure, differing only in header design and styling, against the live control: 187K sessions over 43 days. The styled variant lifted conversion 6.73% at 100% probability of beating the original. A time visual design was measured rather than argued about — and the winner was never rolled out, which taught me the other half of the job.
Read the case →
This siteTypography & Tokens
A Type System You Can Read in the Source
One family in five self-hosted faces, a seven-step type scale plus one fluid display size, and light, dark and system themes rendered from one token source. The contrast ratios are written next to the values — 5.38:1 for the accent on the light ground, 8.60:1 on the dark — and the build stops on any literal font size, weight or spacing in the shared stylesheets: a value has to be a token.
Read the case →
Generative assetsAsset Pipelines
Sets That Stay One Family Across Formats
Style references, seed control and model conditioning so a set of production illustrations and visual assets reads as one family across sizes and viewports, and can be extended later in the same key. No set is shown on this site; the method is on the AI page.
Read the case →
02 · Method

How I actually do it

STEP 01
Brand as a token layer, not a skin
Core holds primitives, Semantic holds intent, and a third set is one brand’s values. Components reference only the middle layer, so a new brand supplies values into the third and never touches a component. Inside somebody else’s page that also means namespacing every token, or the host’s own --brand repaints your buttons.
STEP 02
Read the brand out of what shipped
Before adding anything, measure what exists: the stylesheet’s variable names, the type sizes as rendered, which colours in the palette are already spoken for. A new need gets an unused colour that is already there before it gets a new one. The test of an extension is that nobody can tell where the original stops.
STEP 03
Type carries the hierarchy, and the scale is enforced
One family in the faces actually used, a short type scale with one fluid display size, and a rule for what is set in mono: machine-generated facts — IDs, counts, timestamps — against prose a person wrote. On this site the build stops on any literal size, weight or spacing in the shared stylesheets — a value has to be a token — because a scale drifts one harmless-looking edit at a time.
STEP 04
Measure the styling when the page allows it
When a page carries revenue, visual design is a variable, not a taste. Hold structure constant, change styling alone, run it long enough on both new and returning traffic, and convert the delta into money. Then get it shipped — a result is only worth what the organisation does with it.
03 · Stack

Tools, in service of the above

Web & Sites
WebflowHTML/CSSSelf-hosted web fontsStatic build in Python
Theming
CSS custom propertiesTokens StudioFigma VariablesWeb Components / Shadow DOM
Asset Production
Style referencesSeed controlModel conditioningAdobe CC
Measurement
GA Content ExperimentsHotjarWCAG contrast ratios
The full version

What the complete version of this page adds

  • A bank's theme set in Figma Tokens, and the per-component table of what a bank may and may not change
  • The assignment foundations frame: the palette with its source variable names, the type specimens, the channel rules
  • The decisive homepage test as a table: the styled variant against control, per-session value and order value alongside conversion

It lives at alex.zhovnir.com/craft/brand-and-marketing, behind a password — client agreements, not theatre. Send me a note and I’ll open it: alex@zhovnir.com.

Related: upSWOT · Uvoteam