---
name: Hp
description: "This site is a perfect example of restrained, professional e-commerce design for consumer hardware."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#191919"
  tertiary: "#007BFF"
  neutral: "#1A1A1A"
  bg-soft: "#F7F7F9"
  bg-quiet: "#FAFAFA"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 50px
    lineHeight: 1.04
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.375
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 10px
  pill: 1000px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 40px

---

## Overview

A clean, restrained global e-commerce site for consumer and business technology.

*A premium electronics retail showroom*

## Colors

High-contrast black and white anchored by a single bright blue action color.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#191919`)** — uses `ink-soft` token
- **Accent (`#007BFF`)** — uses `accent` token
- **Muted (`#1A1A1A`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

- Primary font family is a geometric sans-serif.
- Headlines use a medium weight (500) rather than bold.
- Base font size is 16px with a 16px line height for secondary text.

## Layout

Full-width hero sections with overlapping diagonal image treatments.

*Rhythm:* Flexible gaps based on a 4px grid with explicit 16px and 24px spacers.

## Elevation & Depth

- rgba(0, 0, 0, 0) 0px 0px 10px 0px
- Borders: Minimal, mostly 1px solid black or blue outlines.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 10px
- `pill`: 1000px

## Components

- **button:** Rectangular with sharp corners (0px radius) and solid blue fills or 1px blue outlines.
- **card:** Grid-based category cards with minimal borders and generous padding.
- **chip:** Standard text or icon buttons.
- **input:** Simple text fields with bottom borders or minimal outlines.
- **hero:** Split layout with dynamic diagonal image overlaps and large typography.

## Do's and Don'ts

**Don't:**
- Don't use border-radius on primary buttons — screenshot shows sharp rectangular corners.
- Don't use multiple accent colors — screenshot shows a single dominant blue for actions.
- Don't use overly decorative fonts — screenshot shows clean geometric sans-serif typography.
- Don't add heavy drop shadows — screenshot shows minimal or transparent shadow effects.
- Don't center-align all body text — screenshot shows mostly left-aligned content.
- Don't use complex gradients — screenshot shows solid colors and photographic imagery.

---

## System Prompt (paste into AI agent)

```
This is a restrained, professional hardware and product e-commerce site. Key hex colors are #FFFFFF for background, #000000 for primary ink, and #007BFF for primary action accent. The typography is a clean geometric-sans-serif with medium-weight (500) headlines and regular-weight (400) body text. Critical design constraints include: do not use border-radius on primary buttons (they are sharp rectangles), do not introduce multiple competing accent colors, and do not use heavy drop shadows or overly decorative typography. The layout relies on high-contrast black and white with large photographic hero sections.
```