ToWaSo

Overview

ToWaSo is an environmental solutions company serving B2B and B2C markets with waste management, biogas production, and vermicompost services. The design system embodies **Purposeful Minimalism**—a clean, action-driven aesthetic that prioritizes clarity and mission focus over decoration. The brand personality is earnest, solution-oriented, and grounded in environmental responsibility. Every visual element reinforces the core message: waste is a resource waiting to be transformed. The UI voice is direct and confident, avoiding jargon while maintaining technical credibility. Example sentence: 'Segregate, compact, and optimize—we handle the rest.'

Colors

The color palette is anchored by a vibrant **Primary Red (#ee3b24)** used exclusively for call-to-action buttons, active states, and mission-critical interactions. This warm, energetic accent commands attention against the clean white background (rgb(255, 255, 255)) and neutral grays (#999999, #dddddd, #cccccc). Secondary Blue (#0275d8) supports secondary actions and informational elements, creating visual hierarchy without competing for focus. Tertiary Green (#3c763d) represents environmental commitment and is reserved for success states, badges, and sustainability-related content. The surface stack progresses from pure white (surface) through carefully calibrated grays (surface-container-lowest: #eeeeee, surface-container: #dddddd, surface-container-highest: #999999) to enable subtle dep

Typography

The type system pairs **Raleway** (headlines, body text) with **Poppins** (labels, UI controls), creating a hierarchy that balances warmth with clarity. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements. Headline-lg (40px, 600 weight) structures page sections, while headline-md (28px, 600 weight) breaks content into digestible chunks. Body-lg (18px, 400 weight, 0.02em tracking) is used for feature descriptions and marketing copy, maintaining readability at scale. Body-md (16px, 400 weight) serves as the default paragraph text. Label-md (14px, 600 weight, Poppins) is applied to button text and form labels, ensuring UI controls remain scannable. On small labels over complex backgrounds (e.g., badges on cards), apply text-shadow: 0 1px 2px rgba(0, 0, 0

Layout

The layout follows a **12-column grid system** with a max-width of 1199px, providing a fixed container that scales responsively. The gutter is consistently 24px, applied as padding within grid columns rather than margins between them, ensuring predictable spacing. Section separation uses lg spacing (40px) for major content blocks, creating clear visual rhythm. The hero carousel spans full-width with an overlay gradient (rgba(0, 0, 0, 0.3)) to ensure text legibility over background imagery. Feature cards are arranged in a 3-column layout on desktop (col-md-3), collapsing to 2 columns on tablets (col-sm-6) and 1 column on mobile (col-xs-12). White-space philosophy prioritizes breathing room: cards have md padding (24px), inputs have sm padding (12px 15px), and section margins are lg (40px).

Elevation & Depth

Depth is achieved through **Subtle Layering**—a flat-first approach with carefully calibrated shadows that suggest hierarchy without visual heaviness. Level 1 (Base): Clean white background (rgb(255, 255, 255)) with no shadow, establishing the neutral canvas. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to feature cards and form containers, creating a gentle lift. Level 3 (Elevated/Hover): box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24) on interactive elements during hover or focus states, with a subtle blue tint reflecting the secondary accent. Modals use the same

Shapes

The design system embraces **Geometric Clarity**—a balance between sharp functionality and approachable softness. Buttons use 4px border-radius (rounded.sm), providing a modern, slightly squared appearance that feels contemporary without appearing harsh. Cards and modals use 12px border-radius (rounded.md to rounded.lg), softening corners while maintaining visual structure. Form inputs use 0px border-radius (sharp corners) to signal precision and data entry. The live chat widget and floating action buttons use 99px border-radius (rounded.full) to create circular, approachable focal points. Div

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** (backgroundColor: #ee3b24, textColor: #ffffff, padding: 12px 24px, height: 48px, border-radius: 4px) is used for primary CTAs like 'Read More' and form submissions. On hover, background shifts to #d63220 with a 0.2s ease-in-out transition. **button-secondary** (#0275d8 background) supports secondary actions like 'Contact Us' or navigation links. **button-ghost** (transparent background, 1px solid #ee3b24 border) is reserved for tertiary interactions or cancel actions. All buttons use label-md typography (14px, 600 weight, Poppins) and maintain a minimum 48px height for touch accessibility.

Containers & Surfaces **card** components (backgroundColor: #ffffff, border-radius: 12px, padding: 24px, box-shado

Do's and Don'ts

**Do**

• Do use Primary Red (#ee3b24) exclusively for primary CTAs and active states—it commands attention and signals mission-critical actions.
• Do maintain 24px gutter spacing consistently across all grid columns and section padding to create predictable, scannable layouts.
• Do apply 0.3s ease-in-out transitions to all interactive elements (buttons, cards, inputs) to signal responsiveness without feeling sluggish.
• Do use Raleway for headlines and body text to maintain warmth and approachability; reserve Poppins for UI labels and controls only.
• Do layer shadows progressively (0 3px 8px for standard, 0 8px 18px for elevated) to create subtle depth without visual clutter.
• Do apply 4px border-radius to buttons and inputs, 12px to cards, and 99px to floating elements to create a graduated shape language.

**Don't**

• Don't use Primary Red for body text, backgrounds, or non-interactive elements—it must remain reserved for high-priority actions.
• Don't apply borders to cards; use shadows alone to define separation and maintain the clean, minimal aesthetic.
• Don't mix Raleway and Poppins weights arbitrarily; follow the defined hierarchy (Raleway for display/body, Poppins for labels/UI).
• Don't exceed 0.3s transition timing on interactive elements; faster feels twitchy, slower feels unresponsive.
• Don't use dark backgrounds or high-contrast overlays; the design system is light-first and relies on white space for clarity.
• Don't apply rounded corners to form inputs; sharp 0px radius signals precision and data entry, maintaining visual distinction from content containers.