color.json
Color
12 tokens — the core white/black/mint palette plus the Verse reserve zone (bronze).
The kit publishes to GitHub Packages under the @ptd
scope. Tell your package manager where the scope lives once, then install — pin a major so a
brand change can never silently break a build.
@ptd:registry=https://npm.pkg.github.combun add @ptd/brand # or: npm i @ptd/brand · pnpm add @ptd/brand
# package.json → "@ptd/brand": "^1" (pin by major)No npm required. Every GitHub Release attaches per-platform
artifacts — pull the one you need by tag. The flat json/tokens.json is
the universal fallback any language can read.
# iOS — PTDTokens.swift
gh release download v1.0.0 -R PAY-THE-DOLLS/ptd-brand-kit -p 'ptd-brand-ios.zip'
# Android — colors.xml / dimens.xml
gh release download v1.0.0 -R PAY-THE-DOLLS/ptd-brand-kit -p 'ptd-brand-android.zip'
# universal flat tokens — works anywhere
gh release download v1.0.0 -R PAY-THE-DOLLS/ptd-brand-kit -p 'ptd-brand-json.zip'// flat JSON map — { 'color-mint': '#00FF88', ... }, fully typed
import tokens from '@ptd/brand/tokens.json';
tokens['color-mint']; // '#00FF88'
// or named constants (dist/js/tokens.js + .d.ts)
import { ColorMint, SpaceS7 } from '@ptd/brand';Import the token custom-properties (:root { --ptd-color-ink … })
first, then the V6 component layer (.hero, .btn-1,
.receipt, …).
@import "@ptd/brand/css"; /* :root { --ptd-color-ink: … } */
@import "@ptd/brand/css/components"; /* .hero, .btn-1, .receipt, … *//* Tailwind v4 — import token vars, then map in @theme */
@import "@ptd/brand/css";
// Tailwind v3 — tailwind.config.js
import preset from '@ptd/brand/tailwind';
export default { presets: [preset] }; // bg-mint, text-ink, p-s7 …// iOS — dist/ios/PTDTokens.swift
view.backgroundColor = PTDTokens.colorMint
<!-- Android — res/values/colors.xml + dimens.xml -->
android:background="@color/ptd_color_mint"
// SCSS — dist/scss/_ptd-tokens.scss
@use 'ptd-tokens' as ptd; .net { color: ptd.$ptd-color-mint; }tokens/12 tokens — the core white/black/mint palette plus the Verse reserve zone (bronze).
Three font families + the locked wordmark spec (SF Mono, 700, tracked, slashed Ø).
The 8-based spacing scale (s1–s7) and layout container tokens.
dist/Run npm run build (Style Dictionary + the Tailwind preset
generator) to regenerate everything below from the tokens. CI does this on every release.
| Artifact | Path | Consumer |
|---|---|---|
| CSS custom properties | dist/css/ptd-tokens.css | Web — --ptd-* vars |
| JS + TS types | dist/js/tokens.js · .d.ts | Typed JS/TS imports |
| SCSS variables | dist/scss/_ptd-tokens.scss | Sass pipelines |
| Flat JSON map | dist/json/tokens.json | Universal — any language |
| Tailwind preset | dist/tailwind/preset.js | Tailwind v3/v4 |
| Swift | dist/ios/PTDTokens.swift | iOS / UIKit |
| Android resources | dist/android/colors.xml · dimens.xml | Android |
| Component layer | css/ptd-v6.css | Web — chrome, hero, cards, receipt |
A distinct dark-luxury identity zone. Locked: bronze, not mint. Don't bleed it onto core surfaces.
Backgrounds are WHITE or BLACK only. Mint is an accent — borders, eyebrows, numbers, button text, hairline gridlines, the receipt net line, hover ink. Never a green page fill.
All text is black or white. Keep every Ø (U+00D8). Verse Capital stays bronze.
SF Mono · weight 700 · letter-spacing 3px (4px at hero) · uppercase · single line, never wraps · the slashed Ø (U+00D8).
| Role | Family | Size | Notes |
|---|---|---|---|
| Hero H1 | Bebas Neue | clamp(56px, 12vw, 168px) | line-height .86, mint accent word |
| Section H2 | Bebas Neue | clamp(34px, 5vw, 72px) | §-numbered eyebrow above |
| Lede / body | SF Mono | clamp(16px, 2vw, 21px) | line-height 1.45–1.6 |
| Eyebrow / label | JetBrains Mono | 10–11px | uppercase, 1.5–2.5px tracking |
| Receipt / price | JetBrains Mono | 12–14px | weight 700 on totals |
| Token | Value | Use |
|---|---|---|
--ptd-layout-container-max | 1400px | Container max-width |
--ptd-layout-container-pad | 40px | Container side padding (desktop) |
--ptd-layout-container-pad-sm | 20px | Container side padding (mobile) |
css/ptd-v6.css.btn-1 · .btn-2 · .btn-mint.chip.mint · .chip.ink · .chip.out.block3% to start a fundraiser · 6% partner brand · 9% launch a store. 100% of platform net flows to Verse Capital.
.rcpt · gross → platform → card → net| # | Doc | What |
|---|---|---|
| 00 | WHAT_IS_PTD | Core identity, the deal, the ethos |
| 01 | COLOR_PALETTE | Full color system, usage rules |
| 02 | TYPOGRAPHY | Font stacks, sizes, weights, the Ø rule |
| 03 | BRAND_VOICE | Tone, registers, signature phrases |
| 04 | BRANDS_INDEX | All houses under PTD |
| 06 | DESIGN_SYSTEM | Visual rules, hover, layout |
| 07 | SOCIAL_ASSETS | Logo files, formats, sizes |
| 08 | ECONOMICS_V2 | Platform economics — 3 / 6 / 9 take rates |
| 09 | PUBLIC_FAQ | Public model explainer + FAQ |
| 10 | BRAND_SYSTEM | Canonical — fonts, zones, spacing, non-negotiables |
| — | BRAND_KIT | The V6 visual system — locked |
Consumers pin ^1 (npm) or a v1.x release (others).
Renovate / Dependabot opens an update PR in each consumer when a new version ships.
A removed or renamed token bumps the major — consumers opt in deliberately. Additive/fix flows automatically.
# 1. edit tokens/*.json and/or css/ptd-v6.css and/or standards/*.md
# 2. regenerate dist/ locally and eyeball the diff
npm run build
# 3. cut a semver tag
npm version <patch|minor|major> && git push --follow-tags
# 4. CI builds artifacts, publishes @ptd/brand, cuts the GitHub ReleaseBackgrounds are WHITE or BLACK only; mint is an accent, never a fill. The Ø (U+00D8) is non-negotiable: DØLLS, PAY THE DØLLS, ZØ.
Verse Capital stays bronze. The fee ladder is 3 / 6 / 9. The brand roster is 3 brands: PAY THE DØLLS + STuDiØ ZØ + DESERT ETHOS.