JAWASO

Overview

JAWASO is an industrial water treatment infrastructure provider serving hospitals, industries, hotels, housing societies, and educational institutions across India. The brand embodies a 'Technical Confidence' aesthetic—combining deep teal (#145270) authority with vibrant yellow (#ffcf18) optimism and emerald green (#2ab96e) sustainability. The design language is corporate-professional yet approachable: clean typography (Sora headlines, Inter body), generous whitespace, and purposeful color blocking create a sense of precision and trustworthiness. The UI evokes clarity, reliability, and environmental stewardship—qualities essential to water treatment infrastructure. Users feel assured that JAWASO's systems are engineered, certified (ISO 9001, ISO 14001), and ready to deploy.

The brand voice is direct, technical, and solution-oriented. JAWASO speaks in concrete specifications and measurable outcomes: "5000 KLD water treated," "24/7 AMC support," "Installation within 1 week." Vocabulary emphasizes capability and scale ("advanced infrastructure," "certified systems," "trusted solutions"). The tone avoids hyperbole; instead, it leads with credentials and case numbers. Example sentence in JAWASO's voice: "Our RO systems deliver 5000 KLD capacity with zero-liquid-discharge compliance—installed and operational within seven days."

Colors

The JAWASO color system is anchored in three strategic roles: Primary (Deep Teal #145270) conveys institutional authority and technical competence—used on CTAs, navigation, and critical interactive elements. Secondary (Emerald Green #2ab96e) represents environmental responsibility and sustainability—deployed on success states, certifications, and positive indicators. Tertiary (Vivid Yellow #ffcf18) acts as an energetic accent for highlights, badges, and emphasis—drawing attention to key metrics and differentiators without overwhelming the interface.

Surface colors follow a light, neutral palette: backgrounds range from #ffffff (bright) through #f4f4f4 (standard surface) to #e0e0e0 (container), with supporting grays (#d2d2d2, #c8ded5) for depth. Text on light surfaces uses #333333 (on-surf

Typography

The type system pairs Sora (headlines, display) with Inter (body, labels), creating a hierarchy that balances personality with legibility. Sora's geometric warmth at 52–60px (headline-lg, display) commands attention on hero sections and key messaging; its 700 weight and -0.04em letter-spacing create visual punch without sacrificing readability. Inter at 16–18px (body-md, body-lg) with 400 weight and 24–28px line-height ensures comfortable reading of technical specifications and product descriptions. Labels use Inter at 13–14px with 500–600 weight and 0.01–0.02em letter-spacing for crisp, scannable UI text. On small labels over busy backgrounds or dark overlays, apply text-shadow: 0 2px 4px rgba(0,0,0,0.2) to maintain contrast. Headline-md (40px, 600 weight) bridges sections; title-lg (20px

Layout

JAWASO employs a fluid 12-column grid with a 1280px container max-width, adapting gracefully to mobile (100% width, 24px gutter), tablet (800–1024px), and desktop (1200–1400px). The page rhythm uses lg spacing (40px) for section separation, md spacing (24px) for component padding, and sm spacing (12px) for internal element gaps. Hero sections occupy full viewport height with a teal (#145270) gradient background; content sits in a 24px gutter with asymmetric layouts (text left, metrics right). Feature cards stack in 3-column grids on desktop, 2-column on tablet, 1-column on mobile—each card uses md padding (24px) and lg rounded corners (1rem). Whitespace is generous: 40px vertical rhythm between sections, 24px between card groups. The container-max-width of 1280px prevents content from stre

Elevation & Depth

Depth in JAWASO is achieved through a restrained shadow system and subtle color shifts rather than aggressive layering. Level 1 (Base): flat surfaces at #ffffff or #f4f4f4 with no shadow. Level 2 (Standard Card): 0 3px 8px rgba(0,0,0,0.15)—a soft, close shadow suggesting minimal lift, used on buttons, input fields, and standard cards. Level 3 (Elevated/Hover): 0 8px 24px rgba(0,0,0,0.25)—a deeper, more diffuse shadow for hovered cards, modals, and prominent CTAs. Level 4 (Success/Accent): 0 8px 28px rgba(42,185,110,0.1)—a green-tinted shadow reserved for positive states (badges, success messag

Shapes

JAWASO adopts a 'Technical Precision' shape philosophy: corners are consistently rounded but never organic. Buttons use 0.75rem (md) border-radius for a modern, approachable feel; cards and containers use 1rem (lg) for slightly more breathing room; input fields use 0.4375rem (7px) for a compact, technical appearance. The full radius (9999px) is reserved for badges, pills, and circular icon wrappers—reinforcing their role as discrete, scannable elements. This graduated approach signals hierarchy: tighter radii on functional inputs (technical, precise), looser radii on content containers (approa

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses {colors.primary} (#145270) background with white text, 11px 23px padding, 44px height, and 0.75rem border-radius; on hover, the background shifts to {colors.primary-container} (#2d5a7a) with a 0 8px 24px shadow and 200ms transition. **button-secondary** is transparent with a 1px {colors.primary} border, same padding and height; on hover, it fills with {colors.primary} and gains the same shadow. Both use {typography.label-md} (Inter, 14px, 600 weight). **button-tag** is a compact variant for product/service filters: {colors.primary-container} background, 4px 10px padding, 9999px border-radius, 1px border at rgba(42,185,110,0.3), and {typography.label-sm}. Tags respond to hover with a darker primary back

Do's and Don'ts

**Do**

• Do use {colors.primary} (#145270) exclusively for primary CTAs, navigation focus states, and critical interactive elements—never dilute it with secondary uses.
• Do pair Sora headlines (52–60px, 700 weight, -0.04em letter-spacing) with Inter body text (16–18px, 400 weight, 24–28px line-height) to maintain the technical-yet-approachable voice.
• Do apply lg spacing (40px) between major sections and md spacing (24px) within cards to create rhythm and breathing room—whitespace is a design feature.
• Do use {colors.secondary} (#2ab96e) exclusively for success states, certifications, and sustainability messaging—never on primary CTAs or navigation.
• Do transition all interactive states (hover, focus, active) over 150–200ms with ease-in-out timing to feel responsive and polished.

**Don't**

• Don't use {colors.tertiary} (#ffcf18) as a background for large text areas—it's an accent only; reserve it for badges, highlights, and small UI elements.
• Don't mix Sora and Inter weights arbitrarily; use Sora 700 for headlines, Inter 400 for body, and Inter 600 for labels to maintain hierarchy clarity.
• Don't apply shadows deeper than {elevation.lg} (0 8px 28px rgba(42,185,110,0.1)) on standard components—excessive shadow undermines the clean, technical aesthetic.
• Don't round corners tighter than 0.25rem (sm) or looser than 1.5rem (xl) on standard UI elements; this range preserves the precision-meets-approachable balance.
• Don't use near-black (#000000) or near-white (#ffffff) as primary text on colored backgrounds; always use {colors.on-surface} (#333333) or {colors.on-primary} (#ffffff) for sufficient contrast and brand consistency.