# AdaptiveShop Homepage UI Design Skill **Triggers:** Use this skill when implementing UI components, styling, frontend design, modifying CSS, creating new sections, or any visual\/interface work. **Core philosophy:** "If everything looks the same, then you see nothing." — Miguel Cardona, Figma --- ## PART 1: GRAPHIC DESIGN PRINCIPLES These 13 principles are the foundation of all visual design. Understand them before creating anything. ### 1. Alignment Alignment creates order and visual connection by arranging elements along a common edge, center, or baseline. It enhances readability and guides viewers' eyes through content. **Apply it:** Use grid systems. Every element should have a visual connection to something else on the page. Nothing should be placed arbitrarily. ### 2. Contrast Contrast creates a noticeable difference between elements to add visual interest and emphasize important information. The human eye naturally gravitates toward elements with higher contrast. **Types of contrast:** - Color (light vs dark, saturated vs muted) - Size (large vs small) - Weight (bold vs light) - Texture, shape, alignment **Apply it:** Focus on the most important details and use higher contrast to make them stand out. If two elements are different, make them VERY different. If they're the same, make them exactly the same. Avoid too much contrast—it creates visual chaos. ### 3. Balance Balance distributes visual weight to create a cohesive design. It establishes unity between elements. **Two types:** - **Symmetrical balance:** Even distribution of visual weight on each side - **Asymmetrical balance:** Elements of different weight balanced dynamically (large element on one side can balance multiple smaller elements) **Apply it:** Use grid lines as guides. Strategically use white space to prevent clutter. Step back and look at overall composition. ### 4. Hierarchy Visual hierarchy arranges and emphasizes elements in order of importance, helping viewers quickly find the most important information. **Apply it:** Place the most important information prominently. Use colors, bold fonts, size, and positioning to emphasize crucial details. Ask: "What should users see 1st, 2nd, 3rd?" ### 5. Color Color evokes emotions, communicates messages, and shapes brand perception. Colors aren't chosen at random. **Two concepts:** - **Color theory:** How colors work together based on the color wheel (complementary, analogous, etc.) - **Color psychology:** How colors influence emotions (yellow = uplifting, blue = calm, red = urgency) **Apply it:** Choose palettes that evoke the right emotions and align with brand identity. Consider accessibility—ensure colors are distinguishable for those with color vision deficiencies. ### 6. White Space (Negative Space) White space is the empty area between and around elements. It gives designs breathing room, improves readability, and prevents clutter. **Apply it:** Consider the purpose of your design. Minimal designs use more white space. When in doubt, add more space. Let content breathe. ### 7. Proportion Proportion is the size and weight of elements in relation to one another. Large objects are naturally seen as more important. **Apply it:** Use grid systems as baseline for consistent proportions. Balance heavier-weighted objects with lighter ones. The North Face logo is a good example—bold font complements the icon without overpowering it. ### 8. Repetition Repetition reuses identical or similar elements (colors, textures, shapes, patterns, fonts) throughout designs. This creates cohesion, balance, and visual rhythm. **Apply it:** Define your patterns (card style, heading style, spacing rhythm) then repeat them consistently. Design systems ensure repetition across projects. ### 9. Rhythm Rhythm creates movement, flow, and visual interest. It's similar to repetition but focuses on placement and spacing between repeated elements. **Four types:** - **Regular rhythm:** Same clear pattern and spacing - **Random rhythm:** No distinct pattern, elements placed randomly - **Flowing rhythm:** Movement using curves, lines, organic shapes - **Progressive rhythm:** Subtle changes showing gradual progression **Apply it:** Choose rhythm type that aligns with your design style. Use grids for regular rhythm; play with direction and fluid shapes for flow. ### 10. Movement Movement guides a user's eye through a design, creating a visual journey from one element to another. **Common eye-tracking patterns:** - **Z-pattern:** Eye moves in Z shape (good for simple pages) - **F-pattern:** Eye scans horizontally then down (good for text-heavy pages) - **Layer cake pattern:** Eye scans headings then content **Apply it:** Follow natural eye paths. Place important information where viewers are naturally drawn. ### 11. Emphasis Emphasis highlights the main focal point to draw viewer's attention and ensure they grasp your message quickly. **Apply it:** Use other principles (color, contrast, white space, proportion) to make your most important elements stand out. ### 12. Proximity Proximity is how objects are placed together to show their relationship. The closer elements are, the easier it is to understand their connection. **Apply it:** Group related elements together. Use white space to separate unrelated groups. Navigation buttons are placed close together because they're related. ### 13. Unity Unity ties all principles together to ensure design feels harmonious and cohesive. When designs have unity, all elements flow seamlessly. **Apply it:** Focus on consistent elements (colors, fonts, shapes). Apply proximity to group related content. Use grids for consistent spacing and alignment. --- ## PART 2: UI DESIGN PRINCIPLES "Our job as digital designers is to help users navigate to the content and features they need, to accomplish what they want to do." — Thomas Lowry, Figma ### 1. Hierarchy Designers use hierarchy to help users recognize key information at a glance. "I often compare designing a digital product to designing a book. On every page, navigational cues remind you of the title, chapter, and content section, so you never get lost." **Visual cues for hierarchy:** - **Font size and weight:** Large\/bold stands out - **Contrast:** Strategic use of contrasting colors - **Spacing:** Shows how elements are related **Apply it:** "Be intentional about what goes where on a screen, especially what users see first. Your UI content hierarchy should reflect what the user cares about most." ### 2. Progressive Disclosure Progressive disclosure guides users through multi-step processes, providing the right amount of information at each step. Too many features at once is overwhelming. "If you had to answer all that at once, that screen could look like a long form to fill out—and you might give up before you got started." **Apply it:** Break up information into digestible chunks. Give users a way to orient themselves—they should know where they are and how many steps remain. ### 3. Consistency A good interface feels familiar from the first click. Design systems create familiarity through consistent patterns—when a button looks and works the same way throughout, users focus on their tasks instead of the interface. "If one UI button is suddenly bigger, users are going to wonder why. That irregularity adds to cognitive load, creating hesitancy and confusion." **Apply it:** Keep fonts, colors, spacing, and interaction patterns consistent. Need a good rationale when deviating from established patterns. ### 4. Contrast (in UI) Use contrast strategically to draw attention to important content or features. "For a critical piece of information, you may introduce a higher, more jarring contrast to command attention." **Example:** A "delete account" button in red against white background grabs attention. Secondary actions in gray avoid confusion. ### 5. Accessibility UI designers carefully contrast colors and luminosity for users with vision impairments (affecting 1 in 4 users worldwide). **WCAG requirements:** - Provide alternative text - Use appropriate padding - Ensure compatibility with assistive technology - Provide proper keyboard navigation - Use sufficient contrast (4.5:1 minimum for text) ### 6. Proximity (in UI) Things that belong together should stay together. Users perceive elements close together as related. **Example:** Play, fast-forward, and rewind buttons are on the same row because they control video playback. The quit button lives separately to prevent accidental clicks. ### 7. Alignment (in UI) Clean lines make designs feel professional. A strong grid system establishes order and balance. Consistent alignment improves readability and predictability. --- ## PART 3: VISUAL HIERARCHY DEEP DIVE Visual hierarchy is arranging elements in order of importance to direct attention. "Done well, visual hierarchy helps people understand information intuitively." ### The 7 Visual Hierarchy Principles 1. **Alignment:** When objects are lined up, they're understood as related 2. **Color:** Specify luminance and brilliance—use palettes with good contrast 3. **Contrast:** Notably different elements close together enhance visual appeal 4. **Proximity:** Grouping or "chunking" objects shows relationship 5. **Size:** Larger = more important. Also critical for accessibility 6. **Texture:** Ascribes meaning to design; can create highlights without relying on color 7. **Time:** Screens can change, react, transform—temporal design opportunities ### Visual Hierarchy Pro Tips 1. **Know your end user and context.** "Are their users rushed, or able to peruse at leisure? Do they have a child in one hand and groceries in the other?" 2. **The medium matters.** For billboards or mobile apps, scale is most important. 3. **Question, experiment, test, iterate.** When everything looks the same, nothing stands out. Digital design thrives on iteration. 4. **A little goes a long way.** "Often, people try to do too much. Seeing what's necessary might reveal a better solution." Use white space effectively. 5. **Consider progressive disclosure.** Break information into digestible chunks across screens to prevent overwhelm. --- ## PART 4: ACCESSIBILITY & INCLUSION "Inclusivity is a design opportunity. If you aren't approaching design with intent to be as inclusive as possible, it's time to reconsider." - 15% of global population (1 billion+) have some form of impairment - Color vision deficiency affects 1 in 12 men, 1 in 200 women - 4% of global population is visually impaired ### Accessibility Principles **Don't rely on color alone.** An orange and green that appear separate to some could appear identical to individuals with protanopia vision. **Readability is critical:** - Higher contrast colors - Larger text - Shorter line length - Appropriate kerning and leading - Accessible typeface choices **Usability:** The degree to which a product is easy, intuitive, and efficient. Consider: - Size of learning curve - Number of taps\/clicks required - Reachable areas on mobile (thumb zones) ### Color Contrast Requirements (WCAG AA) ``` Primary text: 4.5:1 contrast ratio minimum Large text (18px+): 3:1 contrast ratio minimum For AdaptiveShop: Primary text: text-gray-900 Secondary text: text-gray-700 Muted text: text-gray-600 (minimum for body) NEVER use: text-gray-400 or lighter for readable text ``` --- ## PART 5: ADAPTIVESHOP BRAND AESTHETIC ### The Visual Identity AdaptiveShop has a **premium, sophisticated, understated** aesthetic. NOT a typical SaaS landing page. - **Subtle and refined** - Effects are elegant, not attention-grabbing - **Monospace-driven** - Typography gives a technical, precise feel - **Metallic\/glass effects** - Cards have subtle metallic borders, frosted backgrounds - **Muted with strategic color pops** - Mostly grayscale with brand accent colors used sparingly ### The Homepage is Your North Star **Before designing any new page, study `app\/page.tsx` and match its visual language.** ### Brand Colors **Accent Colors (Use Sparingly):** ``` Pink: #F761FF Orange: #FF9F61 Green: #9fff80 Cyan: #155e75 ``` **DO NOT USE generic Tailwind gradients:** - `from-pink-50 to-rose-50` - `from-blue-50 to-indigo-50` - `bg-emerald-500` **USE:** Grayscale backgrounds (white, gray-50) with brand colors as sparse accents. --- ## PART 5B: VISUAL ENVIRONMENT (CRITICAL) **The visual environment is just as important as the layout.** Don't just copy layout patterns—copy the entire visual world. ### WHY the Homepage Feels Premium The homepage isn't just white backgrounds with content. It has LAYERS: 1. **Base gradient** - `html` has blue-to-light gradient (#284266 → #F8F9FB) 2. **Body layer** - Frosted glass with layered gradients for depth 3. **Dot pattern** - Subtle dots create texture and visual interest 4. **Metallic cards** - Cards have gradient borders that catch light 5. **Strategic sections** - Alternating visual treatments create rhythm ### Background Classes (from globals.css) ```css \/* For full-page backgrounds with frosted effect + dots *\/ .frosted-card \/* For full-page backgrounds without dots *\/ .frosted-card-no-dots \/* For subtle dot texture overlay *\/ .dot-pattern \/* For metallic-bordered cards *\/ .card-metallic ``` ### Page Structure for Feature\/Marketing Pages ```tsx

{\/* Hero - Clean, spacious, lets brand show *\/}

{\/* Content *\/} <\/div> <\/section> {\/* Feature section - Frosted with dots *\/}

{\/* Content *\/} <\/div> <\/section> {\/* Alternating sections - Create rhythm *\/}

... <\/section> <\/div> ``` ### Page Margins (Match Homepage Exactly) ``` Horizontal padding: px-10 (40px) Max content width: max-w-[1200px] mx-auto Section vertical: py-20 (80px) Hero top padding: pt-[140px] ``` ### Purposeful Design Decisions Before adding ANY visual element, ask: 1. **WHY does the homepage use this?** (Not just WHAT) 2. **What purpose does it serve?** (Texture? Depth? Rhythm?) 3. **Does this page need the same treatment?** 4. **Will this make the page feel MORE like the brand?** The homepage uses: - Frosted backgrounds → Creates depth and premium feel - Dot patterns → Adds texture without distraction - Metallic cards → Draws attention to important info - Alternating sections → Creates visual rhythm --- ## PART 6: APPLYING PRINCIPLES TO LAYOUTS ### Before You Design, Ask: 1. **Hierarchy:** What should users see 1st, 2nd, 3rd? 2. **Proximity:** Which elements are related and should be grouped? 3. **Alignment:** What's my grid? Am I consistent? 4. **Contrast:** What needs to stand out? Is contrast clear? 5. **Repetition:** What patterns create unity? 6. **Balance:** Does the composition feel stable? 7. **White space:** Can content breathe? A little goes a long way. 8. **Movement:** How does the eye flow through the page? ### Layout Patterns (From Homepage) **Feature Item Pattern:** ``` ┌─────────────────────────────────────────┐ │ [Video\/Demo] │ Title │ │ │ Description │ │ 4:3 aspect │ • Bullet │ │ │ • Bullet │ │ │ [Number]│ └─────────────────────────────────────────┘ ``` **Row-Based List Pattern:** ``` ┌─────────────────────────────────────────┐ │ • Title Description │ ├─────────────────────────────────────────┤ │ • Title Description │ └─────────────────────────────────────────┘ ``` ### Marketing Page vs Documentation Page | Marketing Page | Documentation Page | |----------------|-------------------| | Visual hierarchy through size\/color | Uniform text hierarchy | | Generous whitespace | Dense content | | Strategic contrast guides eye | Scannable with sidebar nav | | Sections flow into each other | Sections are discrete | | Emotion and aspiration | Information and clarity | | Show, don't just tell | Tell with detail | **Feature pages should feel like marketing, not documentation.** --- ## PART 7: COMPONENT RULES ### Cards ```tsx \/\/ ✅ Use metallic cards

``` ### Buttons ```tsx ``` ### Typography ```tsx \/\/ Page titles

\/\/ Section headings

\/\/ Display numbers 1<\/span> ``` ### Backgrounds ```tsx

``` --- ## PART 8: ANTI-PATTERNS ### 1. No Generic Stock Photos Let typography and layout do the work. ### 2. No Colorful Icon Circles ```tsx \/\/ ❌ WRONG
\/\/ ✅ CORRECT ``` ### 3. No Sidebar Navigation on Marketing Pages Sidebar nav = documentation feel. ### 4. No Solid Color Hero Backgrounds Let page background show through. ### 5. No Walls of Text Break up with whitespace, visual elements, hierarchy. --- ## CHECKLIST BEFORE FINALIZING - [ ] Clear visual hierarchy (1st, 2nd, 3rd) - [ ] Related elements grouped (proximity) - [ ] Consistent alignment throughout - [ ] Contrast makes important things stand out - [ ] Patterns repeat for unity - [ ] Composition feels balanced - [ ] Generous whitespace—"a little goes a long way" - [ ] Eye flows naturally through design (movement) - [ ] Matches homepage aesthetic - [ ] Uses brand components - [ ] No anti-patterns - [ ] Meets WCAG accessibility (4.5:1 contrast) --- ## PART 9: RESPONSIVE BREAKPOINT There is ONE breakpoint: 800px. This is the only breakpoint used across the site. ### The `tablet:` Prefix Use `tablet:` (NOT `md:`) for all responsive styles: ```tsx \/\/ ✅ CORRECT - uses 800px breakpoint

\/\/ ❌ WRONG - uses Tailwind's default 768px

``` ### CSS Media Queries ```css \/* Mobile-first (default styles apply below 800px) \/ .my-element { padding: 16px; } \/ Desktop (800px and above) *\/ @media (min-width: 800px) { .my-element { padding: 40px; } } ``` ### Why 800px? - Matches iPad landscape and most tablets - Single breakpoint keeps responsive logic simple - Defined in globals.css: `--breakpoint-tablet: 800px;` --- ## REFERENCE FILES | File | Purpose | |------|---------| | `app\/page.tsx` | Homepage - THE reference for visual style | | `app\/globals.css` | All CSS classes | | `DESIGN_SYSTEM.md` | Color system, typography, components |

unknown