AWSMD — Design System Reference

1. Visual Theme & Atmosphere

AWSMD is a design and development agency whose site performs the same work it sells. The design is bold, high-contrast, and portfolio-forward: a white canvas interrupted by full-bleed hero sections and colorful service cards that act as product swatches. The palette mixes cool neutrals with expressive accent colors — peach-orange, soft blue, electric indigo — applied per project tile rather than globally. The result feels curated and editorial, like a magazine layout that happens to be interactive. Nothing is subtle about the hero, but the system beneath it is restrained and grid-disciplined.

2. Color Palette & Roles

Foundation

• rgb(255,255,255) — page background, nav surface
• rgb(0,0,0) — primary text throughout

Supporting surfaces

• rgb(201,208,213) — footer (cool blue-gray, desaturated)
• rgb(241,241,241) — default button background
• rgb(153,153,153) — h3 / secondary label text

Hero

• H1 renders in rgb(255,255,255) — white text on a dark/image background, full inversion zone

Service card accents (per-item, not global)

• rgb(241,174,134) — peach-orange service card
• rgb(144,166,208) — dusty blue service card

Portfolio gradient overlays

• rgb(95,140,254) — bright periwinkle gradient
• rgba(72,88,228,0.4) — indigo logo overlay at partial opacity

These accent colors exist only on card/tile elements — they never appear in the navigation, forms, or body copy. Color is editorial, not systemic.

3. Typography Rules

AWSMD uses a single typeface: Inter. The choice is pragmatic — Inter’s neutrality allows the portfolio imagery and color cards to dominate visually without typographic competition.

Scale

• 20px at medium weight for inputs is unusually large — forms feel substantial and accessible
• H3 in rgb(153,153,153) creates a clear three-level hierarchy without color
• No letter-spacing customization — Inter runs at default tracking throughout

What’s absent: No display font, no serif contrast. Typography is intentionally background-level to keep visual focus on the work itself.

4. Component Stylings

Buttons

• Default: rgb(241,241,241) fill — a light gray that reads as neutral/secondary
• No rounded corners on Fancybox buttons (--f-button-border-radius: 0) — the lightbox UI is deliberately rectangular
• --f-button-hover-bg: #e0e0e0, --f-button-active-bg: #d0d0d0 — darkening steps on hover/active

Swiper / lightbox system

• Theme color: #007aff (Apple blue) — a Swiper default that was not overridden; notable as the only bright hue in the entire system

Service cards

• Full-bleed colored backgrounds replace typical card borders
• Black text on colored backgrounds maintains legibility

5. Layout Principles

The site is structured around distinct full-width sections — hero, services grid, portfolio tiles — that each establish their own visual context. The nav sits transparent over the hero, which is why H1 appears white against a dark background. The footer is a distinct surface color (cool gray), not a continuation of the white page. No explicit grid token is defined in custom properties; layout is handled through standard CSS grid/flex utilities. Swiper is used for portfolio carousels, suggesting content-heavy sections scroll horizontally.

6. Depth & Elevation

Minimal elevation system. No persistent box-shadow on surface components. Depth comes from background-color contrast between sections (white body → colored card → dark hero) rather than shadows or blurs. The lightbox library (Fancybox) uses its own shadow conventions; those are third-party and isolated.

7. Do’s and Don’ts

Do:

• Reserve accent colors (peach, blue, indigo) exclusively for portfolio/service cards
• Keep navigation, body, and forms in the black/white/neutral range
• Use full-bleed section backgrounds as the primary layout separator
• Apply color-per-card as an editorial system — each card gets one accent, never shared

Don’t:

• Override the Swiper #007aff without replacing it consistently across the lightbox
• Apply border-radius to lightbox/media buttons — sharp edges are intentional
• Use color in typographic elements — headings and labels stay in neutral grays
• Crowd the color palette — the controlled use of 2-3 accent tones per section is what makes them feel premium

8. Responsive Behavior

No breakpoints are surfaced in the extracted custom properties, suggesting Tailwind utility breakpoints handle all responsive logic. The Swiper component enables touch-based carousel navigation at mobile sizes, which is likely the primary content interaction on small viewports.

9. Agent Prompt Guide

Build a UI that matches AWSMD’s design language.

White canvas, black text, no border-radius on UI controls. Use Inter at standard weight — do not customize letter-spacing. Reserve all accent color (peach rgb(241,174,134), dusty blue rgb(144,166,208), periwinkle rgb(95,140,254)) for portfolio or service card backgrounds only. The footer is a distinct cool-gray surface rgb(201,208,213). Hero sections fully invert: dark background, white text. Buttons are light gray and rectangular. Keep typography background-level — let imagery and color cards carry the visual weight.

Generated by Sparkbites — extracted from live CSS analysis