Perry Branding

Official brand assets and design guidelines for Perry — the TypeScript → Native compiler.

🌐 www.perryts.com · Version 1.0 · February 2026

---

Brand Overview

Perry is a TypeScript-to-native compiler. The visual identity centers on a pixel-art bird — lively, technical, and precise — rendered as a cascade of coloured tiles flowing from warm amber through violet to cool blue, like iridescent plumage. The brand reflects the transformation from expressive TypeScript to fast native output.

Tagline: TypeScript → Native

---

Logo Assets

File	Description	Use Case
perry-logo-horizontal-dark.svg	Horizontal logo — dark variant	Dark backgrounds
perry-logo-horizontal-light.svg	Horizontal logo — light variant	Light backgrounds
perry-logo-stacked.svg	Stacked/vertical logo — dark	Square placements, social avatars
perry-wordmark-dark.svg	Wordmark only — dark variant	Editorial/text contexts
perry-icon.svg	Bird icon only, transparent bg	UI elements, inline use
perry-app-icon-dark.svg	App icon 512×512 (dark bg #1a1a1e)	macOS / app stores
perry-app-icon-dark-512w.png	App icon 512×512 PNG	GitHub avatar, Android
perry-icon-512w.png	Icon 512×512 PNG	NPM, package registries
perry-social-banner.svg	Social banner (1200×630)	OG image, Twitter card
perry-favicon.svg	Favicon SVG (32×32, rounded rect)	Browser tab
favicon.ico	Favicon ICO (multi-size)	Browser tab fallback

Recommended Sizes by Platform

Context	File	Size
Website favicon	favicon.ico + perry-favicon.svg	16×16, 32×32, 48×48
Apple Touch icon	perry-favicon-180w.png	180×180
Open Graph / Twitter	perry-social-banner-1200w.png	1200×630
GitHub avatar	perry-app-icon-dark-512w.png	512×512
iOS App Store	perry-app-icon-dark-1024w.png	1024×1024
Android Play Store	perry-app-icon-dark-512w.png	512×512
NPM / Package registry	perry-icon-256w.png	256×256
Presentation slides	perry-logo-horizontal-dark-1600w.png	1600w

---

Color Palette

The Perry palette flows from warm amber through red and violet to cool blue — like iridescent bird plumage.

Primary Brand Colors

Name	Hex	Role
Amber 400	#fbbf24	Head, Wing
Amber 500	#f59e0b	Primary Warm
Orange 500	#f97316	Transition
Red 500	#ef4444	Body Warm
Violet 500	#8b5cf6	Body Cool
Blue 500	#3b82f6	Tail, Cool

Full Pixel Block Colors

Hex	Tailwind
#fef3c7	Amber 100
#fde68a	Amber 200
#fcd34d	Amber 300
#fbbf24	Amber 400
#f59e0b	Amber 500
#fb923c	Orange 400
#f97316	Orange 500
#ef4444	Red 500
#e879f9	Fuchsia 400
#a855f7	Purple 500
#8b5cf6	Violet 500
#7c3aed	Violet 600
#818cf8	Indigo 400
#6366f1	Indigo 500
#60a5fa	Blue 400
#3b82f6	Blue 500
#93c5fd	Blue 300
#bfdbfe	Blue 200

Background Colors

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

Text Colors

Name	Hex	Usage
Warm Text	#fef3c7	Headings on dark background
Light Text	#e0e7ff	Body on dark background
Dark Text	#0f172a	On light backgrounds
Muted	#666666	Secondary, captions
Accent Blue	#60a5fa	Links, interactive elements

Quick CSS Reference

:root {
  --perry-amber:     #f59e0b; /* Primary warm */
  --perry-blue:      #3b82f6; /* Primary cool */
  --perry-violet:    #8b5cf6; /* Accent */
  --perry-bg-dark:   #0a0a0f; /* Dark background */
  --perry-text-warm: #fef3c7; /* Heading text */
}

---

Typography

Perry uses two typefaces: Rubik for brand/display and JetBrains Mono for code.

Primary — Rubik

Weight	Use
800 (ExtraBold)	Logo wordmark, headings, hero text
700 (Bold)	Subheadings, section titles
400 (Regular)	Body text, descriptions

• Family: Rubik (Google Fonts)
• Fallback: 'Rubik', 'Segoe UI', '-apple-system', 'Arial', sans-serif
• Letter-spacing: -0.02em for headings, normal for body
• Line-height: 1.2 for headings, 1.6 for body

Secondary — JetBrains Mono

Weight	Use
700 (Bold)	CLI examples, code block labels
400 (Regular)	Code samples, terminal output

• Family: JetBrains Mono (Google Fonts)
• Fallback: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace

Typographic Scale

Level	Size	Font	Weight	Usage
Display	48–64px	Rubik	800	Hero headlines
H1	36–40px	Rubik	800	Page titles
H2	28–32px	Rubik	700	Section headings
H3	20–24px	Rubik	700	Subsection headings
Body	16px	Rubik	400	Paragraphs
Small	14px	Rubik	400	Captions, metadata
Code	14–15px	JetBrains Mono	400	Inline code, blocks

---

Icon Design Language

The Perry icon is a pixel-art bird — a grid of small rounded squares arranged in a diagonal cascade representing bird plumage. The palette flows warm → cool:

• Warm (amber/orange) at the head/top-right
• Transitional (red → fuchsia → purple) through the body
• Cool (indigo → blue) at the tail/bottom-left
• A white highlight tile (#ffffff) in the top cluster suggests a specular light point
• Outer/ambient tiles use reduced opacity (0.3–0.8) for a soft halo/glow

---

Logo Usage Guidelines

Do

• Use provided SVG/PNG files — do not recreate the logo
• Maintain bird-to-wordmark proportions
• Use on approved background colors
• Keep minimum clear space (height of the P glyph) on all sides
• Use the icon alone when space is limited
• Use the dark-variant logo on dark backgrounds; light variant on light backgrounds

Don't

• Do not stretch, skew, or rotate the logo
• Do not recolor individual pixel blocks
• Do not add drop shadows, glows, or outlines
• Do not place on busy or photographic backgrounds
• Do not rearrange icon and wordmark positions
• Do not use low-contrast color combinations

---

Brand Voice

Personality: Lively, Technical, Confident, Approachable, Honest

Tone by Context

Context	Example
Marketing headline	"One Codebase. Every Platform. Native Performance."
Feature description	"Perry compiles TypeScript to native GUI and CLI apps."
Error message	"Couldn't resolve type for 'x'. Try adding a type annotation."
Release note	"Added GTK4 support for Linux native UI. 27 packages now available."

Writing Style

• Use active voice: "Perry compiles" not "Code is compiled by Perry"
• Lead with benefits: "Ship 2MB binaries" not "Our output size is small"
• Be specific: "2.2× faster than Node.js" not "very fast"
• Use you/your to address developers directly
• Avoid: simply, just, easy — respect the complexity
• Tagline: always use the → arrow (U+2192), not -> or =>
• Product name: Perry (capital P, never PERRY except in logo contexts)

---

File 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

---

License

All Perry brand assets are proprietary and confidential. Unauthorized use, reproduction, or distribution is prohibited.

© Perry / Skelpo GmbH · perryts.com