# Glitch Blog — Design System
> The official blog for the Glitch web development platform.
- **Canonical:** https://uiuxskills.com/library/glitch-blog
- **Source:** https://glitch.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:16:30.391Z

---

---
version: alpha
name: Glitch Blog
description: The official blog for the Glitch web development platform.
tone: Playful, energetic, and accessible.
color-scheme: light
colors:
  primary: "#FF00BC"
  secondary: "#F1FAEE"
  surface: "#FAFAFA"
  on-surface: "#000000"
  outline: "#B4B4B4"
  error: "#F15BB5"
  surface-container: "#FFFFFF"
  on-primary: "#FFFFFF"
  surface-bright: "#FFFFFF"
  focus-ring: "#FF00BC"
typography:
  display-lg:
    fontFamily: InterVariable
    fontSize: 48px
  display-md:
    fontFamily: InterVariable
    fontSize: 36px
  headline-lg:
    fontFamily: InterVariable
    fontSize: 40px
  headline-md:
    fontFamily: InterVariable
    fontSize: 24px
  headline-sm:
    fontFamily: InterVariable
    fontSize: 20px
  body-md:
    fontFamily: InterVariable
    fontSize: 17.6px
  label-sm:
    fontFamily: InterVariable
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#D1009A"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-surface}"
  card:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#D1009A"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  card-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  card-bright:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 200ms
  duration-medium: 500ms
  easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1)
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.1)
  md: 0 4px 6px rgba(0, 0, 0, 0.1)
  lg: 0 10px 15px rgba(0, 0, 0, 0.1)
---

## Overview

The Glitch Blog features a playful, high-energy visual identity that reflects its mission to make web development accessible and fun. The design relies on vibrant, saturated accent colors paired with clean, neutral surfaces to highlight creative content and maintain a friendly, approachable atmosphere for developers.

## Colors

The color strategy balances a bold brand accent with a neutral, high-readability foundation to ensure content remains the primary focus.

*   Primary (#FF00BC): The core brand accent used for links, CTAs, and highlights.
*   Secondary (#F1FAEE): A soft, off-white background color used for subtle contrast.
*   Surface (#FAFAFA): The primary background color for the blog interface.
*   On-surface (#000000): Primary text color for high readability against light surfaces.
*   Outline (#B4B4B4): Used for input borders and subtle UI dividers.
*   Error (#F15BB5): Semantic color for error states and alerts.
*   Surface-container (inferred) (#FFFFFF): Used for card backgrounds and input fields.
*   On-primary (inferred) (#FFFFFF): Text color for elements on primary-colored backgrounds.
*   Surface-bright (inferred) (#FFFFFF): Highlight surface for active states.
*   Focus-ring (inferred) (#FF00BC): Focus indicator color for accessibility.

## Typography

The design uses the InterVariable font family exclusively, creating a clean, modern, and highly legible reading experience across all screen sizes.

*   Display-lg (inferred): Large display for hero headlines.
*   Display-md (inferred): Secondary display for section titles.
*   Headline-lg: Primary heading size for main page titles.
*   Headline-md (inferred): Secondary heading for blog post titles.
*   Headline-sm (inferred): Small heading for card titles.
*   Body-md: Standard body text size for articles and descriptions.
*   Label-sm (inferred): Small labels for metadata, dates, and badges.

## Layout

The layout follows a standard blog grid with a central content column, utilizing an 8px base unit to ensure consistent rhythm. The page structure follows a consistent `nav` → `hero` → `blog-feed` → `footer` order. The hero section features a centered headline and subhead paired with a featured image. Responsive behavior is mobile-first, transitioning from a single-column stack to a multi-column grid as screen real estate increases.

## Elevation & Depth

Elevation is used sparingly to differentiate cards from the background, relying on a subtle shadow scale to maintain a clean, flat aesthetic.

*   Elevation.sm: Used for card lift and subtle separation.
*   Elevation.md: Used for standard component depth.
*   Elevation.lg: Reserved for larger overlays or modal-like interactions.

## Shapes

The design employs a mix of sharp corners for functional inputs and moderate rounding for content cards. This creates a balance between technical precision and friendly accessibility.

The `rounded` scale ranges from `sm` (4px) for input fields to `md` (8px) for cards, providing a cohesive, approachable geometry without appearing overly soft or cartoonish.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
An energetic, high-contrast button using `{colors.primary}` with `{typography.label-sm}`. Use this for the primary call-to-action on any page. On hover, the background transitions to a deeper pink to provide immediate user feedback.

### Card
The standard container for blog posts, featuring a `{colors.surface-container}` background and `{rounded.md}` corners. Use the elevated variant for featured content to create visual hierarchy.

### Input Field
A functional, clean input using `{colors.surface-container}` with a subtle `{colors.outline}` border. The border switches to `{colors.primary}` on focus to ensure the user knows where their input is being captured.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs and active links. | Do not use `{colors.primary}` for body text. |
| Apply `{rounded.md}` to all card components for a consistent look. | Avoid using `{rounded.full}` on card components. |
| Use `{spacing.md}` as the default gutter between blog post cards. | Do not mix font families outside of the defined `{typography}` scale. |
| Maintain high contrast by pairing `{colors.on-surface}` with `{colors.surface}`. | Never apply `{typography.body-md}` on `{colors.primary}` without checking contrast. |
| Use `{typography.headline-lg}` for main page titles. | Avoid using `{elevation.lg}` on small UI elements like badges. |
| Apply `{elevation.sm}` to cards to provide subtle depth. | Do not use `{colors.error}` for non-destructive actions. |
| Use `{input-field-focus}` to indicate active input states. | Do not use `{colors.outline}` for primary action buttons. |
| Use `{badge}` for metadata tags and categories. | Do not use `{typography.label-sm}` for primary article body text. |

## Content Style

CTA labels should use imperative verbs (e.g., "Read more," "Submit") in sentence case. Keep labels short, direct, and action-oriented to maintain the energetic pace of the blog.

Headlines are conversational and engaging, often posing questions or sharing updates to invite reader participation. They should be benefit-led and clear, avoiding overly abstract or marketing-heavy jargon.

Copy density is designed for the web; use short, scannable paragraphs and frequent lists to break up information. Maintain a rhythm that allows the reader to digest technical updates quickly.

## Imagery & Icons

The visual style features a mixed treatment, combining custom, playful illustrations with high-quality photography for blog post thumbnails. This variety keeps the feed dynamic while maintaining the brand's accessible, creative spirit. Icons should follow a clean, minimal geometry that complements the InterVariable typeface, and all imagery should be framed within the card components using consistent `{rounded.md}` clipping.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Glitch Blog, a playful, energetic, and accessible web development platform blog. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name (`{colors.primary}`, `{typography.headline-lg}`, `{rounded.md}`) — never hardcode hex values, font sizes, or pixel radii.
2. Use only the component variants defined under `components:` — `button-primary`, `card`, `card-elevated`, `card-default`, `card-bright`, `input-field`, `badge`, `badge-error`, `link`, and `divider`. Do not invent variants absent from the spec.
3. Follow the Layout section for page structure: `nav` → `hero` → `blog-feed` → `footer`. Apply mobile-first rendering, transitioning to a multi-column grid at 768px.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., using `{colors.primary}` for body text), surface the conflict explicitly before proceeding.
5. Apply motion tokens (`{motion.duration-short}`, `{motion.easing-standard}`) to all hover and focus transitions; do not use arbitrary durations.

## Output contract

**Must:**
- Use named tokens for every color, spacing, radius, shadow, and typography decision.
- Render hover, focus, and disabled states for all interactive components when the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`, `swatch-focus-ring`).
- Apply `{spacing.md}` as the default gutter between blog post cards per the Do's and Don'ts.
- Write CTAs in sentence-case imperative verbs ("Read more," "Submit") per the Content Style section.
- Clip imagery inside card components using `{rounded.md}`.

**Must NOT:**
- Invent colors, font families, radii, or elevation values outside the spec.
- Use generic utility defaults (e.g., `text-gray-500`, `rounded-md`) when a brand token exists.
- Apply `{colors.primary}` to body text or `{rounded.full}` to card components.
- Add emoji, filler copy, or unsolicited marketing language.
- Rewrite, replace, or reorder existing page copy, headings, navigation items, or routes.

## When in doubt
- If the spec doesn't define a value, ask the user before inventing one.
- Tokens marked "(inferred)" are visual approximations; if an authoritative source (Storybook, theme file) exists, defer to it.
- For ambiguous backgrounds, default to `{colors.surface}`; for text on those surfaces, use `{colors.on-surface}`.
- Prefer composing existing components over introducing new tokens.
- Always verify `{colors.primary}` text passes 4.5:1 contrast against its background before applying it to copy.