Blockly Brand
Design Guidelines
Design Guidelines
Official brand assets, colors, typography, and usage guidelines for the Blockly platform.
Never Miss a Block.
A simple invite-only school schedule tracker. Keep track of your block rotations, get notifications, and stay on top of your classes.
Use these logo versions depending on your layout and background.
Primary logo with 3×3 blocks + wordmark. Use for headers and main branding.
Download SVG
Icon-only version. Use for favicons, app icons, and social media avatars.
Download SVG
Icon-only version. Use for favicons, app icons, and social media avatars.
Download SVGOur color palette creates a professional, trustworthy identity. Click any color to copy the hex code.
Brand blocks, primary buttons, links
#2563EB
RGB: 37, 99, 235
Hover states, highlights
#1D4ED8
RGB: 29, 78, 216
Backgrounds, cards
#93C5FD
RGB: 147, 197, 253
Headings, body text
#0F172A
RGB: 15, 23, 42
Subtext, captions
#6B7280
RGB: 107, 114, 128
Page background, surfaces
#F8FAFC
RGB: 248, 250, 252
Success states, badges
#10B981
RGB: 16, 185, 129
Alerts, warnings
#F59E0B
RGB: 245, 158, 11
Errors, validation
#EF4444
RGB: 239, 68, 68
We use two Google Fonts for a clean, modern aesthetic.
Headers, Logo, Emphasis
Heading 1 • Semibold 600 • 32px
Heading 2 • Semibold 600 • 24px
Body, UI Elements, Captions
Body • Regular 400 • 16px
Keep track of your block rotations, get notifications, and stay on top of your classes.
Small • Regular 400 • 14px
Built exclusively for students with block schedules.
Follow these best practices to maintain brand consistency.