# Haux Brand Guidelines > The brand guideline for Haux, a senior-led design studio. > Everything below is the working rule, not a summary of one. > > Where a decision has not been made, the page says so rather than > inventing a rule. Treat anything marked as an open decision as unsettled. Source: https://brand.haux.studio ## 01 · Start here A guideline only works if the binding parts are obvious. This section separates the decisions that are fixed from the ones that are guidance, names who the rules apply to, and points at where the files live. *Updated 2026-08-17. Source: https://brand.haux.studio/start-here* ### Read this before you make anything Two questions come up on every project: does this rule bind me, and where do I get the file? Both are answered on this page. Anything carrying the Haux name is covered, whether the studio made it, a contractor made it, or a client did. #### Who this binds Three groups use this document and each uses it differently. The studio treats it as the working system and revises it. Contractors treat it as the brief, so nothing has to be agreed by email that is already settled here. Clients applying the Haux name to a co-produced piece are held to the same rules. Co-branded lockups are the one case with no rule yet, and Brand architecture says so plainly rather than guessing at one. Work that carries no Haux name is out of scope. Client projects delivered under the client’s own identity follow the client’s system, not this one. ### Four things are fixed. The rest is judgement. Changing a fixed element costs recognition, which is the only asset a brand this size has. Everything else is guidance, and guidance can be argued with if the argument is good. #### Fixed Four elements are settled. They may not be redrawn, re-tinted, substituted or extended on a project. The mark, in the lockups Logo permits, and the three primary colours with their ramps. The typefaces, in the roles Typography assigns them, and the word lists in Voice and tone: both the words the brand uses and the ones it refuses. #### Flexible Layout, imagery and motion are guidance. They are written as recommendations with the reasoning attached, so a project can depart from them when the reasoning does not hold. A departure is a judgement call and it should be recorded rather than absorbed. Governance sets out how to raise one and who signs it off. #### The three fixed colours > Three primary colours. Everything else in the palette exists so these can stay rare. | Name | Hex | Token | Role | Pantone | | --- | --- | --- | --- | --- | | Orange 500 | `#ff3c00` | `--haux-orange-500` | The signal. One moment per view, never the field. | PMS 172 C | | Near-black 900 | `#050505` | `--haux-black-900` | Structure. Type, rules and inverted bands. | | | Near-white 100 | `#fcfcfc` | `--haux-white-100` | The field. Every layout starts here and earns its way off it. | | *Ramp steps, gradients and the eight structural neutrals are set out in Colour, along with the 60/30/10 ratio that governs how much of each is used. The three bases above are the part that does not move.* > Fixed is fixed. Everything else is judgement. ### Link the rule, do not describe it Most questions are answered by one section, and reading this front to back is a waste of an afternoon. Work in the order below instead. Check whether the element is fixed, read the section that owns it, then apply the rule as written. If the rule does not fit the case in front of you, that is worth reporting, because it usually means the rule was written for a narrower case than it claims. Every rule on this site has its own anchor. The hash beside a heading is a link to that rule alone, so a disagreement can be settled by pasting a URL rather than paraphrasing a paragraph. #### When two sections disagree The more specific section wins. Colour governs which colours exist, Accessibility governs whether a pair may carry text, and Accessibility wins on that question every time. If neither section resolves it, the decision has not been made. Say so and raise it through Governance rather than picking one and shipping it, because a guess that ships becomes a precedent. ### Cite the date, not a version number A rule is only useful if you can tell how current it is, so every section carries its own date at the top. #### Version and date This release is dated 17 August 2026. Sections carry their own dates and those dates differ, because sections are revised independently rather than republished together. A numbered release scheme has not been agreed. Cite the section and its date until Governance sets one, and treat any undated copy of these rules as out of date. #### Where to get files Logo files, fonts, templates and the token package are in Downloads, with the licence terms attached to each. Nothing here should be recreated by eye or exported from a screenshot. If the file you need is not in Downloads, request it through the route in Governance rather than rebuilding it, because a rebuilt asset is a second version of a fixed element. *Everything on this site holds until a dated revision says otherwise.* --- ## 02 · Strategy Design is the most underused lever in business, and this section sets out what the studio does about that. Purpose, personality, audience and services are recorded here because every identity decision downstream reports back to them. *Updated 2026-08-12. Source: https://brand.haux.studio/strategy* ### Design is the most underused lever in business Most companies treat design as a finishing step applied after the real decisions are made. The result is predictable, and it is expensive. Design applied last can only decorate decisions it was too late to influence. The result is a familiar set of outcomes. Products that function but do not perform. Interfaces that work but do not retain. Brands that exist but are not remembered. Each of those is a business result rather than a matter of taste, and each one is measurable by the company paying for it. #### Vision The studio Sri Lanka’s most ambitious companies engage as a matter of course, not as a last resort. The measure is the reputation that precedes the conversation. #### Mission Design products that help businesses reach their goals, through experiences customers choose to return to. Success is defined by the client, not assumed. #### The one belief > Precision, speed and craft are not in tension. They are the same thing done correctly. ### Five traits, and the way each one fails A trait that cannot fail is not a trait, it is a compliment. Each of the five below carries the behaviour that proves it and the behaviour that counterfeits it. Traits are only useful at the moment of a decision. Each one below names what it looks like in practice, and the failure it turns into when it is performed rather than meant. The failure half is the more useful one. Brand personalities go wrong by overshooting a trait far more often than by missing it. **Bold. Take a position and defend it.** - Do: “This is what we would change, and this is why it will perform better.” One recommendation, with the reasoning attached to it. - Don't: Three concepts with no preference, handed over for the client to choose between. That is a decision passed back to the person who hired you to make it. **Confident. Explain the decision, then stop.** - Do: A concise rationale in plain language, sized to the decision it supports. - Don't: A justification deck built to demonstrate effort rather than to make the case. Length reads as doubt, not as rigour. **Playful. Character in the writing, never in the judgement.** - Do: Sharp copy with character, in the places where character costs nothing. - Don't: Humour that undermines confidence in a deliverable somebody is paying for. A joke in a recommendation reads as hedging. **Energetic. Visible forward motion, every week.** - Do: Consistent turnarounds, and work that has visibly moved between one conversation and the next. - Don't: Speed that compromises quality. That buys a week and spends a rebuild. **Timeless. Reference trends, do not follow them.** - Do: Systems built to endure, with trends referenced where they earn their place. - Don't: Work that dates within eighteen months and has to be redrawn at the client’s cost. *Traits are stated as pairs because the failure is where the argument in a review actually happens. Nobody rejects “be bold”; people reject the third concept that was added to avoid choosing.* ### What the work is judged against Values earn their place by settling arguments rather than by sounding right. Four of them, and the six things the brand is meant to feel like. Each value below is a tiebreaker. When two options are both defensible, these decide which one ships. #### Beautiful and Functional Beauty bought with usability is decoration, and usability that refuses beauty is an excuse. A screen survives both tests before it ships or it does not ship. #### Craft Without Compromise Detail is the part a client cannot brief and a user cannot unsee. Nothing goes out at eighty percent because a date arrived. #### Honest Collaboration Bad news travels immediately, including when the studio caused it. A client who hears about a problem late has lost the only thing that mattered, which is the chance to act on it. #### Speed With Intention Fast is a feature right up until it starts buying rework. Every turnaround is planned, and speed that would require guessing is refused rather than absorbed. #### The brand feels like The clarity of arriving at the precise word after a long search. A workspace returned to order. An interface element that responds exactly as expected, without hesitation or friction. A well-run operation where nothing is missing and nothing is surplus. The moment a complex dataset resolves into a single legible chart. A senior editor’s annotation, precise and entirely without ego. *These are the reference points for art direction, motion and copy when a decision is too small to have earned a rule of its own. A proposal that feels like none of them is usually wrong, and the fastest way to say why is to name the anchor it misses.* ### Four segments, two tiers Founders and enterprise teams arrive with different problems, and the same deliverable does not answer both. The two tiers differ in what is at risk when design is late. For founders it is runway, and for enterprise teams it is capacity. ##### Tier 1 · Funded founders Runway is the constraint, and design decisions compound faster here than anywhere else. ###### YC-backed founders under investor scrutiny Every surface is read as evidence of how the company is run. A product that looks unfinished raises questions in rooms the founder is not in, and cannot answer. ###### MVP-stage founders Early decisions set the price of every later build cycle. A weak structure chosen in week two is paid for in every sprint after it, usually without anyone tracing the cost back. ##### Tier 2 · Enterprise teams The constraint is seniority and capacity rather than budget. ###### Enterprises without senior design leadership The team can execute and nobody is deciding. Work ships steadily and pulls in four directions, because the standard lives in individual judgement rather than in a system anyone can apply. ###### Enterprises at capacity The team knows what to do and cannot get to it. Embedded support absorbs the overflow without a hiring cycle, and without the months of onboarding a hire would cost. ### Senior thinking on every project, with nobody in between Most studios put an account layer between the client and the person doing the work. That layer is where context is lost and where timelines quietly grow. A lean operating model with retained designers is what makes the rest of this possible. Senior thinking is on every project, rather than sold in the pitch and delegated afterwards. Clients talk to the designer doing the work. Nothing is relayed, so nothing is lost in the relay. #### SaaS Product Design & Redesign A product that grew feature by feature stops making sense to the people using it. A redesign restores the structure, and the retention that went with it. #### MVP Design A first build sets the ceiling for everything after it. The work here is deciding what to leave out, so that what ships can be judged honestly. #### Branding A company that is not remembered is re-evaluated at every purchase. Identity work fixes the memory, which is a larger problem than the logo. #### Motion Design Motion tells a user what just happened and what to expect next. Used properly it removes explanation from the interface rather than adding decoration to it. #### Website Design & Development A site that describes the company is not the same as one that converts. Design and build stay in one place, so the second is what gets shipped. #### UX Audit Teams usually know something is wrong and disagree about what. An audit replaces the argument with a prioritised list and the evidence behind each item. #### Designer Augmentation Hiring takes a quarter and the work is due now. Embedded designers join the existing team and its rituals instead of running a parallel process beside it. *Seven services, described in plain language and never sub-branded. Brand architecture sets out why none of them gets a mark of its own.* ### Ancient precision. Modern speed. A name has to carry the promise before anyone reads a word of copy. This one was chosen for what it does at a glance. The name comes from hawk: speed, precision and sharp vision, which is the whole of the promise in one syllable. It is short, it is said once, and it does not need explaining. #### The acronym Read as an acronym, the name expands to human approach user xperience. It is set as a typographic device in the brand file, which is where it belongs. Treat it as an expression of the name rather than a description of the service. It is not a tagline, and it is not written into body copy. #### The griffin The mark traces back to minerva, an early studio name, and the griffin is Minerva’s guardian beast. The name changed and the guardian stayed. That history is the answer to the first question people ask, which is why the mark is a griffin and not a hawk. Construction, clearspace and permitted lockups are in Logo. #### Direction line > Ancient precision. Modern speed. ### What changes, depending on who is reading Strategy that stops at description has not done its job. Here is what each of the four segments should expect to be different. #### If you are raising Expect the product to stop undercutting the pitch. The work targets the surfaces an investor reads as evidence, and every decision comes with reasoning you can repeat in a room the studio is not in. #### If you are building the first version Expect fewer features and a clearer one. The decisions that compound are made early and deliberately, so the second build is a continuation rather than a correction. #### If your team has no design lead Expect a standard your team can apply without asking. Senior judgement arrives as a system, so it keeps working on the projects the studio is not on. #### If your team is at capacity Expect the backlog to move without a hiring cycle. Embedded designers work inside your rituals and your tools, so the handover is continuous rather than an event at the end. *Every rule in the sections that follow traces back to one of these four outcomes. Where it does not, the rule is decoration and should be challenged.* --- ## 03 · Brand architecture One master brand carries everything, so no service line gets a mark of its own. This section sets out the model, the mechanics of the name in text, and the two decisions that have not been made. *Updated 2026-08-12. Source: https://brand.haux.studio/brand-architecture* ### One brand. Services described, never sub-branded. Sub-brands are expensive: each one needs its own mark, its own maintenance and its own share of the attention. None of the services earns that. A branded house is the model: one master brand, with services described rather than sub-branded. #### What that rules out Services are named in plain language and set as text, in the type roles Typography assigns. A service name describes the work; it is not an identity. No service line gets its own mark, its own colour or its own typeface. Where a service needs to be told apart on a page, the layout does it and the identity stays put. #### Why this model Every mark that exists has to be maintained, applied and defended. A second mark halves the attention the first one gets and doubles the work of keeping both correct, which is a poor trade for a studio this size. Recognition is the asset, and recognition compounds only when one thing is repeated. The model is worth revisiting when a venture is genuinely a separate business, and not before then. > One mark. Everything else is words. ### Capital H, lowercase rest, every time The name is misset in two predictable ways, and both cost recognition. This is the cheapest rule in the guideline to follow and the most frequently broken. Set the name as Haux: capital H, lowercase rest, in every context including headlines, interface labels, code comments and email signatures. It is pronounced hawx, one syllable. Never set it in full capitals in body copy, and never spell it Houx. **Capital H, lowercase rest. The wordmark is not an exception to be copied into text.** - Do: Haux. The only correct setting in body copy, headlines and running text, at any size. - Don't: HAUX. Full capitals in body copy shout, and they invite the acronym reading in a place it does not belong. **One spelling. Haux, never Houx.** - Do: Haux. Check it before anything goes out, including URLs, file names and social handles. - Don't: Houx. The common misspelling, and the one that quietly breaks search, file naming and anything sorted alphabetically. *How the letters are drawn inside the wordmark is a Logo question. The two rules above govern the name as it appears in text, which is where it appears most.* #### The acronym device Read as an acronym, the name expands to human approach user xperience. It is set as a typographic device in the brand file and treated as an expression of the name. It is not a tagline and it is not written into body copy. Where else it may be set is a Logo and Layout question rather than a naming one. ### Two decisions have not been made A guideline that states a decision nobody made is worse than one that admits the gap. Both of these are open, and both are already blocking real work. #### Client co-branding lockups Rules for locking the mark up with a client’s mark have not been decided. There is no agreed order, no agreed separator, no agreed relative size and no agreed clearspace between the two. Until that is settled, do not improvise a lockup for a case study, a proposal cover or a joint announcement. Set both names as text, or raise it through Governance and get a decision on the record before it ships. #### A decision tree for new offers There is no test for when a new offer stays a described service and when it becomes something else. The branded house model answers today’s seven services and says nothing about a product or a venture that is genuinely a separate business. That gap is known and it is not filled by guessing. Until a test exists, a new offer is described as a service and reviewed through Governance before anything gets drawn. *Both are recorded here until they are settled. When either is decided it moves into the rules above and this module gets shorter.* --- ## 04 · Logo The mark is a griffin, eagle and lion, reduced until only five straight cuts and one notch remain. Five artefacts are approved, one diagonal is permitted, and everything else on this page is a consequence of those two facts. *Updated 2026-08-14. Source: https://brand.haux.studio/logo* ### An ancient beast, reduced to geometry Read the mark as the end of a reduction, not as a shape someone drew. Every rule that follows is there to protect the last step of that reduction. An ancient beast that survives being reduced to geometry. The griffin is an eagle and a lion in one body: heraldic, old, and specific enough that nobody mistakes it for a generic animal logo. That heritage is the "ancient precision" half of the positioning, and it is doing real work rather than decorating the deck. The "modern speed" half is what happens to the beast on the way down to the final mark. A heraldic animal is an unusual choice for a studio identity, and it only holds because the animal does not stay a picture. It is subtracted from a squircle, and by the last step it is five cuts and an eye. Nothing in the mark is illustration by the time it ships. > An ancient beast that survives being reduced to geometry. > > — The one line to remember from this section. ### Three steps, and the figure becomes the hole This is the central idea of the mark. Anyone changing the logo needs to know which step they are standing on, because the steps are not interchangeable. #### One. The heritage griffin, drawn positive The beast is drawn rampant, as a positive form on a clear ground, at 1:1. At this stage it is still recognisably an animal: crest, wing, claw, tail. This is the artefact the other two steps are derived from, which is why it survives as a shipping asset rather than being thrown away as a sketch. #### Two. The griffin is knocked out of a squircle The same griffin is subtracted from a solid squircle, so figure and ground swap. The beast is no longer a shape on a field, it is the hole in one. This is the step that makes the mark a system rather than an illustration, because the container is now carrying half the identity. #### Three. The hole is reduced to five cuts and an eye The subtracted form is simplified until only five straight cuts and one triangular notch remain. The notch is the eye, and it is the last piece of the animal left in the mark. Below the size at which that notch resolves, the reduction has failed and the mark stops being a griffin at all. *Step three is the Logo Mark. Steps one and two are separate approved artefacts, not drafts, and the Discard variant below is what step two looks like when it is stopped too early.* ### The five artefacts Five approved files, each with one job and one aspect ratio. Anything not on this list is not a Haux mark. ##### Wordmark haux.studio®, set lowercase throughout, at an aspect of 6.682:1. The wordmark reads haux.studio® and is lowercase throughout, including the first letter. There is no capitalised variant and no all-caps variant. The full-stop between the two words is part of the mark, not punctuation that can be dropped. The registered symbol is set small and superscript, top-aligned to the ascender rather than centred on the x-height. Its bounding box counts towards the 6.682:1 aspect, so a wordmark measured without it will be very slightly the wrong shape. ###### Kerning is metric, never optical The wordmark is set with the font’s own metric kerning. It is never set to optical kerning and never letter-spaced, in either direction. This was tested directly against the alternatives and metric spacing won, so it is a settled decision rather than a default nobody looked at. *The wordmark ships as outlines. The kerning rule matters because it governs how the mark is rebuilt if it ever has to be reset, and because it stops anyone "improving" the spacing in a layout.* ##### Logo Mark The squircle with a single boolean subtraction. The end of the reduction, and the mark used almost everywhere. ###### Anatomy One squircle, one boolean subtraction, four surviving features. The subtraction leaves a band across the top, a vertical stroke on the right-hand edge, a faceted wedge, and one inverted triangular notch whose apex is rounded. That notch is the griffin’s eye. It is the only feature in the mark that is representational, and it is the reason the whole thing still reads as a creature rather than as an app icon. ###### The squircle is a path, not a border-radius The corner radius is 30.9% of the side, drawn with continuous smooth corners. CSS border-radius produces a circular arc, which meets the straight edge with a visible change of curvature at that radius. The mark must therefore ship as a path in SVG, and a div with a large border-radius is not an acceptable substitute anywhere. ###### The small cut is not a scaled copy A separately drawn, optically tuned version of the mark exists for use below roughly 165px. It is not a uniform scale of the large cut: the cuts have been re-weighted so the mark holds together at small sizes. Using the large cut small, or the small cut large, is a visible error rather than a subtlety. *The 165px figure is the crossover point recorded in the source. It is a threshold for choosing between two files, and it is not a minimum size rule. See the open decisions below.* ##### Heritage A and B The rampant griffin as a positive form, 1:1, in two heads. Both heritage marks are the rampant griffin at 1:1. They are the top of the reduction, so they carry the most detail of anything in the system and are the least suited to small sizes. Use them where the identity has room to be ceremonial rather than functional. A and B differ in exactly one place: the head. Everything below the neck is identical between the two, so treating them as separate drawings will introduce differences that are not meant to be there. ###### Heritage Logo A Flat crown, and the wide triangular eye notch. That notch is the feature that survives all the way down into the Logo Mark, which makes A the version that is continuous with the rest of the system. ###### Heritage Logo B Raised crest, and a slit eye. B is the more ornamental of the two and does not share its eye with the Logo Mark, so it reads as a related mark rather than as the same beast at a different resolution. *The source approves both without stating which is preferred. Where the heritage mark sits near the Logo Mark, A is the consistent choice because the eye matches.* ##### Crest Mark The heritage griffin inside a hollow cartouche, at 0.885:1. The crest places the heritage griffin inside a hollow cartouche at an aspect of 0.885:1, so it stands very slightly taller than it is wide. The cartouche is an outline, not a filled plate, and the griffin sits inside the void rather than on top of a shape. Each of the cartouche’s four edge midpoints pinches inward with a concave scallop. Those four pinches are the whole character of the frame, and flattening them turns the crest into a rounded rectangle with an animal in it. *The crest is the most detailed artefact in the system. Treat it as a ceremonial mark: certificates, stamps, embossing, the back of a card.* ##### Discard One variant exists in the source and is marked Discard. It must not ship. The discarded variant is the full griffin knocked out of a squircle: step two of the reduction, kept as a finished mark. It is marked Discard in the source and is not an approved artefact. It is worth naming rather than deleting quietly, because it is the most obvious thing a designer will reinvent. The reason it fails is that it is neither artefact: too detailed to work at Logo Mark sizes, and too constrained by the container to work as heritage. ### 12° is the only diagonal One angle governs the marks and, by extension, the graphic system built from them. Both wing edges are snapped to exactly 12°. It is the only diagonal the system permits. The angle was verified rather than eyeballed: tan(12°) is 0.212554, and the wing edges measure to that ratio against the construction guides. Anything drawn at 10° or 15° because it looked close enough will be visibly out of family next to a correct edge. Because 12° is the only permitted diagonal, it is also the angle available to everything downstream of the logo: rules, crops, wipes and pattern. A second angle anywhere in a layout reads as a mistake in the logo, not as variety. ### One lockup, stated as a ratio The primary lockup is the symbol beside the wordmark. It is specified as proportions so it survives any reproduction size. #### Symbol : gap : wordmark = 1 : 0.387 : 6.682 The symbol box equals the wordmark’s full bounding box, flush top and bottom. That is the rule to state, because it means the lockup can be rebuilt from the wordmark alone without measuring anything. The gap between them is 0.387 of the symbol width, and the wordmark is 6.682 of it. Set the symbol height to the wordmark height, then space at 0.387 of that height, and the lockup is correct. *The wordmark’s own aspect is 6.682:1, which is why the third number in the lockup ratio matches it exactly. That is a consequence of the flush rule, not a coincidence to be maintained separately.* ### Clear space is measured from the mark, not from the page Two rules, both expressed as a fraction of the mark’s own height, so they scale automatically. #### Wordmark: 0.675 of its bounding-box height The wordmark keeps clear space of roughly two thirds of its bounding-box height, 0.675, on all four sides. The bounding box includes the registered symbol. Nothing enters that margin: no rule, no image edge, no other logo. #### Heritage and Crest: exactly one fifth of the mark height Both heritage marks and the crest take clear space of exactly one fifth of the mark’s height on all four sides. The tighter figure is deliberate: these marks carry their own visual frame, so they need less air around them than a line of type does. *The source does not state a clear-space rule for the Logo Mark on its own. Until one is set, apply the one-fifth rule, which is the closer analogue.* ### Four things the source does not decide These are gaps, not omissions from this page. They are written here so nobody fills them in silently. #### Minimum size: proposed, not decided There is no minimum size rule anywhere in the source. A sensible proposed floor is about 20px for the Logo Mark, on the grounds that the eye notch is 23.8% of the mark width and stops resolving below that. Treat that as a proposal to test in print and on screen, not as a published minimum. #### No stacked or vertical lockup exists Only the horizontal lockup is drawn. There is no stacked or vertical arrangement in the source, so there is no approved way to place the mark above the wordmark. Anyone needing one for a narrow format should have it drawn and approved rather than assembling it in a layout. #### No signoff lockup exists There is no lockup pairing the mark with a strapline, a URL or a partner mark. That means the common end-of-advert and end-of-deck cases are currently unspecified. They need drawing before they are needed, not while. #### No misuse board yet There is no do-not board in the source: no stretched, recoloured, rotated or outlined examples. A misuse board is normally the most-cited page in a logo section, so this is the largest gap of the four. It should be built from real misuses once the mark has been in circulation long enough to produce some. *Nothing on this list should be treated as settled. Each one needs a decision recorded in the source before it becomes a rule here.* --- ## 05 · Colour Three primary ramps, eight structural neutrals and three gradients, governed by one ratio. The palette is deliberately small: the discipline is in how much of each colour is used, not how many exist. *Updated 2026-08-17. Source: https://brand.haux.studio/colour* ### The ratio governs everything Before any specific colour, the proportion. Haux is a near-white brand with near-black structure and a single orange signal, in a 60/30/10 split. Orange is the signal, never the field. The 10% is not a budget to spend down. It is a ceiling that most work will not reach, and a page with no orange at all is a correct page. The moment a second orange element appears in a view, neither one is a signal any more. They are just two orange things, and the eye has to choose between them. The 30% covers everything structural: type, rules, dense panels, the inverted bands that break a long scroll. It is the colour doing the reading. The 60% is what is left, and what is left is meant to be most of it. > Orange is the signal, never the field. | Name | Hex | Token | Share | Role | | --- | --- | --- | --- | --- | | Near-white | `#fcfcfc` | `--haux-white-100` | 60% | The field. Every layout starts as this and earns its way off it. | | Near-black | `#050505` | `--haux-black-900` | 30% | Structure. Type, rules, dense panels, inverted bands. | | Orange | `#ff3c00` | `--haux-orange-500` | 10% | Signal. One moment per view. The thing you want looked at. | *Proportions are drawn to scale here on purpose. Rendered as three equal boxes with percentages underneath, the rule teaches the opposite of what it says.* ### The palette Two tiers and a gradient set. Tier 1 is the brand; Tier 2 is the furniture that lets Tier 1 stay rare. ##### Tier 1 · Primary Three ramps of nine steps. These are the brand; everything else in the palette exists so these can stay rare. Three ramps, nine steps each. The step number is a role, not a lightness value: 500 is always the base the Pantone was matched to, 100 is always the lightest background tint, 900 is always the deepest. The roles hold across all three ramps, so a component can move from the orange ramp to the near-black ramp without rewriting its logic. Only the 500 step of each ramp has a Pantone equivalent. The other eight are digital derivations and should not be sent to a printer as if they were specified inks. ###### Orange · PMS 172 C > The accent. Orange 500 is a fill colour; Orange 700 is its text equivalent on light surfaces. | Name | Hex | Token | Role | Pantone | | --- | --- | --- | --- | --- | | Orange 100 | `#ffefeb` | `--haux-orange-100` | Background | | | Orange 200 | `#ffd8cc` | `--haux-orange-200` | Surface | | | Orange 300 | `#ffb199` | `--haux-orange-300` | Hover | | | Orange 400 | `#ff774d` | `--haux-orange-400` | Border | | | Orange 500 | `#ff3c00` | `--haux-orange-500` | Base | PMS 172 C | | Orange 600 | `#c22e00` | `--haux-orange-600` | Active | | | Orange 700 | `#8f2200` | `--haux-orange-700` | Strong | | | Orange 800 | `#5c1600` | `--haux-orange-800` | Deep | | | Orange 900 | `#290a00` | `--haux-orange-900` | Darkest | | *Figma and the strategy document disagree by one digit on the base: #FF3C00 against #FF3B00. Figma is the source of truth for the identity, so #FF3C00 ships. The difference is below a perceptible threshold, but the token is the tiebreaker either way.* ###### Near-black · PMS Black 6 C > Structure and type. Near-black 900 is the default ink; nothing in the system uses pure #000000. | Name | Hex | Token | Role | Pantone | | --- | --- | --- | --- | --- | | Near-black 100 | `#ededed` | `--haux-black-100` | Background | | | Near-black 200 | `#d4d4d4` | `--haux-black-200` | Surface | | | Near-black 300 | `#b8b8b8` | `--haux-black-300` | Hover | | | Near-black 400 | `#999999` | `--haux-black-400` | Border | | | Near-black 500 | `#787878` | `--haux-black-500` | Base | PMS Black 6 C | | Near-black 600 | `#595959` | `--haux-black-600` | Active | | | Near-black 700 | `#3b3b3b` | `--haux-black-700` | Strong | | | Near-black 800 | `#212121` | `--haux-black-800` | Deep | | | Near-black 900 | `#050505` | `--haux-black-900` | Darkest | | ###### Near-white · PMS 663 C > Surfaces and inverted type. Near-white 100 is the default page; nothing uses pure #FFFFFF. | Name | Hex | Token | Role | Pantone | | --- | --- | --- | --- | --- | | Near-white 100 | `#fcfcfc` | `--haux-white-100` | Background | | | Near-white 200 | `#e6e6e6` | `--haux-white-200` | Surface | | | Near-white 300 | `#cccccc` | `--haux-white-300` | Hover | | | Near-white 400 | `#adadad` | `--haux-white-400` | Border | | | Near-white 500 | `#8c8c8c` | `--haux-white-500` | Base | PMS 663 C | | Near-white 600 | `#6b6b6b` | `--haux-white-600` | Active | | | Near-white 700 | `#4d4d4d` | `--haux-white-700` | Strong | | | Near-white 800 | `#2e2e2e` | `--haux-white-800` | Deep | | | Near-white 900 | `#121212` | `--haux-white-900` | Darkest | | *Every contrast figure published on this site is measured against Near-white 100, not against pure white. The gap is small but it is real: it costs about 0.07 of a ratio point, which is enough to move a borderline pair across a threshold.* ##### Tier 2 · Secondary Eight structural neutrals: a warm family from the print identity and a cool family for interface furniture. Eight structural neutrals, split between a warm family carried over from the print identity and a cool family that handles interface furniture. They exist so that Tier 1 can stay rare: a layout that needs three levels of surface separation should reach for Sage, Bone and Cloud rather than three steps of the near-white ramp. Two of these carry warnings, and both warnings come from measurement rather than taste. They are stated on the swatch itself so that nobody has to read the accessibility section to find out. ###### Structural neutrals | Name | Hex | Token | Role | Pantone | | --- | --- | --- | --- | --- | | Espresso | `#3b2f28` | `--haux-espresso` | Dark surface | PMS Black 7 C | | Umber | `#674e42` | `--haux-umber` | Secondary text | PMS 7518 C | | Stone | `#aa9f8d` | `--haux-stone` | Decorative only — Figma captions this "muted text". It reaches 2.54:1 on Near-white and 2.03:1 on Bone, and fails AA at every size. Use Near-white 700 for muted text. Decorative only, never text. | PMS Warm Gray 8 C | | Bone | `#ebe2d5` | `--haux-bone` | Warm surface | PMS 7527 C | | Sage | `#e5e5dd` | `--haux-sage` | Primary surface | PMS Warm Gray 1 C | | Silver | `#afafaf` | `--haux-silver` | Borders — At 2.14:1 on Near-white it misses the 3:1 non-text threshold. Decorative rules only. Never a focus ring or an input border. | PMS Cool Gray 6 C | | Mist | `#d4d4d4` | `--haux-mist` | Dividers | PMS Cool Gray 4 C | | Cloud | `#eaeaea` | `--haux-cloud` | Light surface | PMS Cool Gray 1 C | *Warm family: Espresso, Umber, Stone, Bone, Sage. Cool family: Silver, Mist, Cloud. Do not mix the two inside a single surface stack. A Sage panel with a Mist divider reads as a printing error.* ##### Gradients Three, and all three stay inside one hue family. A gradient counts against the accent budget. ###### Three gradients > Gradients stay within one hue family, never across the wheel. | Name | Stops | Token | | --- | --- | --- | | Signal | `#ff3c00 → #ffae5d` | `--haux-gradient-signal` | | Depth | `#050505 → #3b2f28` | `--haux-gradient-depth` | | Heat | `#ff3c00 → #c5334d` | `--haux-gradient-heat` | *A gradient that crosses hue families reads as a third colour appearing in the middle of it, which is precisely the thing the 60/30/10 ratio exists to prevent. Signal runs orange to warm orange, Depth runs near-black to espresso, Heat runs orange to a red that is still on the warm side of the wheel.* A gradient is an accent, so it inherits the accent's budget. One gradient per screen, and it counts against the 10%. Never set body text over a gradient. Contrast is measured at a point, and a gradient has no single point, so the ratio at one end of a Signal panel is not the ratio at the other. Where text must sit on a gradient, it sits on a solid plate over it. ##### Do and don’t Live samples, with contrast measured at build time. If a token moves, these numbers move with it. Each pair below is rendered live from the tokens, and the contrast figure under it is computed at build time rather than typed in. If a token moves, these numbers move with it. **Orange 500 is a fill, not a text colour. On a light surface it reaches 3.47:1, below AA for body text at any weight. Orange 700 is the text step.** - Do: Orange 700 on Near-white 100. Reads as the same accent, clears AAA. - Don't: Orange 500 on Near-white 100. Legible to you, illegible to a meaningful share of your audience. **On an orange fill, the label is Near-black. White on Orange 500 is the single most common mistake in the system and it fails AA body.** - Do: Near-black 900 on Orange 500. This is what --on-accent resolves to. - Don't: Near-white 100 on Orange 500. If the button must carry white text, the fill steps to Orange 600. **Stone is a decorative colour. It is captioned "muted text" in Figma, and it cannot be used for text at any size.** - Do: Near-white 700 on Bone. The substitute for every place Stone was reached for as an ink. - Don't: Stone on Bone. Two warm neutrals a hair apart, and the pairing that put Stone on this list. *The full matrix, including the non-text 3:1 threshold for borders and focus rings, is in the accessibility section.* --- ## 06 · Typography Three families, one job each: Accia Flare for display, CC Timeline Var Low for text, JetBrains Mono for meta. Tracking is a function of case rather than a matter of taste, and two of the three families cannot be redistributed. *Updated 2026-08-15. Source: https://brand.haux.studio/typography* ### One job each, and no overlap Pick the family by the job, not by the look. Three families is already one more than most identities need, so none of them may do a second job. Display is uppercase, text is sentence case, meta is uppercase and monospaced. Accia Flare does display, uppercase only, at -0.04em tracking and 0.9 leading. CC Timeline Var Low does text, sentence case, at +0.02em with the ss01 stylistic set on. JetBrains Mono does meta, uppercase, at -0.04em with the case feature on so the punctuation lifts to cap height. The boundaries are the point. Display set in sentence case is not a variant, it is a mistake, and body copy set in the display face at 0.9 leading is unreadable by the second line. ### The three families Rendered at real size from the same tokens the site uses, not screenshotted from a specimen sheet. ##### Display · Accia Flare A flare serif, incised, with wedge terminals. Uppercase only, at 0.9 leading. Accia Flare is set uppercase and nothing else. Leading is 0.9, which is tighter than the cap height and makes multi-line display type interlock as a block rather than read as separate lines. Tracking is -0.04em, tightening to -0.05em above about 120px. ###### Display specimens | Role | Family | Size | Weight | Tracking | Leading | Usage | | --- | --- | --- | --- | --- | --- | --- | | Display XL | display | `clamp(3rem, 9vw, 8rem)` | 400 | `-0.05em` | `0.9` | Above about 120px the tracking tightens a further step, to -0.05em. This is the only size at which that applies. | | Display L | display | `clamp(2.25rem, 5vw, 4rem)` | 400 | `-0.04em` | `0.9` | The default display setting: section openers and statements. | | Display M | display | `clamp(1.5rem, 3vw, 2.25rem)` | 400 | `-0.04em` | `0.9` | The smallest permitted display setting. Below this the flare terminals stop reading and the text face is the better choice. | *Accia Flare is not self-hosted. If these three lines are rendering in a serif fallback, the Type Network stylesheet has not been wired up yet, which is an open item recorded in the licensing block below.* ##### Text · CC Timeline A low-contrast neo-grotesk. Sentence case, +0.02em, ss01 on. CC Timeline carries everything that is read rather than scanned. It is set in sentence case at +0.02em, with the ss01 stylistic set on, and the positive tracking is not optional. The face is drawn tight enough that at default spacing it closes up on screen at body sizes. ###### Text specimens | Role | Family | Size | Weight | Tracking | Leading | Usage | | --- | --- | --- | --- | --- | --- | --- | | Text Lead | text | `clamp(1.25rem, 2vw, 1.5rem)` | 300 | `0.02em` | `1.4` | One lead paragraph per module at most. | | Text Body | text | `1.0625rem` | 400 | `0.02em` | `1.6` | The default. Everything that is read rather than scanned. | | Text Small | text | `0.875rem` | 400 | `0.02em` | `1.5` | Notes and captions. The tracking does not change with size here. | ##### Meta · JetBrains Mono Uppercase, -0.04em, case feature on. Labels, numbers and tokens. JetBrains Mono handles meta: eyebrows, section numbers, token names, measured values. It is set uppercase at -0.04em with the case feature on, which raises punctuation and figures to suit the caps. It is the only one of the three families that is open source, and the only one that can be redistributed. ###### Meta specimens | Role | Family | Size | Weight | Tracking | Leading | Usage | | --- | --- | --- | --- | --- | --- | --- | | Meta Label | mono | `0.75rem` | 500 | `-0.04em` | `1.2` | Eyebrows, section numbers, and anything that behaves as a tag. | | Meta Data | mono | `0.75rem` | 400 | `-0.04em` | `1.4` | Values, tokens and measurements. Figures keep their own case, so the uppercase rule applies to labels rather than to data. | *Mono is deliberately not preloaded. It sits below the fold in most modules, and preloading a third family competes for bandwidth with the largest image on the page.* The sizes on those specimens are illustrative. The source specifies case, tracking and leading per family, and it does not specify a numbered type scale, so the steps shown here are the ones this site uses rather than a published scale. Fixing a scale is an open decision, listed at the foot of this page. ### Tracking is a function of case Set the case first and the tracking follows from it. This is the rule that stops the two faces drifting towards each other. Uppercase runs negative. Sentence case runs positive. Capitals are drawn with more sidebearing than they need when set as a run, so uppercase settings close up: -0.04em for both display and meta. Lowercase running text has the opposite problem at screen sizes, so text opens out to +0.02em. There is no case in the system where a sentence-case setting takes negative tracking. Uppercase also tightens as it grows. Above about 120px, display moves to -0.05em, because the same optical gap that needs opening at 16px needs closing at 120px. #### An unresolved conflict: -0.04em or -0.06em The artwork sets Accia at -0.04em. The internal spec slide says -0.06em. Those are not close enough to treat as the same value, and the difference is visible in a headline of any length. This page states -0.04em because that is what the artwork does, which makes it the value that has actually been seen and approved. It needs resolving properly rather than settling by whichever document was opened last. ### One file, six named instances A variable body face is an unusual choice, so it is worth showing what it buys. CC Timeline Var Low is a genuine variable font with a weight axis running 300 to 800. One 83 KB file replaces six static cuts, which would otherwise be six separate requests and roughly six times the bytes for the same coverage. The named instances run Light through ExtraBold. The practical gain is that intermediate weights are free. A label that needs to sit between Medium and SemiBold can, without adding a file to the build. #### The weight axis, 300 to 800 | Role | Family | Size | Weight | Tracking | Leading | Usage | | --- | --- | --- | --- | --- | --- | --- | | CC Timeline Light | text | `clamp(1.125rem, 2.2vw, 1.625rem)` | 300 | `0.02em` | `1.3` | | | CC Timeline Regular | text | `clamp(1.125rem, 2.2vw, 1.625rem)` | 400 | `0.02em` | `1.3` | | | CC Timeline Medium | text | `clamp(1.125rem, 2.2vw, 1.625rem)` | 500 | `0.02em` | `1.3` | | | CC Timeline SemiBold | text | `clamp(1.125rem, 2.2vw, 1.625rem)` | 600 | `0.02em` | `1.3` | | | CC Timeline Bold | text | `clamp(1.125rem, 2.2vw, 1.625rem)` | 700 | `0.02em` | `1.3` | | | CC Timeline ExtraBold | text | `clamp(1.125rem, 2.2vw, 1.625rem)` | 800 | `0.02em` | `1.3` | | *Each line is the same file at a different point on the axis. Nothing here is a separate font.* ### Heraldry rendered in a systems typeface The two faces are chosen against each other, and the tension between them is the same one the logo resolves. #### Accia Flare does the griffin’s job It is a flare serif: incised, with wedge terminals rather than bracketed slabs. That is carved lettering, and it reads as heraldic before anybody has read a word of it. It carries the same ancient half of the positioning that the griffin carries in the logo. #### CC Timeline does the geometry’s job It is a low-contrast neo-grotesk, drawn for screens and quietly technical. It makes no claim to history at all. That is the modern half, and it is what the griffin reduces into. > Heraldry, rendered in a systems typeface. > > — Which is the same sentence as ancient precision, modern speed. ### Two of the three families cannot be redistributed Read this before adding a font to a template, a download or a client handover. The constraints are contractual, not preferences. #### Accia Flare: hosted webfont only The licence covers web use only as a Type Network hosted webfont, and clause 5A forbids converting the supplied OTF. Accia therefore cannot be self-hosted, cannot be converted to WOFF2, and is loaded from Type Network’s CDN through a stylesheet link in the root layout. It does not go through next/font, and it never will. Their hosted fonts are domain-locked, so every origin that serves the site has to be listed in the Type Network dashboard, preview domains included. An unlisted origin does not error, it silently falls back, so a preview deploy can render every heading in Times without anyone noticing. *The project stylesheet URL is not wired up yet: ACCIA_STYLESHEET_URL in src/styles/fonts.ts is still null. Until it is set, display type on this site renders in the fallback stack.* #### CC Timeline: self-hosted, served exactly as supplied CCType permits self-hosting, on the condition that the supplied WOFF2 is served as it was delivered. It must not be subsetted, converted or rebuilt, which rules out the usual optimisation of stripping unused glyphs. The file stays in the repository, and the repository stays private while it does. #### JetBrains Mono: SIL Open Font License JetBrains Mono is under the SIL Open Font License. It can be hosted, embedded and passed on freely, provided the licence travels with it. It is the only one of the three that can be handed to anyone outside the studio. #### Consequence: the Downloads section cannot host either font Neither Accia Flare nor CC Timeline may be offered as a public download, and that follows directly from the two licences above rather than from caution. Anyone outside the studio who needs to set Haux type needs their own licence, or a PDF and outlined artwork. Only JetBrains Mono can be distributed. *This constrains section 14. Any download listing that includes an OTF or WOFF2 of the display or text face is a licence breach, not a broken link.* ### Two things this section cannot yet settle Written as gaps rather than filled in, so nobody cites a rule that was never made. #### The Accia tracking value Artwork says -0.04em, the internal spec slide says -0.06em, and the two have never been reconciled. This page follows the artwork as the more likely intent, but the decision is not made. Whichever value wins, the losing document has to be corrected rather than left to be found later. #### The type scale itself The source defines case, tracking and leading per family, and stops there. There is no numbered scale, no step ratio and no minimum text size, so the specimens above show the sizes this site happens to use. A scale needs setting before the system is applied to anything denser than a web page. *Both need a decision recorded in the source before they become rules here.* --- ## 07 · Voice and tone Writing gets decided before the sentence, not during it. Five traits, five principles, a seven point check before anything ships, and a list of words that never do. *Updated 2026-08-10. Source: https://brand.haux.studio/voice-and-tone* ### Five traits, and what each one turns into when it slips Traits are only useful with their failure mode attached. Each one below carries what it looks like in practice and what it becomes when nobody is watching. Voice is constant. Tone is what moves. The five traits hold in every channel, including the ones where nobody is enjoying themselves. What changes by channel is the mix, and the mix is set out further down this page. Listing a trait without its failure mode is what makes a voice page decorative. Each trait below is written so a reviewer can point at a sentence and say which side of the line it fell on. ##### Bold Takes a position in the first line and holds it. ###### In practice Name the recommendation and the price without a run up. State what the work will do, and state what it will not. Bold is a structural choice, not a volume setting. It shows up in where the argument sits, which is always the first line. ###### Failure mode Volume standing in for a view. Bold with nothing to recommend is a bigger font and a smaller idea. ##### Confident Shows the reasoning, then stops explaining. ###### In practice Give the reason once and move on. No insurance clauses, no second paragraph of qualifiers protecting the first. Confidence is measurable in edits: count the words that exist only in case someone disagrees, and delete them. ###### Failure mode Arrogance. Confidence shows its reasoning; arrogance expects to be taken on trust and gets challenged for it. ##### Playful One light touch, placed after the point has landed. ###### In practice One turn of phrase per piece, and it goes where the reader has already understood the argument. Play before clarity reads as avoidance. It drops to zero in bad news, in pricing disputes and in anything legal. ###### Failure mode Jokes. Playful is a light hand on serious work, and a joke in a deadline email is read as not taking the deadline seriously. ##### Energetic Pace comes from sentence length, never from punctuation. ###### In practice Short sentences, active verbs, present tense. Momentum is built by cutting words, not by adding emphasis. The shortest sentence in any piece should be the one carrying the central idea. ###### Failure mode Hype. Energy that keeps climbing has nowhere to land, and the reader stops believing the next claim. ##### Timeless Plain words that read the same in five years. ###### In practice Use vocabulary that will survive the next cycle of industry language. No trend words, no dated references, no names that only make sense this quarter. A useful test: would this sentence need a footnote if it were read in 2031? ###### Failure mode Beige. Timeless is a choice of vocabulary, not the absence of a point of view. *The traits are constant. The proportions change by channel, and the channel settings are further down this page.* ### Five principles, each with a rewrite beside it Principles that cannot be applied to a specific sentence do not survive a deadline. Each one below carries the reasoning, two worked rewrites and the short rules that follow from it. #### 01 · Open with a recommendation, not a menu A menu of options hands the decision back to the client, which is the one thing they were trying to avoid buying. ##### Overview Three viable directions in a document read as three unfinished ones. Pick the one you would ship and name it in the first line. Keep the alternatives. They belong under the recommendation as the reasoning that produced it, not beside it as equal candidates. This holds in an email, a proposal and a review. The reader should know what you think before they know what you considered. ##### Examples The same message, written twice. Read the right column first. **Opening a design review** - Do: After. Ship direction B. It cuts setup from four steps to two, and the other two cost more to build for less. - Don't: Before. We explored a few different directions for the dashboard and wanted to get your thoughts on which one feels right for you. **Proposal cover note** - Do: After. Start with onboarding. It is where most sign ups are lost, and fixing it first pays for the rest of the work. - Don't: Before. There are several ways we could approach this engagement, depending on where your priorities sit. ##### Dos and don’ts **The recommendation goes in the first line.** - Do: Ship direction B. - Don't: Here are three directions for your consideration. **Alternatives sit under the recommendation, never alongside it.** - Do: We tested two others. Both cost more and neither reduced the drop off. - Don't: Options A, B and C are all viable, so it is your call. #### 02 · Frame in outcomes, not deliverables A list of files tells a client what they are buying and not what changes once it lands. ##### Overview Deliverables describe effort. Outcomes describe what is different afterwards, which is the only part being paid for. Name the outcome first and let the file list sit underneath it as the method. The method is reassuring; it is not the argument. Retention, conversion, clarity and trust cover most of what the work moves. A paragraph that ties to none of them is describing process. ##### Examples The same message, written twice. Read the right column first. **Scope summary in a proposal** - Do: After. You get a checkout fewer people abandon, built from 24 screens, a component library and a motion spec your engineers can work from. - Don't: Before. Deliverables include 24 screens, a component library, a motion spec and a handover document. **Case study opening line** - Do: After. Billing questions to support halved, because the invoice screen now answers the thing people were writing in to ask. - Don't: Before. We redesigned the mobile app end to end and delivered a full design system. ##### Dos and don’ts **Lead on what changes, then say how.** - Do: Fewer abandoned carts, from a checkout rebuilt in three weeks. - Don't: A three week checkout rebuild across 24 screens. **Use measured figures or none.** - Do: Setup dropped from four steps to two. - Don't: Setup is now dramatically faster and much more intuitive. #### 03 · State problems directly A softened problem gets discussed twice, once when you hint at it and again when it lands anyway. ##### Overview A problem stated plainly is easier to fix than one wrapped in qualifiers. Say what is wrong, say what it costs, say what you propose. None of that is rude when the next sentence is a fix. Hedging reads as either uncertainty or bad news being managed, and both cost trust. One qualifier per sentence is the ceiling. Two means the sentence is apologising for itself. ##### Examples The same message, written twice. Read the right column first. **Flagging a broken flow in a review** - Do: After. The payment step loses people at the card field. We propose one screen instead of three, and we can test it next week. - Don't: Before. There might be a small opportunity to potentially improve the payment step slightly. **Raising a risk mid engagement** - Do: After. The API is not ready, so the build slips a week. Here are two ways to hold the launch date. - Don't: Before. We just wanted to flag a potential concern that may possibly have some impact on timings. ##### Dos and don’ts **Name the problem in the sentence that raises it.** - Do: The card field is where people stop. - Don't: There may be some friction in parts of the payment area. **Every problem arrives with a fix attached.** - Do: It slips a week. Here are two ways to hold the date. - Don't: It slips a week. Let us know how you would like to proceed. #### 04 · Write for a non-specialist The person who signs the invoice is rarely the person who knows what a design token is. ##### Overview Jargon narrows the audience to people who already agree with you. Write so the finance lead and the engineer take the same meaning from the same sentence. Terms of art are fine once the line that introduces them explains them. Used without that line, they are a way of sounding certain without being clear. Read it aloud before sending. If you would not say it in the room, it does not go in the document. ##### Examples The same message, written twice. Read the right column first. **Explaining a design system to a finance lead** - Do: After. We name each colour and size once, so changing it in one place updates every screen. Dark mode then costs days instead of months. - Don't: Before. We will deliver a token layer with semantic aliasing to underpin multi-theme theming across every surface. **Reporting research** - Do: After. We watched eight of your customers try to book a table. Six gave up on the same screen. - Don't: Before. We ran a moderated qualitative study to surface latent needs across the target cohort. ##### Dos and don’ts **A term of art is explained where it first appears.** - Do: A component library, meaning one set of parts every screen is built from. - Don't: A tokenised, atomic component architecture. **If you would not say it aloud, rewrite it.** - Do: Six of eight gave up on the same screen. - Don't: Qualitative signals indicated a significant completion barrier. #### 05 · Let the work carry the argument Adjectives are what a page reaches for when there is no artefact to put in their place. ##### Overview Show the screen, the before, the number. Description fills the space where evidence should be, and readers can tell the difference. Cut the adjective and put the artefact where it was standing. The sentence gets shorter and the claim gets stronger. This is the cheapest edit available on any page: delete the line praising the work, and the work is still there. ##### Examples The same message, written twice. Read the right column first. **Portfolio caption** - Do: After. The booking flow, rebuilt in six weeks. Three screens became one. - Don't: Before. A beautiful, thoughtful and highly polished reimagining of the booking experience. **Closing line of a pitch** - Do: After. We build products that ship. Here are three that did. - Don't: Before. We are a passionate team obsessed with crafting delightful digital experiences that truly resonate. ##### Dos and don’ts **Evidence before adjective.** - Do: Three screens became one. - Don't: A dramatically streamlined and elegant flow. **Never grade your own work in the copy.** - Do: Shipped in six weeks, live since March. - Don't: One of our most successful and beloved projects to date. *Figures used in the examples are illustrative. In real copy, use a measured number or no number at all.* ### Seven checks, in order Run these before anything leaves the studio. They take under a minute and they catch most of what a review would have caught. #### The pre-ship check 1. It opens on a problem or a recommendation, not on Haux. 2. Every paragraph is three sentences or fewer. 3. The central idea is the shortest sentence in the piece. 4. It describes impact, not deliverables. 5. It closes on a result or a direction. 6. No word from the avoid list survived. 7. Read aloud, it sounds like a person. *Check three is the one that gets skipped. If the central idea is currently the longest sentence, the piece is not finished.* ### The words, the punctuation and the way the brand is named Word choice is the fastest thing to check and the slowest to fix once it is in circulation. These four lists settle it. ##### Say Short, concrete, mostly Anglo-Saxon. Reach here first. fix, build, ship, earn, clarity, sharp, real, outcome, craft, momentum, direct, partner, works, result, honest, simple, precise, deliberate, considered, distinct, rigorous. These are not required words and a document stuffed with them reads as a document stuffed with them. They are the register: if a sentence sounds wrong, the nearest word from this list is usually the repair. ##### Never These do not ship. There is no context that rescues them. synergy, leverage, holistic, ecosystem, best-in-class, cutting-edge, innovative, world-class, passionate, disrupt, seamless, robust, game-changing, solutions, stakeholders, journey, thrilled, excited, delighted, proud, "In today’s". Each of these is a claim with no evidence behind it, which is why they survive edits: nobody can disprove them. Replace the word with the fact it was standing in for, and the sentence usually gets shorter. *Two of these need care. "Partner" is on the say list as a verb and a role, and is banned as a euphemism for client. "Solutions" is banned as a noun for the work, not in the ordinary sense of solving something.* ##### Punctuation Three rules, and the first one is absolute. No em dashes, ever. Use a comma, a colon, a full stop or a pair of brackets, and in almost every case the full stop is the right answer. One exclamation mark maximum in any piece, and the usual number is zero. If the sentence needs the mark to carry the energy, the sentence is the problem. No hashtags as decoration. A hashtag is a routing instruction, so it either does a job on a platform that reads it or it does not appear. *The em dash rule is the one people test. This entire site is written without one, which is the argument.* ##### Grammar Four settings, applied everywhere without exception. British spelling throughout: colour, prioritise, judgement, organisation. Sentence case everywhere, including headlines, buttons, navigation and section titles. Title Case is a house style the brand does not have. Always numerals: 3 screens, 8 weeks, 12%. Never "three screens", including at the start of a sentence, where the sentence gets rewritten instead. No internal abbreviations in client-facing copy. Write design system, not DS, and write discovery phase, not disco. ##### Naming Haux First person to clients. Third person only in press. Write "we" to clients, in proposals, in email and in the studio’s own writing. Third person is for press releases and award submissions, where a publication needs a name it can quote. Never verb the brand. Nothing is "hauxed", nobody "hauxes" a product, and no engagement is "getting the Haux treatment". A sentence should not open on the brand name. Open on the problem or the recommendation, which is also check one of the pre-ship list. ### Five channels, five registers Tone is the setting that moves. Each channel below carries its own mix, and one of them turns the playfulness off entirely. ##### Proposal Direct and specific. Recommend, price, stop. Lead with the recommendation, then the outcome it buys, then the price. Everything after that is method, and method goes last. Bold and confident run high here. Playful runs low, because a document with a number in it is being read carefully. Opening line to aim at: "Start with onboarding. It is where most sign ups are lost, and fixing it first pays for the rest." ##### Client email Three sentences, one ask, a date. Say the thing in the first sentence. Put the ask in its own line, and attach a date to it so nobody has to guess what "soon" means. Energetic runs high, timeless is irrelevant, playful is allowed once the working relationship is established. Line to aim at: "The build lands Wednesday. We need the copy for the confirmation screen by Monday to hold that. Can you send what you have, even if it is rough?" ##### Case study Past tense, evidence first, no self-grading. Open on the problem the client had, not on the engagement. Give the change, give the evidence, then show the work. Timeless runs high here because a case study is read years after it is written. Playful runs low, since the client is being quoted alongside it. Opening line to aim at: "Six of eight customers gave up on the same screen. Here is what replaced it." ##### Social One idea per post. No thread that could be a sentence. Post one idea and let it stand. A thread is only justified when each part is a step in an argument that genuinely needs steps. Playful and energetic run highest here, and the punctuation rules still hold: no decorative hashtags and almost never an exclamation mark. Line to aim at: "Three screens became one. The other two were asking for things we already knew." ##### Bad news Early, plain, with a fix. This is not the time to be funny. Send it early and lead with the fact. A delayed message is read as a managed one, and that costs more than the problem did. Playfulness goes to zero. Confidence stays high, because the fix in the next sentence is what makes the message survivable. Structure: what happened, what it costs, what happens next, what changed so it does not repeat. Four sentences, in that order. *Voice does not change across these five. Only the mix does, and only playfulness ever reaches zero.* ### Four scripts, so nobody improvises under pressure Hard messages get written badly because they get written fast. These four are the ones that recur, so the framing is agreed in advance. Each script below is a starting point, not a template to paste. Change the specifics and keep the order, because the order is what makes the message land. All four follow the same shape: state it, cost it, offer the next move. #### Scope creep Approved framing: "That is new work, and I would rather be straight about it than absorb it quietly. It adds about a week. Do you want it in this phase or the next one?" Naming it the first time is what stops the fourth time. Absorbed scope is invisible to the client and expensive to the studio. #### A missed date Approved framing: "We will miss Friday. The build now lands Wednesday the 12th, and nothing after it moves. Here is what caused it and what we changed so it does not repeat." Send it the day you know, not the day it slips. The new date is only credible if it arrives before the old one fails. #### A rejected direction Approved framing: "Understood, we will not take that one forward. Before we redraw, tell me which part failed: the idea or the execution. That answer saves us a round." The question is the whole message. Without it the next round is a guess, and the second rejection is much more expensive than the first. #### A price increase Approved framing: "Rates rise 12% from January, and your current rate holds until then. The work does not change. If that lands badly, say so now and we will look at scope together." Give notice, hold the old rate through it, and offer scope as the lever. A rate conversation that offers no lever becomes a renewal conversation. *None of these four should be sent without reading it aloud once. All four are the kind of message that gets forwarded.* ### Proposed: three words the studio should stop improvising A house glossary is the cheapest thing on this page and the one that gets quoted in reviews. There is no approved list yet, so what follows is a proposal. Proposed, not decided. These three terms are the ones currently written four different ways across proposals, invoices and the site. Sign them off or replace them. Leaving them open is the one option that keeps costing something. **The people who pay for the work.** - Do: Client. Used in every document, including internal ones, so the same word survives into the invoice. - Don't: Partner, account, stakeholder, or user when the person meant is the buyer. **The commercial relationship, and the work inside it.** - Do: Engagement for the relationship, project for a single piece of work inside it. Two words, two meanings. - Don't: Using engagement and project interchangeably, which makes every scope conversation start with a definition. **The people doing the work.** - Do: The studio, externally. The team, internally. Both are fine and neither is a description of headcount. - Don't: The agency, the squad, or the resource. The first is inaccurate and the third is insulting. *Three terms is deliberately small. A glossary that reaches thirty entries stops being consulted and becomes a document about itself.* ### What is not decided yet Gaps stated plainly are cheaper than rules invented to fill them. Five things on this page are still open. The house glossary is proposed and unapproved. Until it is signed off, the terms above are a recommendation and not a rule. There is no approved boilerplate paragraph, so every proposal writes its own description of the studio. That is the single most repeated writing task here and the easiest to settle. Product and venture naming is governed by brand architecture, which is still draft. Nothing on this page should be read as settling how a product is named. The register for the studio’s own website is undecided. First person is set for client writing and third person for press, and the site sits between the two. British spelling is set, and there is no ruling on what happens when a client’s own style guide requires US spelling in shared documents. *Anything added to this page should arrive with a worked example. A rule with no example does not survive its first deadline.* --- ## 08 · Graphic elements Ten devices recur across the artwork, and two rules govern all of them: scale is binary and the only diagonal is 12°. Everything else on this page is a description of something that already exists. *Updated 2026-08-11. Source: https://brand.haux.studio/graphic-elements* ### Two rules sit above every device Before any specific device, the two constraints that decide whether a composition belongs to the system: how big the mark is allowed to be, and which angles exist. Scale is binary. The diagonal is 12°. #### The scale rule is binary The mark is either 30% of the frame or smaller, or 140% and larger. Nothing sits in between, and the gap is the rule rather than a tolerance. In the middle band the mark competes with the type for the same attention and wins neither. Below 30% it reads as a mark; above 140% it reads as a surface, and both are useful. The oversized case runs 140 to 210% of the frame, cropped so only a fragment enters. Past 210% the fragment stops being recognisable as the mark at all. #### 12° is the only diagonal permitted The angle comes from the wing-edge construction of the mark, so a rule, a crop, a type block and a mask all share one geometry. Any second angle reads as a second system running underneath the first. Verticals and horizontals are always available and remain the default. The 12° is a device to be used once in a composition, not a texture to fill it with. > 12° or square. There is no third angle. > > — Taken from the wing edge of the mark ### Ten devices, grouped by what they do Each device below already appears in produced work. Where a device has a construction that cannot be faked with CSS, the construction is stated, because the shortcut is always the first thing attempted. ##### Container shape A notched octagon: a squared superellipse with concave cuts at each corner. The container is a squared superellipse whose four corners are cut inwards rather than rounded. Those concave corners are the whole identity of the shape, and they are what makes it recognisable at thumbnail size. Concave corners cannot be produced by border-radius. Every implementation is an SVG path or a clip-path polygon, and any attempt to approximate it in CSS resolves to a plain rounded rectangle. ###### Three jobs, one shape It works as an outline lockup, drawn as a stroke around a mark or a line of type. It works as a photo mask, with the image cropped to the notched edge rather than to a rectangle. It is the silhouette the aura is built from, which is why the two devices have to stay in step. *Gap: the canonical path has not been exported. Until it is, every build redraws the shape and the corner cuts drift between artefacts.* ##### The aura Five nested copies of the container silhouette, each inset further, with a fixed blend stack. The aura is built, not blurred. It is five copies of the container silhouette, each one inset further than the last, with the blend modes fixed in order. The stack runs normal, overlay, color-dodge, multiply, normal, from the outermost copy inwards. Those are the CSS keyword spellings, kept as written so the value can be pasted rather than translated. Reordering the stack produces a different object, not a variation of the same one. ###### It is not a Gaussian blur Rebuilding it as a blur loses the construction. The banding between the five layers is the effect, and a blur averages away exactly the thing that makes it read as built. The dodge layer is what produces the hot inner edge and the multiply layer is what stops the whole object floating. Remove either and the aura reads as a glow, which is a different and much more common device. *Gap: the inset distances are not published. They are currently judged by eye per artefact, which is the reason two auras rarely match.* ##### Selection device A highlight rectangle behind a line of type, with two grab handles, one flipped. A coloured rectangle sits behind one line of type, with a grab handle at each end and the second handle flipped, exactly as a text selection renders in an interface. It is the identity’s wink at being a product design studio, and it is the most ownable device in the system. Nothing else here would be hard for another studio to arrive at independently. ###### Where it goes Put it on the line you would say out loud. Its job is emphasis with a joke attached, so it only works on a line worth emphasising. Proposed and not yet decided: one selection per artefact, and the handles always drawn at the same weight as the type they sit against. *Gap: the highlight colour is undecided. It is orange in most existing work and takes the artefact accent in the rest, and those two rules produce different results on an orange ground.* ##### Cropped mark The mark at 140 to 210% of the frame, positioned so only a fragment enters. Scaled past the frame, the mark stops being a logo and becomes a surface. Position it so a single recognisable fragment enters the composition and the rest runs off the edge. The fragment has to be a fragment of something identifiable: an edge, a wing, a corner of the counter. A crop that lands on flat interior area is just a shape. This is the upper half of the binary scale rule. Anything between 30 and 140% is out of the system. ##### Type as texture Ghost bleed, tiling, and the centre-axis lock. Three ways the wordmark stops being a signature. ###### Ghost type bleed Set the wordmark at roughly 2.5 times the frame width, at 5 to 8% opacity, running off both edges. It reads as a watermark that was never meant to be read. Above 8% it competes with the content and below 5% it disappears in print. Both failures look like a mistake rather than a choice. ###### Tiled type The wordmark repeated on a regular grid becomes a field rather than a signature. Use it as a ground behind a single foreground object, never behind running text. Tiled type and ghost bleed do not appear together. Both are the same move at different scales, and using both reads as indecision. ###### Centre-axis wordmark lock The wordmark sits on the vertical centre line of the frame, locked to the top or the bottom edge. It never sits in a corner. Corner placement is the default for most identities, which is precisely the argument for the centre axis here. It is the cheapest way to make a frame recognisable at a glance. ##### Surface treatments Halftone dissolve, grunge silhouette, and tone-on-tone. Three ways a flat area stops being flat. ###### Halftone and dither dissolve An image or a shape dissolving into a halftone or dither grid is used to end an element rather than to fill one. The dissolve runs in the direction the composition already reads. It is a print reference, so it should look like a print artefact: hard dots, no anti-aliased softness, no gradient standing in for the grid. *Gap: dot size, screen angle and threshold are not recorded. Every use so far has been tuned by eye, so no two dissolves match.* ###### Grunge-textured silhouette A solid silhouette carrying a distressed texture, so the fill reads as printed rather than rendered. The texture belongs to the shape and never to the background. Applied to both, the composition reads as a photograph of a poster instead of a poster. ###### Tone-on-tone Two values of one hue, and only one hue. A tone-on-tone panel that reaches for a neutral as its second value is no longer tone-on-tone, it is a two colour panel with low contrast. This is the treatment that makes a quiet frame still look deliberate. It also keeps the accent budget intact, since two values of one hue read as one colour. ### The five ways these devices get broken Every pair below has happened. Each one is the shortcut that gets taken when the construction is not to hand. **Scale is binary: 30% and under, or 140% and over.** - Do: Mark at 18% of the frame in the corner lockup, or at 170% cropped to a wing edge. - Don't: Mark at 70%. Too large to sit as a mark, too small to work as a surface, and it competes with the headline. **The aura is built, not blurred.** - Do: Five nested silhouettes, insets increasing, blend stack in the published order. - Don't: One Gaussian blur behind the shape. Faster to make, and it loses the banding that the device is made of. **The container is a path, not a radius.** - Do: An SVG path or clip-path polygon carrying the concave corner cuts. - Don't: border-radius set high enough to look similar. It resolves to a rounded rectangle at every size. **One diagonal, and it is 12°.** - Do: Every angled edge in the composition cut at 12°, with everything else square. - Don't: A 30° crop introduced to balance a 12° rule. Two angles read as two systems. **The wordmark holds the centre axis.** - Do: Wordmark centred on the vertical axis, locked to the top or bottom edge. - Don't: Wordmark set in the bottom right corner, which is where every other identity puts it. ### What is not built yet Five of these devices are documented but not produced as assets. Recording that is worth more than asserting a decision nobody has made. No exported path exists for the container shape. It is redrawn per artefact, so the corner cuts already differ between pieces made two months apart. The aura is documented as a construction and has never been built as a component. Its five inset distances are judged by eye each time. Halftone parameters are unmeasured. Dot size, screen angle and threshold need recording from the existing work before the next use, not after. The selection device has no agreed colour rule, which matters most on an orange ground where the current practice produces two different results. There is no pattern library file. Ten devices described in prose and none of them available as an asset is the single largest gap on this page. *The fix for all five is the same and it is small: one file, ten artboards, exported. Until that exists, this page documents intent rather than practice.* --- ## 09 · Motion Five behaviours cover everything that moves, each with a curve, a duration band and the properties it may touch. One rule sits above all five: nothing bounces. *Updated 2026-08-09. Source: https://brand.haux.studio/motion* ### Nothing bounces One prohibition governs the whole system, and it has no exception band. Read it before the five behaviours, because it constrains all of them. Nothing bounces. No elastic, no overshoot, no back-easing. An overshoot reads as a visual second guess: the element arrives, changes its mind, and corrects. The claim this studio makes is that the thinking happened before the work shipped, and a bounce contradicts it every time it plays. There is no exception band on this rule. If a transition feels flat, it gets a shorter duration or a sharper curve, never a wobble. That constraint is also why the five curves below are all monotonic. Every one of them arrives and stops. > Arrives fast. Lands soft. Holds still. > > — Settle, which is the shape of the whole system ### Settle, Strike, Hold, Track, Trim Anything that moves is one of these five. A transition that fits none of them is a transition that has not been decided yet. ##### Settle Every entrance. ###### Specification Curve: cubic-bezier(0.16, 1, 0.3, 1) Duration: 620ms for a hero, 420ms for a section, 280ms for a card May touch: transform and opacity only, 24px maximum travel, 45ms converging stagger ###### How it behaves Arrives fast, lands soft, holds still. Most of the distance is covered in the first third of the duration, and the remainder is the part that reads as considered. Travel is capped at 24px. Beyond that the element stops arriving and starts flying in, which is a different and much cheaper effect. The stagger converges: 45ms between the first items, tightening across the sequence so a list of twenty does not take four times longer to resolve than a list of five. *The tell: If it is still moving when the eye reaches it, the duration is wrong.* ##### Strike State change and feedback. ###### Specification Curve: cubic-bezier(0.55, 0, 0.1, 1) Duration: 180ms standard, 120ms pressed May touch: colour, transform, opacity. The only behaviour allowed to touch orange. ###### How it behaves No wind up. The response starts on frame one, because anything else is read as lag rather than as animation. Strike is the only behaviour permitted to bring in the accent. A hover, a press, a selection and a validation error are the moments orange is earned. At 120ms the pressed state is nearly instant on purpose. Feedback that waits is feedback that gets pressed twice. *The tell: Frame one has already changed, or it is not Strike.* ##### Hold Ambient, background, always running. ###### Specification Curve: linear, or a sine loop Duration: 12 to 30 seconds per cycle May touch: transform and opacity, at very low amplitude ###### How it behaves The loop has no visible join. A loop point that can be spotted becomes the only thing on the page anyone looks at. Amplitude is set so low that two screenshots taken a second apart look identical. The motion should only be perceptible over the time it takes to read a paragraph. Hold is the behaviour most often specified too strongly. If a reviewer says the background is moving, it is moving too much. *The tell: Two screenshots a second apart are indistinguishable.* ##### Track Continuous response to pointer and scroll. ###### Specification Curve: critically damped lerp, never 1:1 Duration: continuous, no fixed duration May touch: transform only, 40px maximum parallax ###### How it behaves The lag is the character. An element pinned exactly to the pointer feels attached to the mouse; one that trails and settles feels like it has mass. Critically damped means it catches up and stops, with no oscillation on arrival. That constraint is what keeps Track inside the no-bounce rule. Parallax is capped at 40px of travel across the whole scroll range. Past that the depth stops reading as depth and starts reading as drift. *The tell: Nothing follows the pointer exactly, and nothing overshoots on arrival.* ##### Trim Every exit. ###### Specification Curve: cubic-bezier(0.4, 0, 1, 1) Duration: 160ms, and always shorter than the matching entrance May touch: transform and opacity only ###### How it behaves Removed, not dismissed. An exit that takes as long as its entrance makes the interface feel reluctant to let go of something the person has already finished with. The curve accelerates out, so the element leaves rather than fades in place. Attention returns to the page before the animation has finished. One number to remember: if the entrance was 280ms, the exit is 160ms, not 280ms played backwards. *The tell: The exit is shorter than the entrance, every time.* *Curves are written as CSS values so they can be pasted rather than retyped. Retyping a bezier is how a system ends up with four curves that are almost the same.* ### The contract, published rather than implied A reduced-motion setting that quietly disables an interface is worse than one that keeps every control responding. This is what each behaviour becomes when the preference is set. #### What each behaviour becomes Settle becomes a 120ms opacity fade. No travel, no stagger, no transform. Strike keeps its full timing. It is feedback rather than decoration, and removing it removes the confirmation that a control was pressed. Hold stops. An ambient loop has no function beyond atmosphere, so it is the first thing to go. Track goes static. Elements sit at their resting position and nothing follows the pointer. Trim becomes instant. There is no value in animating a removal that the person has already decided on. WebGL renders one frame and freezes. The scene still appears, and it stops being a scene. Publishing the contract is the point of this module. Most systems implement a reduced-motion branch and never write down what it does, so nobody can check it and nobody can rely on it. Keeping Strike at full timing is the decision most often got wrong. Stripping feedback along with decoration leaves an interface that appears not to respond, which is a worse outcome than the motion it removed. *Every behaviour above is testable in a browser with the preference on. If it has not been tested with the preference on, it has not been tested.* ### The four ways this system gets broken Each pair below is a default that arrives with a library rather than a choice anyone made. Defaults are where a motion system leaks. **Nothing bounces, including at small amplitudes.** - Do: Settle at 420ms on cubic-bezier(0.16, 1, 0.3, 1). It arrives, lands and holds. - Don't: A spring with 8% overshoot on the same element. Small enough to argue about, large enough to read as a correction. **Exits are shorter than entrances.** - Do: Trim at 160ms against a 280ms card entrance. Attention returns to the page immediately. - Don't: A 280ms fade out mirroring the entrance. The interface reads as reluctant to close. **Strike starts on frame one.** - Do: Press state at 120ms, with the change already visible on the first frame. - Don't: A 60ms wind up before the state changes. It is imperceptible as animation and perceptible as lag. **Track lags on purpose.** - Do: A critically damped lerp, capped at 40px of parallax across the full scroll range. - Don't: An element pinned 1:1 to the pointer. It feels attached to the mouse rather than to the page. ### What is not specified yet Five things are undecided, and three of them will be decided by whoever builds the next project unless they are settled first. The curves are not in the token file. They are retyped per project, which is how a system ends up with four beziers that are nearly identical and none of them canonical. Route transitions are unspecified. Nothing here says what happens between two pages, and that is the most visible motion decision on any site. Loading and skeleton behaviour is undecided. It is the one case where an ambient loop has a job, which makes it a genuine exception to Hold rather than an oversight. Video and WebGL carry no rules beyond the reduced-motion freeze. Autoplay, looping and first-frame posters all need a position. Sound has never been discussed. That is a decision, not an omission, and it should be written down as one. *The first two gaps are worth closing before the next build. Both get decided by default the moment someone opens an editor.* --- ## 10 · Art direction Near-black grounds, high contrast and a single hard warm light: that is the register, read off the work that exists. Five categories, each opening with what it is best for, plus two decisions nobody has made yet. *Updated 2026-08-09. Source: https://brand.haux.studio/art-direction* ### One register, and crop does most of the work Before any category, the constants. Every image in the existing library shares four properties, and the fourth one is the one people get wrong. Near-black ground, one hard warm light, contrast pushed. #### The four constants Grounds are near-black rather than grey or white. The subject is lit out of the dark, so the frame has depth before anything is composed in it. Contrast runs high, with the black point genuinely black. A flat, evenly exposed photograph belongs to a different brand no matter what is in it. One hard light source, on the warm side. Two sources cancel the shadow that gives the subject its edge, and a soft box removes the edge entirely. Surfaces are matte and technical: woven fabric, anodised metal, coated plastic. Gloss reads as product photography, and product photography is not what a studio sells. #### Crop is a brand decision, not a taste one The same photograph cropped tight to the fabric belongs to this system. With air around it, it belongs to a stock library. Crop is the cheapest control available and the one most often left at the default. Decide it explicitly, on every image, before anything else is adjusted. When no category on this page fits, a raw screen usually beats a mockup. A screenshot is honest about what shipped; a mockup adds furniture the client did not buy. ### Five categories, each with what it is best for Read the first line of each tab and pick. The rules underneath only matter once the category is chosen. ##### Case study Best for almost everything. For a studio, the imagery is the work. This is the core category and the default answer. Every other category on this page exists to support a page whose main images are the screens that shipped. Show real screens with real content. Placeholder data, lorem text and invented metrics all announce that the work is being described rather than shown. Crop to the decision the screen is making. A full screenshot shows a page; a crop shows the thing that changed, which is the argument the case study is making. ###### Before and after Where a before exists, show it at the same crop and the same size as the after. Different crops make the comparison unreadable and look like an attempt to win it. ##### Device mockups Best for the one case where the screen makes no sense without knowing where it lives. Reach for a mockup only when context is doing real work: a screen held in one hand, a kiosk at standing height, a watch face at true scale. Everywhere else it adds a device and subtracts a screen. One device per frame, on a near-black ground, with the same single hard warm light as everything else. A mockup lit differently to the rest of the page reads as borrowed. No floating perspective grids and no three-device fans. Both are stock presentation conventions and neither survives being seen next to the raw screen. *Gap: no approved mockup assets exist. Every mockup so far has come from a different source, which is why they are lit inconsistently.* ##### People Best for scale and credibility on a page that has neither. People are useful where a page needs a sense of scale or a face to attach trust to. On a page already carrying the work, they usually take space the work should have. The register still applies: near-black ground, one hard warm light, high contrast. That produces a portrait with a defined edge and a shadow side, which is the opposite of a corporate headshot. Hands at work photograph better than posed portraits here, because the subject of the picture stays the work. *Gap: there is no produced people photography. Everything in this tab is proposed, derived from the register, and untested against a real shoot.* ##### Cut-out over a field Best for a single object that has to carry a whole frame on its own. A subject cut from its background and placed on a flat field is the most controllable image in the system. It also has the least depth, so the field has to do the work the ground normally does. Use a tone-on-tone field, two values of one hue, as set out in graphic elements. A neutral field turns the composition into a catalogue photograph. Keep the original lighting on the cut-out. A subject lit from a different direction to the shadow it is given reads as a collage, and the eye catches it immediately. ##### Gradient-mapped Best for making a photograph you did not art direct belong to the system. ###### The specification An orange gradient is carried over the photograph at 80% alpha, leaving enough of the original luminance for the subject to stay readable. It is then either masked into the container shape, which is the framed use, or applied full bleed as a duotone, which is the surface use. Those are the only two placements. ###### What it cannot fix A gradient map is a treatment, not a rescue. Applied to a photograph with no structure, it produces an orange photograph with no structure. It counts against the accent budget in the colour section. One gradient-mapped image per view, and it is the accent for that view. ### Four decisions that get made by default Each pair below is what happens when an image is chosen quickly rather than badly. Speed is the actual failure mode here. **Crop to the decision, not to the artefact.** - Do: The checkout cropped to the card field, at the size the change is visible. - Don't: The full page with browser chrome, a scrollbar and a desktop wallpaper behind it. **One hard light source, on the warm side.** - Do: A single key from one side, with a real shadow and a defined edge on the subject. - Don't: Even fill from both sides. Nothing is wrong with it and nothing in it belongs to the brand. **A raw screen beats a mockup with nothing to add.** - Do: The screen itself, full bleed, cropped to what shipped. - Don't: Three floating devices at an angle, showing less of the work than one screen would. **The gradient map is a treatment, not a repair.** - Do: Applied to a photograph that already has contrast and a clear subject. - Don't: Applied to a weak photograph in the hope that the orange carries it. ### Two decisions nobody has made Both of these will be decided under deadline by whoever needs an image first, unless they are settled deliberately now. #### Whether the studio uses illustration at all Not decided. There is no illustration anywhere in the existing work, nothing has been commissioned, and no style has been agreed. The honest options are two: rule it out, and lean harder on photography and the graphic devices, or commission a small set and treat it as a real part of the system. Both are defensible and drifting between them is not. Decide before the first deck needs a diagram, because that is the moment the answer gets improvised and then copied. #### The stock policy Not decided either. The register is specific enough that most stock will miss it, which is an argument for commissioning or shooting, and that argument has never been costed. A workable middle position exists: stock permitted only as raw material for the gradient-map treatment, never as a finished image. That is a proposal on this page, not a rule. *Two further gaps: there is no produced people photography, and no approved device mockup assets. Both tabs above are written from the register rather than from work that exists.* *Everything on this page that is untested is labelled. Anything unlabelled is read off images that have shipped.* --- ## 11 · Layout Margins should be derived from the format, not chosen per document, so one rule covers a poster, a slide and a story. The measured figure is 8%, and everything else on this page follows from it. *Updated 2026-08-13. Source: https://brand.haux.studio/layout* ### The 8% margin, measured and then generalised One number governs the page. It was measured off the artwork rather than chosen, which is why it lands on 8% and not on a rounder figure. 8% margin. On a 1000px artefact that is 80px, leaving 840px. #### What was measured Every 1000px-wide artefact in the library sits on an 80px margin. That leaves an 840px content column, and the type sizes across the existing work are all set against that column. The figure is worth stating precisely because it is the one thing a new artefact can get wrong invisibly. A 60px margin is not obviously incorrect on its own, and it is obviously incorrect beside the rest of the set. #### How it generalises Take 8% of the short edge and apply it on all four sides. That single rule reaches every format without anybody picking a number per document. A4 at 210 by 297mm lands on a 16.8mm margin, leaving a 176.4mm column. A 1920 by 1080 slide lands on 86.4px, and a 1080 by 1920 story lands on the same 86.4px, which is why a story and a slide made from the same content look related. Deriving from the short edge rather than the width is what keeps the margin from collapsing on a wide format and swallowing a tall one. *Proposed, not measured. The 8% figure is measured on 1000px artefacts; the short-edge generalisation is an extrapolation and has not been tested on a 16:9 slide or in print.* ### Corner radius scales with the artefact A fixed radius applied across formats is the tell that a template was resized rather than laid out. Scale it, and a poster and a story read as one system. Radius runs at roughly 4 to 6% of the short edge. On a 1000px artefact that is 40 to 60px, on a 1080px frame it is 43 to 65px, and on A4 it is 8.4 to 12.6mm. The band is deliberately a band. Within it the choice is compositional, and outside it the artefact stops matching the set. The one hard case is the container shape from graphic elements, whose corners are cut rather than rounded. Where that shape is used, this rule does not apply and the path governs. ### One right edge, held strictly Wide formats run a strict right-hand alignment axis. It is the cheapest fix available on a layout that feels unresolved and the most visible. Every element in a type block shares one right edge: eyebrow, headline, body and any rule beneath them all stop at the same pixel. A ragged right inside a type block is what makes an otherwise correct composition feel loose. The eye reads the shared edge as intent, and three different edges as three separate decisions. The axis is strict, meaning it survives a line break. If a headline rewraps and breaks the edge, the headline is rewritten rather than the axis relaxed. *Measured on wide formats only. Portrait artefacts in the existing library are inconsistent here, so the rule is not yet stated for them.* ### One idea per block The reflex on a crowded block is to add space. That produces a bigger crowded block, and the fix is almost always subtraction. If a block feels busy, remove an element before adding space. One idea per block, and the block is finished when nothing further can be taken out of it. A statement with a caption, a badge and a rule underneath is four ideas competing for one position. The element you were about to shrink is usually the one to delete. Shrinking is how a composition ends up with a hierarchy of things nobody reads. Space is the last adjustment, not the first. Applied to a block that is still carrying too much, it enlarges the problem and moves it further apart. ### Four habits that break the set None of these produce a bad artefact on its own. All four produce a set that does not look like a set, which is the more expensive failure. **Margins are derived from the format, never chosen per document.** - Do: 8% of the short edge, on every format, without a decision being made. - Don't: A 40px margin because it looked right on this one artefact at this one size. **Radius scales with the artefact.** - Do: 48px on a 1000px post, 12mm on A4, 56px on a 1080px story. - Don't: A 16px radius on everything from a business card to a poster, which reads as a resized screenshot. **One right edge per type block.** - Do: Eyebrow, headline and body all stopping on the same axis, with the rule beneath matching it. - Don't: Three lines with three right edges, each within a few pixels of the others. **One idea per block.** - Do: A single statement, alone, with the margin around it. - Don't: A statement, a caption, a badge and a rule, spaced further apart to compensate. ### What this page does not cover Four gaps, and one of them is a contradiction that needs resolving before this section is published. The section summary in the manifest describes a 22px gutter, and nothing on this page measures one. Either the gutter belongs to the website grid rather than to artefacts, or the summary is out of date, and that needs settling in one edit. The site’s own column and gutter system is separate from artefact margins and is not documented here. Two grids described on one page is how people end up applying the wrong one. No baseline grid has been established. Vertical rhythm across the existing artefacts is consistent by eye and by nothing else. Behaviour below roughly 400px wide is unspecified. At that size an 8% margin is 32px, which is defensible, and it has never been checked against a real screen. *The first gap is the one to close first. A manifest summary that contradicts the measured page undermines every other number on it.* --- ## 12 · Applications Four artefacts are drawn and measured: the business card, the ID card, the LinkedIn covers and the team profile images. The Instagram work is still exploration, and the six documents a client actually receives have not been made yet. *Updated 2026-08-08. Source: https://brand.haux.studio/applications* ### The brand is judged on what arrives in the inbox Almost nobody opens a logo page. Clients open a proposal, a card and an invoice, and those artefacts decide what they think of the studio. An identity is only as good as the documents it ships inside. What follows is an inventory rather than a rulebook. Four artefacts are drawn at real dimensions and can be specified precisely; everything else is either exploration or missing, and both are labelled as such. Reading it that way is the point. A guideline that presents unfinished work as settled rules produces artefacts that contradict each other, and afterwards nobody can say which one was wrong. > Four artefacts specified. Seven post styles unresolved. Six templates that do not exist. > > — Status, August 2026 ### What exists Five surfaces, measured off the artwork. Where a value looks arbitrary it was read rather than chosen, and the ratio behind it is given alongside. ##### Business card Seven variants on one artboard, governed by a single margin that repeats on all four edges. ###### Artboard, radius, margins The card is drawn at 1000 × 647px, which is the 85 × 55mm European card at a working resolution. Corners are 40px. Margins are 80px on all four sides, leaving an 840px content column that every element on both faces aligns to. Hold the 80px. It is the only measurement that repeats on all four edges, so an element breaking it is obvious even to someone who has never seen the artwork before. *Scale the margin with the artboard, not with the content. At 2000px wide the margin is 160px, not 80px plus a guess.* ###### Seven variants, and no eighth Four front variants and three back variants are settled. Treat those seven as the full set: adding an eighth because one particular client would suit it is how a card system turns into a folder of one-offs. ###### The back The back carries the tagline inside a coloured highlight, with two selection-handle marks flanking it. The device reads as text caught mid-selection, which is why the handles sit tight to the highlight and never drift away from it. A contact row is pinned 80px from the bottom edge and laid out justify-between, so it spreads across the full 840px column. Items are added to or removed from the row rather than re-centred, and the outer two always touch the margin. ##### ID card A tall near-black artboard with three fixed zones on the front and one oversized mark on the back. ###### Artboard and ground The badge is 1000 × 1432px with a 60px radius, on a near-black ground, with the same 80px margins as the card. The larger radius is proportional: at 1432px tall, a 40px corner would read as sharper than the card’s, not the same. ###### Front Three zones run down the artboard: a name and role header, the aura at the centre, and a foot carrying the wordmark with an "est. 2026" row. Only the centre zone is allowed to grow, so a long name pushes the aura down rather than crowding the foot. ###### Back The back is a single oversized mark rendered as a checkerboard halftone, dissolving from invisible at the top to hot colour at the bottom. It is the one place in the system where the mark is allowed to be illegible, because at badge distance the gradient reads before the shape does. *The halftone is a raster effect. Rebuild it at output resolution rather than scaling an export up, or the checkerboard aliases into a moiré.* ##### LinkedIn covers Two settled variants at 4200 × 700px, both solving the same problem: a 6:1 band crops unpredictably. ###### The 6:1 problem 4200 × 700px is a 6:1 band, the most hostile ratio in the identity. Two variants are settled, and both solve it by holding a single object instead of composing across the width. ###### Dark variant The wordmark is centred on both axes and nothing else sits on the artboard. Centring is doing real work: the lower left of a cover is covered by the profile photo on most layouts, and a centred object survives every crop. ###### Orange variant Content is a right-aligned block where the small wordmark and the tagline share one right edge, set 134.5px (3.2%) in from the artboard edge. The two are matched optically rather than metrically: the tagline’s text height equals the cap height of the centred wordmark on the dark variant, so the covers read at the same weight when swapped. *The 3.2% matters more than the 134.5px. Rebuild the cover at another width and the percentage still holds, while the pixel value does not.* ##### Team profiles Circles at 838.5px on a 54px gutter, with the subject deliberately breaking out of its own container. ###### Circles and gutters Portraits are 838.5px circles set on a grid with 54px gutters. The gutter is tight on purpose: a row should read as one object rather than as five separate avatars. ###### The 1.2× overscale Each portrait is a background-removed cut-out, scaled to 1.2× inside its circle so that the shoulders overflow at the sides and the bottom. The subject then reads as pushed forward, in front of the circle rather than inside it, and the crop is what produces that. *Crop at the shoulders, never at the top of the head. Overflow at the bottom edge is the effect; overflow at the top is a mistake.* ###### What sits behind Behind each portrait is a fragment of the mark at roughly 2.1× the circle diameter, so only part of it is ever visible. It is textured with a grunge PNG masked by the mark silhouette and set to multiply, which keeps the texture inside the shape instead of dirtying the whole circle. ##### Social Two formats are fixed. What goes inside them is one carousel template, one story template, and a range of poster treatments that has not been decided. ###### Two formats Feed posts are 4:5 and stories are 9:16. Both are settled as formats; most of what goes inside them is not. ###### What is actually settled One carousel template and one story layout behave like a system: fixed margins, a fixed type hierarchy and a repeatable cover. Everything else on the feed is exploration. Counted honestly, there are seven mutually incompatible post styles and three container shapes that have not been chosen between. That is a range of poster treatments, and calling it a system would license anyone to pick any one of the seven and be right. *The honest description of the current state is: one carousel template, one story template, and a documented range of poster treatments.* ###### How to close it Closing this needs one decision, not seven: choose a container shape, then keep only the post styles that survive it. Until that decision is made, use the carousel and story templates for anything a client will see, and keep the poster treatments for work that is explicitly experimental. ### The six documents that do not exist Everything above is the identity applied to small surfaces. The artefacts a studio is actually hired through are missing, and they are the highest-value work outstanding. #### Proposal template The document that wins or loses the work has no master. It needs a cover, a scope and pricing layout that survives a long table, and a signature page that does not look like a different document. #### Pitch deck masters Slides are rebuilt per pitch, which is why no two decks look alike. Five masters at 16:9 would end that: title, section divider, full-bleed image, two-column and data. #### Case study format Without a fixed format, every project write-up is designed from scratch and none of them compare. It needs a repeatable order (problem, approach, artefacts, outcome) and a fixed set of image ratios, so past work can be re-laid without being re-cropped. #### Email signature Every message currently carries whatever the mail client defaults to. It needs one plain-text version and one HTML version, both legible in dark mode, and no image-only logo that disappears when images are blocked. #### Invoice and contract templates These are the two documents a client reads most carefully, and both are unbranded today. The invoice needs a fixed line-item table and a payment terms block; the contract needs a layout that stays legible across ten pages of body text. #### Letterhead Anything printed or signed needs one, in A4 and US Letter. Draw the continuation sheet at the same time, because a continuation sheet that is page one with the header deleted is how the margin drifts. *None of the six exists in any form. Each needs to be designed once, then locked as a master and added to the team pack.* --- ## 13 · Accessibility Every token pair in the system, scored against WCAG 2.x at build time. Four combinations fail; all four are named here with the substitute to use instead. *Updated 2026-08-17. Computed at build time from the live tokens.* ### Summary 86 pairs measured. 46 pass AA body, 52 pass AA large, 29 pass AAA. ### Known failures These are in the palette as shipped. They are documented rather than removed, because a rule nobody knows they are breaking is not a rule. #### Stone is captioned as text and cannot be text - Claim: The Figma colour sheet labels Stone #AA9F8D "Muted text", and it has been used that way in decks and in early product screens. - Finding: Stone fails AA at every size, on every surface in the system. It is not a marginal miss. On Bone, the warm surface it most often appears over, it is less than half the required ratio. It stays in the palette as a decorative colour: rules, fills, illustration, texture. Never a glyph. - Measured: Stone on Near-white 100 — Stone `#aa9f8d` on Near-white 100 `#fcfcfc` = **2.54:1** (threshold 4.5:1) - Measured: Stone on Bone — Stone `#aa9f8d` on Bone `#ebe2d5` = **2.03:1** (threshold 4.5:1) - Measured: Stone on Sage — Stone `#aa9f8d` on Sage `#e5e5dd` = **2.06:1** (threshold 4.5:1) - Use instead: Near-white 700 `#4d4d4d` on Near-white 100 `#fcfcfc` = **8.24:1** - Still failing: yes #### White on Orange 500 fails AA body - Claim: White text on an orange button is the default instinct, and it is what most of the early mockups do. - Finding: It misses AA body by more than a point. There are two fixes and both are in the token set already: keep the Orange 500 fill and set the label in Near-black, or keep the white label and step the fill to Orange 600. The first is the house style, because --on-accent resolves to Near-black 900 for exactly this reason. - Measured: Near-white 100 on Orange 500 — Near-white 100 `#fcfcfc` on Orange 500 `#ff3c00` = **3.47:1** (threshold 4.5:1) - Use instead: Near-black 900 `#050505` on Orange 500 `#ff3c00` = **5.72:1** - Still failing: yes #### Orange 500 is not a text colour on light surfaces - Claim: The accent is the brand, so it gets reached for as a link colour and as a heading colour. - Finding: As text on Near-white it lands in the same place as white-on-orange: enough to be seen, not enough to be read. Orange 700 carries the same accent identity at more than twice the ratio, and is what --accent-text resolves to. Orange 500 remains correct as a fill, a rule, or a mark. - Measured: Orange 500 on Near-white 100 — Orange 500 `#ff3c00` on Near-white 100 `#fcfcfc` = **3.47:1** (threshold 4.5:1) - Use instead: Orange 700 `#8f2200` on Near-white 100 `#fcfcfc` = **8.54:1** - Still failing: yes #### Silver misses the 3:1 non-text threshold - Claim: Silver #AFAFAF is specified as the border colour, and --border resolved to it. - Finding: Borders and focus rings are held to 3:1 under WCAG 2.x §1.4.11, and Silver does not reach it on Near-white. This is the failure that audits miss, because contrast tooling looks at text. Silver stays as a decorative rule; anything a person has to locate (an input boundary, a focus ring) uses a darker step. - Measured: Silver on Near-white 100 — Silver `#afafaf` on Near-white 100 `#fcfcfc` = **2.14:1** (threshold 3:1) - Use instead: Near-white 500 `#8c8c8c` on Near-white 100 `#fcfcfc` = **3.28:1** - Still failing: yes ### Non-text contrast Borders, focus rings and other interactive boundaries, held to 3:1 under WCAG 2.x 1.4.11. | Role | Foreground | Background | Ratio | Verdict | | --- | --- | --- | --- | --- | | Input border · Silver on Near-white 100 | Silver `#afafaf` | Near-white 100 `#fcfcfc` | 2.14:1 | Fails. Silver is a decorative rule only. Interactive borders use Near-white 500 or darker. | | Substitute · Near-white 500 on Near-white 100 | Near-white 500 `#8c8c8c` | Near-white 100 `#fcfcfc` | 3.28:1 | Passes the 3:1 non-text threshold. Use this for input borders and any boundary a person has to find. | | Divider · Mist on Near-white 100 | Mist `#d4d4d4` | Near-white 100 `#fcfcfc` | 1.44:1 | Below 3:1, and that is acceptable: a divider is decoration, not a control boundary. | | Focus ring · Orange 600 on Near-white 100 | Orange 600 `#c22e00` | Near-white 100 `#fcfcfc` | 5.56:1 | Passes. This is what --focus-ring resolves to in the light theme. | | Focus ring · Orange 500 on Near-white 100 | Orange 500 `#ff3c00` | Near-white 100 `#fcfcfc` | 3.47:1 | Passes 3:1 by a margin thin enough to disappear on a poor display. Orange 600 is the specified ring. | | Focus ring · Orange 300 on Near-black 900 | Orange 300 `#ffb199` | Near-black 900 `#050505` | 11.65:1 | Passes. This is what --focus-ring resolves to in the dark theme. | | Border · Near-black 700 on Near-black 900 | Near-black 700 `#3b3b3b` | Near-black 900 `#050505` | 1.82:1 | Fails 3:1. Dark-theme control borders need Near-black 500 or lighter. | | Substitute · Near-black 500 on Near-black 900 | Near-black 500 `#787878` | Near-black 900 `#050505` | 4.62:1 | Passes. Use for interactive boundaries in the dark theme. | ### Full matrix ### Light theme Every ink the system offers, against every surface it can land on. Ratios are measured against Near-white 100, the actual value of --surface, not against pure white. | Ink | Surface | Ratio | AA body | AA large | AAA | | --- | --- | --- | --- | --- | --- | | Near-black 900 `#050505` | Near-white 100 `#fcfcfc` | 19.87:1 | pass | pass | pass | | Near-black 900 `#050505` | Cloud `#eaeaea` | 16.94:1 | pass | pass | pass | | Near-black 900 `#050505` | Sage `#e5e5dd` | 16.09:1 | pass | pass | pass | | Near-black 900 `#050505` | Bone `#ebe2d5` | 15.89:1 | pass | pass | pass | | Near-black 900 `#050505` | Orange 500 `#ff3c00` | 5.72:1 | pass | pass | fail | | Near-black 900 `#050505` | Orange 600 `#c22e00` | 3.58:1 | FAIL | pass | fail | | Umber `#674e42` | Near-white 100 `#fcfcfc` | 7.46:1 | pass | pass | pass | | Umber `#674e42` | Cloud `#eaeaea` | 6.36:1 | pass | pass | fail | | Umber `#674e42` | Sage `#e5e5dd` | 6.04:1 | pass | pass | fail | | Umber `#674e42` | Bone `#ebe2d5` | 5.96:1 | pass | pass | fail | | Umber `#674e42` | Near-black 900 `#050505` | 2.66:1 | FAIL | FAIL | fail | | Umber `#674e42` | Orange 500 `#ff3c00` | 2.15:1 | FAIL | FAIL | fail | | Umber `#674e42` | Orange 600 `#c22e00` | 1.34:1 | FAIL | FAIL | fail | | Near-white 700 `#4d4d4d` | Near-white 100 `#fcfcfc` | 8.24:1 | pass | pass | pass | | Near-white 700 `#4d4d4d` | Cloud `#eaeaea` | 7.03:1 | pass | pass | pass | | Near-white 700 `#4d4d4d` | Sage `#e5e5dd` | 6.68:1 | pass | pass | fail | | Near-white 700 `#4d4d4d` | Bone `#ebe2d5` | 6.59:1 | pass | pass | fail | | Near-white 700 `#4d4d4d` | Near-black 900 `#050505` | 2.41:1 | FAIL | FAIL | fail | | Near-white 700 `#4d4d4d` | Orange 500 `#ff3c00` | 2.37:1 | FAIL | FAIL | fail | | Near-white 700 `#4d4d4d` | Orange 600 `#c22e00` | 1.48:1 | FAIL | FAIL | fail | | Stone `#aa9f8d` | Near-white 100 `#fcfcfc` | 2.54:1 | FAIL | FAIL | fail | | Stone `#aa9f8d` | Cloud `#eaeaea` | 2.17:1 | FAIL | FAIL | fail | | Stone `#aa9f8d` | Sage `#e5e5dd` | 2.06:1 | FAIL | FAIL | fail | | Stone `#aa9f8d` | Bone `#ebe2d5` | 2.03:1 | FAIL | FAIL | fail | | Stone `#aa9f8d` | Near-black 900 `#050505` | 7.82:1 | pass | pass | pass | | Stone `#aa9f8d` | Orange 500 `#ff3c00` | 1.37:1 | FAIL | FAIL | fail | | Stone `#aa9f8d` | Orange 600 `#c22e00` | 2.19:1 | FAIL | FAIL | fail | | Orange 500 `#ff3c00` | Near-white 100 `#fcfcfc` | 3.47:1 | FAIL | pass | fail | | Orange 500 `#ff3c00` | Cloud `#eaeaea` | 2.96:1 | FAIL | FAIL | fail | | Orange 500 `#ff3c00` | Sage `#e5e5dd` | 2.81:1 | FAIL | FAIL | fail | | Orange 500 `#ff3c00` | Bone `#ebe2d5` | 2.78:1 | FAIL | FAIL | fail | | Orange 500 `#ff3c00` | Near-black 900 `#050505` | 5.72:1 | pass | pass | fail | | Orange 500 `#ff3c00` | Orange 600 `#c22e00` | 1.60:1 | FAIL | FAIL | fail | | Orange 600 `#c22e00` | Near-white 100 `#fcfcfc` | 5.56:1 | pass | pass | fail | | Orange 600 `#c22e00` | Cloud `#eaeaea` | 4.74:1 | pass | pass | fail | | Orange 600 `#c22e00` | Sage `#e5e5dd` | 4.50:1 | pass | pass | fail | | Orange 600 `#c22e00` | Bone `#ebe2d5` | 4.44:1 | FAIL | pass | fail | | Orange 600 `#c22e00` | Near-black 900 `#050505` | 3.58:1 | FAIL | pass | fail | | Orange 600 `#c22e00` | Orange 500 `#ff3c00` | 1.60:1 | FAIL | FAIL | fail | | Orange 700 `#8f2200` | Near-white 100 `#fcfcfc` | 8.54:1 | pass | pass | pass | | Orange 700 `#8f2200` | Cloud `#eaeaea` | 7.28:1 | pass | pass | pass | | Orange 700 `#8f2200` | Sage `#e5e5dd` | 6.92:1 | pass | pass | fail | | Orange 700 `#8f2200` | Bone `#ebe2d5` | 6.83:1 | pass | pass | fail | | Orange 700 `#8f2200` | Near-black 900 `#050505` | 2.33:1 | FAIL | FAIL | fail | | Orange 700 `#8f2200` | Orange 500 `#ff3c00` | 2.46:1 | FAIL | FAIL | fail | | Orange 700 `#8f2200` | Orange 600 `#c22e00` | 1.54:1 | FAIL | FAIL | fail | | Near-white 100 `#fcfcfc` | Cloud `#eaeaea` | 1.17:1 | FAIL | FAIL | fail | | Near-white 100 `#fcfcfc` | Sage `#e5e5dd` | 1.23:1 | FAIL | FAIL | fail | | Near-white 100 `#fcfcfc` | Bone `#ebe2d5` | 1.25:1 | FAIL | FAIL | fail | | Near-white 100 `#fcfcfc` | Near-black 900 `#050505` | 19.87:1 | pass | pass | pass | | Near-white 100 `#fcfcfc` | Orange 500 `#ff3c00` | 3.47:1 | FAIL | pass | fail | | Near-white 100 `#fcfcfc` | Orange 600 `#c22e00` | 5.56:1 | pass | pass | fail | ### Dark theme The derived dark token set. The accent moves from Orange 500 to Orange 400 here, which is the whole reason the dark theme needed its own audit rather than an assumption. | Ink | Surface | Ratio | AA body | AA large | AAA | | --- | --- | --- | --- | --- | --- | | Near-white 100 `#fcfcfc` | Near-black 900 `#050505` | 19.87:1 | pass | pass | pass | | Near-white 100 `#fcfcfc` | Near-white 900 `#121212` | 18.26:1 | pass | pass | pass | | Near-white 100 `#fcfcfc` | Near-black 800 `#212121` | 15.69:1 | pass | pass | pass | | Near-white 100 `#fcfcfc` | Espresso `#3b2f28` | 12.61:1 | pass | pass | pass | | Near-white 100 `#fcfcfc` | Orange 500 `#ff3c00` | 3.47:1 | FAIL | pass | fail | | Near-white 100 `#fcfcfc` | Orange 400 `#ff774d` | 2.56:1 | FAIL | FAIL | fail | | Near-white 300 `#cccccc` | Near-black 900 `#050505` | 12.69:1 | pass | pass | pass | | Near-white 300 `#cccccc` | Near-white 900 `#121212` | 11.67:1 | pass | pass | pass | | Near-white 300 `#cccccc` | Near-black 800 `#212121` | 10.03:1 | pass | pass | pass | | Near-white 300 `#cccccc` | Espresso `#3b2f28` | 8.06:1 | pass | pass | pass | | Near-white 300 `#cccccc` | Orange 500 `#ff3c00` | 2.22:1 | FAIL | FAIL | fail | | Near-white 300 `#cccccc` | Orange 400 `#ff774d` | 1.63:1 | FAIL | FAIL | fail | | Near-white 400 `#adadad` | Near-black 900 `#050505` | 9.08:1 | pass | pass | pass | | Near-white 400 `#adadad` | Near-white 900 `#121212` | 8.35:1 | pass | pass | pass | | Near-white 400 `#adadad` | Near-black 800 `#212121` | 7.18:1 | pass | pass | pass | | Near-white 400 `#adadad` | Espresso `#3b2f28` | 5.76:1 | pass | pass | fail | | Near-white 400 `#adadad` | Orange 500 `#ff3c00` | 1.59:1 | FAIL | FAIL | fail | | Near-white 400 `#adadad` | Orange 400 `#ff774d` | 1.17:1 | FAIL | FAIL | fail | | Orange 400 `#ff774d` | Near-black 900 `#050505` | 7.76:1 | pass | pass | pass | | Orange 400 `#ff774d` | Near-white 900 `#121212` | 7.13:1 | pass | pass | pass | | Orange 400 `#ff774d` | Near-black 800 `#212121` | 6.13:1 | pass | pass | fail | | Orange 400 `#ff774d` | Espresso `#3b2f28` | 4.93:1 | pass | pass | fail | | Orange 400 `#ff774d` | Orange 500 `#ff3c00` | 1.36:1 | FAIL | FAIL | fail | | Orange 300 `#ffb199` | Near-black 900 `#050505` | 11.65:1 | pass | pass | pass | | Orange 300 `#ffb199` | Near-white 900 `#121212` | 10.71:1 | pass | pass | pass | | Orange 300 `#ffb199` | Near-black 800 `#212121` | 9.20:1 | pass | pass | pass | | Orange 300 `#ffb199` | Espresso `#3b2f28` | 7.39:1 | pass | pass | pass | | Orange 300 `#ffb199` | Orange 500 `#ff3c00` | 2.03:1 | FAIL | FAIL | fail | | Orange 300 `#ffb199` | Orange 400 `#ff774d` | 1.50:1 | FAIL | FAIL | fail | | Near-black 900 `#050505` | Near-white 900 `#121212` | 1.09:1 | FAIL | FAIL | fail | | Near-black 900 `#050505` | Near-black 800 `#212121` | 1.27:1 | FAIL | FAIL | fail | | Near-black 900 `#050505` | Espresso `#3b2f28` | 1.58:1 | FAIL | FAIL | fail | | Near-black 900 `#050505` | Orange 500 `#ff3c00` | 5.72:1 | pass | pass | fail | | Near-black 900 `#050505` | Orange 400 `#ff774d` | 7.76:1 | pass | pass | pass | --- ## 14 · Downloads Two packs are needed, one for the studio and one for everyone else, and the split is a licensing requirement rather than a convenience. Neither has been exported yet, so what follows is a production list rather than a set of links. *Updated 2026-08-07. Source: https://brand.haux.studio/downloads* ### Nothing here is downloadable yet Every rule in this document fails at the point where somebody cannot find the file. No pack has been exported, so this section lists what has to be produced and who each item may go to. A rule nobody can find the asset for is a rule nobody follows. Two packs are needed, not one. The studio and its contractors get the full pack; clients and partners get a reduced one. That split is a licensing requirement, because some of what the studio holds cannot legally be passed on. Building one pack and deciding case by case what to strip out of it is how the wrong file ends up attached to an email. Export two, name them unambiguously, and hand over a whole pack rather than a selection from one. > Packs specified: two. Packs exported: none. > > — Status, August 2026 ### Both brand typefaces are commercial The licence terms decide what a pack can contain, so they come before the pack contents. One face cannot be redistributed at all, and the other cannot leave the studio. #### Accia Flare cannot be redistributed, or even self-hosted Mint Type via Type Network, order 101033. The web licence covers use as a Type Network hosted webfont only (Addendum A), and clause 5A forbids converting the supplied OTF. The studio therefore cannot self-host it, which settles the question of whether anyone else may be sent it. The display face is served from Type Network’s CDN through a stylesheet link, and their hosted fonts are domain-locked. Every origin that serves the brand, preview deployments included, has to be listed in the dashboard or headings fall back silently. #### CC Timeline may be self-hosted, and only here CCType licenses CC Timeline Var Low to the studio, and self-hosting is permitted. The supplied WOFF2 must be served as-is: not subset, not converted, not rebuilt. That permission belongs to the studio and does not travel with the artwork. The file cannot go into a client pack, and a client who sees the real face on this site is seeing it under a licence they do not hold. #### The public pack ships no font files What clients receive instead is the fallback stack, documented and specified. Display falls back to Times New Roman, then Georgia, then a generic serif. Text falls back to system-ui, then -apple-system, then Segoe UI, then a generic sans-serif. JetBrains Mono is the exception. It carries the SIL Open Font License, may be redistributed freely, and is the only one of the three a client can install without buying anything. Meta type falls back to ui-monospace, then SFMono-Regular, then Menlo. *Source of truth for all of this is src/styles/fonts.ts. If a licence changes, change it there first and mirror it here.* #### The substitution note Every client pack carries one page naming which face is missing, why, and what to set instead. Include the licence route as well: a client who wants the real face can buy it from Type Network or CCType directly, and some of them will. ### Two doors The same artwork, two audiences, two very different permissions. Neither pack exists yet; both are specified here so that assembling them is transcription rather than judgement. ##### Team and contractors For the studio and anyone working under its licence. Everything needed to make new work, and nothing that cannot be audited later. ###### What the full pack contains Logo artwork in every approved colourway, as SVG for screen and PDF for print. Colour swatch files for the whole palette, in ASE for Adobe and CLR for macOS. The Figma library, the artefact templates and the icon sources. ###### Fonts are not in this pack either Contractors get font access through the studio’s licence, not through a zip. Send the Type Network stylesheet URL for the display face, and install CC Timeline from the studio’s own copy under the terms above. A font file that leaves the studio inside a download folder is the one distribution route nobody can account for afterwards. ###### Where it lives One access-controlled link, versioned by date. Anything sent as an email attachment is a copy that stays in circulation long after the artwork changes. ##### Partners and clients For anyone outside the studio licence who needs to place the mark on their own material. ###### What the reduced pack contains Logo artwork in the approved colourways, colour swatches, and the font substitution note. Nothing else: no font files, no source files, no templates. ###### What it is for Placing the mark correctly on someone else’s material: a partner page, a conference programme, a credit line. It is not a kit for producing new brand artwork, and a partner who needs that should be asking the studio to make it. *Trademark permissions for third parties are set out in the governance section, and the reduced pack should ship with a link to them.* ### Seven items to produce Each of these has to be made before either pack can be assembled. They are listed with the pack they belong to, so nothing has to be decided at export time. #### Logo artwork, every approved colourway Export from one master file, SVG for screen and PDF for print, one file per colourway per lockup. Name them so the filename alone identifies the lockup, the colourway and the version. Both packs. #### Colour swatch files ASE for Adobe and CLR for macOS, generated from the same hex values this site publishes. Generate them, do not retype them: a hand-typed swatch file is the most common place a palette drifts. Both packs. #### The token package CSS custom properties plus a JSON export of the same values, generated from the token file rather than transcribed. Tokens carry no licence, so both packs can hold them. Both packs. #### The Figma library Publish it as a library rather than sharing a file, so updates propagate instead of forking. Team pack only. #### Artefact templates The six documents named as gaps in the applications section, once they exist. Team pack only, until a client is explicitly licensed to produce their own material. #### Icon sources Source vectors, not exports, so weights and sizes can be redrawn rather than scaled. Team pack only. #### The font substitution note One page naming the fallback stacks above and the route to licensing the real faces. Client pack only, and it is the item that makes the pack legal rather than merely incomplete. #### Licence terms travel with the file State the licence inside each item, not in the message it arrived with. A downloaded asset outlives its email by years, and by then the terms are whatever the person holding it assumes. *Seven items to produce, two packs to assemble, nothing shipped yet. Produce the logo artwork and the swatches first: they unblock both packs at once.* --- ## 15 · Governance Guidelines decay when nobody is accountable for them, so this section names the roles, the route for a case the rules do not cover, and the terms third parties may use the mark under. The changelog is generated from the manifest, so it cannot quietly stop being true. *Updated 2026-08-07. Source: https://brand.haux.studio/governance* ### A guideline with no owner stops being true Rules decay when no one is accountable for them, usually about a year after launch. Three roles keep this document current, and each needs a named holder. Someone has to be allowed to say no. #### Brand owner Holds final say on the identity, and is the only role that can grant an exception. One person, not a committee: a rule two people can both approve is a rule that gets approved twice with different answers. #### Document maintainer Owns this site: writes decisions back into it, dates them, and keeps the changelog honest. The maintainer decides nothing, they record what was decided, and the separation is what keeps the document from becoming an opinion. #### Reviewer for client-facing work Checks anything a client will see against this document before it leaves the studio. It has to be a different pair of eyes from whoever made the artefact, which is the entire value of the role. #### The names are not recorded None of the three roles has a name against it here, and that is a gap. Record the names in this section rather than in a message thread: a role held informally is a role nobody outside the studio can find when they need it. ### Ask, do not improvise A case this document cannot answer costs a few minutes to raise. Improvising around it costs a rebuild, and usually costs it twice. A guideline that cannot answer your case is a gap in the guideline, not a licence to improvise. That cuts both ways. Asking is expected rather than tolerated, and every answer is written back into this document, so the same question is only ever asked once. #### How to request a decision Send three things: the artefact and its deadline, the rule you believe does not cover it, and the treatment you would use if the answer were yes. The third is the one people skip, and it is the one that makes a same-day answer possible. #### The three possible answers Covered: the rule exists, here is the link, and the guideline gains an anchor or an example if the rule was hard to find. Granted: an exception scoped to one named artefact, dated, and recorded in the log. Changed: the rule was wrong, and the document is edited that week. #### The exception log Every granted exception is recorded with its date, the artefact it covers and the reason. Without a log, one exception becomes a precedent quoted forever by people who were not in the conversation. No log exists yet. It belongs in this section, and it should stay short enough that a long log reads as evidence the rules need changing. ### How other people may use the name and the mark Partners, press and clients all need to place the mark occasionally. Publishing the permission is cheaper than answering it one email at a time, and far cheaper than correcting it afterwards. #### The name Written Haux: one word, initial capital, never set in all caps in running text. Where a legal entity is required, use the registered entity name in full rather than the brand name. #### Permitted without asking Referring to the studio by name in plain text. Using the supplied wordmark, unmodified, from the reduced pack, to credit work the studio did. Linking to the studio site with the mark as the link. #### Not permitted Redrawing, recolouring, stretching or animating the mark. Locking it up with another mark in a way that implies a partnership or an endorsement that does not exist. Using the name or the mark inside a product name, a domain, a social handle or an app icon. *Approved colourways are the ones shipped in the pack. A colourway that is not in the pack is not approved, whatever else it matches.* #### Registration status is not recorded Whether the name and the mark are registered, in which classes and in which territories, is stated nowhere in this document. That gap has legal consequences rather than design ones, and it decides whether the mark carries ™ or ®. Record the answer here once it is confirmed. ### Dated, or it is not maintained A document with no dates reads as abandoned whether it is or not. The list below is generated from the manifest, so it moves whenever a section does. Every section carries a last-updated date, and that date is the changelog entry. Generating the list from it has one useful consequence: nobody can forget to update the changelog, because it reads the same field the sitemap reads. #### By date 17 August 2026: Start here, Colour, Accessibility. 15 August 2026: Typography. 14 August 2026: Logo. 13 August 2026: Layout. 12 August 2026: Strategy, Brand architecture. 11 August 2026: Graphic elements. 10 August 2026: Voice and tone. 9 August 2026: Motion, Art direction. 8 August 2026: Applications. 7 August 2026: Downloads, Governance. *This records when a section last moved, not what changed inside it. Per-rule history is a gap, and the fix is a one-line entry written at the same time as the edit.* #### Review cadence No review date is agreed, which is the gap most likely to end this document. Set one: a fixed quarterly pass over every section, with the owner and the maintainer in the room, and a rule that anything unreviewed for two cycles is marked stale rather than left to look current. ### Five open items None of these is design work. All five are decisions, and each one is currently being made implicitly by whoever asks first. Name the holder of each of the three roles, in this section. Start the exception log, with its first entry on the day the first exception is granted. Agree the review cadence and put the next date in writing. Confirm the trademark registration status and the correct symbol. Add a one-line description to each changelog entry, written with the edit rather than after it. *Five decisions, none of them long. Take them in one sitting and this document becomes maintainable rather than merely written.*