# Web Design Dev System (WDDS) A consumer-electronics catalog design system crossed with an enterprise-software product page. Pure-white canvas, one signal blue, one ink, and a single type family doing ~90% of the work. Built from a written design specification (no codebase, Figma, or decks were provided). > **Modeled on HP's public web styling.** The source spec references HP's > commercial site patterns (Electric Blue CTA, the wordmark-derived chevron > slashes, dark-navy closing slabs). **No HP logo or brand mark is shipped** — > where a mark would go, the brand renders as a plain-type wordmark (`WDDS`). > Do not reconstruct the HP logo. See ICONOGRAPHY. ## Sources - **Written spec only** — a DESIGN.md-style document supplied in the project brief. No repository, Figma URL, or slide deck was attached. All tokens, components, and screens here are derived from that prose spec. --- ## Index / Manifest Root files: - `styles.css` — global entry point (import this one file). `@import`s all tokens + fonts. - `tokens/colors.css` · `tokens/typography.css` · `tokens/spacing.css` · `tokens/fonts.css` - `readme.md` — this file · `SKILL.md` — Agent-Skill wrapper Foundation specimen cards → `guidelines/` (Colors, Type, Spacing, Brand groups). **Components** (`components/`, namespace `window.WebDesignDevSystem_cb7eaf`): - Buttons — `Button` - Cards — `Card`, `ProductCard`, `PricingTier`, `CustomerStoryCard`, `ArticleTile`, `CategoryIconCard`, `PromoStrip`, `HeroPromoCard` - Forms — `TextInput`, `Badge` - Navigation — `UtilityStrip`, `NavBar`, `NavLink`, `CategoryTab` - Signature — `ChevronDecoration`, `FaqRow`, `HelpBand`, `Footer` **UI kits** (`ui_kits/`): - `website/` — click-through of Homepage → Laptop shop → Printer plans (`index.html`) --- ## CONTENT FUNDAMENTALS **Voice: plain, commercial, second-person.** Copy addresses the reader as "you" and keeps sentences short and benefit-led. It sells across consumer, SMB, and enterprise in one breath, so the tone stays neutral and approachable rather than aspirational or technical. - **Casing:** Sentence case for headlines and body ("Meet the new lineup", "Shop these must haves"). The **only** uppercase is on button labels and small eyebrows/tags ("SHOP NOW", "SAVE $200"), which also carry 0.5–1.1px tracking. - **Person:** "you / your" for the reader; the brand is "we" in support/business contexts ("How can we help?", "when did work start getting in the way of work?"). - **Headlines** are often conversational questions ("How can we help?", "When did work start getting in the way of work?") — they invite rather than command. - **Product naming:** model name + short spec run in caption type ("Intel Core i5 · 16GB · 512GB SSD"). Prices are plain and prominent ("$899.99", "or $25/mo", "From $899.99"). - **Fine print:** legal/disclaimer copy shrinks to 11–12px, tightens to 1.3 line-height, and is the only place italics appear. - **No emoji, ever.** Iconography is line-drawn SVG (see ICONOGRAPHY). No exclamation-heavy marketing hype; superlatives are used sparingly ("thinnest, longest-lasting flagship yet"). - **Example CTAs:** "Buy now", "Shop now", "Compare", "Customize", "Learn more", "View", "See details", "Read more", "Get a printer", "Get started". --- ## VISUAL FOUNDATIONS **Color.** One chromatic action color — HP Electric Blue `--color-primary` (#024ad8) — and one ink `--color-ink` (#1a1a1a). Blue appears **at most twice per viewport**: a filled CTA plus the chevron motif, or a CTA plus a link. Surfaces are a six-mode vocabulary only: `canvas`/`paper` (white) → `cloud` (#f7f7f7) → `fog` (#e8e8e8) → `ink` (dark slab). Accents are scarce and role-locked: `bloom-coral` (#ff5050) for sale tags, the `storm` teal family for the printer-plan illustration, `bloom-deep`/`bloom-wine` for error/discount. Hierarchy is created by **switching surface or shifting to charcoal/graphite** — never by dropping ink opacity. **Type.** Single family across every surface: **Forma DJR Micro** (proprietary), substituted here with **Manrope** (see fonts note). The signature rule: **weight 500 for every display size, including the 72px hero** — the system never bumps to 600/700 at hero scale, which keeps it open and approachable. Body is 400; run-in emphasis and caption-bold carry weight (500/700) instead of italics. Display line-height is a tight 1.0; body 1.33–1.5. Button labels are the only tracked type (uppercase, 0.7px). **Spacing & layout.** 8px base with a 4px half-step. The universal rhythm constant is **80px** between major bands. Content maxes at 1366px (1160px inner container in the kit) with full-bleed section backgrounds. Card padding lands at 16 or 24px; feature/promo cards at 32px. Grid gutter is 24px desktop / 16px tablet-mobile. **Backgrounds.** Flat color bands — no gradients (the single exception is the storm-teal printer-plan hero, an illustrative backdrop). No repeating patterns, textures, or grain. Photography sits in `--radius-xl` (16px) frames with a 1px hairline; lifestyle photography goes full-bleed inside dark-navy slabs, no rounding. **Corners.** A deliberate two-tier split: **buttons/inputs stay sharp at 4px** (`--radius-md`) while **cards and photo frames are soft at 16px** (`--radius-xl`). Chevrons and full-bleed heroes are 0px; pills/tabs are 9999px. **Elevation.** Mostly flat. Depth is communicated by **color contrast** (a white card on a cloud band) rather than shadow. Exactly one working shadow — **Soft Lift** `0 2px 8px rgba(26,26,26,.08)` — on product cards and pricing tiers only. Modal `0 8px 24px rgba(26,26,26,.12)` is rare, for transient overlays. Section bands are always flat. **Borders.** 1px hairline `--color-hairline` (#e8e8e8) is the default outline; `--color-steel` (#c2c2c2) for stronger emphasis (input default, active filter). Outlined buttons use a 1px primary or ink border. **Animation.** Restrained. Short (120–160ms) ease transitions on button background/color and the FAQ chevron rotation. No bounces, no infinite loops, no decorative motion. `prefers-reduced-motion` should show end states. **Interaction states.** The spec documents only Default and Active/Pressed (hover is intentionally undocumented). Pressed primary → `--color-primary-deep`. Disabled → steel fill, white text. Active nav link draws a 2px blue baseline underline; active category tab inverts to ink fill. **Transparency & blur.** Essentially none, except low-opacity (~0.18) lifestyle photos behind the dark help band. No glassmorphism. **Imagery vibe.** Clean, bright, product-forward studio shots on white; laptops shown at ~70% of a 1:1 frame so they read as hero shots, not thumbnails. Lifestyle photography is warm and human but always secondary to the product. Testimonial avatars are 4px-rounded squares — never circular. **Signature gesture.** The **blue chevron pair** — two sharp 0-radius parallelograms echoing the wordmark's parallel slashes — flanks the homepage and laptop-hub heroes. It is a brand artifact reserved for hero bands, never inline noise. --- ## ICONOGRAPHY **No icon assets were provided in the source spec.** The system uses simple **line-drawn SVG icons** at ~1.5–1.8px stroke weight, single-color (ink on white, primary inside category cards). Icons are drawn inline in the components (category tiles, cart glyph, search magnifier, FAQ chevron) rather than pulled from an icon font or sprite. - **Style:** outline / stroked, geometric, rounded joins — matching the grotesque type. 24px is the standard glyph size; 48px for category-card icons. - **No emoji, no unicode-glyph icons, no filled/duotone icon sets.** - **Substitution flag:** because no brand icon set was supplied, the inline SVGs here are lightweight stand-ins in the correct visual language. If you have the real WDDS/HP icon library, drop the SVGs into `assets/` and swap the inline glyphs. A CDN outline set (e.g. **Lucide**, 1.5–2px stroke) is the closest drop-in match if you need breadth quickly. --- ## FONT SUBSTITUTION (action needed) **Forma DJR Micro is proprietary** (Commercial Type / Mark Caneso) and cannot be bundled. Per the spec's own guidance we ship **Manrope** (Google Fonts) at 400/500/600/700 — closest in proportion, gentler curves, no metric adjustment. To use the real face: add the `.woff2` files under `tokens/`, write the `@font-face` rules, and update `--font-sans` in `tokens/fonts.css`.