feat(brand): add the Engine wordmark and figure mark as vector components - #3
Merged
Conversation
…ents Vector artwork from the brand team, which closes the third gap in ENGINE-DESIGN-SYSTEM.md §12: every mark in this system until now was a raster extraction from deck page images at roughly 29px source, and went soft above 24px. These scale. Two components rather than four. The primary and secondary SVGs are the same geometry with a different `fill` — white for dark surfaces, Off Black for print and inverted panels — so shipping both files would duplicate 3.9KB of path data for one attribute and let the copies drift. One component each, with a two-value `variant`. Colour is that variant rather than `currentColor`, deliberately. currentColor would let any ancestor's text colour become brand colour, and a magenta wordmark is one careless `text-primary` away — the brand allows white and Off Black and nothing else, never outlined, stretched, skewed or recoloured. Constraining it to two named values makes the sanctioned choice the only reachable one. Sizing is height-only by class, with width from the viewBox. The brand forbids distortion and neither 810:1000 nor 2000:449 is a ratio anybody reproduces by hand, so there is no width prop to get wrong. Accessibility follows what the mark is doing. The wordmark carries the company name as its content, so it defaults to title="Engine" and role="img"; the figure mark is decorative by default and gets aria-hidden, so a screen reader does not announce the brand twice when it sits beside naming text. Either can be flipped per instance. Used where the branding already was: the gallery header now carries the wordmark instead of the word "Engine" in mono caps, and the favicon is the figure mark inlined as a data URI — no extra request, and no second copy of the path to drift from the component. New Section 00 shows both marks, both colourways and the scale range. The wordmark being artwork rather than type is the whole reason this belongs in the package: with the vector here, there is no longer any excuse to typeset "engine" in Proxima Nova and hope.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Vector artwork from the brand team, closing the third gap in
ENGINE-DESIGN-SYSTEM.md§12 — every mark in this system until now was a rasterextraction from deck page images at ~29px source and went soft above 24px.
Two components, not four
The primary and secondary SVGs are identical geometry with a different
fill.Shipping both would duplicate 3.9KB of path data to change one attribute, and
let the two copies drift. So: one component per mark, with a two-value
variant(primary= Pure White,secondary= Off Black).Why
variantand notcurrentColorcurrentColoris the obvious choice and the wrong one here. It would let anyancestor's text colour become brand colour — a magenta wordmark is one careless
text-primaryaway. The brand permits white and Off Black and nothing else,"never outlined, stretched, skewed or recoloured". Two named values make the
sanctioned choice the only reachable one.
Sizing is height-only for the same reason: the brand forbids distortion, and
neither 810:1000 nor 2000:449 is a ratio anybody reproduces by hand.
Accessibility
Follows what each mark is doing. The wordmark carries the company name as
content, so it defaults to
title="Engine"+role="img". The figure mark isdecorative by default and gets
aria-hidden, so a screen reader does notannounce the brand twice beside naming text. Either is overridable per instance.
Used where the branding already was
copy of the path to drift
Verified in the built gallery: 3 wordmarks and 6 icons render, 7 white and 2
Off Black, 4 titled and 5
aria-hidden.Not included
The sub-brand lockups (wordmark plus a dot badge and the sub-brand name).
Their badge artwork is still raster, so that gap stays open in §12 until the
brand team supplies vectors for those too.