Skip to main content

SDLA Colors and GUI Guide

A practical reference for creating clear, friendly, and consistent School Data Leadership Association pages.

SDLA color palette

Select a swatch to copy its hexadecimal value. Heading combinations are available for every palette color. The seven principal colors also include pale card and panel surfaces with optional top or left accent treatments.

Card and panel surfaces
Card and panel surfaces
Card and panel surfaces
Card and panel surfaces
Card and panel surfaces
Card and panel surfaces
Card and panel surfaces

The SDLA GUI at a glance

The SDLA GUI is the shared visual language for site articles. It should feel welcoming, organized, modern, and practical—professional enough for district leaders but approachable enough for educators who are new to the topic.

Voice and tone

  • Use friendly, plain language.
  • Explain acronyms and technical terms.
  • Be practical, accurate, and respectful.
  • Guide readers without sounding collegiate or legalistic.

Layout

  • Use generous white space and short sections.
  • Group related ideas in responsive UIkit cards.
  • Use default or muted card backgrounds.
  • Keep important content readable on phones.

Color

  • Prefer colored top or left borders over large colored panels.
  • Use color to organize meaning, not merely decorate.
  • Keep headings and body text on calm, readable backgrounds.
  • Reserve strong red for warnings or required attention.

Typography and icons

  • Use KG Blank Space Solid for the page title and branded H2 and H3 headings.
  • Use sdla-heading-h2 for section headings and sdla-heading-h3 for cards and subsections.
  • Keep the large display treatment exclusive to the page title.
  • Use checkmarks for actionable or completed items.
  • Use approved hand-drawn icons for friendly visual emphasis and functional UIkit icons for interface actions.

Friendly and professional treatments

Both treatments belong to the SDLA system. Choose the treatment according to the purpose of the page rather than mixing visual personalities within the same interface.

Friendly editorial treatment

Use for explanatory articles, educator resources, interviews, introductions, and community-facing guidance.

  • Warm, plain language and generous white space
  • Approved hand-drawn icons used sparingly as visual anchors
  • Colorful borders and approachable cards
  • Examples and explanations that welcome new readers

Professional tool treatment

Use for official tools, validators, search interfaces, procedural systems, data utilities, and operational documentation.

  • Restrained blue, gray, green, and status colors
  • Compact headings, precise labels, and predictable controls
  • White or muted surfaces with subtle borders and shadows
  • Functional UIkit icons for actions, states, and navigation
  • Clear instructions, validation feedback, and accessible error states

Icon use and article-title restraint

Approved hand-drawn icons

  • Use only approved SDLA hand-drawn icon artwork.
  • Use one purposeful icon rather than a cluster of decorative symbols.
  • Keep icons subordinate to the heading and written content.
  • Give decorative icons aria-hidden="true"; provide text alternatives when an image communicates information.
  • Do not substitute emoji or unrelated icon styles for approved artwork.

Article title area

  • Begin most articles directly with the H1 title.
  • Avoid routine category, eyebrow, or meta text above the title.
  • Use an above-title label only when it conveys essential context that the title cannot.
  • Place dates, authorship, revision notes, and taxonomy in the appropriate article metadata area rather than decorative header text.

Status colors should communicate meaning

Green

Successful, above standard, complete, approved, or ready.

Yellow

Near standard, developing, caution, or review needed.

Red

Below standard, blocked, urgent, or required attention.

Quick examples

<h2 class="sdla-heading-h2 sdla-heading-blue">Section title</h2>
<h3 class="sdla-heading-h3 sdla-heading-green">Subsection title</h3>
<div class="uk-card uk-card-muted uk-card-body" style="border-left: 6px solid #af7ac5;">Callout text</div>
<a class="uk-button uk-button-primary" href="https://example.org/" target="_blank" rel="noopener noreferrer"><span uk-icon="icon: link"></span> External resource</a>

A final design check

  • Can a new reader understand the page quickly?
  • Do colors and icons communicate a real purpose?
  • Are headings restrained and backgrounds easy to read?
  • Is the large display heading reserved for the page title, with H2 and H3 utilities used below it?
  • Does the page begin with its title unless an above-title label provides essential context?
  • Is the selected friendly or professional treatment appropriate for the page's purpose?
  • Does the layout still work on a phone?
  • Are links descriptive and external destinations clearly marked?