# HempRoster design system

HempRoster is the hemp industry's directory, by HempAware: every grower, processor, manufacturer, brand, retailer, lab, distributor and service company on one roster. The idea is a Rolodex crossed with a sports team roster. Each company is a Player on a card, sorted by Position and Home Team. Tagline: **Different fields. Same team.**

## Content fundamentals

**Voice: playful frame, serious facts.** Sports words go in headings, buttons and card fronts. Card backs, tables, forms and legal copy use plain words.

| Say | Not |
| --- | --- |
| Get on the roster. Free. | Unlock your potential in the hemp ecosystem. |
| Grower registration, Colorado Dept. of Agriculture. Active. | This MVP grower is crushing it this season! |
| You may already have a card. Claim it. | Claim your FREE premium listing today!!! |

**Vocabulary.** Use the roster words consistently.

| Instead of | We say | Where |
| --- | --- | --- |
| Listing | Player Card | Every company page |
| Listing ID | Jersey number | Cards, badge, outreach |
| Category | Position | Nav, filters, tabs |
| State page | Home Team | State and country pages |
| Claim listing | Suit up | Join flow, card backs |
| Sign up | Join the Team | Calls to action |
| Featured | Starting Lineup | Paid placement, always labeled |
| New listings | Rookie Class | Home and Position pages |
| Verified | Verified Player | Card seal, filters |

**Rules**
- No em dashes anywhere. Use periods and commas.
- Hemp-wide, never CBD-led. THCA wholesale is one category page, not the brand.
- Short, direct sentences. No exclamation marks, no hype words, no capitalized FREE.
- Jersey numbers are always four digits with a hash in running text: card #0427.
- Write HempRoster as one word with a capital R. The wordmark sets it as HEMPROSTER.
- Keep the by HempAware line with the full lockup so buyers see the affiliation.
- Never publish personal names or home addresses from license records. Cards describe businesses.
- No emoji.

## Visual foundations

**Color.** The page is card stock: `color-chalk` ground, `color-paper` cards and panels, `color-ink` text and outlines. `color-turf` is the dark ground for the header, hero and scoreboard bands, and `color-turf-deep` for the footer. `color-field` is the green shared with HempAware, used for paid actions and ROSTER on light grounds. `color-scoreboard` is the highlight: the yellow button, the Verified Player seal, the Starting Lineup ring, ROSTER on turf. Set ink text on scoreboard, never scoreboard text on chalk or white (1.7:1). `color-manila` is the card back and table header. Secondary text is `color-bench`; links are `color-field-ink`.

**Dark sections.** On `color-turf`, body text is `color-chalk`, muted text `color-mist`, links `color-chalk` turning `color-scoreboard` on hover. Footer copy on `color-turf-deep` is `color-footer-text`.

**Position colors** (`position-grower` through `position-service`) belong to Position tabs and table pills only. Each fill names its text color in its note. Every use prints the Position name too.

**Type.** Three families, all self-hosted (the files are in `fonts/`):
- **Big Shoulders Display** 800 and 900 (`--font-display`) for headlines, tabs, jersey numbers, buttons and the wordmark. Always uppercase, tight leading (0.92 for heads, 0.85 for jersey numbers).
- **Archivo** (`--font-sans`), shared with HempAware, for body and UI. `body` is 16px/1.5; `lead` 18px under H1s; `tagline` 14px for card copy.
- **IBM Plex Mono** 400 and 600 (`--font-mono`) for card backs, stats, eyebrows, chips, table heads and sources, uppercase with tracking.

Display sizes on the site are fluid: `display-hero` runs from 56px to 128px, `display-1` from 44px to 84px, `display-2` from 42px to 64px. The tokens hold the largest size.

**Lines, not blur.** Edges are drawn with ink: `stroke-outline` (1.5px) on cards, tabs, inputs and tables; `stroke-heavy` (2px) on the outline button and member badge. Dashed lines mean unclaimed, so use them for nothing else. Shadows are hard offsets with no blur: `shadow-card` on cards, `shadow-button` under the yellow button, `shadow-lineup` for paid placement.

**Radii.** Small and squared: `radius-chip` 4px, `radius-button` 6px, `radius-tab` 8px on top corners only, `radius-card` 10px, `radius-table` 12px, `radius-panel` 14px. Round shapes are only the logo ring and flip button (`radius-round`) and the Verified Player seal (`radius-pill`).

**Spacing and layout.** Content sits in a `size-wrap` (1280px) column with `space-gutter` (24px) sides, `space-gutter-sm` (16px) at 640px and below. Card grids use `auto-fill` columns at least `size-card-w` (380px) wide, with 32px column gaps and 40px row gaps. Nothing scrolls sideways except the roster table inside its frame.

**Motion.** One moment: the Player Card flip, 600ms `cubic-bezier(.2,.7,.2,1)` on the Y axis, and the home page Rolodex spin. Both stop under `prefers-reduced-motion`. No scroll-triggered effects.

**Focus.** Keyboard focus is a `stroke-rule` (3px) `color-scoreboard` outline offset 2px. Known gap: that ring is 9.2:1 on turf but only 1.5:1 on chalk and 1.7:1 on paper, below the 3:1 needed for a focus indicator. On light grounds it needs an ink partner, for example a 1.5px `color-ink` inner ring, before an accessibility audit.

## The card system

Every company is a Player Card (see PlayerCard): Position tab on top, jersey number, logo ring, name, meta line, tagline, status marks, flip button, and two Rolodex notches cut into the bottom edge. The front is identity; the back, on `color-manila`, is facts with sources and dates. Unclaimed cards are dashed. Verified Player, Rookie, Unclaimed and Starting Lineup are the only states (see StatusMarks).

## Iconography

HempRoster uses almost no icons. Positions are named with words and colors, not pictograms. The two interface icons are `flip.svg` (the card flip button) and `verified-check.svg` (the Verified Player seal), drawn on a 24px grid with round 2px strokes in `color-ink`. New icons follow that stroke style; reach for Lucide's line set as the base. No emoji, no filled glyph sets.

## Logos

The logo is the **HR monogram**: H in `color-chalk` and R in `color-scoreboard`, inside a Rolodex card frame with a scoreboard index tab on top and two notches along the bottom. All logo files are drawn for dark grounds.

- `hemproster-logo-horizontal.png`: the monogram, HEMPROSTER and the by HempAware line in a row. The default for email, decks and partner sites.
- `hemproster-logo-stacked.png`: the same pieces stacked. Square spaces, social posts and print.
- `hemproster-monogram.png`: the monogram alone. Avatars, small spaces, and the site header beside the live-text wordmark (see Wordmark).
- `hemproster-app-icon.png`: the monogram on a rounded `color-turf` tile. Favicons, app icons, and any light ground.

Place the logos on `color-turf`, `color-turf-deep` or a dark photo. On chalk, white or manila, use the app icon tile or set the logo on a turf panel. Never recolor or redraw them. The files are high-resolution PNGs with transparent backgrounds; there is no vector version yet.