Visual identity · methodology
Visual identity from measurement,
not from taste.
We investigate how color, typography, and digital application work together before establishing a visual direction. One case study runs through the entire page: Ontslagspecialist.nl.
Every contrast ratio on this page is calculated in your browser, not typed in.
EQwise · own visual identity
measured now
Before we make claims about a client’s brand, the rule applies to ourselves. This is the blue from our own logo, showing the tasks it can and cannot handle.
Ratio between the luminance of two colors, according to WCAG 2.1. Higher means more contrast.
The sequence
Why research comes before design
A visual identity that starts with a color palette is a gamble wrapped in a pretty presentation. You only see if it works when it’s applied to something—and by then, it’s already been paid for.
That is why we reverse the order. We start with the people visiting the site and the behavior they exhibit there. From that, we determine what impressionImpressions The number of times your site was displayed in search results. needs to be created. Only then do we start designing, and not as a choice but as a hypothesis: something you can test and therefore also reject.
This also changes the conversation with a client. It’s no longer about whether you like something, but about whether a direction does what it’s supposed to do. The answer to the question “why this color?” should be something that someone can verify or dispute.
Step 01 and 02 · target audience and personas
Who are we designing for?
To show how this works in practice, we follow one example: Ontslagspecialist.nl, a firm for dismissal and labor law. This isn’t the only way we work, but it shows the entire route in a single case.
The four personasPersona A detailed description of a typical customer, including their needs, questions, and concerns. below contain no place of residence, no car brand, and no hobbies. Only characteristics that change the design: how someone reads, where they hesitate, and what they need to take the next step. If it doesn’t matter for the design, it’s not in there.
The blindsided employee
Has unexpectedly received a dismissal notice or a settlement agreement.
- Behavior
- Scans. Doesn’t read everything. Looks for an answer quickly, under time pressure.
- Need
- ClarityMicrosoft Clarity A free tool from Microsoft that shows how visitors use your website, featuring heatmaps and session recordings., trust, and knowing what the very next step is.
- Consequence for design
- Calmness, a strong hierarchy, little on screen at once, and an action that is impossible to miss.
The analytical comparer
Has already gathered information and is comparing multiple specialists.
- Behavior
- Reads terms and conditions, compares, checks if the expertise is actually there.
- Need
- Expertise, transparency, and proof instead of claims.
- Consequence for design
- Substantive structure, a typographicTypography The selection and formatting of letters: which typeface, what size, and how much spacing. hierarchy that can handle depth, minimal decoration.
The vulnerable employee
In addition to the dismissal, is dealing with conflict, illness, or long-term stress.
- Behavior
- Seeks safety first. Postpones contact. Is sensitive to sales pressure.
- Need
- Humanity and calmness, without losing the sense of security.
- Consequence for design
- Softer surfaces, a calmer rhythm, accessible language, warmth without being non-committal.
The quick decider
Already knows that legal help is needed and wants to move forward.
- Behavior
- Goal-oriented. Wants direct contact and wants to know what happens next.
- Need
- Speed, clarity, a short route.
- Consequence for design
- One clear action colorAccent Color The striking color in a brand identity that draws attention, for example for buttons., a short route, as little distraction as possible.
Personas 01 and 04 want pace. Persona 03 specifically does not want pace. That is not a contradiction you solve by taking the middle ground: that serves both only halfway. It is a reason to place two entries side by side: a fast route and a calm route, both visible.
Step 03 · brand perception
What perception should be created?
Between the personas and the first color lies a step that is often skipped: determining what impression should be created in the first place. Without that step, any color can be justified, and therefore none can.
We work with six axes. For each axis, there is a question you can ask a design and to which you can answer yes or no. This is intentional: an axis you cannot test is just an opinion with a label on it.
Trust
Does this organization feel safe enough to entrust with an important decision?
AuthorityAuthority How much trust search engines and AI have in your website.
Does the identity radiate sufficient knowledge and experience?
Humanity
Does the organization remain human when the subject gets heavy?
Distinction
Is the identity recognizable among similar providers?
Clarity
Does the design help to understand complicated information?
Energy
Does the identity encourage action without causing pressure?
| Perception | 01 Blindsided | 02 Comparer | 03 Vulnerable | 04 Decider |
|---|
The outcome. Trust and Clarity are at the top for three of the four personas; these two carry the foundation. Authority is the core priority for the comparer and must therefore be present everywhere. Humanity is not a foundation but a correction: without that correction, a firm dealing with dismissal quickly becomes cold. Distinction is the lowest score in the table and simultaneously the reason why this industry looks the same everywhere. It is a brand strategy choice, not a user need. Energy belongs around the action, and nowhere else.
Step 04 · hypotheses
From perception to visual hypothesis
Choosing a color is different from testing a direction. A choice involves a preference; a hypothesis involves an expectation, and that can prove incorrect.
We therefore formulate a visual hypothesis for each perception. If we build the page this way, we expect the impression to shift in this direction. Then we put that hypothesis into a real interface and see if it’s correct, and what it costs. Every direction that makes something stronger also makes something else weaker.
Hypothesis A
Cool and composed
One color family across the entire scale, low saturation in the light surfaces. Expectation: maximum Trust and Clarity.
Hypothesis B
Dark and tonal
A nearly black base with the accent in the same shade next to it. Expectation: maximum Authority.
Hypothesis C
Warmer and softer
The light surfaces carry the same warm shade as the accent. Expectation: more Humanity.
Hypothesis D
Strong signal color
A neutral base with one saturated accent. Expectation: more Distinction and Energy.
Step 05 · color
Color research in a real interface
Color swatches side by side say very little. A color only does something once it is given a surface, a frequency, and something to relate to. That is why the hypothesis is shown here in a reconstructed homepageHomepage The first page of a website, which you see when you only type in the domain name., and not in a row of squares.
When switching, pay particular attention to the dark fields. They carry the page and determine the tone much more strongly than the accent, even though the accent stands out more.
Cool and composed
One color family across the entire scale, with low saturation in the light areas. As a result, there is little color difference between the surfaces, placing all emphasis on the text.
Dark and tonal
The base colorBase Color The calm primary color of a corporate identity that fills large areas and backgrounds. is close to black, and the accent color sits right next to it within the same color family. There is therefore hardly any color difference to guide attention: hierarchy must come from size and white space.
Warmer and softer
The light surfaces are not neutral gray but carry the same warm tint as the accent. This shifts the tone of the entire page, even in places where there is no color at all.
Strong signal color
Two colors, nothing more: a neutral base and one saturated accent. The accent is too light to carry text on white. A second, darker variant of the same color is therefore needed for buttons and links.
Everything within this frame belongs to the case study and changes accordingly. Everything outside it is the EQwise visual identity and does not change. The contentContent All content on your website, such as text, images, and videos. in the example is placeholder content: it intentionally does not contain performance figures, rates, or phone numbers for Ontslagspecialist.
View the alternatives we have also set up
These three are not separate hypotheses but variants within the same four. They are here because a direction only convinces once you have seen it next to a close neighbor.
The mobile window shows the page at actual size and scrolls within its own frame. With the keyboard, you reach it using the tab key and then the arrows. The typefaces are fixed here. If you were to change color and typeface at the same time, you wouldn’t know afterwards which of the two made the difference. That is why the typographic research is separate further down.
Color roles
Brand color is not the same as interface color
A color that works on a facade or in a logo is not necessarily a color that text can sit on. That is not a difference in taste but a measurable difference, and it is the most common mistake in visual identities made without a digital test.
We therefore assign tasks rather than colors. Each color gets a role, an application, a frequency and, just as importantly, a list of what it is not allowed to do. Below is that division of roles for the hypothesis you currently have active above.
| Role | Value | Application | Not for | Frequency | On the ground |
|---|
The accent
The action color
Step 06 · typography
Typographic research in two phases
With type, the same applies as with color: change one thing at a time. If you switch heading and body textBody font The font used for standard body text. together, you see a difference you cannot attribute.
That is why we investigate in two phases. In phase A, we keep the body typeface fixed and compare only the heading typefaces; any change you see then comes exclusively from the heading. In phase B, we fix the chosen heading and compare the body typefaces on reading rhythm, x-height, and information density. The color remains static in both phases, based on the hypothesis you chose above.
Phase A · heading typeface, body typeface fixed
Designed to carry headings: sturdy stems and little contrast between thick and thin. The entire weight range from 400 to 900 is contained in a single file.
Grotesk with distinctive details in the a, g, and R. Slightly more character than a neutral grotesk, without the letter becoming intrusive in a heading.
The only candidate with a width axis. At 85, the same heading becomes narrower without changing the font size or weight. That is exactly the tool you want for long Dutch words.
Serif typeface with an optical size axis: more delicately drawn at heading sizes, sturdier at text sizes. Compact in width.
One weight, and only an axis for optical size. Headings cannot be made heavier; emphasis must come from size. That limitation is the argument here, not the objection.
What the site uses today, but only at the third heading level. The two largest heading levels fall back to the body font.
Phase B · body typeface, heading typeface fixed
Designed for screens. High x-height, and at 15 and 16 pixels, the distinction between the uppercase I, the lowercase l, and the number 1 remains visible.
A neutral sans-serif without an optical size axis. Calm in long paragraphs with little distinct visual texture. This is an advantage when the heading font already has character.
A serif font with an optical size axis. Gives long text more rhythm, but has a lower x-height than Inter at 16 pixels. This is noticeable in small labels.
Sturdier serifs, built for prolonged reading on screens. More prominent than Source Serif 4, making it better suited when the text takes center stage.
A sans-serif with open forms and a short tail on the ‘a’. Holds up at label sizes where many body fonts clog up.
What the site uses today, serving as the heading font as well, since the two largest heading levels don’t have their own rule. Large x-height and a wide character width.
The color in this area is taken from your choice in the color research above and is fixed here. This way you can be sure that any difference you see comes from the typeface.
View the technical details of these two typefaces
A variable font is contained in a single file and has axes on which you choose a value. This saves loading time and provides room to adjust later without a new file. For most readers, this isn’t necessary; for those who have to build the style later, it is.
| Typeface | Axis | Meaning | Range | Current |
|---|
The mobile window scrolls within its own frame. When switching, look at the mobile column, and then at the heading and the button text. That’s where the difference lies that isn’t yet visible on desktop: with one typeface a line fits, with the other it breaks.
Step 07 · digital application
Where a typeface breaks
Dutch creates long words. “Vaststellingsovereenkomst” is 25 characters and appears in this field in almost every heading. A typeface that cannot handle that is unusable for this client, no matter how good it is otherwise.
Below is the specimen of the two typefaces you currently have active. You see individual character pairs showing the character, numbers, currency and punctuation marks, and accents. Below that, we measure how wide that same word becomes in each candidate, at exactly the same font size. That number is not an opinion and can be verified at any time.
Heading typeface ·
Aa Ee Gg Qq Rr
Numbers and characters
0123456789 € % & @ é ë ï
The word where it breaks down
vaststellingsovereenkomst
The same heading at 390 pixels · the word does not fit and breaks
Having a settlement agreement reviewed
Body typeface ·
A settlement agreement contains arrangements regarding the end date, the compensation, and the phrasing of the reason. What is not in it often weighs just as heavily: a non-compete clause that remains, or a reference that hasn’t been arranged. We read along before you sign.
| Heading typeface | Weight | Width at 40 px | Relative to the narrowest | Still fits at |
|---|---|---|---|---|
| The typefaces are loaded as soon as this component comes into view… | ||||
Why this matters: on a 390-pixel screen, … pixels remain after the margins. No candidate can fit this word on one line there with a 40-pixel heading. That is the first conclusion, and it applies to all seven. The second conclusion is more useful: the difference between the narrowest and the widest candidate is large enough to determine the mobile heading size. The last column says exactly where that limit lies. If you choose a wide typeface, the mobile heading drops a few steps, and that affects the entire vertical rhythm of every page.
There is one other way out, and that is the reason Anek Latin is in the series: that typeface has a width axis. This allows you to make the same heading narrower without touching the font size. That is not a trick but a design choice with a price: a narrower typeface is less easy to read for long headings. It is exactly the kind of trade-off you want to make beforehand and not halfway through the build.
Step 08 · validation
Contrast is four requirements, not one rule
“Everything must be at least 4.5 to 1” is a summary that fails in two ways in practice. It rejects surfaces that are perfectly fine, and it passes buttons that don’t make the cut.
The standard distinguishes based on what something is. Regular text requires 4.5 to 1. Large text, from 24 pixels or from 18.7 pixels if bold, requires 3 to 1. This is because thicker forms remain legible with less contrast. Interface components that are not text, such as the border of an input field, an icon that carries meaning, or a focus ring, also require 3 to 1. And color that is purely decorative and carries no information has no requirement at all. However, the condition applies that it contains no information you would miss if you didn’t see it.
| Combination | What it is | Requirement | Measured | Verdict |
|---|
These values are calculated from the colors currently in the test area. If you switch hypotheses above, this table will change accordingly. A table that doesn’t update becomes untrue within a week.
Exclude
What was rejected, and why
A strong design also arises from consciously rejecting good ideas. These directions were not mistakes; they just didn’t do what this case needed, and that can be pointed out.
Olive with signal red
The base and the accent both demand attention here. The olive green is dark enough to carry entire surfaces, and the red, at … on white, easily meets the requirement for regular text. Two colors that both want to be at the front leave no room for one clear action. In an interface where personas 01 and 04 must see where to click within seconds, that costs the hierarchy.
Petrol as the main direction
Distinctive, and cool without using the blue that dominates this field. However, the accent only achieves … on the ground. That is enough for a surface, a line, or an icon, but not for text and not for a button label. A second, darker variant would be needed. Then little of the distinctive character remains: what you see most is then the dark variant.
Playfair Display as heading typeface
Large difference between the thick and thin parts of the letter. On a large heading, that is exactly the appeal. On mobile, where the heading drops to 33 pixels, the thinnest hairline becomes narrower than one pixel and the heading visually falls apart. We also expected this typeface to be the widest of the series. That proved not to be the case: in the measurement above, it sits in the middle. One of the two objections was thus removed. The remaining objection is enough on its own.
One family for heading and body text
There are families that have both a sans-serif and a serif version, with thirteen variable axes. That sounds like the safest choice, and technically it is. But axes you don’t set yield nothing, and what remains is a neutral typeface without its own character. For this case, that is a targeted weakening of exactly the axis that already scores lowest: Distinction.
The existing combination
On the site as it stands now, a custom typeface is only set for the third heading level. The largest two heading levels have no custom rule and therefore fall back to the body typeface. Effectively, the site currently has no heading typeface, only a body typeface in a larger size. That was not a style choice, and it explains why the pages look flat without anyone being able to point out why.
Letting the client assemble
The temptation with such a test area is to turn it into a selection menu: all palettes, all typefaces, you choose. That shifts the work to the client and yields an outcome that no one can defend. Comparing helps to understand a direction; the substantiation and advice remain with us.
The wrong way, the right way
Six errors we encounter almost everywhere
None of these errors were ever chosen. They just happen: because of a plugin, a random tip, or a logo that was turned into a button. That is why they are so common, and why the correction is placed directly next to every error.
Three colors, three meanings
The wrong wayBrand blue on headings and icons, an orange button from an A/B test, and the green WhatsApp button added by a plugin.
The right wayNeutral headings, one action color, and WhatsApp as a standard second button. The path remains, it just no longer screams.
Why. The visitor doesn’t learn what a color means. Orange only stands out because it appears nowhere else, and the floating green button on mobile wins over the action you actually want.
Light gray text for ‘calmness’
The wrong wayBody text in light gray, because black looked “too harsh” in the design.
The right wayDark text, shorter lines, and more white space. Calmness comes from space and line length, not from less contrast.
Why. Light gray fails the requirement for standard text. Outside on a phone, the very explanation that persona 02 is looking for disappears.
White text on the logo color
The wrong wayThe button is given the color of the logo, because that is “the brand color.”
The right wayThe logo color remains for surfaces and large headings. Buttons and links get a dark variant from the same family.
Why. A logo color is chosen to stand out, not to carry text. We ran into this ourselves: our logo blue just barely fails the requirement with white text. The measurement sheet at the top of this page does the math.
Text placed loosely on a photo
The wrong wayWhite heading directly on a light photo, because it was just barely legible on the design photo.
The right wayThe text gets its own solid background. This way the contrast is fixed, regardless of which photo is placed underneath.
Why. A photo varies in brightness everywhere, so the contrast changes per word. What works on the design photo breaks with the first photo the client uploads themselves.
Color only as an error message
The wrong wayThe field gets a red border. Nothing else.
The right wayRed is allowed, as this is a real status. But there is also a symbol and a sentence that says what is wrong and how to fix it.
Why. Those who see red poorly see nothing here. And even those who do see it still don’t know what is wrong after seeing a red border.
Links recognized only by color
The wrong wayDark blue link in body text, without underlining, because it looks “calmer.”
The right wayThe same color, with an underline. Costs nothing and solves it for everyone.
Why. Dark blue next to almost black differs too little in brightness to stand out as a link without an underline, especially on a phone in the sun.
In doubt? Four questions, in this order
- Does the color convey information? No: then it is decoration and doesn’t count, as long as no one misses anything if they don’t see the color. Yes: then the questions below apply.
- Does it meet the requirement for its role? Standard text 4.5 to 1, large text and interface components 3 to 1. The validation above does the math.
- Does it compete with the action? In the first screen at 390 pixels, count the colors that are not text or background. More than two: then one must go, or there is a reason you can write down.
- Which persona pays the price? If doubt remains, the persona who suffers the most from it decides. The decision is recorded with the reason alongside what was rejected, so the same discussion doesn’t return in six months.
Three cases that keep coming back. The logo doesn’t count, but that doesn’t make its color an interface color. An illustration doesn’t count, until there is a button on it. And brand colors from others, such as WhatsApp green or the yellow of a review widget, are never included in our own hierarchy.
Advice
The direction we advise
Hypothesis A, cool and composed, with Schibsted Grotesk for the headings and Inter for the body text. Not because the other directions are weak, but because this one carries the two perceptions that are at the top for three of the four personas.
What this direction does
One color family across the entire scale means there is little color difference between the surfaces and all emphasis falls on the text. That is exactly what persona 01 needs, scanning under time pressure, and what persona 02 needs, going deep into the text. The dark base color is dark enough to carry entire fields without the text on it getting squeezed. The heading typeface has sturdy stems and little difference between thick and thin, so it holds up on a small screen. The body typeface has a high x-height, keeping interface texts of 15 and 16 pixels legible.
What this direction costs
Distinction. This is also what most providers in this field do, and no amount of nuance helps against that. Whoever chooses this direction chooses to be recognizable as a category rather than as a firm. We thus consciously serve personas 03 and 04 less well on the point where they are most sensitive: warmth and pace. We therefore don’t get those two from the color but from the page structure. That results in a second, calm entry next to the fast one, and texts that don’t push. If you do want to get Distinction from the color, then hypothesis D is worth the conversation. Just know that you will then need a second, darker variant of the same color to be able to create buttons and links.
What the measurement changed in this advice
We assumed that the heading typeface we advise would also be one of the narrowest. That is not the case: in the width measurement above, it is actually the widest of the series. That is a real price and we are keeping it, because it changes something in the texts and not in the design. A heading like “Having a settlement agreement reviewed” no longer fits on one line on mobile; the way out is a shorter heading, not a smaller one. For those who don’t want that way out, Anek Latin is worth the conversation. It is the only candidate with a width axis and by far the narrowest of the seven. Knowing these kinds of things before the build instead of after is exactly what this page is about.
Step 09 · design system
From visual identity to design tokens
After approval, the visual choices are recorded as tokens: names with a meaning, instead of color values that someone has to re-interpret.
That is not an administrative step. A color called “blue 2” will be used differently by everyone in six months. A color called action-primary-bg has a task, and a task can be checked. Below is the block for the setting you currently have in the test area.
Second case · logo and print
The same sequence, a completely different field
The case above takes place on a screen. This one does not. MHC Weesp, The Magic Bees, wanted a logo that works on a three-meter billboard along the field. Also on a shirt and on a ten-centimeter pennant. Same sequence, different physics.
What fails on a screen due to contrast and readability, fails here due to viewing distance, ink, and light. That doesn’t make the methodology different: we first measure where it goes wrong, and the form follows from that. The only difference is what is being measured.
From raster to vector
The starting point was a raster of 4096 by 4096 pixels with gradients, shadows, and hundreds of intermediate colors. Unusable at three meters. Traced to 3,968 individual paths, gradients flattened, 122 trace splinters removed, and merged per color. From 2.2 MB to 660 kB, and infinitely scalable.
The palette comes from the mascot
Eight flat colors, not chosen alongside but reduced from it. As a result, mascot, emblem, and typography share exactly the same shades. For each color, the HEX, RGB, CMYK target value, and contrast value are fixed.
The material sets the requirements
The board is printed on 5 mm PVC hard foam or 3 mm dibond, with a 5 mm bleed all around. Lines are at least 1 mm thick, because thinner ones disappear at a distance. All text is converted to outlines before delivery. These are not after-the-fact details: they determine what is possible in the design.
Reading distance as a design requirement
How big should a letter be? That is not a question of taste but of optics. An eye with 20/20 vision distinguishes no detail smaller than 0.29 mm per meter of distance. From this follows a minimum heading height per line of text, and from that follows the composition. The board measures 2950 by 750 mm, and within that height, four lines must fit that each still have to work at a different distance.
| Distance | Where that is | What is still legible then |
|---|---|---|
| 10 m | along the sideline | Everything, including the website and the Instagram icon. Honeycomb reads as comb. |
| 20 m | across the field | Name and top line sharp. Bottom line still readable, the icon starts to fill in. |
| 40 m | from the clubhouse | HOME OF THE MAGIC BEES dominates. Bottom line becomes a stripe, honeycomb a glow. |
| 80 m | from the parking lot | Only the name and the bee still carry. Exactly what a sponsor board should do at that distance. |
This way the structure naturally falls into place. From the parking lot you only see the bee and the club name, and the details only appear as you walk closer. One piece of honesty is included, and it is also in the simulation itself: count on approximately 80 percent of these distances. Grazing light, dirt, and movement always take something away. For a different board size, the layout is reset and not stretched.
Three colors, and why no more
The board carries three. Not because no more were available (the vectorized mascot counts eight), but because a board at eighty meters distance cannot carry nuance. What is a shade of difference on a screen is nothing there.
| Color | HEX | CMYK | Contrast on black |
|---|---|---|---|
| Black | #000000 | 0 / 0 / 0 / 100 | — |
| Gold | #D89600 | 8 / 45 / 100 / 0 | 8.28 to 1 |
| White | #F8F8F8 | 0 / 0 / 0 / 0 | 19.77 to 1 |
One typeface for the entire board, Oswald SemiBold, in two sizes. No third style. The choice is reasoned and not felt: slightly lighter than Anton and Archivo Black, and thus closer to the typeface of the logo. The same applies to the margin. It is 30 mm and no more, because the board is cut flush to size and no mounting profile is placed over it. The size follows from the material, not from a rule of thumb.
And then the proof that it works
What these two cases side by side show is that the sequence is not tied to a specific field. At Ontslagspecialist, the visitor and their situation determine what the form must do. Here, viewing distance, ink, and material determine that. In both cases, the requirement is fixed before anything is designed, and in both cases, it can be verified afterwards whether it has been met.
Your brand
How we apply the same methodology to your brand
The cases above are labor law and a hockey club. The sequence doesn’t change because of that, only the outcome.
Behavior first
We map out who visits, with what question, and where trust breaks. That yields the functional personas that everything else hangs on.
Then perception
What impression should be created, and which of those is a foundation and which a correction. Without that weighting, any color can be justified.
Only then form
Three to four visual hypotheses, each in a real interface, on desktop and mobile, with the contrast measurement included.
Exclude
We record what is rejected and why. That prevents the same discussion from starting again in six months.
Advise
One direction, with what it delivers and what it costs. You get advice, not a selection menu.
Record
The approved direction becomes a token set with roles and rules, so the style doesn’t have to be re-interpreted during the build.
Next step
A visual identity that doesn’t just look good, but is right
We first investigate what your brand needs to do before we determine what it should look like. In an initial conversation, we look at your current style, your target audience, and the place where the two diverge.
