Myshopify Brand Design System Deep Dive

1. Brand Overview

Myshopify is the subdomain service behind Shopify's merchant storefronts. It's not the consumer-facing Shopify.com, but the infrastructure brand you see when a store hasn't mapped a custom domain yet. Because of that, the design is stripped, functional, and frankly a little utilitarian. It’s not here to wow you – it’s here to get you moving to the main store or to set up your own.

The vibe is barebones. Black as the anchor color, a default link blue straight out of browser styles (#0000ee), and a grey (#5b5b5b) for secondary text. This isn’t a high-polish marketing site; it’s a functional bridge. There’s no logo on the main landing page. Favicons are present (Shopify’s cloud-hosted favicon and a local favicon.ico) so the browser tab still reads “Shopify,” but the page itself feels like an interstitial.

Typography is largely “Shopify Sans Medium” for headings and UI text, with a weird inclusion of Times for links in one context — probably a default fallback or unstyled anchor tag. Sizes are minimal: big 40px for H1, body at 16px, captions at 14px uppercase.

The spacing scale shows they’re on an 8px system — multiples and near-multiples — but there are odd outliers like 26.8px. Rounded corners exist (20px and 25px) but used sparingly. No shadows. Borders are minimal: 2px solid black in one instance.

It’s a flat, functional system. Think “developer default with a sprinkle of Shopify brand.” The minimalism works because the audience is transitional — you’re either heading to a store or setting one up. No need for elaborate UI. But in its simplicity, there are still clear rules: anchored typography, strict palette, and disciplined spacing.

2. Color System

2.1 Primary Colors

The primary “brand” color here is black (#000000). It’s used for primary text, borders, and some link states. Black as a primary is about clarity and neutrality. It doesn’t commit to a tone, which works for a service that’s behind many different store brands.

The link blue (#0000ee) is an interesting choice — this is the default browser link color. It screams “unstyled” but in context, it’s probably intentional: a standard, universally recognized cue for navigation. Secondary grey (#5b5b5b) is used for captions and less important text.

Compared to Shopify.com’s green, this is stripped back. No brand green here — Myshopify is the backstage. Competitors like Squarespace would never ship a link in default blue; they’d control every pixel. Myshopify lets the browser do the talking.

2.2 Complete Palette

2.3 Color Relationships

Contrast is strong across the board. Black on white is 21:1 — maximum WCAG contrast. Link blue on white is 8.59:1 — comfortably above AA and AAA. Grey (#5b5b5b) on white is 6.56:1 — still above AA for normal text.

There’s no dark mode here — palette is static. The inverse link style (white text) assumes a dark background in its context.

2.4 Usage Guide

Works well:

• Black text on white background — pure clarity.
• Link blue used sparingly — stands out strongly.
• Grey for captions — keeps hierarchy clear.

Avoid:

• Grey text on grey background — contrast will tank.
• Mixing link blue with white text — becomes unreadable on light backgrounds.
• Introducing new accent colors — breaks the neutral backstage tone.

3. Typography

3.1 Font Families

Primary: Shopify Sans Medium — custom Shopify font. No Google or Adobe Fonts here; it’s self-hosted.

Secondary: Times — appears in one link context, likely a fallback or unstyled anchor.

No variable fonts. No fancy font loading — stripped back.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is simple: massive H1, normal body text, slightly smaller captions. There’s no elaborate scale — just enough to distinguish a title from body.

Readability is fine — Shopify Sans is clean, and 16px is a safe body size. Uppercase captions help them stand out despite the smaller size.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid.

4.2 Layout

Breakpoint at 768px — classic tablet cutoff. No container widths in data, but likely fluid with padding based on spacing tokens. Responsive approach is minimal — probably single-column on mobile, flex/grid on desktop.

5. Visual Elements

Border Radius:

• 20px — applied to anchors.
• 25px — applied to a div.
  Large, soft corners, used sparingly. No small radii.

Shadows: None. Flat design. Depth comes from spacing and borders.

Borders:

• 2px solid black — used once on an anchor. Strong, high-contrast.

6. Components

6.1 Buttons

No explicit button styles in extracted data — likely there aren’t styled <button> elements here. Anchors act as primary CTAs.

6.2 Links

Three variants:

1. Default link blue

   • Color: #0000ee
   • No underline in default.
   • Hover: no change recorded.

2. Inverse link (white)

   • Color: #ffffff
   • No underline.
   • Hover: stays white.

3. Black link

   • Color: #000000
   • Underline in default.
   • Hover: stays black.

6.3 Forms

No input styles in extracted data — likely no forms on this landing.

6.4 Cards

No card component in data — page is static.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-link-blue: #0000ee;
  --color-grey: #5b5b5b;
  --color-white: #ffffff;

  /* Typography */
  --font-shopify-sans-medium: 'Shopify Sans Medium';
  --font-times: 'Times';
  --heading-1-size: 40px;
  --heading-1-weight: 700;
  --link-size: 16px;
  --link-weight: 400;
  --caption-size: 14px;
  --caption-weight: 400;
  --caption-transform: uppercase;

  /* Spacing */
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-26-8: 26.8px;
  --space-30: 30px;
  --space-35: 35px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-80: 80px;
  --space-96: 96px;

  /* Border Radius */
  --radius-20: 20px;
  --radius-25: 25px;

  /* Borders */
  --border-2-solid-black: 2px solid #000000;

  /* Breakpoints */
  --breakpoint-tablet: 768px;
}

8. AI Coding Assistant Prompt

# Myshopify Design System Specification

You are a Myshopify design expert. Build UIs matching their visual language exactly.

## Brand Context
Myshopify is a functional, backstage interface for Shopify storefronts without custom domains. It uses a stripped palette, minimal typography, and flat design to keep focus on navigation and setup. The tone is neutral and utilitarian.

## Color Palette
- Black: #000000 — Primary text, borders
- Link Blue: #0000ee — Default link color, navigation cues
- Grey: #5b5b5b — Secondary text, captions
- White: #ffffff — Link text in inverse contexts

## Typography
- Primary font: "Shopify Sans Medium"
- Secondary font: "Times" (used in one link context)
- Heading-1: 40px, weight 700 — Page titles
- Link: 16px, weight 400 — Navigation
- Caption: 14px, weight 400, uppercase — Secondary labels

## Spacing & Grid
Base unit: 8px  
Scale: 5px, 8px, 10px, 26.8px, 30px, 35px, 40px, 50px, 60px, 80px, 96px  
Use multiples for padding/margins.

## Border Radius
- md: 20px — Anchors
- lg: 25px — Div containers

## Shadows & Depth
Flat design — no shadows. Use 2px solid black borders for emphasis.

## Component Specifications

### Link (Blue)
Default:
```css
a.link-blue {
  color: #0000ee;
  text-decoration: none;
  font-weight: 400;
}
a.link-blue:hover {
  /* No hover change */
}
```

### Link (Inverse White)
```css
a.link-white {
  color: #ffffff;
  text-decoration: none;
}
a.link-white:hover {
  color: #ffffff;
}
```

### Link (Black Underlined)
```css
a.link-black {
  color: #000000;
  text-decoration: underline;
}
a.link-black:hover {
  color: #000000;
}
```

## Layout & Responsive Rules
- Breakpoint: 768px — switch to mobile layout below
- Padding and margins must use spacing tokens
- Fluid width containers; center content

## Interaction Rules
- No animations; instant state changes
- Focus indicators via browser default

## DO
- Use only defined palette colors
- Maintain 8px grid spacing
- Use Shopify Sans for headings and body
- Keep borders at 2px solid black when used
- Keep design flat — no shadows

## DON'T
- Add new colors
- Use shadows for depth
- Mix border radius values outside defined set
- Override browser default link focus styles

## Code Examples

### Blue Link
```css
a.link-blue {
  color: #0000ee;
  text-decoration: none;
  font-weight: 400;
}
```

### Black Underlined Link
```css
a.link-black {
  color: #000000;
  text-decoration: underline;
}
```

### Container
```css
.container {
  padding: var(--space-40);
  border-radius: var(--radius-25);
  border: var(--border-2-solid-black);
}
```

9. Summary

TL;DR: Myshopify’s design is flat, neutral, and functional — a backstage pass to Shopify’s storefront infrastructure. Black, browser-blue, and grey are the only colors. Typography is clean and minimal. Spacing sticks to an 8px grid with a few oddball values. No shadows, big rounded corners used sparingly.

Brand Keywords: neutral-functional, backstage-minimal, flat-utilitarian, link-default