---
name: "Staze Beauty"
description: "Beauty and cosmetics visual design system characterized by vibrant plum and purple brand tones, elegant product swatches, clean white surface cards, soft rose highlights, and modern geometric typography."
version: "1.0"
colors:
  primary: "#9b59b6"
  primary-strong: "#5b2f66"
  on-primary: "#ffffff"
  ink: "#1d1d1d"
  ink-strong: "#000000"
  body: "#666666"
  canvas: "#ffffff"
  surface-soft: "#fafafa"
  surface-muted: "#fcf8ff"
  hairline: "#dddddd"
  hairline-soft: "#e5e5e5"
  accent-berry: "#cf1b67"
  accent-blush: "#f4d6dc"
  accent-violet: "#ac4fc6"
  destructive: "#d6322c"
  success: "#82c341"
typography:
  heading-xl:
    fontFamily: "Poppins, sans-serif"
    fontSize: "32px"
    fontWeight: "700"
    lineHeight: "1.2"
    letterSpacing: "normal"
  heading-lg:
    fontFamily: "Poppins, sans-serif"
    fontSize: "26px"
    fontWeight: "600"
    lineHeight: "1.0"
    letterSpacing: "normal"
  heading-md:
    fontFamily: "Poppins, sans-serif"
    fontSize: "22px"
    fontWeight: "700"
    lineHeight: "1.6"
    letterSpacing: "normal"
  heading-sm:
    fontFamily: "Poppins, sans-serif"
    fontSize: "18px"
    fontWeight: "600"
    lineHeight: "1.25"
    letterSpacing: "normal"
  body-base:
    fontFamily: "Poppins, sans-serif"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "1.6"
    letterSpacing: "normal"
  body-sm:
    fontFamily: "Poppins, sans-serif"
    fontSize: "13px"
    fontWeight: "400"
    lineHeight: "1.6"
    letterSpacing: "normal"
  caption:
    fontFamily: "Poppins, sans-serif"
    fontSize: "12px"
    fontWeight: "600"
    lineHeight: "1.6"
    letterSpacing: "normal"
rounded:
  none: "0px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  pill: "24px"
  full: "50%"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  section: "80px"
  container: "1400px"
components:
  primary-button:
    background: "{colors.primary}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.xs}"
    padding: "12px 20px"
    fontWeight: "700"
  secondary-button:
    background: "{colors.primary-strong}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.sm}"
    padding: "10px 16px"
    fontWeight: "700"
  search-bar:
    border: "1px solid {colors.hairline}"
    borderRadius: "{rounded.pill}"
    padding: "8px 16px"
    color: "{colors.ink}"
  coupon-card:
    background: "{colors.canvas}"
    borderRadius: "{rounded.md}"
    border: "0px solid {colors.hairline}"
    padding: "16px"
  product-card:
    background: "{colors.accent-blush}"
    borderRadius: "{rounded.lg}"
    padding: "0px"
  swatch-button:
    borderRadius: "{rounded.full}"
    width: "38px"
    height: "38px"
    border: "1px solid {colors.hairline}"
  badge:
    background: "{colors.primary-strong}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.xs}"
    padding: "4px 8px"
  faq-accordion:
    background: "{colors.canvas}"
    borderBottom: "1px solid {colors.hairline-soft}"
    padding: "16px 0px"
source: "https://www.stazebeauty.com/products/creme-de-la-matte-01-sparkly-rose-1"
captured: "2026-10-13T13:52:03.964Z"
---

# DESIGN.md: Staze Beauty

## Source

- URL: https://www.stazebeauty.com/products/creme-de-la-matte-01-sparkly-rose-1
- Captured: 2026-10-13T13:52:03.964Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot

## Reference Screenshot

![Full-page screenshot of Staze Beauty](./screenshot.png)

## Design Summary

Staze Beauty pairs a rich, cosmetic-focused purple color scale (ranging from light orchid to deep plum) with crisp white content cards and blush-pink product callouts. Poppins typography delivers clean readability across product detail views, rating metrics, shade swatches, and coupon banners.

## Visual Language

- Deep plum (#5b2f66) and orchid purple (#9b59b6) establish brand hierarchy for key actions and highlights.
- Soft blush pink (#f4d6dc) and light purple tints (#fcf8ff) delineate secondary promo regions and review highlights.
- Circular swatches and pill-shaped search controls create an approachable, beauty-tailored aesthetic.
- Poppins sans-serif typography maintains crisp structure for high-density e-commerce layouts.

## Design Tokens

The normative colors, typography, radii, spacing, and component tokens are defined in the YAML frontmatter above.

## Spacing And Layout

- Sticky top navigation with integrated pill search bar and main category menu links.
- Split product gallery and checkout options layout with shade swatches and instant coupon carousel.
- Multi-tile promotional grid featuring high-contrast banners and step-by-step application callouts.
- Product grid featuring rounded image containers, star rating badges, and full-width 'Add to cart' actions.

## Components

- Use primary orchid purple buttons for primary conversion triggers (e.g. Add to Cart).
- Use deep plum for badges, hover states, and structural secondary controls.
- Render product shade selectors as circular button swatches with active outline borders.
- Frame promo vouchers inside rounded 12px card containers on muted pastel background sections.

## Content Style

- Benefit-driven cosmetics descriptions emphasizing finish, comfort, and wear duration.
- Concise step-by-step usage instructions (Twist, Glide, Repeat).
- Prominent review summaries featuring exact rating averages and verified buyer indicators.

## Agent Build Instructions

- Import 'Poppins' font family with weights 400, 500, 600, and 700.
- Set CSS color variables for primary (#9b59b6), primary-strong (#5b2f66), and canvas (#ffffff).
- Configure flex grids for responsive product carousels with 16px gaps.
- Implement interactive swatches with focus outline states using color variables.

## Evidence And Confidence

- Observed: Brand colors #9B59B6 and #5B2F66 explicitly defined in computed styles and HTML theme variables.
- Observed: Poppins sans-serif used consistently across headings, buttons, body text, and meta information.
- Observed: Product cards use 16px corner radius with blush rose backgrounds (rgb(244, 214, 220)).
- Observed: Search bar rendered with 24px border-radius pill styling.
- Inferred: Non-captured hover brightness shifts approximate standard 10% darkening on primary buttons.

## Rerun Inputs

- workflow: pixloop-design-md-url-analysis
- source_url: https://www.stazebeauty.com/products/creme-de-la-matte-01-sparkly-rose-1

---

Generated by Pixloop Design.md from publicly observable design evidence. Third-party trademarks and assets remain the property of their respective owners.