# Surgicals.Pk design system

> Surgicals.Pk design system measured from surgicals.pk: Poppins font, #25D366 primary on #FFFFFF, 9 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/surgicals.pk/

Surgicals.Pk’s website (surgicals.pk) uses the Poppins font and #25D366 as its main color on a white background. Measured by Sitepeel on November 7, 2026.

## What font does Surgicals.Pk use?

Surgicals.Pk uses Poppins (weights 400, 500, 600 and 700) and Roboto (weight 500) on surgicals.pk. Page titles are 65px at weight 600 (33px on phones) and body text is 16px. Measured on November 7, 2026.

- Poppins (weights 400, 500, 600, 700)
- Roboto (weights 500)
- system-ui (weights 400)

## Surgicals.Pk colors: palette and hex codes

Surgicals.Pk’s main colors are #FFFFFF (white) for the background, #000000 (near black) for text and #25D366 (green) as the main accent, with #720EEC (vivid violet) as another accent. Measured on November 7, 2026.

- #FFFFFF: white
- #000000: near black
- #333333: graphite
- #F8F6F6: snow
- #EAEAEA: mist
- #E9E9E9: mist
- #25D366: green
- #720EEC: vivid violet

## What is Surgicals.Pk built with?

Surgicals.Pk’s website (surgicals.pk) is built with Elementor, WordPress, jQuery, jQuery UI and Preact. Measured on November 7, 2026.

- Site builder & CMS: Elementor 4.3.6, WordPress
- JavaScript framework: jQuery 3.7.1, jQuery UI 1.14.2, Preact
- UI & CSS: PhotoSwipe
- Server: LiteSpeed
- Fonts & icons: Font Awesome
- Analytics: Google Ads, Google Analytics, Google Tag Manager

## Questions and answers

### What font does Surgicals.Pk use?

Surgicals.Pk’s website uses Poppins (weights 400, 500, 600 and 700) and Roboto (weight 500). Page titles are 65px at weight 600 (33px on phones) and body text is 16px. Measured on November 7, 2026.

### What are the Surgicals.Pk colors and hex codes?

On surgicals.pk: #FFFFFF (white) for the background, #000000 (near black) for text and #25D366 (green) as the main accent, with #720EEC (vivid violet) as another accent. The color palette above lists all 9 colors with their hex codes and where each one is used.

### What is the Surgicals.Pk design system?

The design system on this page is surgicals.pk’s, as measured on November 7, 2026: Poppins type, #25D366 as the main color and 34px corners, written down as a DESIGN.md. It is not Surgicals.Pk’s own documentation.

### What is Surgicals.Pk built with?

Surgicals.Pk’s website (surgicals.pk) is built with Elementor, WordPress, jQuery, jQuery UI and Preact. The full tech stack Sitepeel found: Elementor, jQuery, jQuery UI, PhotoSwipe, LiteSpeed, WordPress, Font Awesome, Preact, Google Ads and Google Analytics. Measured on November 7, 2026.

### What is the Surgicals.Pk DESIGN.md?

A plain-text file with Surgicals.Pk’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 Surgicals.Pk’s official design system?

No. Sitepeel measured it from surgicals.pk’s public page on November 7, 2026. It is an independent analysis, not made or approved by Surgicals.Pk.

### Can I use Surgicals.Pk’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 Surgicals.Pk’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/surgicals.pk/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 Surgicals.Pk.

## The DESIGN.md file

```markdown
---
version: alpha
name: Surgicals.Pk
description: "Light interface measured from surgicals.pk: Poppins type with Roboto, green accents, tonal surfaces and 34px corners."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#000000"
  on-background: "#000000"
  on-surface-variant: "#333333"
  surface-container-low: "#F8F6F6"
  surface-container: "#EAEAEA"
  outline: "#E9E9E9"
  primary: "#25D366"
  on-primary: "#FFFFFF"
  secondary: "#720EEC"
typography:
  headline-display:
    fontFamily: Poppins
    fontSize: 65px
    fontWeight: 600
    lineHeight: 1
  headline-lg:
    fontFamily: Roboto
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1
  headline-md:
    fontFamily: Poppins
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.09
  headline-sm:
    fontFamily: Poppins
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1
  body-md:
    fontFamily: system-ui
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: Poppins
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Poppins
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1
  label-sm:
    fontFamily: Roboto
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
  headline-display-mobile:
    fontFamily: Poppins
    fontSize: 33px
    fontWeight: 600
    lineHeight: 1
rounded:
  sm: 34px
  md: 200px
spacing:
  xs: 3px
  sm: 6px
  md: 15px
  lg: 20px
  xl: 64px
  gutter: 12px
  section: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0px
    height: 60px
  button-outline:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: 0px
    padding: 15px 30px
    height: 46px
  button-ghost:
    textColor: "#69727D"
    rounded: "{rounded.sm}"
    padding: 2px
  link:
    textColor: "{colors.on-surface}"
---

# Surgicals.Pk Design System

## Overview

Surgicals.Pk describes itself as: “Surgicals.pk - We Help You Stay Fit By Delivering Surgical & Medical Equipment at Your Doorstep. Best Surgical Store in Pakistan With Mega Discounts on Each Purchase.” The interface is light, built on **White (#FFFFFF)** with **Near Black (#000000)** text, and **Green (#25D366)** as the main accent.

Type is set in **Poppins** and **Roboto**. Headlines run large; body text is 16px. Depth comes from soft drop shadows. Corners are mostly 34px.

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

## Colors

The palette has 9 roles.

- **White (#FFFFFF):** Page background, seen 1 time. Token `background`, CSS `--yith-wcan-filters_colors_background`.
- **Near Black (#000000):** Primary text and headings, seen 82 times. Token `on-surface`.
- **Graphite (#333333):** Secondary text, seen 2 times. Token `on-surface-variant`.
- **Snow (#F8F6F6):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Mist (#EAEAEA):** Cards and panels, seen 1 time. Token `surface-container`.
- **Mist (#E9E9E9):** Borders and dividers, seen 1 time. Token `outline`.
- **Green (#25D366):** Primary buttons and calls to action, seen 1 time. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Vivid Violet (#720EEC):** Accent (CSS variable). Token `secondary`.

## Typography

**Poppins**, **Roboto** and **system-ui** share the interface. Fallback stack: `Poppins, sans-serif`. Other loaded fonts: WooCommerce, Font Awesome 5 Free, eicons, Font Awesome 5 Brands.

- **headline-display:** Poppins 65px at weight 600, line height 1 (33px on mobile). Page title (h1).
- **headline-lg:** Roboto 32px at weight 500, line height 1. Section headings (h2).
- **headline-md:** Poppins 22px at weight 500, line height 1.09. Sub-section headings.
- **headline-sm:** Poppins 20px at weight 400, line height 1. Card and feature titles.
- **body-md:** system-ui 16px at weight 400, line height 1.5. Body text.
- **body-sm:** Poppins 12px at weight 400, line height 1.5. Secondary and small text.
- **label-md:** Poppins 14px at weight 700, line height 1. Buttons, navigation and labels.
- **label-sm:** Roboto 12px at weight 500, line height 1.2. Small labels and badges.

## Layout

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

- **Scale:** xs 3px, sm 6px, md 15px, lg 20px, xl 64px.
- **Sections:** 64px vertical padding between major sections.
- **Gaps:** 12px is the most common gap in flex and grid layouts.
- **Breakpoints:** 575px, 576px, 673px, 767px, 768px, 782px, 991px, 992px, 1040px, 1110px, 1200px, 1218px.

## Elevation & Depth

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

- `rgba(0, 0, 0, 0.06) 0px 1px 6px 0px, rgba(0, 0, 0, 0.16) 0px 2px 32px 0px`

## Shapes

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

- **sm (34px):** 4 elements.
- **md (200px):** 4 elements.

## Components

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

- **button-primary (“×”):** #25D366 fill, #FFFFFF text, 12px/400, 200px radius, padding 0px, shadow `rgba(0, 0, 0, 0.06) 0px 1px 6px 0px, rgba(0, 0, 0, 0.16) 0px 2px 32px 0px`.
- **button-outline (“SHOP NOW”):** transparent fill, #000000 text, 14px/700, padding 15px 30px, border 1px solid #000000.
- **button-ghost (“0 Cart”):** transparent fill, #69727D text, 15px/400, 34px radius, padding 2px, border 1px solid #000000.
- **link:** transparent fill, #000000 text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page and lift surfaces in small steps: #F8F6F6, #EAEAEA.
- Do keep text in 2 levels: #000000, #333333.
- Do reserve #25D366 for primary actions and key highlights.
- Do reuse the measured spacing steps (6px, 15px, 20px).
- Do use 34px corners on most elements; larger surfaces also use 200px.
- Don't introduce new font families beyond Poppins, Roboto and system-ui.
- Don't use #25D366 for large backgrounds or body text.
- Don't make interface transitions slower than 0.4s.

## Motion

Interface transitions are quick: 0.3s, 0.4s, 0.1s. Longer ambient animations run 1.5s.

- **Easing:** `ease`, `ease-in`.

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

```