CryptoKitties: Arcade

Overview

CryptoKitties: Arcade is a retro-futuristic, play-to-learn platform that teaches Cadence 1.0 smart contract development through pixel-art game mechanics and collectible NFT characters. The brand embodies "Arcade Nostalgia Meets Web3 Education"—a deliberate fusion of 1980s arcade aesthetics with modern blockchain pedagogy. The UI evokes the tactile, high-contrast clarity of arcade cabinets: bold monospace typography (VT323), sharp 2px borders in pure black (#171717), and a high-energy color palette featuring vibrant character-themed backgrounds (mint green, hot pink, electric purple, fire yellow). The emotional response is playful yet focused: users feel invited into a game, not a classroom, lowering cognitive friction for learning complex concepts.

The brand voice is irreverent, encouraging, and technically precise. Vocabulary patterns favor imperative action verbs ("PLAY NOW", "CONNECT", "LEARN") and avoid corporate jargon entirely. The tone treats developers as peers in a shared adventure, never condescending. Example sentence in brand voice: "Your Vegetation Kitty just mastered resource management—time to level up to Medieval Kitty and tackle composability."

Colors

The color system is built on a **High-Contrast Arcade Foundation**: a pure white (#ffffff) canvas with pure black (#171717) as the primary accent, creating maximum legibility and visual pop reminiscent of arcade screen phosphor. This monochromatic core is punctuated by three vibrant secondary colors tied to character archetypes: Vegetation Kitty uses mint green (#22c55e, secondary), Medieval Kitty uses hot pink (#ec4899, tertiary), and Fire Kitty uses golden yellow (part of the character illustration, not a token). The error state is a bold red (#dc2626) for destructive actions.

**Color Usage Rules:** Primary (#171717) is reserved exclusively for CTAs, borders, text hierarchy, and interactive focus states—it commands attention on every screen. On-primary (#ffffff) ensures maximum contrast

Typography

The type system pairs two distinct font families to create visual hierarchy and emotional resonance. **VT323 (monospace, 400 weight)** is the hero typeface, used exclusively for display (72px), headlines (48px–32px), and button labels (16px–31px). VT323's pixel-perfect letterforms evoke arcade cabinet marquees and CRT monitors, creating instant nostalgia and technical credibility. **Inter (sans-serif, 400–600 weight)** handles all body copy, labels, and secondary information at 18px–12px, providing legibility and modern polish. The contrast between these two families—retro-monospace for headlines, contemporary sans for prose—reinforces the brand's dual identity: nostalgic yet forward-thinking.

Type hierarchy is enforced through size and weight, never color alone. Display text (72px, VT323

Layout

The layout system uses a **12-column fluid grid** with a max-width of 1400px, centered on the viewport. The hero section employs a 4-column grid for character cards (Vegetation, Medieval, Sailor, Fire Kitties) with a 3-column span for the headline and CTA, creating an asymmetrical but balanced composition. Spacing follows a strict 8px unit system: section separation uses lg spacing (40px) vertically, gutter spacing (24px) horizontally between card columns, and md spacing (24px) for padding inside containers. The header bar sits at the top with 24px horizontal gutter and 8px vertical padding, anchored with position: sticky and z-index: 50. The main content area has 1% margin on all sides (from the outer black border), creating a framed, arcade-cabinet effect. Container padding is consistent

Elevation & Depth

Depth is achieved through **Physical Border Emphasis and Subtle Shadows**, not through layered blur or glassmorphism. The primary depth signal is the 2px solid border in primary black (#171717), applied to all interactive and container elements (buttons, cards, input fields, header). This border creates a tactile, raised appearance reminiscent of arcade cabinet buttons and bezels. Secondary depth is conveyed through box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on cards and modals, a soft shadow that lifts elements 3–4px off the page without obscuring content. On hover, cards elevate further with

Shapes

The shape philosophy is **Arcade Sharpness with Minimal Softness**: all corners are either sharp (0px radius) or subtly rounded at 4px (0.25rem) to 8px (0.5rem), never exceeding 1rem (16px). This constraint mirrors the physical geometry of arcade cabinet buttons and screen bezels, which are beveled but not organic. Buttons use rounded: sm (4px) for a slight visual softness that prevents a harsh, utilitarian feel while maintaining the arcade aesthetic. Cards and containers use rounded: sm (4px) on the outer edge, with 2px borders in primary black creating a frame-within-frame effect. Input fiel

Components

Action Elements **Button-Primary** is the dominant CTA, rendered with backgroundColor: {colors.primary} (#171717), textColor: {colors.on-primary} (#ffffff), typography: {typography.label-md} (VT323, 16px, 500 weight), padding: 32px 64px, and a 2px solid border in primary black. On hover, the button transitions to backgroundColor: {colors.primary-fixed-dim} (#1a1a1a) with transform: translateY(-0.1rem) and boxShadow: 0 3px 8px rgba(0, 0, 0, 0.15), all over 400ms cubic-bezier(0.16, 1, 0.3, 1). The large padding (32px vertical, 64px horizontal) makes the button feel substantial and arcade-like, inviting a click. **Button-Secondary** uses transparent background with textColor: {colors.primary}, a 2px border, and 8px vertical padding, appearing as an outline variant for lower-priority actio

Do's and Don'ts

**Do**

• Do use VT323 monospace for all headlines, button labels, and hero text—it's the brand's visual signature and instantly communicates the arcade aesthetic.
• Do maintain 2px solid borders in primary black (#171717) on all interactive elements (buttons, cards, inputs) to reinforce the arcade cabinet tactility.
• Do apply generous spacing (lg: 40px between sections, md: 24px for gutters) to prevent visual clutter and let character cards and missions breathe.
• Do use the secondary color (#22c55e, mint green) exclusively for success states, achievement badges, and progress indicators—never for primary CTAs.
• Do pair hover states with both a shadow upgrade (0 3px 8px → 0 8px 24px) and a subtle transform (translateY(-0.1rem) or scale(1.05)) to create tactile, physical feedback.
• Do use Inter sans-serif for all body copy, secondary labels, and small text to maintain legibility and modern polish against the retro headline font.

**Don't**

• Don't use rounded corners larger than 1rem (16px)—the arcade aesthetic demands sharp or subtly beveled edges, never organic curves.
• Don't apply color alone to convey hierarchy; always pair color changes with size, weight, or border changes (e.g., don't make secondary text pink; make it smaller and lighter).
• Don't use blur filters, transparency gradients, or glassmorphism effects—all depth must be achieved through borders, shadows, and CSS transforms.
• Don't exceed 2px border width on any element; the arcade aesthetic is about precision, not heaviness.
• Don't use the secondary color (#22c55e) or tertiary color (#ec4899) for primary CTAs or body text—reserve them for badges, secondary actions, and character-specific UI.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12); the arcade cabinet is a high-contrast, flat-lit environment, not a soft, diffuse one.