Design System: eUprava (eds-angular)Legacy format

Official, government-grade, and quietly confident. Built on the Material 3 (M3) design language, adapted to the visual identity of the Republika Srbija's eUprava portal. The overall mood is institutional clarity — trustworthy, accessible, and calm — without feeling cold. Dense information (tables, steppers, forms) is made digestible through generous whitespace, a restrained four-accent extended palette, and soft, elevation-based layering.

The aesthetic philosophy is functional polish over decoration: every color, corner radius, and shadow traces back to a semantic role (primary action, surface, error, state). Components speak the same visual language whether they are low-level primitives (buttons, chips, inputs) or assembled page blocks (header, hero, footer, card lists). The system favors whisper-soft depth: elevation is communicated with subtle, diffused drop shadows on pure-white to near-white "surface container" fills, never heavy hard shadows. Emphasis is achieved through color density (filled containers vs. transparent text buttons) and typographic scale rather than decoration.

• Buttons: Gently rounded (4–8px radius). Filled (primary/secondary/tertiary/error/success/info) with white text and a subtle darkened hover fill; Tonal using container/on-container pairs with a brightness-dipped hover; Outlined with a transparent fill, a 1px outline border, and primary text that thickens the border (2px) and darkens on hover; Text buttons with primary-colored label and a faint primary ripple on press. Sizes: small (32px min-height), medium (36px), large (44px). Focus states use a crisp 1–2px primary outline offset 2px. Icon variants center 18px Material icons; icon-only buttons are pill-shaped (999px). Disabled: opacity 0.38.

• Cards / Containers: Subtly rounded (8px radius, --eds-card-border-radius). Three variants — Elevated (pure white surface-container-lowest fill with a soft elevation-1 shadow), Filled (slightly darkened surface-container fill, borderless), and Outlined (transparent fill with a 1px outline-variant border, no shadow). Interactive cards lift to a whisper-soft elevated shadow (0 4px 8px 3px rgba(0,0,0,.15)) and scale 1.02 on hover; disabled cards fade to 0.6 opacity. Titles use primary-medium weight at 18px; content at 14px with ~1.6 line height. Padding scales by size (small/medium/large: 12/16/24px). Every card is a full-height flex column with actions right-aligned or start/center/end configurable.

• Inputs / Forms: Form fields have a default height of 48px, a 6px rounded container, and a 1px outline-variant border. Enabled border is grey (#71787E), hover darkens toward near-black, focus turns primary blue with a 2px inset ring (total 3px visual, no layout reflow), error turns red (#BA1A1A) with an equal 2px inset ring. Background is pure white (surface-container-lowest); a --fill variant uses a container tint. Labels (12px) sit above, tracking the border color (blue on focus, red on error); required fields are marked with a solid red dot (not an asterisk). Readonly fields render borderless on a faint #eaf1ff tint; disabled fields fade to 0.72 opacity. Error ! icons and clear X buttons are circular and inherit state color. Native inputs are transparent and borderless inside the field container.

• Stepper: Square, tonal counters (42px, 8px radius) — unvisited steps are grey surface-variant with primary ordinals; the active step is filled with the primary container; done steps turn green container; error steps turn the error container. A --full (strong) variant uses the fully saturated primary/green/error fills with white text. Small steps collapse to 32px circles. Steps connect with 2px tracks (grey → primary as completed).

• Chips: Rounded (8px), 32px min-height, gap: 8px, with a subtle 0.2s ease transition and active press-scale 0.98. Filled (primary/secondary/tertiary/warn container colors) and Outlined (1px border, transparent fill, tinted hover rgba(primary, 0.08)); elevated chips carry a faint 0 1px 3px shadow. Selected chips use the selected container fill or a tinted primary state; error chips use error container with red text. Trailing remove icons have circular hover/active state layers.

• Status Labels: Pill-shaped (9999px), with an optional status dot. Colored via container/on-container pairs — success (green), info (cyan), neutral (surface-variant), error (error), pending (primary), warning (orange), plus outlined (transparent with currentColor border) and elevated (soft shadow) modifiers. Sizes tiny→small→medium→large; the tiny variant is uppercase bold with wide tracking.

• Tabs: Underline/primary-indicator tabs (secondary variant) with a 2px rule; active tab is primary colored with the primary underline. Primary variant fills the active tab with a light tint. 4px border radius, 500-weight labels at 12/14/16px by size.

• Table: Dense, borderless by default with subtle row dividers; density tiers (compact 40px / standard 48px / comfortable 56px rows). Variants: striped (even rows faintly tinted), bordered (1px outline-variant borders between cells), hoverable (soft rgba(0,0,0,0.04) row hover). Header rows carry a faint rgba(0,0,0,0.04) container tint with 500-weight text; number/date columns right/center-align with tabular figures (tnum). Empty state centers a dimmed icon with muted text; loading overlays a translucent white veil.

• Toast / Snackbar: Rounded (8px), 14px text, close + action buttons. Type colors: success (#2e7d32), info (#0288d1), warning (#f57c00), error (#d32f2f) — all with white text and tinted action-button colors. Min-width 344px, max 672px (full-width below 600px). Deep multi-layer M3 elevation shadow.

• Checkbox / Radio: M3-square checkbox (18px, 3px radius) tinted primary when selected with a white checkmark; unselected border uses on-surface-variant. Hover/focus/pressed expose a 40px circular state layer at M3 opacities (0.08/0.12/0.12). Labels are body-medium (14px, 20px line-height).

• Icons: Material Symbols (Outlined/Rounded/Sharp). Sizes 16 / 24 / 32 / 48px. Interactive icons round to 4px with hover/focus/pressed state layers; disabled fades to 0.38. Variable font weight (normal/medium/bold) and fill/grade/optical-size settings supported.

• Hero: Full-width brand block on solid primary (#004b87 fallback) with a background image darkened (contrast 0.9 brightness 0.6) under a subtle black overlay. Centered bold title (up to 4rem on lg) with a thin-weight large subtitle and a row of actions. Sizes sm/md/lg (padding 2/3/6rem) and left/center/right alignment.

• Page Blocks (Header / Footer / Stats / Card-list / Page-header / Page-content): Assembly-level components that compose the primitives above into full page sections, sharing the common typography, spacing, and elevation language.

• Whitespace Strategy: A strict 4px-base spacing scale (--eds-space-*: 0, 4, 8, 12, 16, 20, 24, 32, 40, 48) and matching gap scale, with aliases xs/sm/md/lg/xl (4/8/16/24/32). Content is given room — cards use 16px internal padding baseline, page sections use 24–32px rhythm, hero blocks breathe at 3–6rem padding. Generous spacing is the primary tool for making dense government data legible.

• Grid & Containers: Fluid 12-column grid (4 columns on mobile, 8 on tablet, 12 on desktop) with gaps that widen from 16px (mobile) to 32px (large desktop). Max content width 1200px (--eds-container-max-width). Breakpoints follow Material 3: xs 0, sm 600px, md 905px, lg 1240px, xl 1440px.

• Responsive: A Tailwind-inspired utility layer (eds-*, sm:eds-* … xl:eds-*) covers display, flexbox, grid, spacing (padding/margin per side), typography, colors, borders/radii, sizing, elevation (0–5), overflow, position, z-index, opacity, and transitions — each available per breakpoint, so responsive laydowns are expressed inline.

• Elevation: Graduated 0–5 scale (--eds-elevation-*) built from soft rgba(0,0,0,…) shadows. Level 1–2 for resting cards/controls, higher levels for popovers/overlays; elevated cards and chips use level 1, toasts/menus use the deeper multi-layer M3 shadow. Elevation is reserved for signals of depth, never default decoration.

• Motion: M3 standard easing (cubic-bezier(0.2, 0, 0, 1)) with durations of 120ms (fast) / 200ms (medium) / 320ms (slow). Transitions are applied to background-color, color, box-shadow, border-color, and transform for smooth state changes. prefers-reduced-motion disables non-essential transitions; prefers-contrast: high adds explicit borders for filled/outlined controls.

• Accessibility: 40px touch targets on all interactive controls (icon buttons, checkboxes), visible 1–2px primary focus rings offset 2px everywhere, focus-visible gating, uppercase screen-reader-only utility, ::ng-deep-exposed semantic tokens for consumer override, and M3 state-layer opacity model. Disabled states uniformly render at 0.38 opacity with pointer-events: none.