GÖD – Gewerkschaft Öffentlicher Dienst

Overview

GÖD (Gewerkschaft Öffentlicher Dienst) is Austria's second-largest public sector union, representing 247,000+ members across government and public service sectors. The design system embodies "Institutional Warmth"—a visual language that combines the authority and trustworthiness expected of a major labor organization with approachable, human-centered interaction patterns. The aesthetic avoids cold formality; instead, it uses a vibrant teal accent (#20c4b2) against a clean white canvas to signal both professionalism and member-focused energy. The UI evokes clarity and confidence: users should feel that their union is modern, transparent, and genuinely invested in their wellbeing.

The brand voice is direct, empowering, and grounded in collective action. Tone: factual but warm, never condescending. Vocabulary emphasizes solidarity, rights, and practical support—words like "Rechtsschutz" (legal protection), "Vorteil" (benefit), and "Mitglied" (member) appear frequently. Example sentence in brand voice: "Ihre Mitgliedschaft bringt Beratung, Rechtsschutz und Ermäßigungen – und unterstützt unseren täglichen Einsatz für faire Arbeitsbedingungen." (Your membership brings advice, legal protection, and discounts—and supports our daily fight for fair working conditions.)

Colors

The color system is built on institutional trust anchored by a signature teal primary (#20c4b2), which appears on all primary CTAs ("Jetzt Mitglied werden"), focus states, and key interactive elements. This teal is vibrant enough to command attention without feeling corporate or sterile. The surface stack uses a near-white foundation (#ffffff) with carefully calibrated grays for depth: surface-container (#d7e1e5) for subtle card backgrounds, surface-container-low (#e9eef0) for hover states, and on-surface (#1b2224) for body text—a near-black that maintains readability at 16px without harsh contrast. Secondary color (#37687b, a muted slate-blue) supports data visualization and secondary navigation; tertiary (#f66c63, a warm coral-red) is reserved for alerts, warnings, and error states. The

Typography

The type system uses Fira Sans exclusively—a humanist sans-serif that balances institutional credibility with approachability. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 600 weight) is reserved for page titles and section breaks; Headline-md (28px, 600 weight) structures content hierarchy within cards and modals. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and prominent copy; Body-md (16px, 400 weight, 24px line-height) is the default for all body text and ensures legibility at standard viewing distances. Label-md (14px, 500 weight, 0.01em tracking) is applied to button text, form labels, and navigation items; Label-sm (12px, 500 weight, 0.05em tracking) is used for helper text, badges,

Layout

The layout uses a 12-column grid with a max-width of 1280px (container-max), centered on the viewport with symmetric gutters of 24px (gutter token). Page rhythm follows a 40px (lg spacing) vertical cadence for section separation, creating breathing room between major content blocks. The hero section uses full-width background imagery with a semi-transparent overlay (rgba(0, 0, 0, 0.3)) to ensure text legibility; content within the hero is constrained to the container-max and uses 64px (xl spacing) for top/bottom padding. Cards and content modules use 24px (md spacing) internal padding and 12px (sm spacing) for element-to-element gaps within cards. Form fields stack vertically with 16px gaps; button groups use 12px horizontal spacing. The design favors generous white-space: margins between

Elevation & Depth

Depth is conveyed through a three-tier shadow system that avoids heavy drop-shadows. Level 1 (Base/Surface): no shadow; elements sit flush on the white background. Level 2 (Cards/Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a soft, close shadow that suggests the card is slightly lifted. Level 3 (Modals/Popovers): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)—a larger, more diffuse shadow that creates clear separation from the background. Hover states on cards transition from Level 2 to Level 3 over 200ms (ease-in-out), signaling interactivity. Focus states on interactive elements use a

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are applied consistently but conservatively, signaling approachability without sacrificing institutional gravitas. Buttons use rounded.sm (0.25rem / 4px), creating a subtle softness that feels modern but not playful. Cards and containers use rounded.DEFAULT (0.5rem / 8px), a gentle radius that breaks the hard edge of rectangles without appearing rounded. Modals and elevated surfaces use rounded.lg (1rem / 16px), creating a more pronounced softness for elements that demand visual separation. Toggle switches and pill-shaped badges use roun

Components

Action Elements Buttons are the primary call-to-action mechanism. Button-primary uses backgroundColor: {colors.primary} (#20c4b2), textColor: {colors.on-primary} (#1b2224), padding: 10px 24px, height: 44px, and rounded.sm (4px). The label uses label-md typography (14px, 500 weight). On hover, the background transitions to #1aa89a (a 10% darker teal) over 200ms; on active/pressed, it darkens further to #0f8b7f. Button-secondary uses a transparent background with a 2px solid border in primary color, same padding and height, and transitions to primary-container background on hover. All buttons include a focus state with box-shadow: 0 0 0 3px rgba(32, 196, 178, 0.1) and outline: none to replace the browser default.

Containers & Surfaces Cards use backgroundColor: {colors.surface-conta

Do's and Don'ts

**Do**

• Do use the teal primary (#20c4b2) exclusively for primary CTAs, focus states, and key interactive elements—never dilute it with secondary uses.
• Do maintain 24px minimum padding inside cards and 40px minimum vertical spacing between sections to preserve the calm, institutional rhythm.
• Do apply the 3px primary-color focus ring (0 0 0 3px rgba(32, 196, 178, 0.1)) to all interactive elements for accessibility and visual consistency.
• Do use Fira Sans at 16px body-md for all body text; never drop below 14px for label-md without explicit accessibility review.
• Do transition all hover/focus states over 150–250ms (ease-in-out) to signal interactivity without feeling sluggish.

**Don't**

• Don't use the secondary color (#37687b) or tertiary color (#f66c63) as primary CTAs—reserve them for data visualization, secondary navigation, and alerts.
• Don't apply border-radius greater than 16px (rounded.lg) to buttons or standard containers; excessive rounding undermines institutional credibility.
• Don't use hard shadows (box-shadow with blur-radius <8px or spread >8px); stick to the three-tier system (3px, 8px, or none).
• Don't reduce padding below 12px (sm spacing) inside cards or below 24px (md spacing) for section gutters—density creates cognitive load.
• Don't mix typefaces; Fira Sans is the exclusive font family. Never fall back to system fonts or serif typefaces in the UI.