Blockly Brand System
Solutions for
real problems.
The single source of truth for Blockly's visual identity. Seven distinct product lines, one cohesive design system.
Product Lines
Seven identities.
One platform.
Each product carries its own color system while maintaining visual harmony with the Blockly family.
OSS Education
Self-hosted
"Open-source scheduling, for everyone."
#9333EA
#7E22CE
#D8B4FE
Global Design System
Shared foundations.
Typography, colors, and principles that unify all Blockly products.
Outfit
Headings · Wordmarks
Bold, geometric sans-serif for headings and wordmarks. Creates strong visual hierarchy.
H1 / Display
text-4xl · font-bold
Never Miss a Block
H2 / Section
text-2xl · font-semibold
Solutions for real problems
H3 / Subsection
text-xl · font-semibold
The platform that unifies
Wordmark
text-[1.625rem] · font-bold
Blockly Education
Sub-label
text-[1.0625rem] · font-semibold
Projects · Hosted
Inter
Body · UI · Captions
Highly legible sans-serif for body text and UI. Optimized for screens.
Body Large
text-lg · font-normal
Blockly builds tools that solve problems we have lived ourselves. The voice is direct and practical.
Body
text-base · font-normal
Each product carries its own color system while maintaining visual harmony with the Blockly family.
UI / Labels
text-sm · font-medium
Button text, navigation, form labels
Caption
text-xs · font-normal
Last updated April 2026 · Brand guidelines v2.0
Type Pairing
Outfit headings paired with Inter body text create clear hierarchy.
Never Miss a Block
An invite-only school schedule tracker built around block rotations. Blockly Education helps students stay on top of their schedule with automatic block tracking and class reminders.
Shared Utility Colors
Colors used across all products for text, surfaces, and states.
Dark Text
#0F172A
Secondary
#64748B
Background
#F8FAFC
Border
#E2E8F0
Success
#10B981
Warning
#F59E0B
Error
#EF4444
Brand Voice
How we speak.
Blockly builds tools that solve problems we have lived ourselves. Our voice reflects that experience.
Direct
Say what the product does, plainly. No jargon, no fluff — just clear, honest communication that respects the reader's time.
Practical
Lead with the problem solved, not the feature list. Users care about what a product does for them, not what it technically contains.
Confident
We built it because we needed it; we know it works. Speak with authority earned through genuine experience building and using the tools.
Human
Written by a team, for real people. We're not a faceless corporation — we're people who build tools for other people.
Brand Assets
Download logos & icons.
All assets available in SVG format. Use -Dark variants on dark backgrounds.
Blockly
Parent Platform
The platform that unifies everything Blockly builds.
"Solutions for real problems."
Primary
#2563EB
Dark
#1D4ED8
Accent
#93C5FD
Usage Guidelines
Do's and don'ts.
Do
- 1 Use the correct product logo for each context
- 2 Switch to -Dark variants on backgrounds darker than #4B5563
- 3 Use SVG format for all digital applications
- 4 Maintain clear space around all logos (icon height on all sides)
- 5 Keep colors within their product contexts
Don't
- 1 Stretch, rotate, or recolor any logo
- 2 Use parent mark as substitute for products
- 3 Place logos on busy backgrounds without an overlay
- 4 Rasterize to PNG unless required by the platform
- 5 Mix product colors across different product contexts
Dark Mode
Dark mode guidelines.
All products follow the same dark mode rules. Product primary colors are retained for interactive elements.
Background
#0F172A
Body Text
#F8FAFC
Interactive
Product primary
Key Rules
- 1 Product primary color is retained for buttons, links, and accents
- 2 Surface color (#1E293B) is used for cards and elevated elements
- 3 Border color (#334155) replaces light mode borders
- 4 Text switches from dark to light to maintain contrast