Brand system 1.0 / 2026
Hristo Butsev · Brand guidelines
Version 1.0
September 2026
Product direction and design leadership for fintech, AI, and operational software.
Read the systemFoundation
Products begin simply. Requests, workflows, exceptions, and priorities accumulate. The identity makes that familiar problem visible - then points toward direction.
Primary line
Complex products
Clear direction
Use this consistently across all materials.
Positioning
For products with too many moving parts and too much at stake.
Product direction and design leadership for fintech, AI, and operational software. The work stays close to the real workflow, the people building it, and the decisions that need to hold through delivery.
Brand promise
See what’s holding your product back. Know what to do next.
Character
A real workflow with real data beats a mood board.
The first version needs to tell the truth, not impress.
Senior people stay involved in the work.
Design is valuable when it helps a product ship.
Reduce complexity without hiding the rules.
Who it is for
Identity
Public headers expand HB. into Hristo Butsev on hover or keyboard focus, keeping every letter bold. Private headers use the compact signature.
The period
The period is part of the mark.
It closes the name with the same decisiveness the work brings to a product. Never remove, recolor, enlarge, or animate it independently.
Digital behavior
Use HB. at rest in public headers, expanding to the full name on hover or keyboard focus. Keep the complete wordmark bold.
Minimum size
Keep the signature intact
Do not stretch, skew, outline, or shadow the mark.
Do not typeset a substitute wordmark.
Do not turn the mark Signal green.
Do not place the mark over uncontrolled detail.
Color
Ink and Paper carry the brand. Signal green is rare by design: it marks the route, action, or conclusion that matters now.
#333533Primary field · Primary text
#3F423FSecondary dark surface
#F8EDEBPrimary light field
#E9E1DCSecondary light surface
#6D6D68Supporting copy
#C8F43DDecision · Direction · Action
Accessible pairs
Never set Paper text on Signal. Color cannot carry meaning alone.
Typography
One family creates continuity from large product claims to careful operational detail. Scale, weight, and spacing create the hierarchy.
Aa
Regular 400 · Bold 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 → ↘ ·
Find the
constraint.
A complex product can carry powerful rules and still feel simple. Simplicity means the logic is legible at every level.
40.7128° N
74.0060° W
EST 2018
Digital scale
Composition
The site alternates controlled Ink and Paper fields, oversized left-aligned type, sticky chapters, and sparse line drawings. The layout gives each product thought a full beat.
Desktop, tablet, and mobile column counts.
Default maximum content width.
Base spacing unit; 4 px for optical correction.
Preferred asymmetric editorial split.
Editorial
Square corners or a restrained 4–8 px radius.
Product UI
10–14 px for interactive containers.
Pills
StatusOnly filters, states, and compact controls.
Graphic language
The hero drawing is the primary brand device: an expressive knot for complex products that resolves into one long, direct line. It always appears with the two-part slogan or its meaning close by.
Hero transition
The drawing appears in stages, then the view pans until the forward line and “Clear direction” take over.
Product story sketches
Thin Ink lines, imperfect construction, and direct visual metaphors make product logic feel worked through rather than decorated.
Use the original hero drawing; do not redraw it as a generic wave.
Keep hand-drawn art in Ink or Paper - not Signal.
Use Signal for progress, selection, diagnosis, and action.
Sketches explain a product idea; they are not decorative icons.
Voice
Direct, specific, and close to the work. The writing should make the constraint and next decision easier to see.
01Name the product situation before the service.
02Use the words customers and teams already use.
03Make the constraint visible before offering direction.
04Keep proof specific: what changed, for whom, and why.
05End with one plain next step.
Words the website does not need
innovative · seamless · delightful · cutting-edge · pixel-perfect · world-class · end-to-end
Use Specific and causal
“The roadmap is full, but no bet is strong enough to commit to.”
Avoid Polished but empty
“We create seamless experiences for innovative teams.”
Image & motion
The website uses real imagery sparingly and lets hand-drawn product metaphors carry the explanation. Motion changes the meaning of the scene rather than adding atmosphere.
Photography
Avoid stock teams, résumé collages, floating devices, and generic desk scenes.
Motion
180 ms pieces · 8 ms stagger · cubic-bezier(.22, 1, .36, 1)
Applications
The identity changes density - not personality - across a proposal, case study, social post, client document, email, or product surface.
For products with too many moving parts and too much at stake.
→Open with the decision, not the service list.AI changes the cost of making.
Not the cost of understanding.
Keep the compact mark in the folio and the reasoning in the document.
Reusable presentation
Editable covers, summaries, decision memos, research evidence, comparisons, process pages, appendices, and closing actions. Bracketed copy marks the fields to replace.
Digital product
Accessibility and useful behavior are part of the identity. A clear system is not clear if people cannot operate it.
Default to one primary action or selected route per view.
Use a 16 px minimum for reading text and 44 × 44 px targets.
Use a 3 px focus outline with 3 px offset.
Errors say what happened and how to recover.
Pair status color with a label, icon, shape, or pattern.
Preserve the final state and meaning without the transition.
Production tokens
Copy these values into new digital materials before inventing local variables.
:root {
--hb-ink: #333533;
--hb-charcoal: #3f423f;
--hb-paper: #f8edeb;
--hb-paper-dim: #e9e1dc;
--hb-graphite: #6d6d68;
--hb-signal: #c8f43d;
--hb-ease: cubic-bezier(.16, 1, .3, 1);
}Asset library
The logo files are outlined SVGs and do not require Aeonik to be installed. Keep every viewBox intact and preserve the original aspect ratio.
wordmark-ink.svgwordmark-paper.svghb-mark-ink.svghb-mark-paper.svgcomplex-products-clear-direction.svgcomplex-products-drawing-animated.svgproduct-story-drawing.svg