Chattertools

Overview

Chattertools is a professional web development and branding agency design system built on a foundation of clarity, accessibility, and digital confidence. The aesthetic embraces "Corporate Modernism"—a refined, grid-based approach that prioritizes information hierarchy and user trust through clean typography, purposeful color accents, and generous whitespace. The interface communicates expertise and reliability, transforming complex digital services into an intuitive, welcoming experience. The brand personality is consultative yet approachable: knowledgeable without being intimidating, strategic without being cold. Voice is direct, solution-focused, and human. Example sentence: "We've helped 500+ brands rank on page one—let's build your next success story."

Colors

The color system centers on a deep professional blue (#0c4da2) as the primary accent, used exclusively for CTAs, focus states, and key interactive elements that demand user action. This primary blue conveys trust and authority—essential for a B2B agency brand. The secondary accent (#05afec) provides a vibrant, energetic counterpoint for highlights, badges, and supporting UI elements, creating visual rhythm without overwhelming the interface. The tertiary accent (#ff6900) is reserved for alerts, warnings, and promotional highlights that require immediate attention. The surface stack uses pure white (#ffffff) as the base with carefully calibrated grays (surface-container-high: #e9ecef, surface-container: #eeeeee) for subtle depth without introducing darkness. Text on surfaces uses a near-bla

Typography

The typography system pairs Poppins (display, headlines) with Segoe UI/Roboto (body, labels) to balance personality with legibility. Poppins at 600–700 weight (28–60px) creates confident, memorable headlines that anchor page sections; body copy in Segoe UI at 400 weight (16–18px) with 24–28px line-height ensures comfortable reading at any screen size. Letter-spacing is tightened on display (-0.04em) to enhance visual impact, while body text uses +0.02em to improve clarity on screen. Labels use 600 weight at 12–14px with 0.01–0.03em tracking to distinguish interactive elements. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels (label-sm) when placed over busy backgrounds or images to maintain contrast without relying on color alone.

Layout

The layout follows a 12-column grid with a 1280px max-width container, providing flexibility for desktop and tablet while maintaining readability. Sections are separated using lg spacing (40px) for major breaks and md spacing (24px) for subsections, creating a clear visual rhythm that guides users through content. The gutter width is fixed at 24px on desktop, collapsing to 12px on mobile, ensuring consistent breathing room around content. Hero sections use full-width backgrounds with centered content containers to create impact without overwhelming the interface. Cards and components use md padding (24px) internally, with sm spacing (12px) between nested elements. Container max-width is enforced at 1280px to prevent line-length from exceeding 75 characters on body text, optimizing for read

Elevation & Depth

Depth is conveyed through a subtle shadow system that avoids darkness while maintaining clear layer separation. Level 1 (base surfaces) uses no shadow, relying on 1px borders in outline-variant (#d0d5db) for definition. Level 2 (cards, inputs) applies elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)) to indicate subtle lift. Level 3 (hovered cards, modals) uses elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)) to create distinct separation. Interactive elements transition between levels on hover/focus using a 200ms ease-out curve. Focus states add a 3px ring in primary-container (#d4e3f7) at 100% opacit

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used sparingly to maintain a professional, trustworthy aesthetic while avoiding the playfulness of fully rounded interfaces. Buttons and inputs use DEFAULT radius (0.5rem / 8px), providing a subtle softness that feels modern without appearing casual. Cards use md radius (0.75rem / 12px) to create gentle visual separation from the background. Badges and pills use full radius (9999px) to emphasize their compact, self-contained nature. The rationale: sharp corners (0px) would feel austere and cold for a service-oriented brand; excessive

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. Primary buttons use the full primary blue (#0c4da2) background with white text, 48px height, and 12px 24px padding to create a substantial, clickable target. On hover, the background darkens to #0a3d82 and the shadow elevates to md (0 3px 8px rgba(0, 0, 0, 0.15)), signaling interactivity. On active/press, an inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.2)) creates tactile feedback. Secondary buttons use a transparent background with a 2px primary-colored border and the same height/padding, allowing for multiple CTAs without visual hierarchy conflicts. Links are underlined only on hover to reduce visual noise; apply a 200ms transition on border-bottom-color to signal state change smoothl

Do's and Don'ts

**Do**

• Do use primary blue (#0c4da2) exclusively for CTAs and interactive elements that require user action—never use it for decorative or informational elements.
• Do maintain at least 40px vertical spacing between major sections to create clear visual breaks and improve scannability.
• Do apply the 200ms cubic-bezier(0.4, 0, 0.2, 1) transition to all interactive state changes (hover, focus, active) to signal responsiveness consistently.
• Do use Poppins 600–700 weight for headlines (28px+) and Segoe UI 400 weight for body text (16–18px) to maintain the professional-yet-approachable voice.
• Do include 3px focus rings in primary-container (#d4e3f7) on all interactive elements to ensure keyboard navigation is accessible and visible.

**Don't**

• Don't use the secondary accent (#05afec) for primary CTAs—reserve it for supporting highlights, badges, and secondary interactive elements only.
• Don't apply shadows darker than elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12)) as this introduces unnecessary darkness and undermines the clean, professional aesthetic.
• Don't use border-radius values larger than xl (1.5rem / 24px) on any component; excessive rounding conflicts with the corporate modernism aesthetic.
• Don't set line-height below 24px on body text (16px) or below 20px on labels (12–14px); this reduces readability and accessibility.
• Don't mix Poppins and Segoe UI weights arbitrarily—use Poppins 600+ only for headlines and Segoe UI 400–600 for body and interactive text to maintain visual hierarchy.