Typecraft — Developer Education

---
version: alpha
name: Typecraft — Retro Developer Education
colors:
  primary: '#04A5E5'
  canvas: '#E6E9EF'
  ink: '#2E3148'
  muted: '#5C5F77'
  surface: '#CCD0DA'
typography:
  heading:
    fontFamily: Cartridge, sans-serif
    fontSize: 72px
    fontWeight: 900
    lineHeight: 72px
    letterSpacing: 3.6px
  body:
    fontFamily: 'Inter var, system-ui, sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
---

## Overview
A developer-education landing page pairing retro arcade lettering and vivid pixel-art course covers with a quiet blue-gray interface. Captured in light mode at 1440px desktop and 390px mobile on September 30, 2026. The full desktop page includes course discovery, practical-learning demonstration, instructor introduction, testimonials, membership comparison and closing CTA. Only the mobile opening viewport was visually reviewed; deeper mobile behavior and dark mode are not verified.

## Colors
Computed samples show #E6E9EF canvas, #2E3148 primary text, #5C5F77 secondary copy and #04A5E5 cyan calls to action. Cards use translucent #CCD0DA overlays; treat the surface token as the underlying color, not a flat replacement for transparency. Small green, orange, pink and blue icons distinguish learning subjects. Let the colorful course artwork supply most saturation rather than adding competing large gradients.

## Typography
Use the source's Cartridge display family for heavy uppercase headlines, with an appropriately licensed face or independently chosen substitute. The desktop hero measures 72px/72px at weight 900 and 3.6px tracking; section heads measure 48px/48px. Inter var carries body copy and controls. At mobile width the headline scales down and wraps across three centered lines. The membership headline deliberately uses the ordinary sans-serif family rather than the arcade display face.

## Layout
The desktop main content spans about 1152px with 144px side margins. Begin with a compact full-width navigation, centered hero promise, supporting paragraph, adjacent actions and a horizontal assurance row. Show four course cards across; their pixel-art images occupy the upper portion. Subsequent sections use generous vertical spacing and subtle connecting dotted rules with small icon markers. Alternate centered headings with two-column content, terminal demo and testimonial cards. Mobile navigation reduces to logo, theme icon and menu. Hero actions stack full-width with about 16px side gutters; the assurances form a vertical list. Exact breakpoints were not measured.

## Elevation & Depth
Use soft button shadows and restrained card borders. A slightly rotated instructor photograph and elevated paid-membership card add selective depth. The background dot grid remains low contrast. Do not apply the same heavy shadow to every section. Exact shadow parameters are visual estimates, not measured tokens.

## Shapes
Buttons have rounded rectangles: sampled hero controls use 12px radii, smaller pricing controls 8px. Course images follow rounded upper corners, while small subject badges overlap their lower edge. Keep the terminal demonstration rectangular with rounded outer framing and compact window controls. Preserve crisp pixel edges in illustrations rather than smoothing them into generic vector art.

## Components
Navigation uses icon-plus-text links and a filled active tab. The hero highlights a single word in cyan and uses one strong primary CTA alongside a muted pricing anchor. Course cards combine illustration, overlapping subject icon, description and compact item counts; the upcoming subject is desaturated with an angled badge. The practical-learning section contains an actual terminal-shaped demonstration, but this static capture does not establish its execution behavior. Testimonials use one larger quote above a smaller grid. Membership uses side-by-side free/paid cards with a monthly/annual selector; only the displayed monthly state is captured. Source prices and testimonials are captured content, not independently verified promises to reuse.

## Do's and Don'ts
Do combine playful display type with readable neutral body text. Do keep the main action cyan and let course illustrations provide secondary colors. Do stack hero controls on narrow screens and preserve their text labels. Do use authentic licensed artwork and your own claims. Don't copy instructor identity, endorsements or product metrics. Don't infer hover states, terminal functionality, billing transitions, dark-mode behavior or accessibility compliance from screenshots. Don't recreate the long page by merely scaling down the desktop layout on mobile.