Green / white traces
Primary identity on dark backgrounds. Site navigation and prominent brand placements.
Download SVG ↓BSZG / IDENTITY_PROTOCOL
BRAND SYSTEM
BSides Zagreb. One identity, every signal. Logos, colour, typography and the details that make it ours.
01 / LOGO02 / COLOUR03 / TYPE04 / SIGNAL
[01]
Logo library
White / green traces
Alternate identity on dark backgrounds. Footers, closing panels and shared materials.
Download SVG ↓
Black / monochrome
Light backgrounds and single-colour reproduction. Browser and device icons use black on white.
Download SVG ↓01Keep the wordmark and its circuit traces together. Always preserve the original proportions.
02Leave generous clear space. The dashed frames illustrate a suggested margin, not a certified measurement.
03Never stretch, rotate, crop, recolour individual parts or add effects to the logo itself.
04At small sizes, check that both the name and fine traces remain legible. Print minimums have not been specified.
Small-format identity
Black on white for browser and device icons.
[02]
Colour system
Dark foundations. Bright reading. Green signals. This strip shows the visual balance, not a mandatory percentage formula.
Signal green
--primaryoklch(0.87 0.29 142)Primary actions, signals and key accents. Original logo green: #00FF00.
Electric accent
--accentoklch(0.9 0.2 140)Secondary highlights and terminal details. Brand reference: #83FA5C.
Canvas
--backgroundoklch(0.12 0.004 150)Main dark canvas. Let green remain the accent, not the whole page.
Reading white
--foregroundoklch(0.97 0.005 150)Primary text and clean contrast on dark surfaces.
Raised surface
--cardoklch(0.17 0.006 150)Individual items and framed tools, not every section.
Supporting text
--muted-foregroundoklch(0.68 0.01 150)Captions and secondary text. Keep small type readable.
Grid / divider
--borderoklch(0.27 0.012 150)Fine dividers, grid lines and understated frames.
Error signal
--destructiveoklch(0.62 0.24 25)Errors and destructive actions only. Never communicate status by colour alone.
Digital reference, not a prepress specification. RGB/OKLCH colours below reflect the current website. CMYK/Pantone values, minimum logo sizes and formal clear-space ratios need print proofing and brand approval.
[03]
Type system
Display / identity
Ethnocentric
Short, uppercase headlines. Regular weight. Avoid long paragraphs. Confirm your web and print font licence before distribution.
BSIDES ZAGREB
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Body / reading
Space Grotesk
Readable paragraphs and supporting headlines. Available weights: 400, 500 and 700.
By hackers, for hackers.
Aa Bb Cc Čč Ćć Đđ Šš Žž 0123456789
Terminal / metadata
JetBrains Mono
Labels, dates, commands and compact navigation. Available weights: 400, 600, 700 and 800.
root@zagreb:~$ ./connect
{} [] <> / _ 01 Aa Bb Čč Šš Žž
[04]
Graphic language
SIGNAL / ACTIVE
Circuit traces
Angular paths echo the logo. Animate the signal, not the mark. Keep traces behind content and away from faces.
Pixel icons
Custom 16 × 16 block-based symbols, in a single colour. Use the same set across materials, never emoji substitutes.
Motion with restraint
Signal dashes, short text reveals and subtle terminal accents. Reduced-motion preferences take priority. Print uses static traces.
Calendar
Location
Spark
Community
Check
Play
Skull
[05]
Real community
Use real BSides Zagreb event photographs. Keep natural colour, visible people and source credits. Never pair a real face with a fictional speaker. Confirm usage rights before printing or redistribution.
Event photo library →[06]
Brand in use
COMMUNITY / INFOSEC / ZAGREB
BY HACKERS.
FOR HACKERS.
05.03.2027/ ZAGREB
BSIDES ZAGREB / 2027
DIGITAL / LINK PREVIEW
Shared links lead with the logo, not a stock image.
VOICE / TONE
Technical. Human. Direct.
Community before hype. Short, clear calls to action. Terminal language in labels, plain language where people need answers. Never invent event details.