Self-initiated · In use on gtabiri.com
Building the GTABIRI Design System
A visual identity needs to survive the next person’s decisions. I developed the GTABIRI guide to connect the reasoning behind the brand with the files, components, and instructions someone needs to use it.
The assignment I gave myself
- Need. Make the identity and website easier to extend without asking a contributor to guess how the pieces should fit.
- Contribution. Original identity, creative direction, content decisions, and review of a working PHP, HTML, CSS, and JavaScript reference developed with AI-assisted documentation and implementation support.
- Working result. A browsable guide with master artwork, component examples, copyable markup, Light and Night appearances, and layouts for Letter and A4.
Where consistency started to break
A button, a form field, and a navigation panel can each look reasonable on their own and still feel disconnected on the same site. I needed a reference that made those differences visible and explained which decisions should be shared.
The guide brings identity, language, and implementation into one place. Its live examples make it possible to compare a default control with its hover, focus, and expanded states. The written guidance explains when to choose the pattern.
Three decisions you can inspect
Reuse the navigation people already recognize
The guide’s sidebar went through revisions before it reused the Insights disclosure and list treatments. Bringing both into the same component family reduced the visual decisions a contributor would have to make for another section.
Inspect navigation patterns · Compare the Insights sidebar
Keep focus visible without disguising the control
The Priority slider inherited a rectangular focus background from text inputs. I wanted its track and thumb to remain the visual focus while it was being dragged. The revised treatment removes the extra field background and retains a visible indicator for keyboard use.
Give a color a specification for its medium
Bloodwood has a defined screen value. Its coated and uncoated print references use different ink recipes for named press conditions. The guide labels those values and explains how a physical proof becomes the basis for approving a print run.
The same identity, different reading conditions
The website, an email, a projected slide, and a printed handout ask different things of typography. I documented starting sizes and the checks that determine whether they work in context. Light and Night appearances demonstrate the same hierarchy on different surfaces. A separate print treatment gives the guide a cover, contents, and deliberate page breaks.
The appearance control remembers the reader’s choice and can follow the device preference. Browser checks covered keyboard operation, saved preferences, the custom pickers, and narrow-screen overflow. Letter and A4 proofs were reviewed separately.
See how the identity travels
The original lion mark carries the identity through correspondence, clothing, and vehicle concepts. Comparing these applications makes a practical question visible: will the face and both detached circles still read at the size and in the material being proposed?
What I’m testing next
The guide is actively being developed. The next work is a documented accessibility review across browsers and assistive technologies, physical production proofs, and a worked change record. An independent handoff will show where another designer or developer needs clearer instructions.
This project gives a team a way to inspect how I connect visual decisions with content, code, and production constraints. I can bring that same attention to an existing identity or help a team turn repeated decisions into usable standards.