UMS Water

Overview

UMS Water is a utility infrastructure solutions provider that combines industrial precision with modern digital clarity. The brand serves utility companies, municipalities, and infrastructure operators seeking tailored metering, lighting, and technical services. The aesthetic is 'Technical Professionalism'—a design language that balances the authority of industrial infrastructure with the accessibility of contemporary web design. The UI evokes confidence, reliability, and forward-thinking innovation through a bold primary blue (#0083ca) paired with an energetic lime-green secondary (#bed73b), creating visual contrast that signals both stability and progress. The emotional response is one of competence: users feel they are engaging with experts who understand complex utility challenges and deliver measurable results.

The brand voice is direct, solution-focused, and grounded in utility-sector expertise. Vocabulary emphasizes outcomes: 'tailored solutions,' 'infrastructure journey,' 'revenue recovery,' 'workforce optimization.' The tone avoids jargon-heavy abstractions; instead, it speaks to concrete operational benefits. Example sentence in brand voice: 'Our technical services bridge your current metering infrastructure to tomorrow's smart grid—without disrupting operations.'

Colors

The color system is anchored in a primary industrial blue (#0083ca, rgb(0, 131, 202)) that dominates CTAs, navigation, and key interactive elements. This blue conveys trust, technical authority, and the utility sector's traditional associations with infrastructure and reliability. The secondary accent is a vibrant lime-green (#bed73b, rgb(190, 215, 59)) used for secondary CTAs, highlights, and status indicators—it signals innovation, growth, and forward momentum, creating dynamic contrast against the blue. The tertiary cyan (#04a9df, rgb(4, 169, 223)) provides a lighter, more approachable blue for supporting elements and backgrounds. The surface stack is anchored in pure white (#ffffff) for the main canvas, with carefully calibrated grays for depth: surface-container-low (#eeeeee) for subt

Typography

The type system employs a two-family strategy: Articulat CF (a geometric, bold sans-serif from TypeKit) for all headings and display text, and Bicyclette (a humanist serif from TypeKit) for body copy and extended reading. This pairing creates visual hierarchy through distinct character—Articulat's geometric precision conveys technical authority, while Bicyclette's warm serifs ensure body text remains approachable and readable at 16px. Display text (60px, weight 800) is reserved for hero headlines and major section breaks, commanding attention with extreme weight and generous line-height (68px). Headline-lg (40px, weight 700) anchors page sections; headline-md (28px, weight 700) introduces subsections. Body-lg (18px, weight 400, line-height 28px) is used for introductory paragraphs and call

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, ensuring content remains scannable on desktop while adapting fluidly to tablet and mobile viewports. The gutter spacing is 24px (md spacing unit), providing consistent breathing room between grid columns. Page sections are separated using lg spacing (40px) for major transitions and md spacing (24px) for subsection breaks, creating a clear visual rhythm that guides users through the content hierarchy. The white-space philosophy is 'generous but purposeful'—ample margins around content blocks prevent cognitive overload, while tight spacing within component groups (e.g., button clusters) signals functional relationships. Container max-width is enforced at 1280px to prevent line-length from exceeding 75–80 charac

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the heavy drop-shadows common in older web design. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle borders and hairline separations, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and floating elements, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals, dropdowns, and elevated overlays. Cards use md elevation by default, transitioning to lg on hover to signal interactivity. Input fields and form elements receive no shadow, relying instead on a 1px border in outline-variant (#9b9b9b) to

Shapes

The shape philosophy is 'Technical Minimalism'—rounded corners are used sparingly and purposefully to soften the industrial aesthetic without sacrificing clarity. Buttons and form inputs use a small 6px radius (DEFAULT: 0.375rem), providing just enough softness to feel contemporary while maintaining the geometric precision of the interface. Cards and containers use md radius (12px / 0.75rem) to create subtle visual distinction from the background. Modals and elevated surfaces use lg radius (16px / 1rem) to signal their prominence and separation from the page. Badges and pills use full radius (

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use the brand blue (#0083ca) background with white text, 44px height, and 8px 24px padding (rendered as 8px 24px 4px to account for text baseline). On hover, the background transitions to #0071c2 over 200ms with ease-in-out timing. On active/pressed state, the background darkens further to #0064ba. Secondary buttons use the lime-green (#bed73b) background with dark text (#333333), following the same height and padding. Ghost buttons are transparent with a 1px primary-blue border and blue text; on hover, they fill with the light blue container (#cdf3ff). All buttons use label-md typography (Metropolis, 14px, weight 700) and DEFAULT radius (6px). Focus states apply a 2px outline in primary blue with 2px offset f

Do's and Don'ts

**Do**

• Do use the primary blue (#0083ca) for all primary CTAs and interactive focus states—it is the brand's signature accent and must remain visually dominant.
• Do maintain at least 24px (md spacing) between major content sections to create visual breathing room and guide users through the page hierarchy.
• Do pair Articulat CF headings with Bicyclette body text to create clear visual distinction between structural and narrative content.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and floating elements; avoid heavy shadows that conflict with the clean, technical aesthetic.
• Do use the lime-green secondary (#bed73b) sparingly as an accent for secondary CTAs and status indicators—overuse dilutes its impact.
• Do ensure all interactive elements have clear hover states with 200ms transitions to provide confident visual feedback.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—stick to the defined surface and on-surface tokens to maintain tonal consistency.
• Don't apply border-radius greater than lg (16px) to buttons or form inputs; this softens the technical precision and conflicts with the brand's industrial clarity.
• Don't mix Metropolis with body copy; reserve it exclusively for labels, buttons, and UI text to maintain typographic hierarchy.
• Don't use the secondary green (#bed73b) as a primary CTA color—it must remain a supporting accent to avoid visual confusion with the primary blue.
• Don't apply shadows to buttons or form inputs; use color changes and borders instead to maintain visual clarity in dense layouts.
• Don't exceed lg elevation (0 8px 24px rgba(0, 0, 0, 0.12)) for any element except modals and full-page overlays—deeper shadows create visual clutter.