# HempRoster design system > Brand rules, design tokens and components for HempRoster (hemproster.com), the hemp industry directory by HempAware. Use these files when writing copy or building pages, emails, ads or graphics for HempRoster. Start with the brand book, then the tokens. Every color, size and font below is the exact value the live site uses. ## Core - [Brand book](https://brand.hemproster.com/brand-book.md): voice, vocabulary, color, type, layout, card system, iconography, logos - [Tokens as JSON](https://brand.hemproster.com/tokens.json): colors, type styles, spacing, sizes, radii, line widths, shadows, each with a usage note - [Tokens as CSS](https://brand.hemproster.com/tokens.css): the same values as CSS custom properties, plus @font-face rules and .type-* classes - [Component CSS](https://brand.hemproster.com/components/bundle.css): the hr-* classes used by the components - [Everything in one file](https://brand.hemproster.com/llms-full.txt) ## Components - [MemberBadge](https://brand.hemproster.com/components/MemberBadge.md): 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. - [Wordmark](https://brand.hemproster.com/components/Wordmark.md): The HempRoster lockup built in code: the HR monogram, HEMPROSTER in Big Shoulders Display 900, and the by HempAware byline. - [Button](https://brand.hemproster.com/components/Button.md): 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). - [PlayerCard](https://brand.hemproster.com/components/PlayerCard.md): 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. - [PositionTab](https://brand.hemproster.com/components/PositionTab.md): The Rolodex index tab that names a company's Position, in that Position's color. - [StatusMarks](https://brand.hemproster.com/components/StatusMarks.md): 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. - [FormField](https://brand.hemproster.com/components/FormField.md): 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 `