# Commercial Type design system

> Commercial Type design system measured from commercialtype.com: Styrene UI A font, #5A0050 primary, 8 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/commercialtype.com/

Commercial Type’s website (commercialtype.com) uses the Styrene UI A font and #5A0050 as its main color on a #38A4FA background. Measured by Sitepeel on November 4, 2026.

## What font does Commercial Type use?

Commercial Type uses Styrene UI A (weight 400) on commercialtype.com. Page titles are 21px at weight 400 (19.5px on phones) and body text is 14.5px. Measured on November 4, 2026.

- Styrene UI A (weights 400)

## Commercial Type colors: palette and hex codes

Commercial Type’s main colors are #38A4FA (vivid blue) for the background, #000000 (near black) for text and #5A0050 (deep purple) as the main accent, with #78FFF0 (light teal) and #FF4B6C (red) as other accents. Measured on November 4, 2026.

- #38A4FA: vivid blue
- #000000: near black
- #FFFFFF: white
- #5A0050: deep purple
- #323232: graphite
- #78FFF0: light teal
- #FF4B6C: red

## What is Commercial Type built with?

Commercial Type’s website (commercialtype.com) is built with Hotwire Turbo, Nginx, Stripe and Ruby on Rails. Measured on November 4, 2026.

- JavaScript framework: Hotwire Turbo
- Server: Nginx 1.26.3, Ruby on Rails
- Payments & commerce: Stripe

## Questions and answers

### What font does Commercial Type use?

Commercial Type’s website uses Styrene UI A (weight 400). Page titles are 21px at weight 400 (19.5px on phones) and body text is 14.5px. Measured on November 4, 2026.

### What are the Commercial Type colors and hex codes?

On commercialtype.com: #38A4FA (vivid blue) for the background, #000000 (near black) for text and #5A0050 (deep purple) as the main accent, with #78FFF0 (light teal) and #FF4B6C (red) as other accents. The color palette above lists all 8 colors with their hex codes and where each one is used.

### What is the Commercial Type design system?

The design system on this page is commercialtype.com’s, as measured on November 4, 2026: Styrene UI A type, #5A0050 as the main color and square corners, written down as a DESIGN.md. It is not Commercial Type’s own documentation.

### What is Commercial Type built with?

Commercial Type’s website (commercialtype.com) is built with Hotwire Turbo, Nginx, Stripe and Ruby on Rails. Measured on November 4, 2026.

### What is the Commercial Type DESIGN.md?

A plain-text file with Commercial Type’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Commercial Type’s official design system?

No. Sitepeel measured it from commercialtype.com’s public page on November 4, 2026. It is an independent analysis, not made or approved by Commercial Type.

### Can I use Commercial Type’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Commercial Type’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/commercialtype.com/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Commercial Type.

## The DESIGN.md file

```markdown
---
version: alpha
name: Commercial Type
description: "Light interface measured from commercialtype.com: Styrene UI A type, deep purple accents, flat surfaces and square corners."
colors:
  background: "#38A4FA"
  surface: "#38A4FA"
  on-surface: "#000000"
  on-background: "#000000"
  on-surface-variant: "#FFFFFF"
  primary: "#5A0050"
  on-primary: "#FFFFFF"
  inverse-surface: "#323232"
  secondary: "#78FFF0"
  tertiary: "#FF4B6C"
typography:
  headline-display:
    fontFamily: Styrene UI A
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.4
  body-md:
    fontFamily: Styrene UI A
    fontSize: 14.5px
    fontWeight: 400
    lineHeight: 1.4
  body-lg:
    fontFamily: Styrene UI A
    fontSize: 16.5px
    fontWeight: 400
    lineHeight: 1.4
  headline-display-mobile:
    fontFamily: Styrene UI A
    fontSize: 19.5px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  none: 0px
spacing:
  xs: 2.09px
  sm: 6.26px
  md: 10.44px
  lg: 20.46px
  gutter: 20.88px
  margin: 20.88px
components:
  button-primary:
    backgroundColor: "{colors.inverse-surface}"
    textColor: "{colors.on-primary}"
    typography: "{typography.headline-display}"
    rounded: "{rounded.none}"
    padding: 0px 6.26px
    height: 31px
  input-field:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: 0px 2.92px
---

# Commercial Type Design System

## Overview

The interface is light, built on **Vivid Blue (#38A4FA)** with **Near Black (#000000)** text, and **Deep Purple (#5A0050)** as the main accent.

Type is set in **Styrene UI A**. Headlines run large; body text is 14.5px. Depth comes from soft drop shadows. Corners are square.

Measured from [commercialtype.com](https://commercialtype.com/) on November 4, 2026 at 1440×900 and 390×844 from 88 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 8 roles.

- **Vivid Blue (#38A4FA):** Page background, seen 1 time. Token `background`.
- **Near Black (#000000):** Primary text and headings, seen 14 times. Token `on-surface`.
- **White (#FFFFFF):** Secondary text, seen 11 times. Token `on-surface-variant`.
- **Deep Purple (#5A0050):** Brand color on large areas, seen 1 time. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Graphite (#323232):** High-contrast fills, seen 11 times. Token `inverse-surface`.
- **Light Teal (#78FFF0):** Accent on large areas, seen 1 time. Token `secondary`.
- **Red (#FF4B6C):** Accent on large areas. Token `tertiary`.

## Typography

**Styrene UI A** carries the whole interface. Fallback stack: `Styrene UI A, Arial, sans-serif`. Other loaded fonts: Styrene UI B, Action Grotesque Upright, Spectator Upright, Spectator Italic.

- **headline-display:** Styrene UI A 21px at weight 400, line height 1.4 (19.5px on mobile). Page title (h1).
- **body-md:** Styrene UI A 14.5px at weight 400, line height 1.4. Body text.
- **body-lg:** Styrene UI A 16.5px at weight 400, line height 1.4. Lead paragraphs.

## Layout

Spacing does not follow a strict grid: 0% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 2.09px, sm 6.26px, md 10.44px, lg 20.46px.
- **Gaps:** 20.88px is the most common gap in flex and grid layouts.
- **Page margin:** 20.88px on each side of full-width sections.
- **Breakpoints:** 640px, 641px, 768px, 769px, 1024px, 1280px, 1440px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(0, 0, 0, 0.35) 2.088px 2.088px 6.8904px 0px`
- `rgba(0, 0, 0, 0.25) 2.088px 2.088px 6.8904px 0px`

## Shapes

Corners are square. Measured radii, most used first:

- **none (0px):** measured.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Catalog”):** #323232 fill, #FFFFFF text, 20.88px/400, padding 0px 6.26px, shadow `rgba(0, 0, 0, 0.35) 2.088px 2.088px 6.8904px 0px`.
- **input-field:** transparent fill, #000000 text, 14.616px/400, padding 0px 2.92px, border 1px solid #000000.

## Do's and Don'ts

- Do use #38A4FA for the page.
- Do keep text in 2 levels: #000000, #FFFFFF.
- Do use #5A0050 as the brand accent: header, logo and key highlights.
- Do reuse the measured spacing steps (6.26px, 10.44px, 20.46px).
- Don't use #FFFFFF for body text; it reaches 2.67:1 on #38A4FA. Keep it for large text or metadata.
- Don't introduce new font families beyond Styrene UI A.
- Don't use #5A0050 for large backgrounds or body text.
- Don't make interface transitions slower than 0.3s.

## Motion

Interface transitions are quick: 0.15s, 0.3s.

- **Easing:** `ease`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/commercialtype.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```