# Pad Dotincorp · Design system migration spec

> Source: https://pad.dotincorp.com  ·  Curated by OpenDesign  ·  en

> A great example of a clean, accessible hardware product page that prioritizes clarity and function.

## 1. Identity DNA

This system is built for the Pad Dotincorp, a tactile braille display device that demands clarity above all else. The design language treats the screen as a clean, premium documentation site for hardware, where every element serves to make the product itself the unambiguous focus.

**One-liner:** A clean, professional product showcase for a tactile braille display device.
**Keywords:** accessibility · tactile · braille · assistive technology · hardware
**Analogy:** A sleek hardware product page that feels like a clean, premium tech documentation site.

## 2. Color

The color system is built on a foundation of high contrast, using pure white as the primary canvas. A single, high-chroma orange accent provides all interactive and promotional emphasis within this otherwise monochrome field.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--ink` | `#1F1F1F` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#707070` | placeholder |
| `--accent` | `#FF5A2F` | single accent |
| `--line` | `rgba(229, 231, 235, 1)` | divider |

**Color principle:** High contrast and clean white space to emphasize the hardware product.

The governing principle is clarity through contrast, ensuring the hardware product remains the visual priority.

## 3. Typography

Typography is set in a humanist sans-serif, chosen for its clean legibility and accessibility. Headings and key navigation use bold weights (600-700) to establish hierarchy without decorative flair.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1px | Hero titles |
| heading | 32px | 1.5 | 700 | normal | Section headings |
| body | 15px | 1.5 | 600 | normal | Main text and navigation |

**Type rules:**
- 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.

## 4. Spacing

A consistent spatial rhythm is established through major gaps of 40px and 60px, creating clear separation between content sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent use of 40px and 60px gaps for major layout sections.

## 5. Surfaces

Surfaces are defined by subtle depth and clear delineation. Components lift slightly from the white canvas with refined shadows, bounded by hairline borders for absolute clarity.

- **Radius:** sm 8px · md 18px · lg 20px · pill 100px
- **Shadows:**
  - 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)

## 6. Layout

The page structure begins with a full-width hero banner that sets the product context. This is followed by a multi-column feature grid that organizes the hardware's key attributes.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is applied with restraint, using opacity fades and transform shifts to guide attention and confirm interaction. The philosophy is to provide functional feedback that never competes with the static product presentation.

- **Durations:** micro 150ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Opacity fade for content transitions
  - Transform for hover states

- **Hover:** Subtle opacity or background color changes on interactive elements.
- **Click:** Standard pointer cursor on all interactive elements.
- **Transition:** 0.3s transition for most interactive states.
- **Keyboard:** Standard tab navigation with focus indicators.

## 8. Voice & Don'ts

The editorial voice is professional, informative, and direct, matching the tone of technical documentation. Language prioritizes clarity, focusing on the product name and its primary benefits.

- **Tone:** Professional, informative, and clear.
- **Headline style:** Direct and descriptive, focusing on the product name and its main benefit.
- **CTA style:** Clear and action-oriented, using high-contrast colors.
- **Avoid:** Informal language / Overly technical jargon without explanation / Cluttered layouts

### Don'ts
- ❌ 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.

The system deliberately avoids decorative fonts, dark primary backgrounds, and visual complexity that would obscure the hardware's purpose.

## System Prompt (paste into AI tool)

```
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.
```
