Blockly

Brand guidelines

Main site

Blockly brand system

This is the source of truth for Blockly wordmarks, logo treatments, palette, typography, and voice across the hosted product, staff tools, websites, and OSS properties.

View logos View colors

Master line

Never Miss a Block.

Hosted variant

Invite-Only. Always On.

OSS variant

Your Schedule, Your Server.

Logo files

Use the full wordmark for headers and branded surfaces. Use the icon for app icons, favicons, avatars, and compact UI moments.

Blockly light wordmark

Full logo

Primary wordmark for light backgrounds.

Download SVG
Blockly icon

Icon

Compact mark for product icons and small surfaces.

Download SVG
Blockly dark wordmark

Dark background logo

Use the white wordmark on dark surfaces with clear contrast.

Download SVG

Brand colors

Use the palette consistently across websites and apps. Click a swatch to copy the hex code.

Primary Blue

Primary actions and brand anchors

#2563EB

Accent Blue

Hover states and emphasis

#1D4ED8

Light Blue

Subtle backgrounds and highlights

#93C5FD

Dark Text

Headlines and primary text

#0F172A

Secondary Text

Support text and labels

#6B7280

Light Background

Pages and quiet surfaces

#F8FAFC

Typography

Blockly uses a simple pairing: Outfit for headings and Inter for body text and UI.

Outfit

Use for page titles, key labels, and branded emphasis.

Example

Never Miss a Block

Inter

Use for body copy, settings, tables, form labels, and longer reading.

Example

Blockly keeps block schedules, tasks, reminders, and school-day changes in one focused product experience.

Usage rules

Keep the brand recognizable across products by following the same basic system everywhere.

Do

  • Use the primary blue as the main brand action color
  • Use Outfit for headings and Inter for UI and body copy
  • Use the white wordmark on dark backgrounds
  • Keep the product lines correct for hosted and OSS
  • Keep layout surfaces calm and consistent page to page

Do not

  • Stretch, skew, recolor, or recompose the logo
  • Add decorative gradients or effects to the wordmark
  • Swap in unrelated typefaces for brand-critical moments
  • Put the logo on low-contrast or noisy backgrounds
  • Use a different product voice for each Blockly property