ui-ux-master 1.1.0

package/references/design-system-playbook.md

@@ -0,0 +1,133 @@
+# Design System Playbook
+
+Use this when creating, extending, or auditing a design system.
+
+## Purpose
+
+A design system should make good UI easier to build consistently. It is not only a component library. It includes foundations, tokens, components, patterns, content rules, accessibility rules, and governance.
+
+## Foundations
+
+### Color
+
+Define semantic roles:
+
+- Background: default, muted, inverse.
+- Surface: default, raised, overlay, selected.
+- Text: primary, secondary, muted, inverse, disabled.
+- Border: default, strong, subtle, focus.
+- Action: primary, secondary, tertiary, danger.
+- Status: success, warning, danger, info.
+
+Avoid naming tokens by appearance only, such as blue-500, in component specs. Use semantic tokens, with raw palette values beneath.
+
+### Typography
+
+Define:
+
+- Font families.
+- Type scale.
+- Line heights.
+- Weights.
+- Letter spacing if needed.
+- Usage roles: display, h1, h2, h3, body, body-sm, caption, label, code.
+
+### Spacing
+
+Use a predictable scale:
+
+0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80.
+
+Define component spacing and page layout spacing separately when needed.
+
+### Shape and Elevation
+
+Define radius roles:
+
+- none, sm, md, lg, xl, full.
+
+Define elevation roles:
+
+- none, sm, md, lg, overlay.
+
+Use elevation sparingly and consistently.
+
+### Motion
+
+Define:
+
+- fast: 120ms.
+- base: 180ms.
+- slow: 240ms.
+- standard easing.
+- enter easing.
+- exit easing.
+- reduced motion alternatives.
+
+## Component Specification Requirements
+
+For every component, document:
+
+- Purpose.
+- Anatomy.
+- Variants.
+- Sizes.
+- States.
+- Props/API if implementing.
+- Accessibility requirements.
+- Keyboard behavior.
+- Responsive behavior.
+- Content guidelines.
+- Usage examples.
+- Anti-patterns.
+
+## Minimum Component Set
+
+- Button.
+- Link.
+- Text input.
+- Textarea.
+- Select/combobox.
+- Checkbox.
+- Radio.
+- Switch.
+- Slider if needed.
+- Date/time input if needed.
+- Form field wrapper.
+- Alert/banner.
+- Toast.
+- Badge/tag.
+- Tooltip.
+- Popover.
+- Modal/dialog.
+- Drawer/sheet.
+- Tabs.
+- Accordion/disclosure.
+- Card.
+- Table/data grid.
+- Pagination.
+- Breadcrumbs.
+- Navigation/sidebar/topbar.
+- Menu/dropdown.
+- Avatar.
+- Progress/skeleton/spinner.
+- Empty state.
+
+## Governance
+
+- Prefer extending existing components before creating new ones.
+- New components require a documented need and usage examples.
+- Deprecated patterns should have migration instructions.
+- Accessibility is part of definition of done.
+- Keep tokens stable; introduce semantic aliases before broad renaming.
+
+## Design System Audit Questions
+
+- Are tokens semantic and consistently used?
+- Are components accessible by default?
+- Are states complete?
+- Are variants meaningful or excessive?
+- Are docs written for designers and developers?
+- Are examples realistic?
+- Is there a contribution process?
+- Are anti-patterns documented?

package/references/ethical-inclusive-design.md

@@ -0,0 +1,52 @@
+# Ethical, Privacy, and Inclusive Design
+
+Use this reference when design affects user trust, consent, privacy, safety, vulnerable users, money, health, identity, children, or AI-generated decisions.
+
+## Dark Pattern Checks
+
+Reject or redesign:
+
+- Hidden costs.
+- Forced continuity.
+- Confirmshaming.
+- Obstruction to cancel/delete/refund.
+- Sneaking items or permissions.
+- Fake urgency or scarcity.
+- Roach motel flows: easy to enter, hard to leave.
+- Preselected consent for nonessential tracking.
+- Manipulative visual hierarchy that hides safer choices.
+
+## Privacy UX
+
+- Explain what data is collected and why.
+- Ask for sensitive permissions only when needed.
+- Separate essential from optional consent.
+- Provide data export, correction, deletion, and preference controls when applicable.
+- Avoid collecting data simply because it may be useful later.
+- Show system status for sync, sharing, visibility, and access.
+
+## Inclusive Design
+
+- Design for permanent, temporary, situational, and cognitive disabilities.
+- Provide alternatives for motion, audio, color, drag, precise pointer, and memory-heavy tasks.
+- Avoid blaming the user in error messages.
+- Support assistive technologies and multiple input modes.
+- Consider age, language, culture, bandwidth, device quality, and stress.
+
+## AI Interface Ethics
+
+- Label AI-generated or uncertain output.
+- Provide confidence, source, or review paths when decisions matter.
+- Avoid inventing user research or factual claims.
+- Make correction, appeal, and human escalation possible in high-impact flows.
+- Guard against biased assumptions in personas, recommendations, and defaults.
+
+## High-Risk Domains
+
+For finance, health, legal, minors, employment, housing, education, safety, or identity workflows:
+
+- Require expert review.
+- Avoid irreversible actions without confirmation and recovery.
+- Use clear plain-language risk disclosure.
+- Preserve records and auditability where required.
+- Prioritize user agency over short-term conversion.

package/references/platform-guidelines.md

@@ -0,0 +1,59 @@
+# Platform Guidelines for UI/UX Agents
+
+Use platform-specific conventions instead of applying one generic web pattern everywhere.
+
+## Authoritative Sources to Check
+
+- Apple Human Interface Guidelines for iOS, iPadOS, macOS, watchOS, visionOS.
+- Material Design 3 for Android and Material web patterns.
+- Microsoft Windows app design and Fluent design guidance.
+- WAI-ARIA Authoring Practices Guide for complex web widgets.
+- W3C Mobile Accessibility for mobile web and hybrid apps.
+
+## Web App
+
+- Use semantic HTML before ARIA.
+- Support keyboard, screen readers, responsive layout, browser zoom, and reduced motion.
+- Handle 320px width, common mobile widths, tablet, desktop, and wide layouts.
+- Avoid hover-only interactions and hidden critical actions.
+- Provide URL-addressable states when useful.
+
+## iOS / Apple Platforms
+
+- Respect safe areas, native navigation patterns, sheets, tab bars, and gestures.
+- Use platform-expected controls when building native or native-like UI.
+- Prefer clarity, deference, and depth.
+- Avoid replicating Android/desktop navigation models directly.
+- Consider Dynamic Type, VoiceOver, Reduce Motion, and system appearance.
+
+## Android / Material
+
+- Follow Material navigation patterns: navigation bar, rail, drawer, top app bar as appropriate.
+- Use meaningful elevation, shape, state layers, motion, and adaptive layouts.
+- Support back behavior, touch targets, TalkBack, and system font scaling.
+
+## Windows / Desktop
+
+- Support keyboard accelerators, focus rectangles, resize behavior, menus, context menus, and high contrast.
+- Use desktop density and multi-window expectations where appropriate.
+- Respect platform conventions for dialogs, settings, notifications, and file pickers.
+
+## Kiosk / Touchscreen
+
+- Large targets, simple choices, clear recovery, timeout handling, privacy at public screens.
+- Avoid long text input. Provide visible help and cancellation.
+
+## Email UI
+
+- Assume constrained CSS and inconsistent clients.
+- Use table-compatible layouts if implementation requires broad email support.
+- Keep CTA visible, copy concise, alt text useful, and dark-mode behavior safe.
+
+## TV / Remote
+
+- Focus management is primary. Every action must work with directional controls.
+- Large type, strong contrast, clear focus state, minimal text input.
+
+## Cross-Platform Rule
+
+When adapting a product across platforms, keep the mental model, information architecture, and content consistent, but adapt navigation, controls, gestures, density, and system affordances to the platform.

package/references/service-design-journey-mapping.md

@@ -0,0 +1,39 @@
+# Service Design and Journey Mapping
+
+Use this reference when the experience spans multiple screens, teams, channels, lifecycle emails, support, fulfillment, or offline operations.
+
+## Journey Map Elements
+
+- Persona or user segment.
+- Scenario and goal.
+- Stages.
+- User actions.
+- Questions and emotions.
+- Touchpoints.
+- Pain points.
+- Opportunities.
+- Metrics.
+- Ownership.
+
+## Service Blueprint Elements
+
+- User actions.
+- Frontstage interactions.
+- Backstage processes.
+- Support systems.
+- Data dependencies.
+- Policies and constraints.
+- Failure modes.
+- Recovery paths.
+
+## Omnichannel Checks
+
+- Web, mobile, email, SMS, notifications, support, sales, billing, delivery, and cancellation tell the same story.
+- Status is consistent across channels.
+- Users can resume tasks after interruption.
+- Human handoff includes context so users do not repeat themselves.
+- Lifecycle messages are useful, timely, and opt-out compliant.
+
+## When to Use
+
+Use journey maps for user understanding and prioritization. Use service blueprints when failures depend on operations, support, data quality, fulfillment, approvals, or multiple teams.

package/references/top-100-brand-website-analysis.md

@@ -0,0 +1,302 @@
+# Top 100 Global Brand Website Analysis
+
+This reference distills recurring website design methods from 100 globally recognized brands across technology, retail, luxury, automotive, finance, entertainment, food, logistics, industrial, and consumer categories.
+
+Use this as a pattern library, not as permission to copy trademarks, logos, protected imagery, exact layouts, or proprietary assets. Agents should emulate the underlying methods: hierarchy, spacing, IA, interaction, trust signals, color logic, content strategy, and component behavior.
+
+
+## Methodology and Limitations
+
+This reference is a pattern synthesis for UI/UX inspiration, not a live audit of brand websites. Brand sites change over time. Use it to extract reusable methods such as hierarchy, spacing, flow, content structure, interaction behavior, and trust patterns. Do not present a brand-specific claim as current fact unless you verify the live site. Do not copy logos, exact trademark palettes, proprietary images, or pixel-level layouts unless the user owns the brand.
+
+## Cross-Brand Findings
+
+### Layout
+
+Top global brands consistently use six layout archetypes:
+
+1. Cinematic product hero: Apple, Tesla, Mercedes-Benz, Porsche, PlayStation.
+2. Utility/search-first: Amazon, Booking, FedEx, UPS, DHL, Walmart, IKEA.
+3. Editorial campaign: Nike, Louis Vuitton, Chanel, Gucci, Red Bull, Coca-Cola.
+4. Enterprise solution hub: Microsoft, Cisco, Oracle, SAP, IBM, Siemens.
+5. Card-based discovery: Airbnb, YouTube, Spotify, Netflix, LEGO, Nintendo.
+6. Conversion-focused simple landing: Netflix, PayPal, Uber, Tesla, Adobe trials.
+
+### Usability
+
+The best sites make the primary task impossible to miss:
+
+- Buy/order/book: ecommerce, food, travel, automotive.
+- Compare/configure: automotive, electronics, fintech cards, SaaS plans.
+- Search/track: logistics, marketplaces, travel, retail.
+- Explore/discover: entertainment, fashion, luxury, media.
+- Contact sales/request demo: enterprise software and infrastructure.
+
+### Branding
+
+Strong brand websites encode brand through signature color, typography rhythm, image style, motion personality, and copy voice. Color alone is never enough.
+
+### Color Scheme
+
+Common color strategies:
+
+- Premium minimal: black/white/neutral plus rare accent.
+- Trust utility: blue/white/gray.
+- Energy/action: red/orange/yellow accents.
+- Eco/health/growth: green/teal/blue.
+- Entertainment: dark surfaces plus vivid media.
+- Luxury: black/cream/gold/deep red/heritage colors.
+
+### UX Structure
+
+Most top brands organize around audience intent, not company org charts:
+
+- Consumer / business / developer / investor / careers.
+- Product category / use case / industry / support.
+- Search / compare / configure / buy / track / manage.
+- Inspiration / education / product / proof / conversion.
+
+### Accessibility
+
+Copy these accessibility-positive patterns:
+
+- Clear text hierarchy and whitespace.
+- Semantic navigation and predictable page structure.
+- Visible CTAs with text labels.
+- Large touch targets in mobile layouts.
+- Forms with labels and recovery-focused errors.
+- Alternative paths to hover-heavy interactions.
+- Reduced-motion fallback for cinematic designs.
+
+Use caution with:
+
+- Low-contrast luxury/editorial gray text.
+- Image-only navigation.
+- Hover-only mega menus.
+- Auto-playing video without controls.
+- Dense ecommerce pages with small targets.
+- Custom controls without keyboard support.
+
+## Brand-by-Brand Analysis Table
+
+| # | Brand | Category | Method | Color scheme | Layout/structure | UX emphasis | Reusable design method |
+|---:|---|---|---|---|---|---|---|
+| 1 | Apple | Technology | Product Cinema + Premium Restraint | white/black neutrals | full-bleed product hero, massive whitespace, cinematic scroll | clarity, aspiration, ecosystem | Use sparse hero copy, premium imagery, strong hierarchy. |
+| 2 | Microsoft | Technology | Enterprise Trust Hub | blue/white/gray | mega-nav, modular cards, product-suite routing | trust, productivity, inclusion | Use audience routing, accessible cards, practical product paths. |
+| 3 | Google | Technology | Conversion Simplicity | white + primary colors | single-task surfaces, playful illustrations, product cards | speed, friendliness | Use one-task focus, simple forms, playful microinteractions. |
+| 4 | Amazon | Ecommerce | Utility Command Center | white/black/orange/blue | search-led header, dense product grids, recommendations | speed, value, choice | Use persistent search, reviews, delivery and price clarity. |
+| 5 | Samsung | Technology | Product Cinema | black/white/blue | large campaign heroes, product tiles, comparisons | innovation, lifestyle | Use polished product cards and comparison modules. |
+| 6 | Toyota | Automotive | Utility + Trust | red/white/charcoal | model cards, offers, dealer/configurator paths | reliability, safety | Use specs, pricing, dealer CTAs, comparison. |
+| 7 | Mercedes-Benz | Luxury Automotive | Premium Restraint | black/silver/white | immersive photography, model pages, configurator | prestige, craft | Use dark cinematic surfaces and confident sparse copy. |
+| 8 | Coca-Cola | Consumer Goods | Editorial Brand World | red/white | campaign storytelling, iconic brand assets | joy, nostalgia | Use bold color blocks and emotional story sections. |
+| 9 | Nike | Sportswear | Editorial Brand World | black/white + campaign colors | high-energy hero, product drops, culture content | performance, identity | Use bold type, motion, athlete/product storytelling. |
+| 10 | BMW | Luxury Automotive | Premium Precision | black/white/blue | model selector, premium grid, configurator | engineering, control | Use precise spacing, specs, and premium contrast. |
+| 11 | McDonald’s | Food | Playful Familiarity | yellow/red/white | promotional cards, app/order/location CTAs | convenience, craving | Use bright CTAs and simple local ordering flows. |
+| 12 | Tesla | Automotive Tech | Product Cinema | white/black/red | full-screen product pages, fixed CTAs, minimal nav | future, direct purchase | Use immersive hero, minimal copy, direct CTA. |
+| 13 | Disney | Entertainment | Card Discovery | blue/white + IP colors | franchise hubs, content tiles, streaming promos | magic, family | Use rich IP imagery and safe family navigation. |
+| 14 | Louis Vuitton | Luxury Fashion | Premium Editorial | brown/cream/black/gold | editorial imagery, restrained commerce | craft, rarity | Use luxury typography, whitespace, controlled CTAs. |
+| 15 | Cisco | Enterprise Tech | Enterprise Trust Hub | blue/white/gray | solution nav, resource centers, lead paths | reliability, security | Use proof, resource depth, role/solution routing. |
+| 16 | Instagram | Social | Visual Simplicity | gradient/white/black | creator visuals, simple login/signup | expression, community | Use visual-first layouts and low-friction onboarding. |
+| 17 | Facebook | Social | Familiar Utility | blue/white/gray | login-first, account recovery, feed entry | connection, familiarity | Use predictable patterns and trust controls. |
+| 18 | Oracle | Enterprise Software | Enterprise Trust Hub | red/white/dark gray | solution mega-nav, industry pages | scale, authority | Use dense proof, sales CTAs, structured B2B IA. |
+| 19 | Intel | Semiconductors | Technical Authority | blue/white | technical hubs, specs, newsroom | performance, platform | Use specs, diagrams, benchmark proof. |
+| 20 | Adobe | Creative Software | Ecosystem Bundling | red/black + gradients | product cards, plan comparison, creative examples | creativity, pro quality | Use vivid output examples and plan clarity. |
+| 21 | Netflix | Streaming | Conversion Simplicity | black/red | dark hero, simple signup/pricing path | entertainment, ease | Use cinematic dark surfaces and direct CTA. |
+| 22 | Salesforce | Enterprise SaaS | Friendly Enterprise | blue/white/illustration | persona paths, proof, demo CTAs | growth, CRM trust | Use approachable illustrations with enterprise proof. |
+| 23 | SAP | Enterprise Software | Enterprise Trust Hub | blue/white/gradients | industry/solution navigation, content hubs | operations clarity | Use structured B2B IA and executive proof. |
+| 24 | Pepsi | Consumer Goods | Editorial Brand World | blue/black/red | immersive campaign visuals | energy, pop culture | Use bold motion, culture moments, color confidence. |
+| 25 | Mastercard | Fintech | Trust Symbol System | red/orange/black/white | consumer/business split, security content | connection, acceptance | Use iconic geometry and trust modules. |
+| 26 | Visa | Fintech | Trust Utility | blue/white/gold | audience routing, payment/security stories | security, universality | Use blue trust palette and clear segmentation. |
+| 27 | Starbucks | Food Retail | Habit + Rewards | green/cream/white | rewards/app CTAs, seasonal content | ritual, comfort | Use warm imagery and loyalty loops. |
+| 28 | IKEA | Retail Home | Inspiration-to-Product | blue/yellow/white | room inspiration, category search, product cards | affordable utility | Use inspiration modules feeding product filters. |
+| 29 | H&M | Fashion Retail | Editorial Commerce | white/black seasonal | campaign imagery, category grids | trend, affordability | Use editorial grids and simple filters. |
+| 30 | Zara | Fashion Retail | Minimal Editorial | black/white | image-dominant unconventional commerce | trend, discovery | Use large imagery but protect navigation clarity. |
+| 31 | Gucci | Luxury Fashion | Maximalist Editorial | cream/black/green/red | art-directed campaigns, refined product pages | culture, craft | Use heritage motifs and immersive editorials. |
+| 32 | Chanel | Luxury Beauty | Timeless Restraint | black/white/beige | restrained editorial, product storytelling | elegance, heritage | Use monochrome, spacing, refined typography. |
+| 33 | Hermès | Luxury Fashion | Playful Luxury | orange/cream/brown | whimsical discovery, craft stories | craft, rarity, wit | Use signature accent and refined illustration. |
+| 34 | Dior | Luxury Beauty | Couture Editorial | black/white/neutrals | campaign hero, product/editorial blend | beauty, craft | Use elegant imagery and couture pacing. |
+| 35 | Cartier | Luxury Jewelry | Ceremonial Premium | deep red/gold/cream | macro product, collection storytelling | romance, prestige | Use rich accents and close-up detail. |
+| 36 | Rolex | Luxury Watches | Heritage Cinema | green/gold/black | immersive detail storytelling | achievement, permanence | Use slow premium pacing and heritage proof. |
+| 37 | Porsche | Luxury Automotive | Product Cinema | black/white/red | model chooser, configurator, performance story | personalization, speed | Use powerful imagery and spec-driven CTAs. |
+| 38 | Audi | Luxury Automotive | Premium Precision | black/white/red | clean model pages, technology stories | progressive engineering | Use precise grid and sober premium palette. |
+| 39 | Honda | Automotive | Utility + Trust | red/white/gray | vehicle cards, offers, safety/dealer CTAs | reliability, value | Use clear ownership info and comparison. |
+| 40 | Ford | Automotive | Utility Heritage | blue/white/dark | vehicle shopping, configurator, offers | capability, heritage | Use bold imagery and financing clarity. |
+| 41 | Hyundai | Automotive | Modern Value | blue/white | comparison, awards, warranty proof | safety, value | Use awards, warranty, clean modern UI. |
+| 42 | Volkswagen | Automotive | Friendly Engineering | blue/white | simple vehicle pages, ownership flows | approachable reliability | Use clean cards and transparent pricing. |
+| 43 | Nissan | Automotive | Mainstream Energy | red/black/white | model cards, offers, dealer CTAs | value, availability | Use offer modules and clear next steps. |
+| 44 | FedEx | Logistics | Utility Command Center | purple/orange/white | tracking-first, task cards | speed, control | Put tracking/search as primary page action. |
+| 45 | UPS | Logistics | Utility Trust | brown/gold/white | tracking/shipping front and center | dependability | Use status visibility and task utilities. |
+| 46 | DHL | Logistics | High-Energy Utility | yellow/red | tracking, shipping, business service nav | speed, reach | Use high-contrast task cards and global routing. |
+| 47 | Walmart | Retail | Search Commerce | blue/yellow/white | search-led ecommerce, deals, departments | value, convenience | Use price/deal hierarchy and pickup/delivery info. |
+| 48 | Target | Retail | Curated Utility | red/white | clean product grids, deals, pickup | style plus value | Use red brand cues and simple category paths. |
+| 49 | Costco | Retail | Membership Utility | blue/red/white | dense deals, membership commerce | bulk value | Use straightforward density and membership clarity. |
+| 50 | Airbnb | Travel Marketplace | Card Discovery | white/black/coral | search-first, map/list, filters | belonging, trust | Use cards, filters, save, map/list switching. |
+| 51 | Uber | Mobility | Conversion Simplicity | black/white | rider/driver/business split, app CTAs | speed, access | Use stark monochrome and direct action modules. |
+| 52 | Booking.com | Travel | Utility Command Center | blue/yellow/white | dominant search, dense listings, deal badges | choice, availability | Use comparison density with ethical urgency. |
+| 53 | Expedia | Travel | Trip Planner Utility | blue/white | tabbed search, bundles, rewards | planning, savings | Use trip-type tabs and bundle benefits. |
+| 54 | PayPal | Fintech | Trust Conversion | blue/white | consumer/business split, security reassurance | secure simplicity | Use simple paths and trust copy near CTAs. |
+| 55 | American Express | Fintech | Premium Utility | blue/white | card comparison, benefits, account paths | status, rewards | Use benefit tables and premium reassurance. |
+| 56 | Goldman Sachs | Finance | Institutional Editorial | navy/white/gold | research/editorial, corporate hierarchy | expertise, stability | Use sober typography and thought leadership. |
+| 57 | JPMorgan Chase | Finance | Trust Segmentation | blue/white | audience routing, services, insights | scale, security | Use clear segmentation and trust-heavy messaging. |
+| 58 | HSBC | Finance | Global Trust | red/white/black | country/product routing, corporate content | global reach | Use geographic routing and conservative layout. |
+| 59 | Bank of America | Finance | Task Utility | red/blue/white | login, product cards, financial guidance | security, progress | Use calculators, guidance, account utilities. |
+| 60 | Citi | Finance | Financial Utility | blue/red/white | account/product paths, card offers | access, rewards | Use account entry and comparison tables. |
+| 61 | LinkedIn | Professional Network | Professional Utility | blue/white | signup/login, jobs/profile ecosystem | opportunity, credibility | Use professional tone and profile/job CTAs. |
+| 62 | TikTok | Entertainment Social | Video-First Energy | black/white/cyan/red | video surfaces, creator/business paths | culture, reach | Use motion/video and creator proof. |
+| 63 | YouTube | Video Platform | Card Discovery | white/dark/red | search/feed/subscriptions, thumbnails | discovery, creators | Use thumbnail grids and strong media controls. |
+| 64 | Spotify | Audio | Personalized Dark Discovery | black/green/vibrant art | dark UI, playlist cards, album art | mood, identity | Use dark surfaces and vivid media cards. |
+| 65 | Sony | Electronics Entertainment | Product Ecosystem | black/white/blue | product/media ecosystem pages | quality, entertainment | Use product imagery and cross-ecosystem links. |
+| 66 | LG | Electronics | Lifestyle Product Grid | white/black/magenta | category cards, lifestyle imagery | home innovation | Use lifestyle context plus product filtering. |
+| 67 | Huawei | Technology | Audience Segmentation | red/white/gray | consumer/enterprise split, news hubs | connectivity, innovation | Use segmentation and technology narratives. |
+| 68 | Xiaomi | Technology | Value Product Grid | white/orange/black | product cards, launch offers | innovation for value | Use clean tiles and price/spec clarity. |
+| 69 | Lenovo | Technology Commerce | Catalog Utility | red/black/white | product catalog, deals, filters | productivity, value | Use filters, comparison, deal hierarchy. |
+| 70 | Dell | Technology Commerce | Configurator Utility | blue/white/gray | product categories, configurators, support | reliability, productivity | Use configure/support paths. |
+| 71 | HP | Technology | Audience Product Grid | blue/white | printer/PC segmentation, product cards | work, creativity | Use device/audience segmentation. |
+| 72 | IBM | Enterprise Technology | Technical Authority | blue/white/black | rigorous grid, research, solution hubs | AI/infrastructure trust | Use accessible grid and technical clarity. |
+| 73 | NVIDIA | AI Semiconductors | Technical Authority | black/green/white | dark technical storytelling, developer paths | performance, AI leadership | Use green accents, diagrams, benchmark proof. |
+| 74 | AMD | Semiconductors | Performance Technical | black/red/white | product and benchmark pages | gaming/pro performance | Use specs, comparisons, high-energy accents. |
+| 75 | Qualcomm | Semiconductors | Use-Case Technical | blue/white | technology stories, industry use cases | connectivity, intelligence | Use use-case diagrams and platform proof. |
+| 76 | Siemens | Industrial Tech | Enterprise Trust Hub | teal/white/dark | industry solutions, technical content | engineering reliability | Use system diagrams and sober enterprise IA. |
+| 77 | GE | Industrial Healthcare | Corporate Segmentation | blue/white | business-unit routing, stories, careers | engineering scale | Use clear corporate segmentation. |
+| 78 | Philips | Health Tech | Calm Trust | blue/white | consumer/pro split, product support | care, reliability | Use healthcare calm palette and support paths. |
+| 79 | 3M | Science/Industrial | Search Utility | red/white | product/industry search, application examples | applied science | Use search-first IA and application proof. |
+| 80 | Nestlé | Food Portfolio | Corporate Trust | blue/white + food imagery | brand portfolio, responsibility stories | nutrition, family | Use portfolio grids and responsibility sections. |
+| 81 | L’Oréal | Beauty | Premium Portfolio | black/white/gold | brand portfolio, campaign/editorial | beauty, science | Use premium imagery and brand routing. |
+| 82 | Unilever | Consumer Goods | Purpose Portfolio | blue/white | brand grid, sustainability stories | responsibility, everyday life | Use purpose plus product ecosystem. |
+| 83 | P&G | Consumer Goods | Household Trust | blue/white | brand portfolio, corporate responsibility | family, trust | Use simple corporate IA and impact proof. |
+| 84 | Gillette | Grooming | Product Education | blue/black/white | benefits, routine guidance, shop paths | precision, confidence | Use benefit cards and routine guidance. |
+| 85 | Colgate | Oral Care | Educational Trust | red/white/blue | education content, product finder | health, family care | Use approachable healthcare education. |
+| 86 | Nespresso | Premium Beverage | Premium Commerce | black/cream/gold | ecommerce plus lifestyle ritual | taste, sustainability | Use premium cards and reorder/subscription flows. |
+| 87 | KFC | Food | Bold Order Utility | red/white/black | menu/order/location CTAs | craving, speed | Use bold promo modules and order-first CTAs. |
+| 88 | Domino’s | Food Delivery | Tracking Utility | blue/red/white | order tracker, deals, menu builder | speed, control | Use progress tracking and repeat-order shortcuts. |
+| 89 | Burger King | Food | Playful Retro | orange/red/brown/cream | bold typography, menu/order flows | taste, nostalgia | Use retro playful style with simple ordering. |
+| 90 | Adidas | Sportswear | Monochrome Performance | black/white | product grids, campaign pages | performance, culture | Use bold monochrome and product imagery. |
+| 91 | Puma | Sportswear | Energetic Commerce | black/white/red | campaign imagery, category commerce | speed, youth | Use energetic modules and clean ecommerce. |
+| 92 | LEGO | Toys | Playful Discovery | yellow/red/colorful | sets, themes, age filters | creativity, family | Use age/theme filters and safe playful UI. |
+| 93 | Nintendo | Gaming | Playful Familiarity | red/white/bright | game cards, character worlds, store/support | fun, family | Use joyful cards and simple copy. |
+| 94 | PlayStation | Gaming | Cinematic Discovery | blue/black/white | game/media cards, console ecosystem | immersion, power | Use dark cinematic media grids. |
+| 95 | Xbox | Gaming | Ecosystem Bundling | green/black/white | Game Pass, console, cloud paths | access, value | Use subscription clarity and game cards. |
+| 96 | Red Bull | Beverage Media | Editorial Energy | blue/silver/red/yellow | media magazine, events, athletes | adventure, culture | Use kinetic imagery and editorial grids. |
+| 97 | Heineken | Beverage | Premium Social | green/red/white | campaign storytelling, responsibility | refreshment, quality | Use premium green brand world. |
+| 98 | Budweiser | Beverage | Heritage Campaign | red/white/gold | campaign/story content, age gate | heritage, celebration | Use bold heritage blocks. |
+| 99 | Shell | Energy | Corporate Trust | yellow/red/white | corporate nav, energy transition | scale, reliability | Use sustainability and segmentation. |
+| 100 | BP | Energy | Corporate Transition | green/yellow/white | corporate storytelling, investor/careers | transition, responsibility | Use clean corporate IA and transition narratives. |
+
+## Reusable Top-Brand Design Methods
+
+### 1. Product Cinema Method
+
+Best for premium products, hardware, AI products, automotive, luxury, creator tools.
+
+- Use one dominant full-width hero.
+- Put product or outcome imagery first.
+- Keep copy short: eyebrow, strong H1, one proof/value sentence, 1-2 CTAs.
+- Let scroll reveal details: benefits, specs, ecosystem, proof, CTA.
+- Use high contrast and strong negative space.
+- Add motion only to clarify or dramatize, never to block task completion.
+
+### 2. Utility Command Center Method
+
+Best for ecommerce, logistics, booking, dashboards, admin tools.
+
+- Put the primary utility at the top: search, track, book, order, filter.
+- Use persistent navigation and clear categories.
+- Provide dense but organized cards/tables.
+- Show price/status/availability/delivery early.
+- Make sorting, filtering, comparison, and recovery obvious.
+- Prioritize speed, clarity, and information scent over decorative visuals.
+
+### 3. Editorial Brand World Method
+
+Best for fashion, luxury, sportswear, beverage, entertainment campaigns.
+
+- Lead with a story or campaign world.
+- Use photography/art direction as the main brand asset.
+- Keep UI chrome minimal but preserve usability.
+- Use collections, stories, culture, people, and moments.
+- Balance immersion with clear product/shop paths.
+- Use restrained CTAs that do not cheapen premium perception.
+
+### 4. Enterprise Trust Hub Method
+
+Best for B2B SaaS, infrastructure, finance, healthcare, industrial.
+
+- Route users by role, industry, solution, or business size.
+- Use proof blocks: logos, metrics, case studies, compliance, security.
+- Explain complex products through diagrams, cards, and progressive disclosure.
+- Provide demo/contact sales CTAs while preserving self-serve research paths.
+- Use conservative color and strong information architecture.
+- Make resources, docs, pricing, support, and security easy to find.
+
+### 5. Card-Based Discovery Method
+
+Best for marketplaces, media, travel, content libraries, product catalogs.
+
+- Use cards as repeatable discovery units.
+- Make each card scannable: image, title, metadata, price/status, action.
+- Provide strong filters and sort controls.
+- Support save/favorite/compare/recently viewed.
+- Use responsive grids that become readable mobile lists/cards.
+- Avoid hiding critical metadata until hover.
+
+### 6. Conversion Simplicity Method
+
+Best for subscription products, fintech signup, apps, trials, waitlists.
+
+- One clear promise above the fold.
+- One primary CTA repeated at natural decision points.
+- Reduce navigation to essentials.
+- Address objections immediately: pricing, cancellation, security, compatibility.
+- Show social proof near claims.
+- Make forms short and explain sensitive data requests.
+
+### 7. Ecosystem Bundling Method
+
+Best for brands with many products: Microsoft, Adobe, Apple, Google, Sony, Xbox.
+
+- Start from user goal, not product org chart.
+- Show product relationships and bundles clearly.
+- Use comparison tables and recommendation cards.
+- Provide account/subscription continuity.
+- Keep cross-sells helpful and contextual.
+
+### 8. Premium Restraint Method
+
+Best for luxury, finance, high-end B2B, premium services.
+
+- Reduce visual noise.
+- Use fewer colors and more whitespace.
+- Prefer high-quality imagery, elegant typography, and subtle motion.
+- Avoid discount-style urgency unless truly brand-appropriate.
+- Let trust, craft, heritage, or expertise carry the design.
+
+### 9. Playful Familiarity Method
+
+Best for food, toys, consumer apps, family brands.
+
+- Use recognizable brand assets and friendly copy.
+- Make CTAs direct and low-friction.
+- Use color blocks, character/product imagery, and simple cards.
+- Keep navigation obvious for broad audiences.
+- Avoid cleverness that slows ordering, finding, or buying.
+
+### 10. Technical Authority Method
+
+Best for AI, developer tools, semiconductors, infrastructure, industrial.
+
+- Use diagrams, specs, code snippets, benchmarks, architecture blocks.
+- Keep layout precise and grid-based.
+- Provide docs, API, pricing, security, and examples quickly.
+- Use dark/technical surfaces only if contrast remains strong.
+- Pair technical depth with plain-language summaries.
+
+## Agent Usage Rules
+
+When generating a frontend inspired by top brands:
+
+1. Pick the category and method first.
+2. Do not copy a single brand exactly. Blend 2-3 compatible methods.
+3. Convert brand observations into tokens, layout rules, component specs, and interaction patterns.
+4. Preserve accessibility even when emulating luxury/editorial/minimal styles.
+5. Always include mobile, loading, empty, error, and focus states.
+6. Use original names, copy, colors, and assets unless the user owns the brand.