Typecraft — Membership Pricing Comparison

---
version: alpha
name: Typecraft — Membership Pricing Comparison
colors:
  primary: '#04A5E5'
  canvas: '#E6E9EF'
  ink: '#2E3148'
  muted: '#5C5F77'
  surface: '#CCD0DA'
typography:
  heading:
    fontFamily: '"Inter var", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
    fontSize: 60px
    fontWeight: 700
    lineHeight: 60px
  body:
    fontFamily: '"Inter var", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
    fontSize: 12px
    fontWeight: 700
    lineHeight: 18px
---

## Overview
Two side-by-side free and paid membership cards with a monthly/annual selector, a prominent cyan purchase action and a quieter free-account action. Isolated source component inspected at 1440px and 390px viewport widths in light mode on September 30, 2026.

## Colors
The source light-theme palette uses #E6E9EF canvas, #2E3148 ink, #5C5F77 muted text and #04A5E5 cyan action accents. Neutral cards use translucent #CCD0DA surfaces; alpha and surrounding canvas affect the painted result. These are shared source palette values, not a claim that every swatch occurs in this crop.

## Typography
The sampled heading uses "Inter var", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" at 60px, weight 700, with 60px leading. Supporting sample: "Inter var", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", 12px / 18px. Cartridge gives promotional headings their arcade character; Inter var serves interface text. Use properly licensed font assets or a deliberate substitute.

## Layout
Center the sans-serif heading above a constrained two-card comparison. At mobile width the cards stack. Align inclusions as lists and separate the billing selector from the price. This is an on-page pricing section, not a standalone pricing page. Desktop component bounds were approximately 1440 × 1423px; these describe the capture, not universal fixed sizes. Exact responsive breakpoints were not measured.

## Elevation & Depth
Use restrained surface contrast and fine borders. Soft shadows should emphasize a primary action or featured panel, not every text element. Shadow strength is visual guidance rather than an exact measured token.

## Shapes
Rounded rectangular panels and controls soften the retro display typography. Preserve consistent input and action widths. Exact radii for individual elements are retained in the computed-style capture; do not assume a single radius fits every element.

## Components
Only the displayed monthly state is captured. The annual control and checkout were not exercised. Prices and benefits are source content at capture time, not independently verified offers.

## Do's and Don'ts
Do preserve the observed hierarchy, readable labels and mobile ordering. Do use your own product copy and evidence. Do not infer keyboard behavior, hover transitions, dark mode or accessibility compliance from screenshots. Captures show static resting states only.