Garage Design Language (Hints)

The design aims to be very easy to follow and not impose obstacles or constraints on the users.

  • Fonts
    • Main font (used for the logo and headlines) is JetBrains Mono ExtraBold 800, which is widely available (e.g. Google Fonts, Google Slides)
    • Secondary font (used for text blocks) is Helvetica (Sans Serif)
  • Prefer lowercase
  • Colors:
    • The primary color is #fff (on dark backrounds or #1b1e22 for light backgrounds)
    • The secondary color is #5865f2 (irrespective of the background)
  • The logo for Garage as the whole organization is garage::✱ or the short version g::✱
  • The asterisk may stand for anything and the concept supports nesting like this: garage::trip::x.y::night_game
  • Avoid syntax errors, end expressions with ;
  • When you need to split words prefer snakes _ and when you need to separate somehting use /
  • Use line breaks after :: when things get too long
    garage::trip::
    x.y::night_game
  • Be creative and playful but do not overcomplicate
  • Emojis are super wecome g::🔥

Resources

Playground

Edit the logo as you need (directly in the box) and then capture screenshot using your OS or browser inspect and capture node screenshot feature on .logo-playground element.

I am pretty sure this device is too small to have inspect mode. So no play time for you. 🥶

© 2024 Garage Trip team