Brand kit.

Black on light, white on dark. Use SVG whenever the tool accepts it.

MarkHB-01

The H on its own. Avatars, favicons, stickers, small spaces.

Black

SVG · PNG

White

SVG · PNG

currentColor

SVG · Copy SVG, Mark: Copy SVG

HorizontalHB-02

Mark and name on one line. Headers, banners, sponsor walls.

Black

SVG · PNG

White

SVG · PNG

currentColor

SVG · Copy SVG, Horizontal: Copy SVG

StackedHB-03

Mark and name on two lines. Posters, slides, squarer spaces.

Black

SVG · PNG

White

SVG · PNG

currentColor

SVG · Copy SVG, Stacked: Copy SVG

The currentColor SVG takes the colour of the text around it. Paste it inline in HTML and set color in CSS.

Square profile pictures for Discord, Instagram, Luma and the like. 1024 × 1024 PNG.

• Dark PNGWhite mark on charcoal
• Light PNGBlack mark on white

Black, white and grey, with one accent. Use the accent sparingly, for a highlight or a call to action. The logo files stay pure #000000 and #FFFFFF.

• Deep charcoalBackgroundCopy #050505: #050505
• Signal whiteLogo on dark, buttons, highlightsCopy #FFFFFF: #FFFFFF
• Primary textBody textCopy #E6E6E6: #E6E6E6
• ConcreteMuted text, labelsCopy #8A8A8A: #8A8A8A
• SteelLines, dividersCopy #383838: #383838
• AccentHighlights and calls to action, in small dosesCopy #FF4F19: #FF4F19

Both are free on Google Fonts. The name in the lockups is drawn artwork; do not retype it.

The dashed box is the minimum clear space: half the mark’s width on every side.

1. One colour only: black on light backgrounds, white on dark ones.
2. Leave clear space around the logo of at least half the mark’s width.
3. Smallest size: 16 px tall for the mark, 24 px tall for the lockups.
4. Do not stretch, rotate, outline, recolour or add effects to the logo.
5. Do not retype the name next to the mark in another font. Use the lockup files.
6. Write the name as “Hacker Bloc”: two words. HACKER BLOC in capitals is fine for display.