HT // Brand kit
Everything to use the mark, the colors and the typography of Hiran Travassos: logos, lockups, app icons, social images and the rules that keep them consistent.
Mark // Orbit // Monogram
01 // Logos
A geometric H and T with an orbit behind them and a planet on it. Vector masters first, PNG exports when you need them.
Primary mark
The default logo. Use it on dark or photographic backgrounds.
Light mark
The same mark on a light tile, for white backgrounds and print.
Monogram
No tile: the letters, the orbit and the planet, to place on your own dark surface.
White monogram
A single white, for one color printing and dark photography.
Black monogram
A single black, for one color printing on light paper.
Stacked lockup
Mark above name and role, for square and portrait spaces.
Horizontal lockup, dark
Mark, name and role side by side. The text is vector outlines, so it never depends on an installed font.
Horizontal lockup, light
The same lockup for white backgrounds, documents and slides.
02 // Color
A near black field, a mint green that does the talking and a few cool and warm accents. Click a swatch to copy its hex value.
Brand gradient // #9BE8CB, #63C5A0, #5FD0FF, #A592FF
Void
#02040A
2, 4, 10
Page background and the tile of the mark
Deep Space
#060B18
6, 11, 24
Surfaces and sections
Ink
#0B1226
11, 18, 38
Raised panels
Starlight
#E8F0FF
232, 240, 255
Text on dark
Mission Green
#63C5A0
99, 197, 160
Primary accent, links, calls to action
Mission Green Light
#9BE8CB
155, 232, 203
Highlights and gradient start
Mission Green Dark
#4FA888
79, 168, 136
Pressed states and text on light
Plasma
#5FD0FF
95, 208, 255
Secondary accent and gradient end
Nova
#A592FF
165, 146, 255
Tertiary accent
Solar
#FFB454
255, 180, 84
Warm accent
Alert
#FF5D5D
255, 93, 93
Live indicators and errors
Also as code: brand-tokens.css and colors.json.
03 // Typography
Space Grotesk speaks, Inter explains and JetBrains Mono reports. All three are free and open source.
Display and headings
Aa
Senior Software Engineer
Space Grotesk
Weights 500, 600
Body text
Aa
Delivering scalable, enterprise-grade solutions
Inter
Weights 400, 500
Labels, code and telemetry
Aa
T+ 2,836d 14:22:09
JetBrains Mono
Weights 400, 500
04 // Applications
The site installs as an app, so the mark also lives as home screen icons. The social images are sized for link previews, LinkedIn and profile pictures.
05 // Guidelines
Clear space
Keep a margin of x around the mark, where x is twice the stroke of a letter.
Minimum size
Rules
- Use the files of the kit, never redraw the mark.
- Keep clear space around the mark of at least two letter strokes.
- Use the dark mark on dark or photographic backgrounds and the light mark on white.
- Below 32 px use the favicon version, it drops the orbit so the letters stay sharp.
Never
- Do not stretch or squash
- Do not rotate
- Do not recolor
- Do not add shadows or effects
Take everything with you
SVG masters, PNG exports, app icons, social images, color tokens and a short usage guide in one zip (1.7 MB).