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 ten 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
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.
