# Holen design system

Holen is a private downloader with a disciplined Bauhaus / functional-brutalist visual language. The interface should feel direct, geometric, warm, and useful—not glossy, rounded, or dashboard-generic.

## Design principles

- **Function first.** Every visual element should clarify downloading, queue state, account access, or local Android availability.
- **Geometric confidence.** Use hard edges, strong borders, simple shapes, and offset shadows.
- **Warm utility.** The cream background and paper-like surfaces keep the tool approachable while black borders provide structure.
- **Accent with intent.** Red signals attention, blue signals product/navigation, yellow signals action, and green signals success/local performance.
- **Readable hierarchy.** Display type is reserved for major headings; body copy and utility labels should stay calm and compact.

## Typography

Fonts are loaded from Google Fonts:

| Role | Font | Usage |
| --- | --- | --- |
| Display | `Syne` 700/800 | Main headings, uppercase labels, buttons, status badges, brand moments |
| Body | `DM Sans` 400–700 | Explanatory copy, form fields, metadata, utility text |

Use `var(--font-display)` and `var(--font-body)` instead of hardcoding font stacks.

Typography rules:

- Use uppercase display text sparingly for hierarchy, not for paragraphs.
- Keep body copy around 15px with a 1.55 line-height.
- Do not apply `overflow-wrap: anywhere` globally. Only long user-provided titles, URLs, and filenames may break inside a word.
- Keep buttons and short labels on one line with `white-space: nowrap`.

## Color tokens

| Token | Value | Role |
| --- | --- | --- |
| `--bg` | `#f5efe0` | Page background |
| `--ink` | `#1a1714` | Text, borders, dark surfaces |
| `--surface` | `#fffbf0` | Primary cards and panels |
| `--surface-2` | `#ece5d3` | Secondary panels and inactive controls |
| `--muted` | `#78705f` | Supporting text |
| `--red` | `#d42b20` | Attention, errors, brand accent |
| `--blue` | `#1a56a0` | Primary product/action accent |
| `--yellow` | `#f0bc1e` | Primary CTA, highlighted state |
| `--green` | `#268a5b` | Success and local Android performance |
| `--danger` | `#b8261f` | Destructive/error state |

Avoid adding gradients except where already present in the auth shell or decorative geometry. Prefer solid fills and color blocks.

## Shape, border, and elevation

- Base radius is `0px`; do not introduce rounded cards by default.
- Standard border: `3px solid var(--border)`.
- Hard shadows do not blur:
  - `var(--shadow)`: `5px 5px 0 var(--ink)`
  - `var(--shadow-sm)`: `3px 3px 0 var(--ink)`
  - `var(--shadow-xs)`: `2px 2px 0 var(--ink)`
- Interactive press states translate the element by roughly 3px and remove the shadow.
- Use circles only for the existing logo/decorative marks; use squares and rectangles for utility controls.

## Page architecture

### Signed-out landing page

`LoginPage` uses a two-column `entry-frame`:

- Light cream editorial panel on the left with brand, “Save it. Keep it.” headline, service facts, and red geometric accent.
- Dark account-access panel on the right with sign-in/create-account actions.
- The Android APK link sits beneath the account actions as a small secondary utility note. It must remain subordinate to authentication.

### Downloader page

`DownloaderPage` is centered in a responsive shell:

1. Header with Holen mark, private-node label, active job count, bandwidth usage, admin action, and account control.
2. Compact Android app notice beneath the header.
3. URL analysis card with a single primary Analyze action.
4. Preview/playlist controls when metadata is available.
5. Queue section with active, completed, failed, and downloadable job states.

The main shell uses `width: min(1180px, 100%)` with generous desktop gutters and reduced mobile padding.

## Components

### Buttons

- Primary: yellow fill, black border, black hard shadow; hover shifts to red.
- Dark: black fill, white text; hover shifts to blue.
- Outline: transparent cream control; hover becomes black with white text.
- Destructive: red fill with white text.
- Keep button labels short and action-oriented: `Analyze`, `Download`, `Queue`, `Clear`.

### Bandwidth meter

The bandwidth chip is a compact but readable header control. It should be about 250px wide on desktop, with:

- a muted `Bandwidth` label;
- used/limit values using tabular numerals;
- a 10px bordered progress track;
- remaining amount and percentage beneath it.

On mobile it may move below the primary header actions and use the available width.

### Android app availability

The APK notice is a light inline strip, not a modal or dark takeover. It uses the cream surface, a green left accent, yellow Android tile, short sentence-case copy, and a compact `Download APK` action. The signed-out page uses an even quieter utility note beneath the auth buttons.

The current latest APK is the ARM64 debug asset from the `HOLEN V3.3.1` GitHub release:

`https://github.com/YashasVM/HOLEN/releases/download/V3/HOLEN-v3.3.1-arm64-debug.apk`

### Queue cards

Queue cards use a cream surface, black border, and small hard shadow. Keep thumbnails at stable aspect ratios. Status badges are compact and color-coded. Long titles may truncate or break naturally; they must never force the page wider than the viewport.

## Responsive behavior

- At widths below 760px, the signed-out frame becomes a single column with the access panel below the editorial panel.
- At widths below 640px, the downloader header wraps cleanly, the URL form stacks, previews become vertical, and queue transfer details may hide.
- Avoid horizontal overflow at every breakpoint.
- Never solve small-screen layout by globally shrinking all typography. Stack related controls and preserve readable body text.

## Interaction and accessibility

- Use semantic buttons for actions and anchors for downloads.
- Every icon-only control needs an accessible label or title.
- Preserve visible focus states, especially on URL fields and APK links.
- Respect `prefers-reduced-motion`.
- Dismissed Android notices persist in `localStorage`; a user can still access the APK from the signed-out landing page.

## Do / don’t

| Do | Don’t |
| --- | --- |
| Use hard shadows and strong borders | Use soft blurred drop shadows |
| Keep copy short and specific | Add generic marketing filler |
| Use sentence case for supporting copy | Turn every label into oversized uppercase display text |
| Preserve the cream/ink/accent palette | Add dark-mode surfaces to light utility notices without reason |
| Wrap only long dynamic strings | Apply `overflow-wrap: anywhere` to every text element |
| Keep the APK action visible but secondary | Make the APK notice dominate the auth or downloader workflow |