---
name: Pad Dotincorp
description: "A great example of a clean, accessible hardware product page that prioritizes clarity and function."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1F1F1F"
  secondary: "#333333"
  tertiary: "#FF5A2F"
  neutral: "#707070"
  bg-soft: "#F5F5F5"
  line: "rgba(229, 231, 235, 1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.5
    fontWeight: 700
    letterSpacing: "normal"
  body:
    fontFamily: humanist-sans
    fontSize: 15px
    lineHeight: 1.5
    fontWeight: 600
    letterSpacing: "normal"

rounded:
  sm: 8px
  md: 18px
  lg: 20px
  pill: 100px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A clean, professional product showcase for a tactile braille display device.

*A sleek hardware product page that feels like a clean, premium tech documentation site.*

## Colors

High contrast and clean white space to emphasize the hardware product.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1F1F1F`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Accent (`#FF5A2F`)** — uses `accent` token
- **Muted (`#707070`)** — uses `muted` token
- **Borders (`rgba(229, 231, 235, 1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

- Use humanist sans-serif for all text.
- Maintain a base size of 15px for body text.
- Use bold weights (600-700) for emphasis and headings.

## Layout

Full-width hero banner followed by a multi-column feature grid.

*Rhythm:* Consistent use of 40px and 60px gaps for major layout sections.

## Elevation & Depth

- 0px 4px 10px rgba(0, 0, 0, 0.25)
- 0px 5.87px 17.6px rgba(25, 33, 61, 0.06)
- Borders: 1px solid rgba(229, 231, 235, 1)

## Shapes

- `sm`: 8px
- `md`: 18px
- `lg`: 20px
- `pill`: 100px

## Components

- **button:** Primary buttons with high-chroma orange backgrounds and rounded corners.
- **card:** Clean cards with subtle shadows and rounded corners for features.
- **hero:** Full-width photographic hero with centered text overlay and rounded bottom corners.

## Do's and Don'ts

**Don't:**
- Don't use decorative or script fonts — screenshot shows a clean humanist sans-serif.
- Don't use a dark background as the primary canvas — screenshot shows a predominantly white background.
- Don't use a wide variety of colors — screenshot shows a strict palette of white, black, and a single orange accent.
- Don't use thin font weights for important text — screenshot shows weights of 600 and 700.
- Don't use sharp, square corners on cards and buttons — screenshot shows rounded corners (18px-20px).
- Don't use complex or busy background patterns — screenshot shows solid colors or clean photographic backgrounds.

---

## System Prompt (paste into AI agent)

```
This design is a clean, professional product showcase for an assistive technology device. It uses a high-contrast palette of white (#FFFFFF), near-black (#1F1F1F), and a single high-chroma orange accent (#FF5A2F). The typography is a humanist sans-serif at a 15px base, with bold weights (600-700) for headings and navigation. Key interactions are subtle, with 0.3s transitions on hover. Critical constraints include maintaining a predominantly white background, using rounded corners (18px-20px) for major surfaces, and avoiding decorative fonts or busy layouts.
```