Marija Buteska: Personal Brand
The identity behind this website. A brand built on a single conviction, that design and code are one craft, and expressed through two colors, three typefaces and a paintbrush that paints in code.
- Role
- Strategy, design, development
- Scope
- Logo, color, type, motion, website
- Colors
- Cassis & Magenta
- Built with
- Figma, Astro, GSAP, Canvas
The mark
A name, and a full stop.
The wordmark is set in Inter Tight with tightened tracking. The magenta dot is the signature: a full stop that says “designed, built, done.”
The vision
I didn't want to choose.
I trained as a computer science engineer, then fell in love with design, branding and marketing. For a long time I thought I had to pick a lane. This brand is my answer: I don't.
Everything in the identity says the same thing: precision and personality belong together. The serif italic brings the warmth of the designer; the monospace brings the rigour of the engineer; the grotesk sits in between, confident and clean.
And the idea that ties it together: I design it, then I paint it in code.
Color
Cassis is the brand. Magenta is the signature.
If someone asks what my brand colors are, the answer is cassis and magenta. Two is what people can hold in their head.
Typography
Three voices, one person
I design it.
Aa Bb Cc Dd Ee Ff Gg 0123456789
then I paint it
Aa Bb Cc Dd Ee Ff Gg 0123456789
in("code");
Aa Bb Cc Dd Ee Ff Gg 0123456789
Signature motion
A brush that paints in code.
The same engine that opens this website. White paint on dark, cassis on light, written in Canvas and TypeScript. Press replay.
The system
Rules that keep it premium.
A brand is only as strong as its restraint. Magenta never floods a page; it marks the moment that matters: a logo dot, an underline, a single tile. Cassis carries the weight.
Every color is a role, not a hex code, so the whole identity flips between light and dark themes without a single exception. In dark mode, the cassis bands become light islands so the page keeps its rhythm.
Principles
- Magenta at about 1% coverage
- Cassis for every large block
- Serif italic only for emphasis
- Mono for labels and code, never body copy
- Every token defined for both themes
Applications
From a business card to a browser tab.
“A beautiful site that loads slowly is a beautiful site nobody sees.”
mb@marijabuteskaBusiness card, LinkedIn banner, social template and email signature, all from the same handful of rules.