Graf-Anton-Schule

Overview

Graf-Anton-Schule is a vibrant, education-centered digital presence for a German community school serving the Merzig-Wadern region. The design system embraces an "Energetic Clarity" aesthetic—combining bold primary blue (#3080ff) accents with warm secondary orange (#f36f31) and fresh green (#00c758) highlights to evoke optimism, growth, and forward momentum. The visual language prioritizes accessibility and warmth, making complex school information feel approachable and welcoming to students, parents, and educators alike. The UI celebrates the school's mission to prepare children for the future while remaining rooted in community values.

The brand voice is direct, encouraging, and human-centered. Sentences are clear and action-oriented, avoiding jargon while maintaining professionalism. The tone balances institutional credibility with genuine enthusiasm—think "We make your children STRONG for the future" rather than "Our institution provides educational services." Typography mixes the clean, modern Geist typeface with occasional handwritten Caveat accents for warmth. Color is used strategically: primary blue for CTAs and key navigation, secondary orange for highlights and event callouts, and green for success states and positive messaging.

Colors

The color system is built on a clean white surface (#ffffff) with a cool blue-gray palette for depth and a vibrant primary blue (#3080ff) as the signature accent. Primary blue is reserved exclusively for interactive elements—buttons, links, focus states, and the most important CTAs—ensuring users instantly recognize where to click. The primary container (#b5dbf1) provides a softer, lighter tint for secondary information and backgrounds, while the on-primary-container text (#00406d) ensures legibility over light blue surfaces.

Secondary orange (#f36f31) is used sparingly for event highlights, badges, and warm accent elements that need to stand out without competing with primary actions. Tertiary green (#00c758) signals success, positive outcomes, and forward progress—ideal for confirmation

Typography

The typography system uses Geist as the primary typeface—a modern, geometric sans-serif that conveys clarity and forward-thinking values appropriate for an educational institution. Display (60px, 700 weight) is reserved for hero headlines like "Wir machen Ihre Kinder STARK für die Zukunft!" and uses -0.04em letter-spacing to create visual impact. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure page sections and card titles, with -0.02em and -0.01em letter-spacing respectively to maintain readability at scale. Body text (16px–18px, 400 weight) uses 24–28px line-height to ensure comfortable reading on screens and print. Labels and buttons use 12–14px sizes with 500–600 weight and 0.01–0.05em letter-spacing to create visual distinction. When applying small labels o

Layout

The page layout uses a 12-column grid system with a maximum container width of 1280px, ensuring content remains readable on desktop while adapting fluidly to tablet and mobile viewports. The left sidebar (16rem / 256px on desktop, collapsible to icon-only at 3rem / 48px) houses primary navigation and is hidden on mobile to maximize content space. Main content area uses 24px (md spacing) gutters between sections, creating clear visual rhythm and breathing room. White-space is generous—section separation uses lg spacing (40px) to prevent cognitive overload, while internal card padding uses md spacing (24px). The hero section spans full width with 40px top/bottom padding and centers text and imagery at 1280px max-width. News and event cards are arranged in a 3-column grid on desktop, 2 column

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. The elevation system uses three levels: Level 1 (Base) has no shadow and sits on the white surface. Level 2 (Cards, Inputs) uses box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) for a barely-perceptible lift. Level 3 (Modals, Dropdowns, Hover States) uses box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) to create clear separation. On hover, buttons and cards transition to Level 3 shadow (0 4px 12px rgba(0, 0, 0, 0.08)) with a 150ms ease-out timing to signal interactivity. Focus states on buttons add an additional 3px i

Shapes

The shape philosophy is "Soft-Technical"—combining gentle, approachable rounded corners with precise, grid-aligned layouts. Buttons and primary interactive elements use 1rem (16px) border-radius, creating a friendly, inviting appearance while remaining clearly clickable. Cards and containers use 0.75rem (12px) border-radius for a slightly sharper, more structured feel. Input fields and smaller components use 0.5rem (8px) border-radius to maintain visual consistency without appearing overly rounded. Chips and badges use full (9999px) border-radius to signal their distinct, contained nature. The

Components

Action Elements Buttons are the primary call-to-action mechanism. Primary buttons use {colors.primary} (#3080ff) background with white text, 40px height, 8px 12px padding, and 1rem border-radius. On hover, the background darkens to #1f5fd9 and shadow expands to 0 4px 12px rgba(48, 128, 255, 0.25), with a 150ms ease-out transition. On active/pressed, background becomes #1547c0 and shadow reduces to 0 2px 4px rgba(0, 0, 0, 0.1). Secondary buttons use {colors.secondary} (#f36f31) with the same sizing and hover behavior. Ghost buttons have transparent background with 1px {colors.outline} border and {colors.primary} text; on hover, background becomes {colors.surface-container-low} and border becomes {colors.primary}. All buttons use {typography.label-md} (14px, 500 weight) and apply box-sha

Do's and Don'ts

**Do**

• Do use primary blue (#3080ff) exclusively for interactive CTAs, links, and focus states—never for backgrounds or decorative elements.
• Do maintain 24px (md spacing) gutters between major sections and 12px (sm spacing) between related items to create visual rhythm.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to buttons and interactive elements to signal clickability.
• Do use Geist for all body and UI text; reserve Caveat for occasional accent headings only.
• Do ensure input fields have a clear 2px focus border in primary blue with a 3px inset ring for keyboard navigation.
• Do use secondary orange (#f36f31) and tertiary green (#00c758) sparingly for event highlights and success states.

**Don't**

• Don't use primary blue for large background areas or non-interactive elements—it should feel like an accent, not the dominant color.
• Don't apply shadows larger than 0 4px 12px rgba(0, 0, 0, 0.08) on standard components; reserve deeper shadows for modals and overlays.
• Don't mix rounded-corner sizes arbitrarily—stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't use system fonts or generic sans-serif fallbacks in production; always load Geist via @font-face to preserve brand identity.
• Don't apply text-shadow or blur effects to body text; reserve text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) only for small labels over busy backgrounds.
• Don't exceed 1280px container max-width on desktop; allow generous white-space rather than stretching content.