Version 1.0 · 2024
Built to last.
Not to trend.
ROGER wasn't built around aesthetics. It was built around a point of view — that great creative leadership leaves systems behind, not just work. This document is the proof of that thinking applied to itself.
Every decision — a typeface, a color, a margin — communicates something before a word is read. ROGER treats design as a precise tool for meaning, not decoration.
One great piece is luck. A system that produces great work consistently is leadership. ROGER is built to scale — in teams, in campaigns, in decades.
Trends date everything they touch. ROGER was designed to look as deliberate in 10 years as it does today — through restraint, not avoidance.
01 — The mark
The logo.
The primary mark. Use on dark backgrounds with the light version, and on light backgrounds with the dark version. Minimum height: 24px. Always maintain clear space equal to the height of the "R" on all sides.
The secondary mark. Used in compact contexts — favicons, app icons, social avatars. Never use alongside the wordmark at the same scale.
02 — Color
The palette.
A warm, restrained palette built around near-black and off-white. Every color earns its place — nothing is decorative.
The foundational dark — used for the hero, navbar, footer, contact section, and all dark UI states including card hover effects.
The warm off-white — the primary page background and the inverted color for buttons and text on dark surfaces. Never pure white.
Beyond the pixels.
The secondary tone — used for all body text, metadata, nav links, eyebrows, and supporting information. Never for primary headings.
Transparent borders that create structure without weight. Used at 12% on light backgrounds, 10% on dark backgrounds.
03 — Typography
The type.
I'm Roger — a creative leader with 10+ years designing and directing high-impact solutions. I build the systems, vision, and AI-powered workflows that make great design scale. Based in El Salvador, working with brands across LATAM and the U.S.
Used for all UI, navigation, body text, labels, and headings. Body text runs at 15px / 1.75 line-height in Regular (400).
Used exclusively in italic as a typographic accent — never for body text or UI. Applied to key words in headings. Always paired with Instrument Sans Bold.
04 — Voice
How ROGER speaks.
The brand has a clear voice — direct, grounded, and confident without being loud. Every word should feel like it was chosen, not filled in.
"Building the creative systems that move brands forward."
"Design is my native language — strategy and people management are what I've layered on top."
"Passionate about creating innovative brand experiences that leverage cutting-edge design thinking."
"I'm a creative professional with a unique blend of skills and a passion for delivering results-driven solutions."
05 — Applications
The brand in the world.
Restrained, intentional objects. The logo does the work — nothing else needs to.