Top navigation groups major content buckets, then exposes more specific actions through dropdowns.
- What We Do
- NCEE Blueprint
- Research & Resources
- Community
- Who We Are
National Center on Education and the Economy
We build better systemstogether.
Designing future-ready education systems that help young people thrive.
NCEE presents itself as a collaborative, future-focused education systems partner. The public site combines research, policy, professional learning, and community-building into one optimistic message: educators, policymakers, researchers, families, and communities can build a better system together.
DiscoverDesignDeliver
navigation
Navigation
What We DoNCEE BlueprintResearch & ResourcesCommunityWho We Are
The site repeatedly funnels information into Discover, Design, and Deliver.
- Discover
- Design
- Deliver
Mobile navigation becomes an off-canvas list with strong spacing, uppercase labels, and clear hierarchy.
- Full-width drawer
- Stacked menu
- Social links
- Utility close button
logo
Logo
This white raster mark is sourced from the live site header and is safe to treat as a public implementation reference.
Dark logo placeholder
Favicon placeholder
Guidance: keep the public white mark on dark backgrounds, and do not infer a dark or favicon system until NCEE provides approved source files.
colors
Colors
Warm Canvas
Overall page wash and soft neutral backing areas
White Surface
Primary cards, content panels, and form fields
Cool Mist
Muted panels and alternating content bands
Institutional Navy
Primary text and dark foreground surfaces
Indigo Muted
Secondary labels, metadata, and subdued UI text
Light Rule
Hairlines, table rules, and field outlines
NCEE Mint
Keyword fills, highlight text, and emphasis blocks
Blueprint Purple
Primary call-to-action backgrounds and deep highlight bands
Community Magenta
Buttons, community sections, and active focus states
Action Red
Small dots, emphasis markers, and high-attention moments
Optimism Yellow
Portrait backdrops and bright supporting accents
Deep Navy
Hero backgrounds, footer bands, and contrast panels
typography
Typography
We can build a better system, together.
Lato does the main persuasion work on the live site: bold hero statements, section headings, and readable editorial copy.
RESEARCH & RESOURCES
Inter fits the site’s utility layer: metadata, labels, UI navigation, and compact supporting text.
| Style | Size | Line height | Weight | Tracking |
|---|---|---|---|---|
| Hero Display | 4.75rem | 0.94 | 900 | -0.05em |
| Section Heading | 3rem | 1 | 700 | -0.03em |
| Card Heading | 1.5rem | 1.15 | 700 | 0 |
| UI Label | 0.95rem | 1.2 | 600 | 0.08em |
| Body | 1rem | 1.6 | 400 | 0.015em |
voice
Voice
Optimistic
NCEE presents itself as a collaborative, future-focused education systems partner. The public site combines research, policy, professional learning, and community-building into one optimistic message: educators, policymakers, researchers, families, and communities can build a better system together.
System-minded
NCEE presents itself as a collaborative, future-focused education systems partner. The public site combines research, policy, professional learning, and community-building into one optimistic message: educators, policymakers, researchers, families, and communities can build a better system together.
Actionable
NCEE presents itself as a collaborative, future-focused education systems partner. The public site combines research, policy, professional learning, and community-building into one optimistic message: educators, policymakers, researchers, families, and communities can build a better system together.
Collaborative
NCEE presents itself as a collaborative, future-focused education systems partner. The public site combines research, policy, professional learning, and community-building into one optimistic message: educators, policymakers, researchers, families, and communities can build a better system together.
Discover. Design. Deliver.
Use clear, action-oriented phrases that connect research to implementation and community impact.
components
Components
Primary buttons should use the purple-magenta family and generous horizontal padding.
Secondary actions stay lighter, but still use clear shape and strong contrast against the surface.
Excellence at Scale: What the World's Best Systems Get Right
Large editorial cards pair category tags, strong linked headlines, and practical descriptions rather than marketing-heavy teaser copy.
Read patternThinking Differently About Career-Connected Learning
Resource cards stay readable and useful, prioritizing insight summaries and topic framing over ornamental chrome.
Read patternforms
Forms
Newsletter
Let's connect.
The live site uses simple stacked Gravity Forms fields with rounded corners, subtle field backgrounds, and a strong submit color.
surfaces
Surfaces
Editorial card
Use for article previews, overview copy, or supporting program content.
Program grouping
Use soft contrast to separate modules while keeping the page airy and readable.
Hero or footer
Reserve deep navy for emphasis, people media, and institutional credibility moments.
data patterns
Data Patterns
Benchmarking, research, and future labs
NCEE packages complex systems research into approachable pathways that help leaders understand what is working and why.
Policies and education systems that work
Programs are framed as system design tools, not isolated products, which keeps the site cohesive across audience types.
Coaching, professional learning, and school leadership
Delivery patterns emphasize implementation, practical support, and a clear through-line from strategy to classroom impact.
page layouts
Page Layouts
Common sequence
- Split hero with message and people collage
- Editorial rail of resource or event cards
- Dark callout band leading to action
- Contact or newsletter section near the bottom
people
People
Portrait treatment
Cutout portraits with orbit lines
Human imagery is framed by circular crops, dotted accents, and bright supporting color fields.
Community art direction
Optimistic color blocking
Community-focused imagery leans into magenta, teal, yellow, and red to feel energetic without losing institutional clarity.
ResearchersEducatorsPolicy makersCommunity membersParents
event cards
Event Cards
Homepage editorial card
Large card with image, label, and linked title
Cards are spacious and content-first. The image earns attention, but the hierarchy is still driven by the headline and short description.
Mix metadata, topic framing, and approachable summaries
Keep event and resource modules grounded in utility. NCEE speaks in terms of relevance, policy context, and what the audience will learn next.
Follow the voice rulesmotion
Motion
0.4s
Measured and structural, matching the hero slider and drawer-like mobile navigation behavior.
cubic-bezier(0.16, 1, 0.3, 1)
Prefer ease-out curves and opacity shifts to aggressive bouncing or rotation.
- Use gentle fades and horizontal slide-ins to echo the homepage SmartSlider rather than playful bouncing.
- Reserve stronger movement for hero media, off-canvas navigation, and card hover emphasis.
- Use contrast, opacity, and directional linework before scale-heavy animation.
usage
Usage & Downloads
- Public white site logo
- Dark logo placeholder
- Favicon placeholder
- /brand/logo-dark.svg
- /favicon.svg
Important: this guide uses a public site logo plus public page imagery as reference material. Replace placeholders and reconcile any licensing questions before public rollout.