# HempRoster design system

Source: https://brand.hemproster.com

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.

## Tokens

CSS custom properties are in /tokens.css; raw values in /tokens.json.

### Color

| Token | Value | Usage |
| --- | --- | --- |
| `--color-turf` | `#0f2a1a` | Dark grounds: site header, hero, scoreboard band, the primary logo lockup. Text on it is color-chalk (14.0:1), color-mist (9.8:1) or color-scoreboard (9.2:1). |
| `--color-turf-deep` | `#0b2014` | Footer ground, one step darker than color-turf. Footer copy is color-footer-text (9.3:1). |
| `--color-field` | `#2e5e0e` | Primary green, shared with HempAware. Fill of the green button (white text 7.7:1) and ROSTER in the light wordmark. Text on color-chalk 7.0:1. |
| `--color-field-ink` | `#1f4a0a` | Link text on color-chalk (9.4:1) and white (10.3:1); the SAY label in voice examples. |
| `--color-chalk` | `#f6f4ee` | Page ground and Rolodex notch fill. Body text on it is color-ink (16.2:1); secondary text color-bench (7.6:1). |
| `--color-ink` | `#16181a` | All body text, card and tab outlines, the outline button, the Rookie stamp ground. Reads on chalk, paper, manila (14.2:1) and every light position color. |
| `--color-scoreboard` | `#f2c230` | Highlight fill: the yellow button, Verified Player seal, Starting Lineup label and ring, ROSTER on turf, jersey block on the member badge. Ink text on it 10.6:1. Never text on white or chalk (1.7:1). |
| `--color-scoreboard-deep` | `#a57f0c` | The 3px pressed-edge shadow under the yellow button only. Not a text color. |
| `--color-manila` | `#efe5cc` | Card backs (the stats side), table header rows, the vocabulary table head. Ink text 14.2:1, color-stat-label 5.9:1. |
| `--color-bench` | `#4a4f4a` | Secondary text: card meta line, taglines, breadcrumbs, help copy. 7.6:1 on chalk, 8.4:1 on paper, 6.7:1 on manila. |
| `--color-chalkline` | `#d9d4c7` | Hairline dividers between table rows and list items. Decorative only, never the sole boundary of a control. |
| `--color-leaf` | `#7dbb4f` | The hemp leaf in the mark on dark grounds, and Hemp in the by HempAware byline on turf (6.7:1). |
| `--color-sky` | `#c7daf5` | Aware in the by HempAware byline on turf (10.8:1). On light grounds use color-aware-blue instead. |
| `--color-mist` | `#c9d1c7` | Muted text on turf: the header byline, captions on dark bands (9.8:1). |
| `--color-paper` | `#ffffff` | Player Card front face, form inputs, tables and panels on chalk. Ink text 17.8:1. |
| `--color-paper-unclaimed` | `#fbfaf6` | Front face of an unclaimed card in the design canvas, paired with a dashed outline. The live site still uses color-paper here. |
| `--color-stat-label` | `#5a5546` | Mono stat labels and the source line on the card back, on color-manila (5.9:1). |
| `--color-chip-line` | `#cfc8b6` | 1px border of info chips (Home, Est.) on the card front. Decorative; the chip text carries the meaning. |
| `--color-unclaimed` | `#8a3a1f` | Unclaimed chip text and its dashed border, and the NOT label in voice examples. 7.8:1 on paper. |
| `--color-aware-blue` | `#226ce0` | Aware in the by HempAware byline on white or chalk (4.9:1). HempAware's own blue; nowhere else. |
| `--color-footer-text` | `#b7c2b4` | Footer body copy and links on color-turf-deep (9.3:1). |
| `--position-grower` | `#3e7b27` | Growers tab and table pill. White text, 5.2:1. |
| `--position-processor` | `#e39b2d` | Processors tab and table pill. Ink text, 7.6:1. |
| `--position-manufacturer` | `#b8432a` | Manufacturers tab and table pill. White text, 5.4:1. |
| `--position-brand` | `#2b4fa3` | Brands tab and table pill. White text, 7.6:1. |
| `--position-retailer` | `#6fc2b4` | Retailers tab and table pill. Ink text, 8.5:1. |
| `--position-lab` | `#7a5ba8` | Labs tab and table pill. White text, 5.4:1. |
| `--position-distributor` | `#b03a6e` | Distributors tab and table pill. White text, 5.7:1. |
| `--position-service` | `#5b6770` | Services tab and table pill. White text, 5.8:1. |

### Type

Families: `--font-display`: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif; `--font-sans`: Archivo, system-ui, sans-serif; `--font-mono`: "IBM Plex Mono", ui-monospace, Menlo, monospace

| Style | Family | Size / line height | Weight | Tracking | Usage |
| --- | --- | --- | --- | --- | --- |
| `.type-display-hero` | display | 128px / 0.92 | 900 | 0 | Home page hero only. Uppercase. Scales down to 56px on phones. |
| `.type-display-1` | display | 84px / 0.92 | 900 | 0 | Page H1 on Position, Home Team and Player pages. Uppercase. Scales down to 44px. |
| `.type-display-2` | display | 64px / 0.92 | 900 | 0 | Home page section heads. Uppercase. |
| `.type-display-3` | display | 44px / 0.92 | 900 | 0 | Section heads on Pricing and long pages. Uppercase. |
| `.type-display-4` | display | 34px / 0.92 | 900 | 0 | Section heads inside a page (Player Cards, Questions). Uppercase. |
| `.type-jersey` | display | 38px / 0.85 | 900 | 0 | The card number on the card front. Always four digits. |
| `.type-wordmark` | display | 28px / 1 | 900 | 0.02em | The header wordmark: HEMP in chalk or ink, ROSTER in scoreboard (on turf) or field (on light). |
| `.type-card-name` | display | 24px / 0.95 | 800 | 0 | Company name on the card front. Uppercase, two lines at most. |
| `.type-button` | display | 19px / 1 | 800 | 0.06em | Every button label. Uppercase. |
| `.type-tab` | display | 15px / 1 | 800 | 0.1em | Position tabs and the Stats tab. Uppercase. |
| `.type-lead` | sans | 18px / 1.5 | 400 | 0 | Intro paragraph under a page H1. |
| `.type-body` | sans | 16px / 1.5 | 400 | 0 | Default running text and form inputs. |
| `.type-body-sm` | sans | 15px / 1.5 | 400 | 0 | Roster table cells and rule cards. |
| `.type-tagline` | sans | 14px / 1.4 | 400 | 0 | Card taglines, breadcrumbs, help text. color-bench. |
| `.type-meta` | sans | 13px / 1.4 | 400 | 0 | The position and place line under a card name; the header byline at 600. |
| `.type-label` | sans | 14px / 1.3 | 700 | 0 | Form field labels. |
| `.type-eyebrow` | mono | 13px / 1.3 | 400 | 0.16em | Section eyebrows above display heads. Uppercase. |
| `.type-table-head` | mono | 12px / 1.3 | 400 | 0.1em | Table header cells on color-manila. Uppercase. |
| `.type-chip` | mono | 10.5px / 1.2 | 400 | 0.06em | Info and Unclaimed chips on the card front. Uppercase. |
| `.type-stat-label` | mono | 10px / 1.3 | 400 | 0.08em | Stat labels on the card back, in color-stat-label. |
| `.type-jersey-label` | mono | 9.5px / 1.2 | 400 | 0.14em | The NO. label above the jersey number. |

### Spacing

| Token | Value | Usage |
| --- | --- | --- |
| `--space-gutter` | `24px` | Page side padding (.wrap) above 640px wide. |
| `--space-gutter-sm` | `16px` | Page side padding at 640px and below. |
| `--space-card-top` | `16px` | Card front top padding. |
| `--space-card-x` | `18px` | Card side padding and the tab row inset. |
| `--space-card-bottom` | `24px` | Card bottom padding, leaving room for the Rolodex notches. |
| `--space-card-gap` | `10px` | Gap between rows inside a card front. |
| `--space-btn-y` | `12px` | Button vertical padding (10px on the outline button to offset its 2px border). |
| `--space-btn-x` | `20px` | Button side padding (18px on the outline button). |
| `--space-tab-x` | `14px` | Position tab side padding. |
| `--space-field-y` | `10px` | Input and table cell vertical padding. |
| `--space-field-x` | `12px` | Input and table cell side padding. |

### Sizes

| Token | Value | Usage |
| --- | --- | --- |
| `--size-wrap` | `1280px` | Maximum content width (.wrap). |
| `--size-card-w` | `380px` | Player Card width; shrinks to the column on phones. |
| `--size-card-h` | `262px` | Player Card height, tab row included. |
| `--size-tab-h` | `30px` | Position tab height. |
| `--size-flip` | `34px` | Round flip button on the card. |
| `--size-logo-ring` | `54px` | Logo or monogram ring on the card front. |

### Radius

| Token | Value | Usage |
| --- | --- | --- |
| `--radius-stamp` | `3px` | The Rookie stamp. |
| `--radius-chip` | `4px` | Info chips, table position pills, the Starting Lineup label. |
| `--radius-button` | `6px` | Buttons, inputs and the claim box on the card back. |
| `--radius-tab` | `8px` | Top two corners of a position tab only; the bottom is square and joins the card. |
| `--radius-card` | `10px` | Player Card body and the member badge. |
| `--radius-table` | `12px` | Roster table frame. |
| `--radius-panel` | `14px` | Pricing plans and other large panels. |
| `--radius-pill` | `999px` | The Verified Player seal. |
| `--radius-round` | `50%` | Logo ring and flip button. |

### Line widths

| Token | Value | Usage |
| --- | --- | --- |
| `--stroke-hair` | `1px` | Chip borders, table row dividers, the dashed claim box. |
| `--stroke-outline` | `1.5px` | The house line: card bodies, tabs, inputs, table frames, the flip button. Always color-ink. |
| `--stroke-heavy` | `2px` | Outline button, member badge, featured pricing plan. |
| `--stroke-ring` | `2.5px` | Logo ring on the card front, in the position color; dashed when unclaimed. |
| `--stroke-rule` | `3px` | Focus outline and heavy section rules. |

### Shadows

| Token | Value | Usage |
| --- | --- | --- |
| `--shadow-card` | `3px 4px 0 rgba(22, 24, 26, 0.14)` | Both faces of a Player Card. A hard offset, never a blur. |
| `--shadow-lineup` | `0 0 0 4px #f2c230, 0 0 0 5.5px #16181a, 4px 7px 0 5px rgba(22, 24, 26, 0.2)` | A Starting Lineup card: a scoreboard ring, an ink keyline, then the offset shadow. |
| `--shadow-button` | `0 3px 0 #a57f0c` | The pressed edge under the yellow button only. |

## Components

### MemberBadge

The Proud Member badge companies put on their own websites: a 240 by 88 lockup with the HR monogram (on its turf tile in the light badge), PROUD MEMBER OF THE HEMPROSTER, and the jersey number on a `color-scoreboard` block. It links to the company's Player Card.

**Variants**: light (`color-paper`, ink border, ROSTER in `color-field`) for light footers; dark (`color-turf`, chalk border, ROSTER in `color-scoreboard`) for dark footers. A round 128px seal version exists in the design canvas.

**The consumer provides** the jersey number and the Player Card URL. Shipped as a prebuilt SVG at `/badge/<slug>.svg` inside a plain `<a href><img alt="Proud Member of the HempRoster"></a>`, with no script, so search engines follow the link.

**Don't** let members restyle it, crop the number, or embed it with JavaScript.

### Wordmark

The HempRoster lockup built in code: the HR monogram, HEMPROSTER in Big Shoulders Display 900, and the by HempAware byline. Use it once per page, in the header, and on anything that leaves the site.

**Variants**
- `hr-wordmark--turf`: the primary lockup, on `color-turf`. HEMP in `color-chalk`, ROSTER in `color-scoreboard`, the byline in `color-mist` with Hemp in `color-leaf` and Aware in `color-sky`. Mark: `hemproster-monogram.png`.
- `hr-wordmark--light`: on `color-paper` or `color-chalk`. HEMP in `color-ink`, ROSTER in `color-field`, Hemp in `color-field`, Aware in `color-aware-blue`. Mark: `hemproster-app-icon.png` (the monogram on its turf tile).
- `hr-wordmark--mono`: HEMPROSTER alone in `color-ink`, for `color-scoreboard` grounds and one-color print.

**The consumer provides** the ground color and a link to `/`. The wordmark is live text in the `wordmark` style, so the page must load Big Shoulders Display 900 and Archivo. Hemp and Aware are both bold and upright. Where live text is not possible (email, social, partner sites), use `hemproster-logo-horizontal.png` or `hemproster-logo-stacked.png` instead.

**Do** keep the by HempAware byline wherever the full lockup appears; it is how buyers learn the affiliation. **Don't** set ROSTER in yellow on a light ground (1.7:1), recolor the mark, outline the type, or add a tagline inside the lockup.

### Button

Uppercase Big Shoulders Display labels on a solid fill: one yellow call to action per view, green for paid actions, outline for the free secondary path.

**Variants**
- `hr-btn--yellow`: the main call to action (Get on the roster, Claim card #0427). `color-scoreboard` fill, `color-ink` text, `shadow-button` pressed edge. Works on chalk, paper and turf.
- `hr-btn--green`: checkout and paid steps (Get verified). `color-field` fill, white text (7.7:1).
- `hr-btn--line`: the free or secondary path (Claim your card). Transparent with a `stroke-heavy` ink border, light grounds only.

**The consumer provides** the label and an `<a href>` or `<button>`. Labels are short verb phrases from the roster vocabulary: Get on the roster, Suit up, Claim card #0427, Join the Team.

**Do** keep one yellow button per screen region. **Don't** put the outline button on turf, set labels in sentence case, or add icons inside the label.

### PlayerCard

The Player Card is HempRoster's unit: one hemp company on one Rolodex card, with playful identity on the front and plain business facts on the back. Every company gets one, claimed or not.

**Anatomy** (front)
1. Position tab in the Position color (PositionTab), on the top edge.
2. Jersey number: NO. in `jersey-label`, four digits in the `jersey` style. Assigned once, never reused.
3. Logo ring: `size-logo-ring` circle with a `stroke-ring` border in the Position color, holding the logo or a two-letter monogram. Dashed when unclaimed.
4. Name in `card-name` (two lines at most), meta line in `meta` (Position · City, ST), tagline in `tagline` (two lines at most).
5. Status marks (StatusMarks) and the round flip button.
6. Two Rolodex notches cut into the bottom edge, filled with the page ground (`color-chalk`).

**Back**: a Stats tab on the right, `color-manila` face, `#0427` and the name over a 1.5px rule, then mono stat labels (LICENSE, NUMBER, ISSUER, PLAYS, BASED, WEBSITE) and the source and checked date. Unclaimed backs replace the license rows with a dashed claim box: Claim card #0427.

**States**
- Claimed: `color-paper` face, solid `stroke-outline` ink border, `shadow-card`.
- Unclaimed: dashed border and ring, `color-paper-unclaimed` face, Unclaimed chip.
- Verified Player: adds the seal.
- Rookie: adds the stamp.
- Starting Lineup: the label in the tab row and `shadow-lineup` (scoreboard ring and ink keyline).

**The consumer provides** the company record (name, Position, jersey, city and state, tagline, specialties, website, source, checked date, status) and the page ground for the notches. Size is fixed at `size-card-w` by `size-card-h` and shrinks to the column on phones.

**Motion**: the card flips on the Y axis in 600ms with `cubic-bezier(.2,.7,.2,1)`; with reduced motion it swaps faces with no animation. The hidden face is `inert` and `aria-hidden`, and focus moves to the other face's flip button.

**Do** keep the back factual: license type, number, issuer, status, source and date. **Don't** put marketing copy on the back, show personal names or home addresses, or let a card grow taller to fit text (clamp it).

### PositionTab

The Rolodex index tab that names a company's Position, in that Position's color. It sits on the top edge of every Player Card and leads filters and Position pages; `hr-pos-pill` is the same color as a small pill in roster tables.

**Positions and text color**
| Position | Fill | Text |
| --- | --- | --- |
| Grower | `position-grower` | white, 5.2:1 |
| Processor | `position-processor` | `color-ink`, 7.6:1 |
| Manufacturer | `position-manufacturer` | white, 5.4:1 |
| Brand | `position-brand` | white, 7.6:1 |
| Retailer | `position-retailer` | `color-ink`, 8.5:1 |
| Lab | `position-lab` | white, 5.4:1 |
| Distributor | `position-distributor` | white, 5.7:1 |
| Service | `position-service` | white, 5.8:1 |

**The consumer provides** the Position name and its `hr-pos-*` class. The tab has a `stroke-outline` ink border on three sides, `radius-tab` on the top corners, and no bottom border, so it joins the card or rule beneath it.

**Do** always print the Position name in the tab; color is never the only signal. **Don't** invent new Position colors, use them as decoration, or set Position names in anything but the `tab` style.

### StatusMarks

The small marks on a Player Card front that say what kind of card it is: info chips, the Verified Player seal, the Rookie stamp, the Unclaimed chip and the Starting Lineup label.

**Marks**
- `hr-chip`: plain facts (Home CO, Est. 2017). Mono `chip` style, `color-chip-line` border.
- `hr-seal`: Verified Player. `color-scoreboard` pill with an ink outline and the `verified-check.svg` icon. Only after a license or accreditation has been checked.
- `hr-rookie`: Rookie stamp for companies signed or claimed in the last 30 days. `color-ink` ground, `color-scoreboard` text, tilted 4 degrees.
- `hr-chip--unclaimed`: Unclaimed. `color-unclaimed` text and dashed border, matching the dashed card outline.
- `hr-lineup`: Starting Lineup, the paid placement label. It sits in the tab row above the card and always appears on a sponsored card.

**The consumer provides** which marks apply; at most three marks plus the flip button fit one card row.

**Do** show the Starting Lineup label on every paid slot, since sponsored placement is always labeled. **Don't** show Verified Player and Unclaimed together, or use these marks outside cards and filters.

### FormField

A labeled input for the Join and claim forms: bold `label` above, a `color-paper` input with a `stroke-outline` ink border and `radius-button`, optional help text in `color-bench` below.

**The consumer provides** a unique `id` tied to the `<label for>`, the input type, and help text where the field needs explaining. Inputs use the `body` style at 16px so phones do not zoom.

**Do** write labels as plain nouns (Work email, Card number, Company website) and errors as what to fix (Use your company email, not a Gmail address). **Don't** rely on placeholder text as the label, or use sports words in labels and errors.

### RosterTable

The full list of companies in a Position, Specialty or Home Team, one row per company, so every player is on the page even without a card of its own.

**Columns**: NO. (mono jersey), COMPANY (row header, linked when the company has a Player page), POSITION (a `hr-pos-pill`, on Specialty and Home Team pages), BASED (`color-bench`), WEBSITE (domain only), and a right-aligned Claim #0427 link.

**The consumer provides** the rows and a caption (visually hidden). The frame is `color-paper` with a `stroke-outline` ink border and `radius-table`; the header row is `color-manila` in the `table-head` style; rows divide with `stroke-hair` `color-chalkline`. On narrow screens the table scrolls sideways inside its frame (min width 640px).

**Do** write Not listed for missing values. **Don't** leave cells empty or drop the Claim link.

### Breadcrumbs

The trail at the top of Position, Home Team and Player pages: Home / Position or Home Team / Company, separated by slashes.

**The consumer provides** the items; the last one is the current page, unlinked, with `aria-current="page"`. Text is the `tagline` size in `color-bench`; links use the page link color. Labels match each page's H1 (Hemp Processors, not Processors).