Foundations
Published
The rules the whole system answers to: type, colour, the grid, the identity, and the accessibility gate every one of them has to clear.
Fernando Kylas · Digital impact consultant
Better digital should be lighter.
This is my brand system, published as a working website. It sets out how I think about clarity, performance and restraint, and it holds me to the same standard I ask of the websites I work on. It is a guide and a demonstration at the same time.
- 7
- foundations writtenof 7 in the system. The other 0 are signposts to where the work lives today
- 34,516
- words of specificationread from the chapters on every build, never transcribed
- 40
- locked decisionseach with its context, its alternatives and its consequences
- 115
- measured contrast ratioscomputed values, not estimates. Every one is stated with its pair
Every figure above is counted from the source documents when this page is built. None of them is typed in, which means none of them can drift away from what the system actually says.
Why I built this
Most websites are not failing because of one bad decision. They are failing because nobody wrote the decisions down.
I have worked in graphic design, marketing, web design, technical SEO and digital strategy, and I have looked after websites for years after they were built. The same pattern turns up again and again. A site launches well, then four people make forty small choices nobody records, and eighteen months later it is slow, inconsistent and expensive to change.
The problem is rarely talent. It is that the decisions were never made once and written down, so they get remade badly every time somebody adds a page.
So I built this for my own practice first. Every value here was decided once, measured, and recorded with the reason behind it. If a rule turns out to be wrong it gets superseded by a later one, and both stay readable, because a record you edit quietly is not a record.
It also does something a document cannot. This site is built from the system it describes, so if the system were wrong the site would look wrong. That is harder to fake than a case study.
A consultant who advises clients on clarity and systems should have their own house in order.
My approach
What a digital impact consultant actually does
I help organisations audit, simplify and improve their digital presence so their websites perform better, waste less, and support the business more clearly. I lead with audits and strategy. I still build and optimise websites, but the thinking comes first.
Branding is usually sold as the visual layer, and then everything expensive happens somewhere else. In practice the two are the same problem. A brand decision about type size changes how readable a page is. A decision about colour decides whether text passes a contrast threshold. A decision about spacing decides how much markup a page needs, which decides what it weighs, which decides how fast it loads on a phone on a weak connection.
That is why this system connects things that are normally kept apart: websites, content, search visibility, accessibility, performance, sustainability, and the cost of looking after all of it in three years' time. A brand system that ignores those is decoration.
-
Audit
Understand the organisation, then measure what exists before recommending anything. Speed, weight, structure, search, usability, maintainability.
-
Decide
Turn findings into a small number of decisions, each with its reason and its consequence. This is where a brand system earns its cost.
-
Build
Implement to the decisions rather than to taste, so the result can be checked against something. Lighter, faster, clearer, and accessible by construction.
-
Sustain
Keep it honest. Record what changed and why, and make drift fail loudly instead of accumulating quietly.
The brand, briefly
Two faces, one accent, and a lot of restraint
You are looking at it. This page uses the same seven type faces, the same warm paper, the same ink and the same single green as every other artefact in the system.
Display · Strawford
Better digital should be lighter.
Text · Geomanist
Two faces, seven weights, and one rule that decides between them: Strawford states, Geomanist explains. The scale steps at named sizes rather than sliding between them, because letter-spacing is a property of the size a reader actually sees.
Palette
-
Paper
The page ground
#F6F4F1 -
Ink
The dark ground
#090909 -
Green
The one accent hue
#869F75 -
Mid grey
Secondary text
#4A4A4A -
Line
Rules and dividers
#E4E3E8
One accent hue, and it is used as a mark rather than as text on this ground. Green measures 2.65 to 1 against the paper, which is legal for a rule or a chip and not for a sentence. The Colour Language states every pair with its computed ratio.
Explore
The whole system, and where each part has got to
Nine sections. Some are written, some are being written, and one has not been started. Each card says which, because a system that hides its gaps is not one you can trust with anything.
Practice
Published
What a digital impact consultant actually does, how I work, and where a brand system fits into websites, content, search and long-term care.
Components
In active development
The reusable parts a page is assembled from: headings, records, callouts, quotes, specimens, tables, status labels, navigation.
Patterns
In active development
How components combine into whole surfaces: page templates, section rhythms, report layouts, proposal and presentation structures.
Content System
In active development
How the writing works: voice, vocabulary, the words I avoid, headings, buttons, microcopy, and the rules that keep punctuation out of the way.
Art Direction
Published
How the brand looks beyond type and colour: five visual principles, the three classes an image may belong to and the one it may never, motion, and the restraint that keeps them honest.
Imagery
In active development
The picture library itself: one portrait, ten grounds in five theme-paired forms, what each weighs, and the artefact photography that does not exist yet.
Website Examples
In active development
The system in use rather than described: the illustrated chapters, this publication, and the measured evidence behind both.
Evolution
Published
What changed, when, why, and what it ruled out. Every locked decision, newest first.
Worth seeing first
The system at work
The illustrated chapters demonstrate the system with live specimens instead of describing it. They are the deepest evidence on this site.
Typography
Illustrated chapter
The full scale, the tracking curve, and the two-readers test, set in the real faces at the real sizes.
Colour Language
Illustrated chapter
Every approved pair with its measured contrast ratio, the four-channel status model, and both themes shown rather than described.
Identity System
Illustrated chapter
Every logo variant, its clear space, its minimum size, and the misuse set, all from one currentColor source.
This is a living system, and that is the point
Parts of this are still being written. Components, patterns, the content system and the art direction are in active development, and imagery has not been started. Every one of those sections says so on its own page, along with what it will cover and what governs the work today.
A brand system that arrives finished is a brand system that stopped being used. This one gets a new entry in Evolution every time something is decided, and the open questions are published rather than tidied away.
Where to go next
Have a look around, then tell me what is bothering you about your own site
Start with the foundations if you want to see the thinking, or the illustrated chapters if you would rather see the result. If you want to know what is holding your website back, that is the conversation I usually start with.