The Center Square

Overview

The Center Square is a nonprofit accountability newswire that embodies 'Civic Minimalism'—a design aesthetic that prioritizes clarity, directness, and institutional trust through restrained typography and purposeful color. The brand serves journalists, donors, and taxpayers seeking transparent government reporting, evoking a sense of journalistic authority and civic responsibility. The visual language is deliberate and unadorned: a clean light background (rgb(250, 250, 250)), deep neutral text (rgb(31, 31, 32)), and a vibrant purple accent (#5f2ef9) that signals actionable moments—newsletter signups, donations, and meeting requests. Voice: authoritative yet accessible, data-driven but human. Example: 'We report on what government costs you—so you can decide what it's worth.'

Colors

The color system balances institutional neutrality with purposeful accent. Primary (#5f2ef9) is the brand's signature purple, deployed on CTAs ('Support accountability journalism', 'Donate today'), key links, and the logo mark—it signals trust and urgency without aggression. Secondary (#4b19d6) and Tertiary (#4417c0) provide darker purple variants for hover and active states, creating a cohesive accent family. The surface stack anchors the design: Surface (#fafafa) is the default page background, with Surface-Container variants (from #f4f4f5 to #cccccc) used for cards, inputs, and layered UI. On-Surface (#1f1f20) is the primary text color—nearly black, ensuring 16:1 contrast on light backgrounds. On-Surface-Variant (#555558) is used for secondary text and disabled states. Outline (#747477)

Typography

The type system pairs Roboto (sans-serif, Google Fonts) for body and UI with miller-headline (serif, Adobe Typekit) for editorial headlines, creating a 'institutional-editorial' voice. Display (56px, 800 weight, -0.02em tracking) anchors hero sections with authority; Headline-LG (40px, 700 weight) and Headline-MD (28px, 600 weight) use miller-headline for article titles and section breaks, evoking print journalism. Body-LG (18px, 400 weight, 28px line-height) and Body-MD (16px, 400 weight, 24px line-height) ensure readability at 16:1 contrast. Label-MD (14px, 500 weight) and Label-SM (12px, 500 weight) are used for buttons, badges, and metadata. All text uses -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale for crisp rendering. Apply text-shadow: 0 1px 2px rgba(0,

Layout

The layout uses a 12-column grid with a 1280px max-width container, centered via margin-left: auto and margin-right: auto. Page rhythm is governed by the spacing scale: lg (40px) separates major sections (hero, value propositions, footer), md (24px) is the default gutter between cards and content blocks, and sm (12px) is used for internal component padding. The hero section spans full-width with centered text alignment and 64px top/bottom padding, creating breathing room around the h1 (56px, 800 weight). Cards use 24px padding with 6px border-radius and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). The design favors white-space over density: no element should have padding less than 12px, and section separators use 40px vertical spacing. Responsive breakpoints: tablet (991px) and mobile (479px

Elevation & Depth

Depth is conveyed through a three-tier shadow system that avoids visual clutter. Level 1 (Base): no shadow; elements sit flush on the surface (#fafafa). Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used on cards, input fields, and dropdowns—this 3px blur and 8px spread create subtle separation without drama. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), applied on card-hover and modal overlays to signal interactivity. Focus states use a 2px solid outline in primary (#5f2ef9) with 2px offset, ensuring keyboard navigation is visible. No gradients or

Shapes

The shape philosophy is 'Institutional Precision'—rounded corners are minimal and functional, never decorative. Buttons use border-radius: 6px (0.75rem / md), providing subtle softness while maintaining a professional edge. Cards and containers use 1rem (lg) for a slightly more approachable feel on larger surfaces. Input fields use 0.5rem (DEFAULT) for a compact, form-like appearance. Badges and pills use border-radius: 9999px (full) to signal secondary or supplementary information. No element uses 0px radius; even the most utilitarian components receive 0.25rem (sm) to avoid harsh corners. Th

Components

Action Elements Buttons are the primary interaction pattern. Button-Primary (backgroundColor: #5f2ef9, color: #ffffff, padding: 12px 20px, height: 48px, border-radius: 6px, fontWeight: 500) is used for primary CTAs ('Support accountability journalism', 'Donate today'). On hover, the background shifts to Secondary (#4b19d6) with a 150ms ease-in-out transition. On focus, apply outline: 2px solid #5f2ef9 with outline-offset: 2px. Button-Secondary (backgroundColor: #d5d5d7, color: #1f1f20, border: 1px solid #a4a4a7) is used for secondary actions ('Republish our stories', 'Request a meeting') and shifts to #cccccc on hover. Button-Ghost (backgroundColor: transparent, color: #5f2ef9) is used for tertiary links and toggles, with a 12px padding and 6px border-radius.

Containers & Surfaces

Do's and Don'ts

**Do**

• Do use Primary (#5f2ef9) exclusively for CTAs, links, and focus states—it is the brand's signature accent and must remain distinctive.
• Do maintain 16:1 contrast between On-Surface (#1f1f20) and Surface (#fafafa) for WCAG AAA compliance on all body text.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and elevated surfaces; never use flat borders or no shadow.
• Do use miller-headline serif for editorial headlines (h1, h2, h3) and Roboto sans-serif for UI and body text—never mix them within a single text block.
• Do space sections with lg (40px) vertical padding and use md (24px) as the default gutter between components.
• Do apply -webkit-font-smoothing: antialiased to all text for crisp rendering across browsers.

**Don't**

• Don't use Secondary (#4b19d6) or Tertiary (#4417c0) as primary colors; they are hover/active states only and must never appear on initial page load.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or blur radii greater than 24px—the design is minimalist and shadows should be subtle.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the system.
• Don't mix Roboto and miller-headline in the same heading; use miller-headline for editorial content and Roboto for UI labels only.
• Don't reduce padding below 12px (sm) or use negative margins to compress spacing—white-space is a core brand value.
• Don't apply color to text below 14px without explicit contrast testing; small text requires 18:1 contrast to meet accessibility standards.