SBOE Visual Identity System 2026 | DC State Board of Education

The Foundation

A Brand Built on Place & Purpose

Every element of this visual identity is intentional—drawn from the rivers, neighborhoods, and civic soul of Washington, DC. These aren't arbitrary colors; they're symbols of our commitment to nearly 100,000 students across all 8 wards.

Why We Needed a New Visual Language

The DC State Board of Education operates at the intersection of policy and people. We present testimony at formal government hearings, but we also hold town halls in community centers across the city. Our previous visual identity—anchored by the DC flag's bold red—served us well for official contexts, but felt aggressive in digital spaces and didn't allow for the nuance our communications require.

We needed a system that could feel authoritative in a legislative hearing and welcoming at a community conversation. One that honored DC's heritage while speaking to the future our students are building. One that worked as well on a mobile screen as on a letterhead.

The Design Philosophy

Grounded but forward-looking. Our primary colors anchor us in DC's governmental and geographical identity—the deep slates of federal buildings, the blues of our rivers. Our accent colors speak to growth, warmth, and possibility.

Flexible but cohesive. The gradient system allows us to shift tone: formal Authority gradients for official documents, energetic Sunrise gradients for student spotlights—while always feeling unmistakably SBOE.

Named with intention. Every color name references something specific to Washington, DC. Capitol Slate. Potomac. Anacostia. Cherry Blossom. When our team uses these colors, they're reminded of who we serve and where we serve them.

From Red to Coral: Honoring Heritage While Evolving

The DC flag's three red stars and two red bars are iconic. We didn't want to abandon that connection—but pure red (#FF0000 or similar) creates problems: it reads as "error" in digital interfaces, feels aggressive in large applications, and limits our design flexibility.

DC Coral (#D4736C) maintains the warmth and energy of red while being more versatile. It's still recognizably connected to our city's identity, but it plays well with our blue foundation and allows for sophisticated gradient transitions. It says "DC pride" without shouting.

Primary Palette

The Four Pillars

Each primary color carries meaning and history. Together, they represent the full scope of SBOE's mission—from governmental authority to student empowerment.

#1E3048

Capitol Slate

Named for the U.S. Capitol Building

The deep blue-gray of federal architecture at dusk. This color anchors our identity in governmental authority—the weight of policy, the permanence of institutions, the trust that comes from stability.

When to Use

Primary headers, navigation bars, official documents, anywhere you need to establish credibility and trust.

#3D6B8A

Ward Blue

Named for DC's 8 Wards

DC is divided into 8 wards, each with its own character, challenges, and strengths. Ward Blue represents our commitment to serving every neighborhood—a warmer, more approachable civic blue.

When to Use

Secondary buttons, links, interactive elements, community-focused content.

#D4736C

DC Coral

Evolution of the DC Flag Red

The DC flag's red represents heritage and pride. DC Coral carries that legacy forward—softened for modern contexts but still warm with the passion and energy of our city.

When to Use

Calls-to-action, important highlights, accent elements, heritage moments.

#7CC5D9

Rising Teal

Students Rising to Their Potential

"Rising" is deliberate. This color represents our students—their potential, their growth, their futures lifting off. It's bright but not childish, optimistic but not naive.

When to Use

Student-focused content, success stories, data highlights, celebrations.

Supporting Palette

Depth & Nuance

Supporting colors extend our range for gradients, illustrations, and layered designs. Each is named for a DC landmark or symbol.

#2A4A6B

Potomac

The River That Connects

The Potomac River connects DC to the broader region. This color sits between Capitol Slate and Ward Blue, creating smooth transitions—the color of depth and connection.

When to Use

Gradient midpoints, background layers, illustration depth.

#5A8BA8

Anacostia

The River & The Community

The Anacostia River runs through DC's historically underserved communities—Wards 7 and 8. This color honors our commitment to equity and reaching every student, especially those East of the River.

When to Use

Interactive states (hover, focus), secondary buttons, Bridge gradient transitions.

#E8A49E

Cherry Blossom

DC's Iconic Spring Symbol

DC's cherry blossoms represent renewal, beauty, and our city's unique character. This extends DC Coral into softer territory—for celebrations, achievements, and gentle moments.

When to Use

Soft accents, celebratory content, success indicators, gradient endpoints.

#A8DBE8

Horizon

What Students See Ahead

The horizon is possibility—what our students look toward. This light, airy teal is unapologetically optimistic. It says "the future is bright."

When to Use

Light accents, tags, badges, data visualization highlights.

Background System

Tints for Every Context

Subtle background tints help organize content and carry semantic meaning.

#EEF4F7

Ward Tint

Cool, neutral background for policy documents and professional content. Signals: "This is official information."

#FAF0EF

Coral Tint

Warm, welcoming background for community stories and engagement content. Signals: "This is about people."

#EEF8FA

Rising Tint

Fresh, energetic background for student spotlights and success stories. Signals: "This is about growth."

Gradient System

Color in Motion

Gradients express mood and create visual hierarchy. Each is designed for specific emotional contexts.

Authority

Capitol Slate → Ward Blue

Official & Formal

The most formal gradient. Use for official documents, policy headers, and board meeting materials. Both colors are blues—institutional strength without warmth.

Heritage

Capitol Slate → Potomac → DC Coral

Our Signature Gradient

THE SBOE gradient. Bridges governmental authority through connection to community warmth. Use for hero sections and major brand moments. It tells our whole story in one sweep.

Ocean Depth

Capitol Slate → Ward Blue → Rising Teal

Trust to Action

Moves from deep institutional trust into energetic action. Great for educational content that builds toward student outcomes—start grounded, end optimistic.

Bridge

Ward Blue → Anacostia → DC Coral

Policy Meets Community

Literally "bridges" civic policy (blue) to community heart (coral), passing through Anacostia. Use for content connecting SBOE's work to real community impact.

Civic Flow

Ward Blue → Rising Teal

Engagement & Energy

A cooler, energetic gradient for civic engagement. Both colors are in the blue-teal family—cohesive but with movement. Use for public meetings and calls for participation.

Warm Coral

DC Coral → Cherry Blossom

Celebration & Heart

The warmest gradient—no blues. Use sparingly for genuinely celebratory moments: graduation, awards, recognition. It centers human connection and achievement.

Sunrise

Rising Teal → Horizon → DC Coral

New Beginnings

Like a DC sunrise over the Potomac. Use for new initiatives, school year beginnings, and content about students' futures. It's dawn, hope, and what comes next.

Spectrum

Full Brand Journey

Complete Identity

The entire SBOE color story. Reserve for special occasions: annual reports, major announcements. It's the full expression of who we are.

Decorative Elements

Gradient Lines

Gradient lines add polish and separate content sections. Each carries the same emotional weight as its parent gradient.

Authority Line

For official documents and formal section breaks.

Heritage Line

Our signature divider. Use for major section transitions.

Bridge Line

Connects policy sections to community stories.

Civic Line

For engagement-focused and interactive content.

Spectrum Line

Full brand expression. Reserve for special moments.

Animated Flow Line

For digital headers. Adds life—use sparingly.

Typography

Voice Through Type

Typography carries as much meaning as color. Our type system balances governmental authority with human approachability.

Why Poppins + Montserrat?

Poppins has geometric confidence without feeling cold. Its rounded terminals feel modern and approachable—important for an organization serving families and students who may feel intimidated by government communications.

Montserrat was originally designed for urban signage, making it exceptionally readable at any size. For an organization that produces everything from one-page summaries to 50-page reports, readability matters.

Together, these fonts feel both governmental and human. They say "we're an official institution" and "we're here to help you" simultaneously.

Poppins — Display Headlines

Every Student Rising

Bold (700) weight. Sizes 32px+. For moments that stop the scroll.

Poppins — Section Headers

Policy Leadership for DC Schools

SemiBold (600) weight. Sizes 20-28px. Clear hierarchy.

Montserrat — Body Copy

The DC State Board of Education provides policy leadership, advocacy, and oversight to ensure every student receives the high-quality education they deserve.

Regular (400) weight. Sizes 16-18px. Optimized for reading.

Logo System

Flexible & Consistent

Our logo works across all contexts. Each color variant is designed for specific background situations.

Logo Usage Principles

Contrast is king. The logo must always be clearly legible. On light backgrounds, use dark variants. On dark or gradient backgrounds, use white.

Checkered = transparency. The checkered background indicates transparent areas—important for layering over photos or gradients.

Colored logos carry meaning. Capitol Slate says "official." Rising Teal says "student-focused." Choose based on content tone, not just aesthetics.

Square Format — Primary Use

Black

Print, B&W documents

White

Dark & gradient backgrounds

Capitol Slate

Primary branded use

Ward Blue

Community content

DC Coral

Heritage emphasis

Rising Teal

Student-focused content

On Heritage

Signature brand application

On Authority

Official contexts

On Ocean

Educational content

Original Red

Legacy reference

Rectangle Format — Horizontal Applications

Black Rectangle

Letterhead, documents

White Rectangle

Dark headers, nav bars

Capitol Slate

Primary branded use

On Heritage

Website headers

On Bridge

Community headers

On Spectrum

Special occasions

SBOE Mark — Compact Applications

Black Mark

Favicons

White Mark

Dark backgrounds

On Heritage

Social icons

On Spectrum

Special events

On Rising Teal

Student content

On DC Coral

Community icons

Implementation

Quick Reference

Copy and paste into CSS, Figma, Canva, or any design tool.

Color Variables

/* Primary */ --capitol-slate: #1E3048; --ward-blue: #3D6B8A; --dc-coral: #D4736C; --rising-teal: #7CC5D9; /* Supporting */ --potomac: #2A4A6B; --anacostia: #5A8BA8; --cherry-blossom: #E8A49E; --horizon: #A8DBE8; /* Tints */ --ward-tint: #EEF4F7; --coral-tint: #FAF0EF; --rising-tint: #EEF8FA;

Gradient Definitions

/* Authority */ linear-gradient(135deg, #1E3048, #3D6B8A) /* Heritage */ linear-gradient(135deg, #1E3048, #2A4A6B 40%, #D4736C) /* Ocean Depth */ linear-gradient(135deg, #1E3048, #3D6B8A 50%, #7CC5D9) /* Bridge */ linear-gradient(90deg, #3D6B8A, #5A8BA8 50%, #D4736C) /* Spectrum */ linear-gradient(90deg, #1E3048, #3D6B8A 25%, #7CC5D9 50%, #D4736C 75%, #E8A49E)

Brand Assets

Icon Downloads

Download official SBOE logos and icons in high-quality transparent PNG or scalable SVG format. Every variant is optimized for professional use.

PNG Highest Quality

Transparent background, perfect for documents, presentations, and digital media. Maximum resolution for crisp display at any size up to the original dimensions.