# Toy Collectors India design system

> Toy Collectors India design system measured from toycollectorsindia.com: Raleway font, 14 color hex codes, type scale and spacing. Measured November 5, 2026.

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

Toy Collectors India’s website (toycollectorsindia.com) uses the Raleway font and #F3C66A as its main color on a #C9C9C9 background. Measured by Sitepeel on November 5, 2026.

## What font does Toy Collectors India use?

Toy Collectors India uses Raleway (weights 400, 600, 700 and 900) and Inter (weight 400) on toycollectorsindia.com. Page titles are 75px at weight 700 and body text is 14px. Measured on November 5, 2026.

- Raleway (weights 400, 600, 700, 900)
- Inter (weights 400)

## Toy Collectors India colors: palette and hex codes

Toy Collectors India’s main colors are #C9C9C9 (silver) for the background, #33252B (warm graphite) for text and #F3C66A (amber) as the main accent, with #651F3A (dark pink) and #E82C2A (vivid red) as other accents. Measured on November 5, 2026.

- #C9C9C9: silver
- #33252B: warm graphite
- #000000: near black
- #4A172E: deep pink
- #594E53: warm slate
- #FFFFFF: white
- #F0F0F0: mist
- #F3C66A: amber

## What is Toy Collectors India built with?

Toy Collectors India’s website (toycollectorsindia.com) is built with Shopify, Alpine.js, jQuery, React and Preact. Measured on November 5, 2026.

- Site builder & CMS: Shopify
- JavaScript framework: Alpine.js 3.14.9, jQuery 3.6.0, React 19.1.0, Preact
- UI & CSS: MicroModal, styled-components 6.1.19, Splide
- Analytics: Meta Pixel 2.9.435, Sentry 10.53.1, Google Ads, Microsoft Clarity
- Hosting & CDN: Cloudflare
- Fonts & icons: Google Fonts

## Questions and answers

### What font does Toy Collectors India use?

Toy Collectors India’s website uses Raleway (weights 400, 600, 700 and 900) and Inter (weight 400). Page titles are 75px at weight 700 and body text is 14px. Measured on November 5, 2026.

### What are the Toy Collectors India colors and hex codes?

On toycollectorsindia.com: #C9C9C9 (silver) for the background, #33252B (warm graphite) for text and #F3C66A (amber) as the main accent, with #651F3A (dark pink) and #E82C2A (vivid red) as other accents. The color palette above lists all 14 colors with their hex codes and where each one is used.

### What is the Toy Collectors India design system?

The design system on this page is toycollectorsindia.com’s, as measured on November 5, 2026: Raleway type, #F3C66A as the main color and 50px corners, written down as a DESIGN.md. It is not Toy Collectors India’s own documentation.

### What is Toy Collectors India built with?

Toy Collectors India’s website (toycollectorsindia.com) is built with Shopify, Alpine.js, jQuery, React and Preact. The full tech stack Sitepeel found: Shopify, Alpine.js, jQuery, React, MicroModal, styled-components, Meta Pixel, Sentry, Cloudflare and Google Ads. Measured on November 5, 2026.

### What is the Toy Collectors India DESIGN.md?

A plain-text file with Toy Collectors India’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 Toy Collectors India’s official design system?

No. Sitepeel measured it from toycollectorsindia.com’s public page on November 5, 2026. It is an independent analysis, not made or approved by Toy Collectors India.

### Can I use Toy Collectors India’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 Toy Collectors India’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/toycollectorsindia.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 Toy Collectors India.

## The DESIGN.md file

```markdown
---
version: alpha
name: Toy Collectors India
description: "Light interface measured from toycollectorsindia.com: Raleway type with Inter, amber accents, tonal surfaces and 50px corners."
colors:
  background: "#C9C9C9"
  surface: "#C9C9C9"
  on-surface: "#33252B"
  on-background: "#33252B"
  on-surface-strong: "#000000"
  on-surface-variant: "#4A172E"
  on-surface-muted: "#594E53"
  surface-container-low: "#FFFFFF"
  outline: "#F0F0F0"
  primary: "#F3C66A"
  on-primary: "#000000"
  inverse-surface: "#111111"
  secondary: "#651F3A"
  tertiary: "#E82C2A"
  warning: "#F2CA80"
  error: "#E63946"
typography:
  headline-display:
    fontFamily: Raleway
    fontSize: 75px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.008em
  headline-lg:
    fontFamily: Raleway
    fontSize: 42px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: -0.024em
  headline-md:
    fontFamily: Raleway
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.015em
  headline-sm:
    fontFamily: Raleway
    fontSize: 35px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.017em
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.043em
  body-lg:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.04em
  body-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.046em
  label-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.037em
  label-md:
    fontFamily: Raleway
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.013em
  label-sm:
    fontFamily: Raleway
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.043em
  headline-md-mobile:
    fontFamily: Raleway
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.02em
rounded:
  sm: 8px
  md: 16px
  lg: 20px
  xl: 50px
  full: 9999px
spacing:
  xs: 4px
  sm: 6px
  md: 12px
  lg: 20px
  xl: 50px
  gutter: 20px
  margin: 50px
  container: 1600px
components:
  button-primary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.surface-container-low}"
    typography: "{typography.body-lg}"
    rounded: 0px
    padding: 0px 30px
    height: 47px
  button-secondary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.surface-container-low}"
    typography: "{typography.body-sm}"
    rounded: 0px
    padding: 0px 16px
    height: 42px
  button-tertiary:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface-strong}"
    typography: "{typography.body-sm}"
    padding: 1px 6px
    height: 44px
  button-ghost:
    textColor: "{colors.on-surface-muted}"
    typography: "{typography.body-md}"
    rounded: 0px
    padding: 12px 27px 12px 12px
  input-field:
    textColor: "#333333"
    typography: "{typography.label-lg}"
    rounded: 0px
    padding: 0px 20px
  card:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "#0000EE"
    typography: "{typography.label-lg}"
    rounded: "{rounded.lg}"
    padding: 0px
  link:
    textColor: "{colors.on-surface-strong}"
---

# Toy Collectors India Design System

## Overview

Toy Collectors India describes itself as: “Shop Hot Wheels, Mini GT, Pokémon Cards, Disney Pixar Toys, and Matchbox Cars online in India. Find the best toy cars & accessories from top dealers today!” The interface is light, built on **Silver (#C9C9C9)** with **Warm Graphite (#33252B)** text, and **Amber (#F3C66A)** as the main accent.

Type is set in **Raleway** and **Inter**. Headlines run large; body text is 14px. Depth comes from soft drop shadows. Corners are mostly 50px.

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

## Colors

The palette has 14 roles, plus gradient stops #F6EBDA, #4A172E, #651F3A, #A65D23.

- **Silver (#C9C9C9):** Page background. Token `background`.
- **Warm Graphite (#33252B):** Primary text and headings, seen 43 times. Token `on-surface`.
- **Near Black (#000000):** Headings and emphasis, seen 8 times. Token `on-surface-strong`, CSS `--trgg-google-review-name-color`.
- **Deep Pink (#4A172E):** Secondary text, seen 5 times. Token `on-surface-variant`.
- **Warm Slate (#594E53):** Muted text and metadata, seen 6 times. Token `on-surface-muted`.
- **White (#FFFFFF):** Raised areas one step from the page, seen 20 times. Token `surface-container-low`, CSS `--card-bg`.
- **Mist (#F0F0F0):** Borders and dividers, seen 6 times. Token `outline`.
- **Amber (#F3C66A):** Brand color in the header. Token `primary`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Charcoal (#111111):** High-contrast fills, seen 20 times. Token `inverse-surface`.
- **Dark Pink (#651F3A):** Secondary buttons, seen 7 times. Token `secondary`.
- **Vivid Red (#E82C2A):** Secondary buttons, seen 1 time. Token `tertiary`.
- **Light Orange (#F2CA80):** Warnings and highlights, seen 2 times. Token `warning`.
- **Red (#E63946):** Errors and destructive states, seen 1 time. Token `error`.

## Typography

**Raleway** and **Inter** share the interface. Fallback stack: `Raleway, sans-serif`.

- **headline-display:** Raleway 75px at weight 700, line height 1, tracking 0.008em. Page title (h1).
- **headline-lg:** Raleway 42px at weight 900, line height 1.1, tracking -0.024em. Section headings (h2).
- **headline-md:** Raleway 40px at weight 400, line height 1.3, tracking 0.015em (30px on mobile). Sub-section headings.
- **headline-sm:** Raleway 35px at weight 400, line height 1.3, tracking 0.017em. Card and feature titles.
- **body-md:** Inter 14px at weight 400, line height 1.8, tracking 0.043em. Body text.
- **body-lg:** Inter 15px at weight 400, line height 1.2, tracking 0.04em. Lead paragraphs.
- **body-sm:** Inter 13px at weight 400, line height 1.8, tracking 0.046em. Secondary and small text.
- **label-lg:** Inter 16px at weight 400, line height 1.8, tracking 0.037em. Large buttons and tabs.
- **label-md:** Raleway 15px at weight 600, line height 1.2, tracking 0.013em. Buttons, navigation and labels.
- **label-sm:** Raleway 14px at weight 700, line height 1.4, tracking 0.043em. Small labels and badges.

## Layout

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

- **Scale:** xs 4px, sm 6px, md 12px, lg 20px, xl 50px.
- **Gaps:** 20px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1600px.
- **Page margin:** 50px on each side of full-width sections.
- **Breakpoints:** 100px, 108px, 340px, 380px, 420px, 450px, 480px, 540px, 560px, 640px, 720px, 900px, 1024px, 1200px.

## Elevation & Depth

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

- `rgb(0, 0, 0) 6px 6px 0px 0px`
- `rgb(0, 0, 0) 3px 3px 0px 0px`

## Shapes

Most elements use 50px corners. Measured radii, most used first:

- **xl (50px):** 80 elements.
- **lg (20px):** 40 elements.
- **sm (8px):** 24 elements.
- **md (16px):** 24 elements.
- **full (9999px):** 16 elements.

## Components

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

- **button-primary (“Skip to content”):** #651F3A fill, #FFFFFF text, 15px/400, padding 0px 30px.
- **button-secondary (“SEARCH”):** #E82C2A fill, #FFFFFF text, 13.3333px/400, padding 0px 16px.
- **button-tertiary (“Previous”):** #FFFFFF fill, #000000 text, 13.3333px/400, 50% radius, padding 1px 6px, border 3px solid #000000, shadow `rgb(0, 0, 0) 3px 3px 0px 0px`.
- **button-ghost (“CAR MODELS”):** transparent fill, #33252BBF text, 14px/400, padding 12px 27px 12px 12px.
- **input-field (“Search your car...”):** transparent fill, #333333 text, 16px/400, padding 0px 20px.
- **card:** #FFFFFF fill, #0000EE text, 16px/400, 20px radius, padding 0px, border 3px solid #000000, shadow `rgb(0, 0, 0) 6px 6px 0px 0px`.
- **link:** transparent fill, #000000 text, padding 0px.

## Do's and Don'ts

- Do use #C9C9C9 for the page and lift surfaces in small steps: #FFFFFF.
- Do keep text in 4 levels: #33252B, #000000, #4A172E, #594E53.
- Do use #F3C66A as the brand accent: header, logo and key highlights.
- Do reuse the measured spacing steps (6px, 12px, 20px).
- Do use 50px corners on most elements; larger surfaces also use 20px, 8px and 16px.
- Don't introduce new font families beyond Raleway and Inter.
- Don't use #F3C66A for large backgrounds or body text.
- Don't make interface transitions slower than 0.4s.

## Motion

Interface transitions are quick: 0.3s, 0.1s, 0.4s, 0.2s.

- **Easing:** `ease`, `cubic-bezier(0.34, 1.56, 0.64, 1)`, `cubic-bezier(0.25, 0.8, 0.25, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

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

```