HTWKR

# HTWKR — Style Reference
> Shadowed typographic canvas

**Theme:** dark

HTWKR uses a somber, monastic aesthetic with a dominant dark canvas, allowing text to surface as quiet epigraphs. The visual style feels sparse and contemplative, relying on delicate typography and a restrained palette of deep blacks and subtle grays. Content is primarily text-based, presented with ample negative space. The overall impression is one of respectful seriousness, with a focus on intellectual engagement over dynamic interaction.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Ebon | `#000000` | `--color-ebon` | Page and section backgrounds, creating a deep, uniform expanse |
| Chalk | `#ffffff` | `--color-chalk` | Primary text across all elements (body, links, other text) and for borders signaling interaction or framing. This is the luminous foreground against the deep Ebon background |
| Muted Ash | `#5f5f5f` | `--color-muted-ash` | Secondary body text and subtle borders, providing a softer contrast for less prominent information |
| Pale Stone | `#8f8f8f` | `--color-pale-stone` | Tertiary text and very faint borders, used for ancillary information or as a subtle structural cue |

## Tokens — Typography

### Canela Web — The sole typeface, used for all textual content from headings to body text and links. Its elegant serif forms and range of weights, particularly the lighter 300 and 400, contribute to the site's contemplative and refined character, ensuring that text feels legible without being stark. · `--font-canela-web`
- **Substitute:** serif
- **Weights:** 300, 400
- **Sizes:** 12px, 14px, 16px, 20px
- **Line height:** 1.00, 1.12, 1.20, 1.40, 1.60, 1.87
- **Letter spacing:** 0.0200em, 0.0240em, 0.0300em, 0.0340em, 0.0400em
- **Role:** The sole typeface, used for all textual content from headings to body text and links. Its elegant serif forms and range of weights, particularly the lighter 300 and 400, contribute to the site's contemplative and refined character, ensuring that text feels legible without being stark.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.87 | — | `--text-caption` |
| body | 14px | 1.4 | — | `--text-body` |
| body-lg | 16px | 1.6 | — | `--text-body-lg` |
| heading | 20px | 1.2 | — | `--text-heading` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 10 | 10px | `--spacing-10` |
| 14 | 14px | `--spacing-14` |
| 33 | 33px | `--spacing-33` |
| 60 | 60px | `--spacing-60` |

### Border Radius

| Element | Value |
|---------|-------|
| none | 0px |

### Layout

- **Page max-width:** 393px
- **Section gap:** 60px
- **Card padding:** 0px
- **Element gap:** 10px

## Components

### Site Title Link
**Role:** Top-level navigational link, prominent, centered.

Text in Chalk (#ffffff), Canela Web, weight 400, size 20px, letter-spacing 0.0200em. Underlined on hover with a Chalk (#ffffff) border.

### Primary Body Text
**Role:** Informational text presented centrally.

Text in Chalk (#ffffff), Canela Web, weight 400, size 16px, line-height 1.60.

### Muted Body Text
**Role:** Secondary informational text, for quieter messages.

Text in Muted Ash (#5f5f5f), Canela Web, weight 400, size 14px, line-height 1.40.

### Footer Link
**Role:** Subtle navigational or informational links in the footer.

Text in Pale Stone (#8f8f8f), Canela Web, weight 300, size 12px, line-height 1.87.

### Text Section Divider
**Role:** Visual separation between text blocks, used sparingly.

A faint border line of Chalk (#ffffff) applied as a bottom border to elements, often implicitly. Its presence is subtle but indicates distinct content zones.

## Do's and Don'ts

### Do
- Maintain the page background as solid Ebon (#000000) for all main content areas.
- Use Chalk (#ffffff) for all primary readable text, ensuring maximum contrast and legibility.
- Apply Canela Web with weights 300-400 for all typography, maintaining consistency across the site.
- Center-align all major text blocks and elements, adhering to the meditative, symmetric layout.
- Employ a fixed pageMaxWidth of 393px to contain content, creating a focused reading experience.
- Utilize Muted Ash (#5f5f5f) for secondary textual elements that require slightly less prominence than primary text.
- Incorporate Pale Stone (#8f8f8f) only for discreet, peripheral information like footer links, maintaining a subdued presence.

### Don't
- Do not introduce any vibrant or saturated colors; the palette is strictly achromatic and subtle.
- Avoid using heavy shadows or elevation; the design system favors a flat, understated aesthetic.
- Do not use multiple font families; Canela Web is the exclusive typeface for all content.
- Refrain from using any button components with background fills; all interactive elements should be text-based or outlined subtly.
- Avoid decorative imagery or large graphics; the focus should remain on typography and direct textual communication.
- Do not break the symmetrical, centered content flow with asymmetric layouts or sidebars.
- Do not use large, bold headlines; text prominence is achieved through subtle size variations and deliberate spacing, not aggressive weight.

## Imagery

The site's visual language is almost entirely UI-driven, with no prominent photography, illustrations, or complex graphics. The only 'imagery' is the textual content itself, treated with careful typography. The single product visual (a book) is presented as a realistic, isolated object on the Ebon background, serving a symbolic rather than decorative role. The background itself features a subtle, almost imperceptible texture or pattern, adding depth without distraction.

## Layout

The page adheres to a centered, constrained layout with a maximal width of 393px, creating a narrow, focused reading column. The hero features a centered main title over the dark background, with a core object (book) placed centrally. Sections are visually distinct through consistent vertical spacing (60px section gap) and minimal visual dividers. Content is primarily arranged in centered, stacked blocks of text, giving a sense of gravitas and contemplation. Navigation is highly minimal, with subtle links in the header and footer, all following the centered alignment.

## Agent Prompt Guide

Quick Color Reference:
text: #ffffff
background: #000000
border: #ffffff
accent: no distinct accent color
primary action: no distinct CTA color

Example Component Prompts:
1. Create a centered main title for a new page: text in Chalk (#ffffff), Canela Web, weight 400, size 20px, letter-spacing 0.0200em.
2. Design a primary body text block: text in Chalk (#ffffff), Canela Web, weight 400, size 16px, line-height 1.60. Ensure 60px vertical spacing from surrounding sections.
3. Implement a footer link list: each link text in Pale Stone (#8f8f8f), Canela Web, weight 300, size 12px, line-height 1.87, separated by 10px elementGap.

## Similar Brands

- **AIGA Design Archives** — Uses a similar minimalist dark aesthetic with a strong focus on elegant typography and minimal imagery.
- **The New York Times (some feature articles)** — Employs an editorial style with extensive use of serif typography on dark backgrounds for a serious, contemplative mood.
- **Are.na** — Features a quiet, almost monochrome interface where content curation and typography take precedence over decorative elements.
- **Readymag (certain minimalist templates)** — Offers layouts that prioritize centered, text-heavy designs with generous white/dark space and sophisticated serif fonts.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ebon: #000000;
  --color-chalk: #ffffff;
  --color-muted-ash: #5f5f5f;
  --color-pale-stone: #8f8f8f;

  /* Typography — Font Families */
  --font-canela-web: 'Canela Web', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.87;
  --text-body: 14px;
  --leading-body: 1.4;
  --text-body-lg: 16px;
  --leading-body-lg: 1.6;
  --text-heading: 20px;
  --leading-heading: 1.2;

  /* Typography — Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-10: 10px;
  --spacing-14: 14px;
  --spacing-33: 33px;
  --spacing-60: 60px;

  /* Layout */
  --page-max-width: 393px;
  --section-gap: 60px;
  --card-padding: 0px;
  --element-gap: 10px;

  /* Named Radii */
  --radius-none: 0px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ebon: #000000;
  --color-chalk: #ffffff;
  --color-muted-ash: #5f5f5f;
  --color-pale-stone: #8f8f8f;

  /* Typography */
  --font-canela-web: 'Canela Web', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.87;
  --text-body: 14px;
  --leading-body: 1.4;
  --text-body-lg: 16px;
  --leading-body-lg: 1.6;
  --text-heading: 20px;
  --leading-heading: 1.2;

  /* Spacing */
  --spacing-10: 10px;
  --spacing-14: 14px;
  --spacing-33: 33px;
  --spacing-60: 60px;
}
```