Skip to content

CLAUDE.md

Latest commit

 

History

History
247 lines (184 loc) · 8.13 KB

CLAUDE.md

File metadata and controls

247 lines (184 loc) · 8.13 KB

Perry — Brand & Design Guidelines for Claude

This file governs all Perry-aligned design materials, UI code, documentation, and marketing copy generated or reviewed by Claude Code. Follow these rules precisely when producing any artifact carrying the Perry brand.

Identity

Color System

Always derive colors from the Perry palette. Do not invent colors outside this system.

Semantic Tokens

Token Hex Usage
--perry-bg-dark #0a0a0f Primary dark background
--perry-surface #1a1a1e Cards, elevated surfaces
--perry-slate #0f172a Alt dark background
--perry-text-warm #fef3c7 Headings on dark backgrounds
--perry-text-light #e0e7ff Body on dark backgrounds
--perry-text-dark #0f172a Text on light backgrounds
--perry-text-muted #666666 Secondary text, captions
--perry-accent #60a5fa Links, interactive, subtitle text
--perry-amber #f59e0b Primary warm brand color
--perry-blue #3b82f6 Primary cool brand color
--perry-violet #8b5cf6 Mid-gradient accent

Full Brand Palette

Gradient flows warm → cool (amber/orange → red/fuchsia → purple/violet → indigo → blue):

#fef3c7  #fde68a  #fcd34d  #fbbf24  #f59e0b   ← Amber scale
#fb923c  #f97316                               ← Orange
#ef4444                                        ← Red
#e879f9                                        ← Fuchsia
#a855f7  #8b5cf6  #7c3aed                     ← Purple/Violet
#818cf8  #6366f1                               ← Indigo
#60a5fa  #3b82f6  #93c5fd  #bfdbfe            ← Blue scale

Background Colors

Hex Name Use
#0a0a0f Dark Primary dark page background
#1a1a1e Charcoal Cards, modals, elevated surfaces
#0f172a Slate Alt dark background
#f8fafc Light Light mode page background
#ffffff White Light cards

Quick CSS Snippet

:root {
  --perry-amber:     #f59e0b;
  --perry-blue:      #3b82f6;
  --perry-violet:    #8b5cf6;
  --perry-bg-dark:   #0a0a0f;
  --perry-text-warm: #fef3c7;
}

Typography

Primary — Rubik (brand/display/UI)

Weight Use
800 ExtraBold Logo wordmark, hero headlines, H1
700 Bold H2, H3, section titles
500 Medium UI labels, subtitles (letter-spacing: 0.04em)
400 Regular Body copy, descriptions
  • Google Fonts: https://fonts.google.com/specimen/Rubik
  • Fallback: 'Rubik', 'Segoe UI', '-apple-system', 'Arial', sans-serif
  • Heading letter-spacing: -0.02em
  • Heading line-height: 1.2
  • Body line-height: 1.6

Secondary — JetBrains Mono (code/terminal)

Weight Use
700 Bold CLI examples, code block labels
400 Regular Code samples, terminal output
  • Google Fonts: https://fonts.google.com/specimen/JetBrains+Mono
  • Fallback: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace

Typographic Scale

Level Size Font Weight
Display 48–64px Rubik 800
H1 36–40px Rubik 800
H2 28–32px Rubik 700
H3 20–24px Rubik 700
Body 16px Rubik 400
Small / Caption 14px Rubik 400
Code 14–15px JetBrains Mono 400

Logo & Icon Usage

Use the correct asset for the background context:

Asset When to use
perry-logo-horizontal-dark.svg Dark backgrounds (#0a0a0f, #1a1a1e, #0f172a)
perry-logo-horizontal-light.svg White or light backgrounds (#f8fafc, #ffffff)
perry-logo-stacked.svg Square/compact dark placements, social avatars
perry-wordmark-dark.svg Editorial contexts where icon is already established
perry-icon.svg Small UI placements, inline brand marks
perry-app-icon-dark.svg App stores, desktop icons, macOS dock
perry-favicon.svg Browser tab (SVG)
favicon.ico Browser tab fallback

Clear space: padding ≥ height of the P glyph on all sides.

Never:

  • Recolour individual pixel blocks
  • Stretch, skew, rotate, or add effects (shadows, glows, outlines)
  • Place dark variant on a light background
  • Place logo on busy or photographic backgrounds
  • Rearrange icon and wordmark positions

Icon Design Language

The Perry icon is a pixel-art bird (not generic mosaic). When extending iconography:

  • Use a pixel-mosaic grid of small rounded squares (border-radius ≈ 15–20% of tile size)
  • Colors must come from the brand gradient (warm → cool)
  • Tile layout represents bird anatomy: head/wing (amber) → body (red/fuchsia/violet) → tail (blue)
  • Outer/ambient tiles: reduced opacity (0.3–0.8) for halo effect
  • Include a white specular highlight tile (#ffffff) in the top-right cluster
  • Grid gap: ~1px between tiles

Dark Mode First

Perry's default aesthetic is dark. Design dark-first. Light mode is secondary.

  • Dark background: #0a0a0f
  • Surface: #1a1a1e
  • All primary designs (website, app UI, docs) should look correct on dark by default

Voice & Tone

Brand Personality

Trait What it means
Lively The bird isn't just a logo — it's a character. Be enthusiastic.
Technical Speak to developers who know their craft. Be precise, avoid fluff.
Confident State facts. Show benchmarks. Let results speak. No hedging.
Approachable New users should feel invited, not intimidated.
Honest Acknowledge limitations directly.

Writing Rules

  • Active voice: "Perry compiles" — not "Code is compiled by Perry"
  • Benefit-led: "Ship 2MB binaries" — not "Our output size is small"
  • Specific: "2.2× faster than Node.js" — not "very fast"
  • Address the developer: use "you/your"
  • Avoid: simply, just, easy — respect the complexity
  • Tagline arrow: always → (U+2192), never -> or =>
  • Product name: Perry — never PERRY outside of logo all-caps contexts

Tone by Context

Context Tone Example
Marketing Punchy, factual "One Codebase. Every Platform. Native Performance."
Feature copy Direct, no jargon "Perry compiles TypeScript to native GUI and CLI apps."
Error messages Helpful, not blaming "Couldn't resolve type for 'x'. Try adding a type annotation."
Release notes Factual, specific "Added GTK4 support for Linux native UI. 27 packages now available."

Technology Context

When writing code or tooling for Perry:

  • Language: TypeScript (strict mode, explicit types, no any)
  • Runtime: Native compiled output; Node.js/Bun for tooling
  • Package manager: bun preferred, npm acceptable
  • Code style: Functional where reasonable, explicit types always
  • Code should feel as precise and fast as a compiled binary

Asset Naming Convention

perry-[variant]-[theme]-[size].[ext]
Part Values
variant logo, icon, wordmark, favicon, social-banner, app-icon
theme dark, light (omit if neutral)
size e.g. 512w, 1200w (omit for SVG)
ext svg, png, ico, webp

Quick Reference Card

Name:        Perry
Tagline:     TypeScript → Native
Web:         https://www.perryts.com
GitHub:      https://github.com/PerryTS

BG dark:     #0a0a0f
Surface:     #1a1a1e
Slate:       #0f172a
Light:       #f8fafc

Text dark:   #fef3c7   (warm, on dark bg)
Text light:  #0f172a   (on light bg)
Accent:      #60a5fa   (links, interactive)

Font:        Rubik 800 / 700 / 400
Code font:   JetBrains Mono 700 / 400

Gradient:    amber → orange → red → fuchsia → violet → indigo → blue