# MARVEL E-commerce Website design system

> MARVEL E-commerce Website design system measured from marvelthemede-commercewebsite.netlify.app: CustomFont font, 6 color hex codes, type scale and spacing.

Canonical page: https://sitepeel.dev/design-md/marvelthemede-commercewebsite.netlify.app/

MARVEL E-commerce Website’s website (marvelthemede-commercewebsite.netlify.app) uses the CustomFont font and #E23636 as its main color on a black background. Measured by Sitepeel on November 5, 2026.

## What font does MARVEL E-commerce Website use?

MARVEL E-commerce Website uses CustomFont (weights 500 and 700) and Times New Roman (weight 400) on marvelthemede-commercewebsite.netlify.app. Page titles are 48px at weight 500 and body text is 16px. Measured on November 5, 2026.

- CustomFont (weights 500, 700)
- Times New Roman (weights 400)

## MARVEL E-commerce Website colors: palette and hex codes

MARVEL E-commerce Website’s main colors are #000000 (near black) for the background, #F5F5F5 (snow) for text and #E23636 (red) as the main accent. Measured on November 5, 2026.

- #000000: near black
- #F5F5F5: snow
- #232027: cool charcoal
- #E23636: red
- #908F8F: gray

## What is MARVEL E-commerce Website built with?

MARVEL E-commerce Website’s website (marvelthemede-commercewebsite.netlify.app) is built with Netlify, Font Awesome and Google Fonts. Measured on November 5, 2026.

- Hosting & CDN: Netlify
- Fonts & icons: Font Awesome, Google Fonts

## Questions and answers

### What font does MARVEL E-commerce Website use?

MARVEL E-commerce Website’s website uses CustomFont (weights 500 and 700) and Times New Roman (weight 400). Page titles are 48px at weight 500 and body text is 16px. Measured on November 5, 2026.

### What are the MARVEL E-commerce Website colors and hex codes?

On marvelthemede-commercewebsite.netlify.app: #000000 (near black) for the background, #F5F5F5 (snow) for text and #E23636 (red) as the main accent. The color palette above lists all 6 colors with their hex codes and where each one is used.

### What is the MARVEL E-commerce Website design system?

The design system on this page is marvelthemede-commercewebsite.netlify.app’s, as measured on November 5, 2026: CustomFont type, #E23636 as the main color and square corners, written down as a DESIGN.md. It is not MARVEL E-commerce Website’s own documentation.

### What is MARVEL E-commerce Website built with?

MARVEL E-commerce Website’s website (marvelthemede-commercewebsite.netlify.app) is built with Netlify, Font Awesome and Google Fonts. Measured on November 5, 2026.

### What is the MARVEL E-commerce Website DESIGN.md?

A plain-text file with MARVEL E-commerce Website’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 MARVEL E-commerce Website’s official design system?

No. Sitepeel measured it from marvelthemede-commercewebsite.netlify.app’s public page on November 5, 2026. It is an independent analysis, not made or approved by MARVEL E-commerce Website.

### Can I use MARVEL E-commerce Website’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 MARVEL E-commerce Website’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/marvelthemede-commercewebsite.netlify.app/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 MARVEL E-commerce Website.

## The DESIGN.md file

```markdown
---
version: alpha
name: MARVEL E-commerce Website
description: "Dark interface measured from marvelthemede-commercewebsite.netlify.app: CustomFont type with Times New Roman, red accents, tonal surfaces and square corners."
colors:
  background: "#000000"
  surface: "#000000"
  on-surface: "#F5F5F5"
  on-background: "#F5F5F5"
  surface-container-low: "#232027"
  primary: "#E23636"
  on-primary: "#000000"
  inverse-surface: "#908F8F"
typography:
  headline-display:
    fontFamily: CustomFont
    fontSize: 48px
    fontWeight: 500
  headline-lg:
    fontFamily: CustomFont
    fontSize: 24px
    fontWeight: 700
  headline-md:
    fontFamily: CustomFont
    fontSize: 20px
    fontWeight: 700
  body-md:
    fontFamily: Times New Roman
    fontSize: 16px
    fontWeight: 400
  body-lg:
    fontFamily: CustomFont
    fontSize: 19px
    fontWeight: 700
  label-md:
    fontFamily: CustomFont
    fontSize: 16px
    fontWeight: 700
rounded:
  none: 0px
spacing:
  xs: 2px
  sm: 5px
  md: 12px
  lg: 21.28px
  xl: 53.2px
components:
  link:
    textColor: "{colors.primary}"
---

# MARVEL E-commerce Website Design System

## Overview

The interface is dark, built on **Near Black (#000000)** with **Snow (#F5F5F5)** text, and **Red (#E23636)** as the main accent.

Type is set in **CustomFont** and **Times New Roman**. Headlines run large; body text is 16px. Depth comes from soft drop shadows. Corners are square.

Measured from [marvelthemede-commercewebsite.netlify.app](https://marvelthemede-commercewebsite.netlify.app/) on November 5, 2026 at 1440×900 and 390×844 from 86 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 6 roles.

- **Near Black (#000000):** Page background, seen 1 time. Token `background`.
- **Snow (#F5F5F5):** Primary text and headings, seen 62 times. Token `on-surface`.
- **Cool Charcoal (#232027):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Red (#E23636):** Links and interactive text, seen 5 times. Token `primary`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Gray (#908F8F):** High-contrast fills, seen 1 time. Token `inverse-surface`.

## Typography

**CustomFont** and **Times New Roman** share the interface. Fallback stack: `CustomFont, sans-serif`. Other loaded fonts: Font Awesome 5 Brands, Font Awesome 5 Pro.

- **headline-display:** CustomFont 48px at weight 500. Page title (h1).
- **headline-lg:** CustomFont 24px at weight 700. Section headings (h2).
- **headline-md:** CustomFont 20px at weight 700. Sub-section headings.
- **body-md:** Times New Roman 16px at weight 400. Body text.
- **body-lg:** CustomFont 19px at weight 700. Lead paragraphs.
- **label-md:** CustomFont 16px at weight 700. Buttons, navigation and labels.

## Layout

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

- **Scale:** xs 2px, sm 5px, md 12px, lg 21.28px, xl 53.2px.

## Elevation & Depth

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

- `rgba(255, 255, 255, 0.3) 0px 6px 50px 1px`

## Shapes

Corners are square. Measured radii, most used first:

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

## Components

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

- **link:** transparent fill, #E23636 text, padding 0px.

## Do's and Don'ts

- Do use #000000 for the page and lift surfaces in small steps: #232027.
- Do use #E23636 for links and interactive text.
- Do reuse the measured spacing steps (5px, 12px, 21.28px).
- Don't introduce new font families beyond CustomFont and Times New Roman.
- Don't use #E23636 for large backgrounds or body text.
- Don't make interface transitions slower than 0.4s.

## Motion

Interface transitions are quick: 0.4s.

- **Easing:** `ease`.

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

```