Surgicals.Pk design system

---
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).