# Practicenext Design System

> High-contrast monochrome precision anchored by ultra-lightweight Graphik display type and sharp architectural geometry.

**Source:** https://practicenext.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Practicenext utilizes a strict monochrome palette of pure black (#000000) and white (#ffffff) to create a high-contrast, premium agency aesthetic. The typography is the primary identity driver, featuring **Graphik** at an exceptionally light weight of 200 for massive 75px hero headlines. Layouts are defined by sharp 0px border radii and thin 1px white outlines on dark surfaces. While the underlying CSS contains a broad spectrum of semantic color tokens (yellow, green, pink), the rendered brand remains strictly achromatic, using fluid, dark-blue marble textures as the sole departure from the black-and-white UI foundation.

## Signature DNA
1. **Ultra-Light Display Typography** (Graphik weight 200 used at 75px and 52px for primary headlines, creating a delicate, high-end editorial feel across all pages.)
2. **Achromatic High Contrast** (The interface relies exclusively on #000000 and #ffffff for UI elements, ensuring maximum legibility and a "digital flagship" atmosphere.)
3. **Sharp Geometry** (A dominant border-radius of 0px for buttons and containers, reinforcing a rigid, architectural structure.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Text, borders, primary surface background | 177 | 1.0 | `css_variable:--white` |
| `{colors.black}` | `#000000` | Primary surface background, text contrast | 6 | 0.6 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.primary}` | `#007bff` | Declared but not rendered in UI (decorative_only) | 1 | 0.8 | `css_variable:--primary` |
| `{colors.teal}` | `#20c997` | Declared but not rendered in UI (decorative_only) | 1 | 0.8 | `css_variable:--teal` |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `{colors.success}` | `#28a745` | Declared token `--green` |
| `{colors.error}` | `#dc3545` | Declared token `--red` |
| `{colors.warning}` | `#ffc107` | Declared token `--yellow` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|-------------|------------|
| Graphik | 200, 400, 500 | All roles (Display, Body, UI) | Inter (Light/Regular) | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display-xl}` | 75px | 90px | normal | 200 | Main Hero H1 | `h1` |
| `{text.display-lg}` | 52px | normal | normal | 200 | Section Headers | `li:nth-of-type(1)` |
| `{text.display-md}` | 40px | 60px | 4px | 400 | Decorative Display | `textpath` |
| `{text.heading-sm}` | 24px | 36px | normal | 200 | Subheaders | `p.brand-subheaderp` |
| `{text.body}` | 16px | 24px | normal | 400 | Default Body | `div.cursor` |
| `{text.subheading}` | 16px | 32px | normal | 400 | H5 Subheadings | `h5` |
| `{text.body-sm}` | 14px | 16.8px | 1px | 500 | Small Labels / H3 | `h3` |
| `{text.caption}` | 12px | 24px | normal | 400 | Links / Captions | `a.inner_link` |
| `{text.micro}` | 11px | 16.5px | normal | 400 | Tiny annotations | `span` |

### Principles
1. **Weight 200 is the signature.** All large-scale display text must use the 200 weight to maintain the brand's "light" feel.
2. **Generous Line Heights.** Body text uses 1.5x (24px on 16px) or 2x (32px on 16px) line height for maximum whitespace.
3. **Display Tracking.** 40px display text uses wide 4px letter spacing for a premium, airy effect.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 10px | 18 |
| `{space.sm}` | 12px | 18 |
| `{space.md}` | 16px | 3 |
| `{space.lg}` | 18px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Buttons, cards, containers | 159 occurrences |
| `{radius.pill}` | 50px | Circular UI elements (Menu toggle) | 6 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All surfaces | No shadows captured in source |

## Components
### Tier 1: Foundational

#### Ghost Button
**Role:** Primary and Secondary Actions
**Pages observed:** All
**Spec:** Background: transparent / Text: #ffffff / Border: 1px solid #ffffff / Radius: 0px / Padding: 10px / Typography: 12px Graphik 400
**States observed:** Default | Hover: not captured

#### Menu Toggle
**Role:** Navigation trigger
**Pages observed:** All
**Spec:** Background: transparent / Text: #ffffff / Border: 1px solid #ffffff / Radius: 50% / Padding: 0px / Typography: 16px
**States observed:** Default | Hover: not captured

### Tier 2: Patterns

#### Dark Surface Card
**Role:** Content grouping
**Pages observed:** All
**Spec:** Background: #000000 / Text: #ffffff / Border: 0px / Radius: 0px / Padding: 16px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max content width | Not captured |
| Section padding | ~100px (visual estimate from screenshot) |
| Grid | Flexbox / CSS Grid |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Hero text stacks; font-size remains large but adjusts to viewport width. |

## Imagery & decoration
Practicenext uses high-resolution, fluid textures (dark blue/black marble or liquid swirls) as background elements to provide depth without introducing UI-level color.

## Do's
- Use **Graphik weight 200** for all headlines above 24px.
- Maintain a **0px border radius** for all interactive buttons.
- Use **1px white borders** for buttons on dark backgrounds.
- Ensure all body text has at least **1.5x line-height**.
- Keep the UI strictly **monochrome** (#000000 and #ffffff).

## Don'ts
- **Wrong:** Using `--primary` (#007bff) for a button background. **Right:** Use a transparent background with a white border. **Reason:** The brand identity is monochrome; blue is a legacy or sub-brand token only.
- Do not use rounded corners (e.g., 4px or 8px) on buttons.
- Do not use shadows or elevation; the brand is intentionally flat.
- Do not use bold weights (700+) for display headlines.

## Similar brands
- **Minimalissimo** (Achromatic, type-heavy)
- **Hypebeast** (High-contrast monochrome, editorial feel)
- **Ssense** (Strict grid, monochrome, sans-serif focus)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --white: #ffffff;
  --black: #000000;
  --font-main: 'Graphik', sans-serif;
  --weight-display: 200;
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Generate a hero section for Practicenext using a black background, 75px Graphik weight 200 text in white, and two ghost buttons with 0px border radius."
- "Create a pricing card using a 1px white border, #000000 background, and 16px body text with 24px line height."

## Known gaps
- Hover and Active states for buttons were not captured in the automated run.
- Specific grid column widths were not explicitly defined in the evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://practicenext.com | 1440px | 2026-06-06 |
| Pricing | https://practicenext.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://practicenext.com | 390px | 2026-06-06 |