Adswom

Overview

Adswom is a specialized SEO agency serving architecture and interior design firms, employing a 'Technical Minimalism' aesthetic that merges premium dark-mode sophistication with vibrant accent colors. The design system centers on a deep navy-to-charcoal gradient foundation (#0c1220 to #111827) paired with an energetic emerald-green primary (#10b981) that signals trust, growth, and forward momentum. The brand personality is authoritative yet approachable: data-driven without being cold, strategic without jargon. The UI uses frosted-glass card layers (rgba(255,255,255,0.02) with 20px blur) to create visual depth and a sense of refined clarity—as if complex SEO insights are being distilled into elegant, actionable intelligence.

The voice is conversational and results-oriented, avoiding buzzwords in favor of concrete outcomes. Example sentence in brand voice: 'Your architecture deserves to be found by clients who value it—we make sure it is.'

Colors

The color system is built on a dark, professional foundation with strategic accent deployment. Surface colors range from #0c1220 (surface-dim) through #111827 (surface-container) to #242f42 (surface-container-highest), creating a subtle depth hierarchy without harsh contrast. The primary accent, emerald green (#10b981), is reserved exclusively for interactive elements, CTAs, active states, and success indicators—it appears on 'Book A Free Call' buttons, active pyramid items, and focus rings. Secondary blue (#0693e3) supports data visualization and secondary CTAs, while tertiary orange (#ff6900) highlights warnings or premium features. All glass-morphic cards use rgba(255,255,255,0.02) background with 1px borders at rgba(255,255,255,0.06), creating a subtle luminosity without breaking the d

Typography

The type system pairs serif headlines (Playfair Display at 700 weight for display/headline-lg, 600 weight for headline-md) with geometric sans-serif body copy (Inter at 400 weight for body-lg/md, Space Grotesk at 600 weight for labels and UI text). This pairing communicates premium expertise (serif) grounded in modern clarity (sans). Display text uses -0.04em letter-spacing to create visual compression and authority; body copy uses 0em spacing for legibility. All labels employ Space Grotesk at 600 weight with 0.01em tracking to ensure UI text reads crisp and scannable at 14px. For small labels over busy backgrounds (e.g., badge text on glass cards), apply text-shadow: 0 1px 3px rgba(0,0,0,0.4) to maintain contrast without adding visual weight. Headline-md (28px, 36px line-height) is used f

Layout

The layout employs a 12-column grid with a fixed container max-width of 980px, centered on the viewport. Spacing follows a semantic scale: xs (4px) for micro-adjustments, sm (12px) for component padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The 'gutter' token (24px) is used consistently for horizontal padding on full-width sections, ensuring content never touches viewport edges. White-space is generous—sections are separated by lg spacing (40px) to create visual breathing room and emphasize content hierarchy. Cards and glass containers use md padding (24px) internally, with 16px gaps between stacked elements. The pyramid component uses 20px padding per item with 16px gaps, creating a compact y

Elevation & Depth

Depth is conveyed through a layered glass-morphism system rather than traditional shadows. Level 1 (Base): the background gradient (linear-gradient(160deg, #0c1220 0%, #111827 50%, #0c1220 100%)) provides the foundational energy. Level 2 (Standard Cards): backdrop-filter: blur(20px), background: rgba(255,255,255,0.02), border: 1px solid rgba(255,255,255,0.06). Level 3 (Active/Elevated): backdrop-filter: blur(20px), background: rgba(16,185,129,0.08), border: 1px solid rgba(16,185,129,0.4), box-shadow: 0 0 0 1px rgba(16,185,129,0.1), 0 8px 32px rgba(16,185,129,0.12). Hover states on cards apply

Shapes

The shape philosophy is 'Architectural Precision'—sharp, intentional, and grid-aligned. Buttons and primary interactive elements use rounded-lg (1rem / 16px) for a modern, approachable feel that avoids both harsh rectangles and over-rounded softness. Cards and glass containers use rounded-lg (16px) to match button language and create visual cohesion. Input fields use rounded-DEFAULT (0.5rem / 8px) for a more utilitarian, data-entry appearance. Badges and accent elements use rounded-full (9999px) to signal secondary, non-critical information. The pyramid component uses 16px border-radius on ite

Components

Action Elements Buttons are the primary call-to-action mechanism. The button-primary component uses {colors.primary} (#10b981) background with {colors.on-primary} (white) text, rounded-lg (16px), and 12px 24px padding to achieve a 48px height. On hover, the background transitions to {colors.primary-container} (#059669) with a transform: translateY(-2px) and box-shadow: 0 8px 32px rgba(16,185,129,0.25), creating a subtle lift and glow. The transition property is set to all 0.3s ease, ensuring smooth state changes. Button-secondary uses a transparent background with a 1px solid {colors.primary} border, maintaining the same padding and height. On hover, it shifts to rgba(16,185,129,0.08) background while keeping the border, creating a fill-in effect. Both button variants use Space Grotesk

Do's and Don'ts

**Do**

• Do use the emerald primary (#10b981) exclusively on interactive elements and success states—never on passive surfaces or body text.
• Do apply glass-morphism layers (rgba(255,255,255,0.02) + blur(20px)) to all card containers to maintain visual cohesion and depth.
• Do pair Playfair Display headlines with Inter body copy to communicate premium expertise grounded in modern clarity.
• Do use md spacing (24px) as the default section separator and card padding—it's the rhythm of the system.
• Do apply transform: translateX(5px) and box-shadow elevation on hover to create tactile, responsive feedback without jarring color shifts.

**Don't**

• Don't use the primary green (#10b981) on backgrounds, text bodies, or non-interactive elements—reserve it for CTAs, active states, and focus indicators.
• Don't apply hard shadows (box-shadow: 0 10px 40px rgba(0,0,0,0.3)) to glass cards; instead, use the dual-layer shadow (0 0 0 1px + 0 8px 32px) for consistency.
• Don't mix serif and sans-serif at the same weight level in body copy; use Playfair Display only for headlines (h1–h3) and Space Grotesk for UI labels.
• Don't exceed rounded-lg (16px) on primary buttons or cards—larger radii (24px+) soften the 'Technical Minimalism' aesthetic and reduce perceived authority.
• Don't use on-surface text (#e8eef5) on light backgrounds or on-surface-variant (#b8c1cc) on dark surfaces; always check contrast ratios and maintain WCAG AA compliance.