# HYPURR.STKR — Brand Guidelines

> 2026-09-24 · One shared palette: the colors and token names of the HYPURR.STKR app<br>
> The brand page, this kit and the app use the same values. `tokens.json` / `tokens.css` are generated from the app's design tokens.

## 1. Direction and scope

Combine broad, bright sky surfaces, white space like clouds, and small mint accents.
The HYPURR.STKR brand page and this kit use the palette below — the same tokens the app uses.
Do not mix the previous lilac and apricot combination into brand work.
The earlier standalone HYPURR handoff remains a record of the previous version.

Do not copy the brand page's card structure, decorations, font sizes, or layout into the app;
only the colors are shared. The .STKR page uses the same palette. Keep the original logos.

## 2. Three brand colors

| Role | Name | Token | HEX | Use |
|---|---|---|---|---|
| Base | White | `bg` | #FFFFFF | Pages, cards, space |
| Broad color surfaces | Pastel Sky | `sky` | #BFE5F7 | Hero, collections, posters, downloads |
| Small accents | Hype Mint | `accent` | #53D5B4 | Buttons, selection, small labels |

The area guide is White 60 / Sky 30 / Mint 10. It is a suggestion, not a fixed rule: exclude artwork
and avoid mechanically matching the ratio on every screen. Let sky lead and mint add character.

## 3. Functional colors

| Role | Token | HEX |
|---|---|---|
| Body text / text on light surfaces | `ink` | #19362E |
| Secondary text | `ink2` | #5C716A |
| Links / focus | `accentDim` | #326887 |
| Sky heading emphasis | `accentDim` | #326887 |
| Borders | `line` | #DFE8E3 |
| App background / paper-like surfaces | `cement` | #F3F5F0 |
| Soft surface | `soft` | #F7F9F8 |
| Cloud | `cloud` (web) | #F3FAFE |
| Sky tint | `skyTint` | #E6F5FD |
| Sky surface / logo background | `skySoft` | #EDF7FD |
| Mint tint | `accentDark` | #F0FBF7 |
| Warning | `warning` | #FF8A4C |
| Error | `error` | #FF6B6B |

In `tokens.css` every token is a `--hypurr-<token>` custom property. The earlier web names stay as aliases
(`--hypurr-mint`, `--hypurr-mintTint`, `--hypurr-muted`, `--hypurr-border`, `--hypurr-focus`, `--hypurr-skySurface`).
Cloud and tints adjust surface brightness; they are functional colors, not additional core colors.
Use dark text and icons on pastel backgrounds. Do not use pastel colors for small text on white.
Do not replace semantic error, warning, or success colors wholesale with sky.
Dark pages (the legal pages and the whitepaper) use a ground derived from `ink`, text in `cement` / `white`,
links and accents in `accent`, and secondary text in `sky`.

## 4. Original logo and products

- Original logo: `logo/HYPURR_STKR_LOGO.svg`, color #73C5B7.
- Preserve its color, shape, proportions, composition, and detailed curves.
- Do not repaint it sky or UI mint, or change its color with CSS filters.
- Give the logo generous clear space and place it on light surfaces.
- Keep NFT and product images in their original colors and proportions. Do not recolor them to match the brand palette.
- Product artwork is not included in this brand kit.

## 5. Typography to preserve

| Role | Font | Weight |
|---|---|---|
| English headings | Bricolage Grotesque | 700 |
| English actions | Bricolage Grotesque | 600 |
| Korean headings and actions | Pretendard | 600 |
| Body | Pretendard | 400 |
| Numbers and identifying data | IBM Plex Mono | 500 |

Actual font files and their OFL notices are included in `fonts/`. Preserve licenses when distributing them.
This color proposal does not change existing font sizes or layouts.

## 6. Site appearance and behavior

- The sky hero gradient and white clouds use CSS. No additional images or external services are needed.
- The logo does not move or deform. Clouds remain static, too.
- Choose White / Sky / Mint for the logo background; Sky and Mint use light tints.
- Copy HEX codes from color cards and download JSON/CSS tokens.
- Font previews, brand switching, menus, and downloads retain their existing structure.
- Existing transitions and hover effects respect reduced-motion preferences.

## 7. Handoff

`tokens.json/css` in this kit are copies of the app's design tokens. When a color changes, it changes
in the app tokens first and these copies are regenerated — do not edit the copies by hand.
Existing domain and Linktree connections remain separate follow-up work.