# iPhone Unlocking Store design system

> iPhone Unlocking Store design system measured from iphoneunlockingstore.com: Plus Jakarta Sans font, 18 color hex codes, type scale and spacing.

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

iPhone Unlocking Store’s website (iphoneunlockingstore.com) uses the Plus Jakarta Sans font and #8FC31F as its main color on a white background. Measured by Sitepeel on November 5, 2026.

## What font does iPhone Unlocking Store use?

iPhone Unlocking Store uses Plus Jakarta Sans (weights 700 and 800) and Inter (weights 400, 600 and 700) on iphoneunlockingstore.com. Page titles are 30px at weight 700 and body text is 15px. Measured on November 5, 2026.

- Plus Jakarta Sans (weights 700, 800)
- Inter (weights 400, 600, 700)

## iPhone Unlocking Store colors: palette and hex codes

iPhone Unlocking Store’s main colors are #FFFFFF (white) for the background, #535353 (slate) for text and #8FC31F (lime) as the main accent, with #F97316 (vivid orange) and #818CF8 (light indigo) as other accents. Measured on November 5, 2026.

- #FFFFFF: white
- #535353: slate
- #000000: near black
- #0B1220: deep blue
- #6A6A6A: slate
- #F5F7FA: snow
- #EEF7DC: pale lime
- #E0E0E0: silver

## What is iPhone Unlocking Store built with?

iPhone Unlocking Store’s website (iphoneunlockingstore.com) is built with Next.js, React, Emotion, MUI and Tailwind CSS. Measured on November 5, 2026.

- JavaScript framework: Next.js 14.2.22, React 18.3.1
- Hosting & CDN: Cloudflare
- Analytics: Cloudflare Web Analytics
- UI & CSS: Emotion, MUI, Tailwind CSS 3.x
- Fonts & icons: Google Fonts, Iconify

## Questions and answers

### What font does iPhone Unlocking Store use?

iPhone Unlocking Store’s website uses Plus Jakarta Sans (weights 700 and 800) and Inter (weights 400, 600 and 700). Page titles are 30px at weight 700 and body text is 15px. Measured on November 5, 2026.

### What are the iPhone Unlocking Store colors and hex codes?

On iphoneunlockingstore.com: #FFFFFF (white) for the background, #535353 (slate) for text and #8FC31F (lime) as the main accent, with #F97316 (vivid orange) and #818CF8 (light indigo) as other accents. The color palette above lists all 18 colors with their hex codes and where each one is used.

### What is the iPhone Unlocking Store design system?

The design system on this page is iphoneunlockingstore.com’s, as measured on November 5, 2026: Plus Jakarta Sans type, #8FC31F as the main color and 12px corners, written down as a DESIGN.md. It is not iPhone Unlocking Store’s own documentation.

### What is iPhone Unlocking Store built with?

iPhone Unlocking Store’s website (iphoneunlockingstore.com) is built with Next.js, React, Emotion, MUI and Tailwind CSS. The full tech stack Sitepeel found: Next.js, React, Cloudflare, Cloudflare Web Analytics, Emotion, MUI, Tailwind CSS, Google Fonts and Iconify. Measured on November 5, 2026.

### What is the iPhone Unlocking Store DESIGN.md?

A plain-text file with iPhone Unlocking Store’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 iPhone Unlocking Store’s official design system?

No. Sitepeel measured it from iphoneunlockingstore.com’s public page on November 5, 2026. It is an independent analysis, not made or approved by iPhone Unlocking Store.

### Can I use iPhone Unlocking Store’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 iPhone Unlocking Store’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/iphoneunlockingstore.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 iPhone Unlocking Store.

## The DESIGN.md file

```markdown
---
version: alpha
name: iPhone Unlocking Store
description: "Light interface measured from iphoneunlockingstore.com: Plus Jakarta Sans type with Inter, lime accents, tonal surfaces and 12px corners."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#535353"
  on-background: "#535353"
  on-surface-strong: "#000000"
  on-surface-variant: "#0B1220"
  on-surface-muted: "#6A6A6A"
  surface-container-low: "#F5F7FA"
  surface-container: "#EEF7DC"
  surface-container-high: "#E0E0E0"
  surface-container-highest: "#CBD5E1"
  overlay: "#00000040"
  overlay-strong: "#00000059"
  outline: "#23232329"
  outline-variant: "#CFE7A2"
  primary: "#8FC31F"
  on-primary: "#0B1220"
  inverse-surface: "#020617"
  secondary: "#F97316"
  tertiary: "#818CF8"
typography:
  display-hero:
    fontFamily: Plus Jakarta Sans
    fontSize: 32px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-display:
    fontFamily: Plus Jakarta Sans
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.47
  headline-lg:
    fontFamily: Inter
    fontSize: 22.5px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.019em
  headline-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 21px
    fontWeight: 800
    lineHeight: 1.47
  body-md:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.47
  body-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.36
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.47
  caption:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.47
  label-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.3
  label-md:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.47
  label-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.47
rounded:
  xs: 6px
  sm: 10px
  md: 12px
  lg: 14px
  xl: 16px
  full: 9999px
spacing:
  xs: 3px
  sm: 8px
  md: 12px
  lg: 18px
  xl: 44px
  gutter: 12px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 0px 14px
    height: 48px
  button-outline:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 0px 13px
    height: 34px
  button-outline-hover:
    backgroundColor: "{colors.surface-container}"
    textColor: "#3F6212"
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.background}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 0px 14px
    height: 48px
  input-field:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: 0px
    padding: 12px 0px
  card:
    textColor: "{colors.background}"
    typography: "{typography.body-md}"
    rounded: 24px
    padding: 16px 20px 22px 20px
  link:
    textColor: "{colors.on-surface}"
---

# iPhone Unlocking Store Design System

## Overview

iPhone Unlocking Store describes itself as: “Buy UnlockTool activations, GSM tool licenses, bypass services, phone unlocking, IMEI checks and server credits. Serving shops and resellers worldwide.” The interface is light, built on **White (#FFFFFF)** with **Slate (#535353)** text, and **Lime (#8FC31F)** as the main accent.

Type is set in **Plus Jakarta Sans** and **Inter**. Headlines run large; body text is 15px. Depth comes from soft drop shadows. Corners are mostly 12px.

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

## Colors

The palette has 18 roles, plus gradient stops #0B1220, #020617, #C7D2FE, #818CF8.

- **White (#FFFFFF):** Page background, seen 61 times. Token `background`, CSS `--tw-ring-offset-color`.
- **Slate (#535353):** Primary text and headings. Token `on-surface`.
- **Near Black (#000000):** Headings and emphasis, seen 3 times. Token `on-surface-strong`.
- **Deep Blue (#0B1220):** Secondary text, seen 16 times. Token `on-surface-variant`.
- **Slate (#6A6A6A):** Muted text and metadata, seen 16 times. Token `on-surface-muted`.
- **Snow (#F5F7FA):** Raised areas one step from the page, seen 12 times. Token `surface-container-low`, CSS `--dhru-color-background`.
- **Pale Lime (#EEF7DC):** Cards and panels, seen 11 times. Token `surface-container`.
- **Silver (#E0E0E0):** Hover and pressed fills, seen 1 time. Token `surface-container-high`.
- **Light Blue (#CBD5E1):** Highest raised elements, seen 5 times. Token `surface-container-highest`.
- **Near Black 25% (#00000040):** Translucent fill for cards and controls, seen 4 times. Token `overlay`.
- **Near Black 35% (#00000059):** Stronger translucent fill, seen 4 times. Token `overlay-strong`.
- **Charcoal 16% (#23232329):** Borders and dividers, seen 71 times. Token `outline`.
- **Light Lime (#CFE7A2):** Secondary dividers, seen 11 times. Token `outline-variant`.
- **Lime (#8FC31F):** Brand color in the header, seen 10 times. Token `primary`, CSS `--dhru-color-primary`.
- **Deep Blue (#0B1220):** Text and icons on primary. Token `on-primary`.
- **Deep Indigo (#020617):** High-contrast fills, seen 4 times. Token `inverse-surface`.
- **Vivid Orange (#F97316):** Accent in text, fills and borders, seen 4 times. Token `secondary`.
- **Light Indigo (#818CF8):** Accent in text, fills and borders, seen 3 times. Token `tertiary`.

## Typography

**Plus Jakarta Sans** and **Inter** share the interface. Fallback stack: `Plus Jakarta Sans`.

- **display-hero:** Plus Jakarta Sans 32px at weight 800, line height 1.2, tracking -0.01em. Oversized hero statements.
- **headline-display:** Plus Jakarta Sans 30px at weight 700, line height 1.47. Page title (h1).
- **headline-lg:** Inter 22.5px at weight 400, line height 1.2, tracking 0.019em. Section headings (h2).
- **headline-md:** Plus Jakarta Sans 21px at weight 800, line height 1.47. Sub-section headings.
- **body-md:** Inter 15px at weight 400, line height 1.47. Body text.
- **body-lg:** Plus Jakarta Sans 18px at weight 700, line height 1.36. Lead paragraphs.
- **body-sm:** Inter 14px at weight 400, line height 1.47. Secondary and small text.
- **caption:** Inter 12px at weight 400, line height 1.47. Captions and fine print.
- **label-lg:** Plus Jakarta Sans 16px at weight 700, line height 1.3. Large buttons and tabs.
- **label-md:** Inter 15px at weight 700, line height 1.47. Buttons, navigation and labels.
- **label-sm:** Inter 13px at weight 600, line height 1.47. Small labels and badges.

## Layout

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

- **Scale:** xs 3px, sm 8px, md 12px, lg 18px, xl 44px.
- **Gaps:** 12px is the most common gap in flex and grid layouts.
- **Breakpoints:** 390px, 400px, 475px, 600px, 640px, 700px, 701px, 768px, 850px, 950px, 1000px, 1024px, 1280px, 1536px.

## Elevation & Depth

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

- `rgba(249, 115, 22, 0.35) 0px 4px 14px 0px`
- `rgb(129, 140, 248) 0px 0px 70px -10px, rgba(0, 0, 0, 0.6) 0px 0px 30px 0px inset`
- `rgb(129, 140, 248) 0px 0px 30px 0px`

## Shapes

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

- **md (12px):** 240 elements.
- **full (9999px):** 88 elements.
- **lg (14px):** 56 elements.
- **xs (6px):** 48 elements.
- **sm (10px):** 20 elements.
- **xl (16px):** 20 elements.

## Components

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

- **button-primary (“Order Now”):** #8FC31F fill, #0B1220 text, 15px/800, 12px radius, padding 0px 14px, shadow `rgba(143, 195, 31, 0.3) 0px 6px 18px 0px`.
- **button-outline (“HFZ”):** #F5F7FA fill, #232323C7 text, 13px/600, 999px radius, padding 0px 13px, border 1px solid #23232329.
- **button-outline-hover:** background #EEF7DC, text #3F6212 on hover.
- **button-ghost (“View Models”):** #FFFFFF14 fill, #FFFFFF text, 15px/800, 12px radius, padding 0px 14px, border 1px solid #FFFFFF47.
- **input-field (“Try T-Mobile Premium, HFZ, OTIX ”):** transparent fill, #232323C7 text, 15px/400, padding 12px 0px.
- **card:** transparent fill, #FFFFFF text, 15px/400, 24px radius, padding 16px 20px 22px 20px, border 1px solid #8FC31F80, shadow `rgba(2, 6, 23, 0.66) 0px 0px 0px 1440px, rgba(0, 0, 0, 0.55) 0px 24px 60px 0px, rgba(255, 255, 255, 0.06) 0px 1px 0px 0px inset`.
- **link:** transparent fill, #232323C7 text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page and lift surfaces in small steps: #F5F7FA, #EEF7DC, #E0E0E0, #CBD5E1.
- Do keep text in 4 levels: #535353, #000000, #0B1220, #6A6A6A.
- Do use #8FC31F as the brand accent: header, logo and key highlights.
- Do reuse the measured spacing steps (8px, 12px, 18px).
- Do use 12px corners on most elements; larger surfaces also use 14px, 6px and 10px.
- Don't introduce new font families beyond Plus Jakarta Sans and Inter.
- Don't use #8FC31F for large backgrounds or body text.
- Don't make interface transitions slower than 0.5s.

## Motion

Interface transitions are quick: 0.2s, 0.25s, 0.01s, 0.3s. Longer ambient animations run 30s, 1.4s.

- **Easing:** `ease`, `cubic-bezier(0.4, 0, 0.2, 1)`, `ease-in-out`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

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

```