DC PCSB

Overview

DC PCSB is the authoritative voice for public charter school information in Washington, DC, serving families, school leaders, and policymakers. The design system embodies 'Institutional Clarity'—a modern, accessible aesthetic that prioritizes information hierarchy and community trust. The brand uses a confident primary blue (#2873cb) paired with warm accent colors (golden-orange #f5a329 and sage-green #7ab645) to create visual warmth within a structured, professional framework. The emotional response is one of competence and approachability: users feel guided through complex educational data without intimidation.

The voice is direct, evidence-based, and community-centered. Sentences are clear and active (e.g., 'Find your school. Compare programs. Make informed decisions.'), avoiding jargon while respecting the intelligence of parents and educators. The brand speaks with the authority of a government body but the empathy of a community partner. Tone examples: 'We're here to help you navigate charter schools' (warm), 'Data-driven school profiles' (credible), 'Your voice matters in our process' (inclusive).

Colors

The color palette is built on institutional trust anchored by primary blue (#2873cb), which appears on all CTAs, navigation highlights, and key interactive elements. This blue conveys stability and authority while remaining approachable—it's neither corporate-cold nor overly playful. The surface stack uses a light, neutral foundation (#f0f3f6 for the main container, #ffffff for elevated cards) to ensure maximum readability of dense educational content. Secondary accent colors—golden-orange (#f5a329) for highlights and sage-green (#7ab645) for positive indicators—add warmth and visual rhythm without competing with primary actions. Error red (#e01144) is reserved for critical alerts and validation states. On-surface text is a sophisticated dark gray (#4e5052) rather than pure black, reducing

Typography

The type system uses Lato exclusively, a humanist sans-serif that balances institutional credibility with approachability. Display (65px, 900 weight) anchors hero sections and major announcements with commanding presence. Headline-lg (40px, 700 weight) structures major content sections, while headline-md (28px, 700 weight) breaks up dense information into scannable chunks. Body-lg (18px, 400 weight) is the primary reading size for long-form content like school descriptions and policy explainers, set at 28px line-height for comfortable reading. Body-md (16px, 400 weight) is used for secondary content and form labels. Label-md (14px, 700 weight) with 0.05em letter-spacing provides crisp, scannable labels for buttons and badges. All headlines use negative letter-spacing (-0.03em to -0.01em) t

Layout

The layout uses a 12-column grid with a max-width of 1200px, maintaining consistent horizontal rhythm across desktop and tablet. The page rhythm alternates between full-width hero sections (with 40px lg spacing for breathing room) and constrained content zones (24px gutter on each side). White-space is generous: section separation uses 64px xl spacing vertically, while card-to-card spacing within a grid uses 24px md spacing. The hero section occupies the full viewport height with a light background (#f0f3f6), featuring the headline on the left (40% width) and an illustration/graphic on the right (60% width). Below the fold, content cards stack in a 2-3 column grid depending on viewport, each card receiving 24px md padding internally. Form fields and inputs use 12px sm spacing between label

Elevation & Depth

Depth is achieved through subtle shadow layering and strategic use of white space rather than dramatic drop-shadows. Level 1 (Base): The page background is a soft neutral (#f0f3f6) with no shadow. Level 2 (Standard Card): Cards use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px solid border in outline-variant (#d6d7d9), creating a soft lift from the background. Level 3 (Elevated/Hover): On hover, cards transition to box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) over 200ms, signaling interactivity. Buttons use a subtle 0 2px 4px rgba(0, 0, 0, 0.1) shadow at rest, increasing to 0 4px 8px rgba

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are present but restrained, reflecting both approachability and professional precision. Buttons and inputs use 5px (DEFAULT) border-radius, a subtle rounding that feels modern without being playful. Cards and larger containers use 8px (md) border-radius for slightly more visual softness. The primary CTA button uses 5px with 12px vertical padding and 24px horizontal padding (44px total height), creating a compact, clickable target. Badges and pills use full (9999px) border-radius for maximum roundness, signaling their lightweight, informa

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (#2873cb background, white text, 5px border-radius, 44px height) use label-md typography (14px, 700 weight, 0.05em letter-spacing) and 12px 24px padding. On hover, the background shifts to #2260ac with a 0 4px 8px rgba(0, 0, 0, 0.15) shadow over 150ms. Active state uses #1a4a8a. Secondary buttons have a transparent background with a 2px solid primary border and primary text color; on hover, the background fills with primary-container (#d6e4f7). All button transitions use cubic-bezier(0.4, 0, 0.2, 1) easing for a professional feel.

Containers & Surfaces Cards are the primary content container, using a white background (#ffffff) with a 1px solid outline-variant border (#d6d7d9) and 24px padding. The default

Do's and Don'ts

**Do**

• Do use primary blue (#2873cb) for all primary CTAs, links, and focus states—it's the visual anchor of institutional trust.
• Do maintain 24px md spacing between major content sections and 40px lg spacing between full-width sections to create breathing room.
• Do apply 5px border-radius consistently to buttons and inputs, and 8px to cards, to maintain the soft-technical aesthetic.
• Do use Lato at 18px body-lg with 28px line-height for long-form content like school descriptions to ensure readability.
• Do layer shadows subtly: 0 3px 8px for standard cards, 0 8px 24px for elevated states, never exceeding 0 16px 40px.
• Do use secondary accent colors (orange #f5a329, green #7ab645) sparingly for highlights and status indicators, never as primary actions.
• Do include a 3px rgba(40, 115, 203, 0.1) focus ring on all interactive elements for accessibility and visual feedback.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary text or background—use on-surface (#4e5052) and surface (#f0f3f6) for institutional softness.
• Don't apply border-radius greater than 8px to cards or containers; it undermines the professional, structured aesthetic.
• Don't use more than 3 accent colors in a single view; the palette is intentionally restrained to support information hierarchy.
• Don't apply shadows stronger than 0 16px 40px rgba(0, 0, 0, 0.12)—excessive depth creates visual noise and reduces clarity.
• Don't mix font families; Lato is the exclusive typeface across all contexts.
• Don't use the error color (#e01144) for non-critical states; reserve it for validation failures and alerts only.
• Don't set line-height below 1.5 (24px) for body text; dense leading reduces readability of educational content.