Claude Code
Cursor
Codex
GitHub Copilot
GrammarlyBrand
DESIGN.md · measured October 24, 2026
Greenpaktourism design system
Light interface measured from greenpaktourism.com: Poppins type with Lucida Console, orange accents, flat surfaces and 4px corners.
- Background
- #DDDDDD
- Primary
- #D6A650
- Type
- Poppins
- Corners
- 4px
From greenpaktourism.com/destinations ↗ · 485 elements at 1440×900 and 390×844 · Independent analysis, not affiliated with Greenpaktourism
Greenpaktourism colors
11 roles measured on the page, grouped by where each color is used.
Surfaces
Silver
#DDDDDDbackgroundPage backgroundCharcoal 82%
#07110DD1overlayTranslucent fill for cards and controls · 3×Orange 10%
#D6A6501Aoverlay-strongStronger translucent fill · 2×Charcoal
#101B16inverse-surfaceHigh-contrast fills · 4×Text
Graphite
#2B2B2Bon-surfacePrimary text and headings · 4×Graphite
#2B2B2Bon-primaryText and icons on primaryAccents
Orange
#D6A650primary · --ctaPrimary buttons and calls to action · 35×Blue
#60A5FAsecondaryBrand color in the logo · 15×Borders
White 13%
#FFFFFF21outlineBorders and dividers · 45×White 7%
#FFFFFF12outline-variant · --border-softSecondary dividers · 42×Status
Orange
#C9861FwarningWarnings and highlights · 26×Greenpaktourism fonts
2 families.
AaPoppinsWeights 400, 500, 600, 700Poppins, Poppins Fallback
AaLucida ConsoleWeights 700Lucida Console, Monaco, monospace
headline-displayPage title (h1)Greenpaktourism56px · 400 · 1.05 · -0.025em
mobile 37px
mobile 37px
headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog48px · 500 · 1.04 · -0.02em
mobile 37px
mobile 37px
headline-mdSub-section headingsThe quick brown fox jumps over the lazy dog24px · 500 · 1.5
headline-smCard and feature titlesThe quick brown fox jumps over the lazy dog22px · 700 · 1.36
body-mdBody textThe quick brown fox jumps over the lazy dog18.5px · 500 · 1.5
body-lgLead paragraphsThe quick brown fox jumps over the lazy dog20.5px · 500 · 1.5
body-smSecondary and small textThe quick brown fox jumps over the lazy dog14px · 400 · 1.43
label-lgLarge buttons and tabsThe quick brown fox jumps over the lazy dog16px · 400 · 1.5
label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog14px · 700 · 1.43
label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog11px · 600 · 1.5 · 0.2em
Contrast
Text on #DDDDDD
AaAAA
10.4:1Spacing
No strict grid · 74% are multiples of 4px
xs2pxsm6pxmd12pxlg24pxxl48pxgutter12pxsection72pxmargin24pxcontainer1280pxBreakpoints: 640px 641px 840px 860px 900px 980px 1180px 1360px
Shapes
Corner radii, most used first.
sm4px · 56×
lg8px · 56×
md6px · 40×
Depth
Shadow
Shadow
Components
Rebuilt from the measured CSS.
Plan Your Trip
Install
UAN
USE MY LOCATION
Search…
Inline link
Motion
Interface transitions
0.15s0.2s0.16scubic-bezier(0.4, 0, 0.2, 1)ease
Do’s and don’ts
Rules written from the measurements, so a coding agent stays on style.
- Use #DDDDDD for the page.
- Reserve #D6A650 for primary actions and key highlights.
- Set headlines in Poppins with tight tracking (-0.025em).
- Reuse the measured spacing steps (6px, 12px, 24px).
- Use 4px corners on most elements; larger surfaces also use 8px and 6px.
- Introduce new font families beyond Poppins and Lucida Console.
- Use #D6A650 for large backgrounds or body text.
- Make interface transitions slower than 0.2s.
DESIGN.md226 lines
---
version: alpha
name: Greenpaktourism
description: "Light interface measured from greenpaktourism.com: Poppins type with Lucida Console, orange accents, flat surfaces and 4px corners."
colors:
background: "#DDDDDD"
surface: "#DDDDDD"
on-surface: "#2B2B2B"
on-background: "#2B2B2B"
overlay: "#07110DD1"
overlay-strong: "#D6A6501A"
outline: "#FFFFFF21"
outline-variant: "#FFFFFF12"
primary: "#D6A650"
on-primary: "#2B2B2B"
inverse-surface: "#101B16"
secondary: "#60A5FA"
warning: "#C9861F"
typography:
headline-display:
fontFamily: Poppins
fontSize: 56px
fontWeight: 400
lineHeight: 1.05
letterSpacing: -0.025em
headline-lg:
fontFamily: Poppins
fontSize: 48px
fontWeight: 500
lineHeight: 1.04
letterSpacing: -0.02em
headline-md:
fontFamily: Poppins
fontSize: 24px
fontWeight: 500
lineHeight: 1.5
headline-sm:
fontFamily: Lucida Console
fontSize: 22px
fontWeight: 700
lineHeight: 1.36
body-md:
fontFamily: Poppins
fontSize: 18.5px
fontWeight: 500
lineHeight: 1.5
body-lg:
fontFamily: Poppins
fontSize: 20.5px
fontWeight: 500
lineHeight: 1.5
body-sm:
fontFamily: Poppins
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
label-lg:
fontFamily: Poppins
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
label-md:
fontFamily: Poppins
fontSize: 14px
fontWeight: 700
lineHeight: 1.43
label-sm:
fontFamily: Poppins
fontSize: 11px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0.2em
headline-display-mobile:
fontFamily: Poppins
fontSize: 37px
fontWeight: 400
lineHeight: 1.05
letterSpacing: -0.025em
headline-lg-mobile:
fontFamily: Poppins
fontSize: 37px
fontWeight: 500
lineHeight: 1.08
letterSpacing: -0.02em
rounded:
sm: 4px
md: 6px
lg: 8px
spacing:
xs: 2px
sm: 6px
md: 12px
lg: 24px
xl: 48px
gutter: 12px
section: 72px
margin: 24px
container: 1280px
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
rounded: "{rounded.sm}"
padding: 0px 18px
height: 40px
button-secondary:
backgroundColor: "{colors.primary}"
textColor: "#07110DF0"
rounded: "{rounded.sm}"
padding: 6px 12px
height: 32px
button-outline:
backgroundColor: "{colors.overlay-strong}"
textColor: "{colors.primary}"
typography: "{typography.label-sm}"
padding: 4px 10px
height: 26px
button-ghost:
textColor: "#B9C0B4"
padding: 2px 8px
input-field:
textColor: "#FFFFFF"
rounded: 0px
padding: 0px 12px 0px 0px
link:
textColor: "#F5F1E8"
---
# Greenpaktourism Design System
## Overview
Greenpaktourism describes itself as: “Browse Pakistan's seven regions on the map: 900+ places to visit, from Hunza and Skardu to the Makran coast, each with its own guide.” The interface is light, built on **Silver (#DDDDDD)** with **Graphite (#2B2B2B)** text, and **Orange (#D6A650)** as the main accent.
Type is set in **Poppins** and **Lucida Console**. Headlines run large with tight negative tracking; body text is 18.5px. Depth comes from soft drop shadows. Corners are mostly 4px.
Measured from [greenpaktourism.com](https://greenpaktourism.com/destinations) on October 24, 2026 at 1440×900 and 390×844 from 485 rendered elements. Values are computed styles from the live page, not the original source files.
## Colors
The palette has 11 roles.
- **Silver (#DDDDDD):** Page background. Token `background`.
- **Graphite (#2B2B2B):** Primary text and headings, seen 4 times. Token `on-surface`.
- **Charcoal 82% (#07110DD1):** Translucent fill for cards and controls, seen 3 times. Token `overlay`.
- **Orange 10% (#D6A6501A):** Stronger translucent fill, seen 2 times. Token `overlay-strong`.
- **White 13% (#FFFFFF21):** Borders and dividers, seen 45 times. Token `outline`.
- **White 7% (#FFFFFF12):** Secondary dividers, seen 42 times. Token `outline-variant`, CSS `--border-soft`.
- **Orange (#D6A650):** Primary buttons and calls to action, seen 35 times. Token `primary`, CSS `--cta`.
- **Graphite (#2B2B2B):** Text and icons on primary. Token `on-primary`.
- **Charcoal (#101B16):** High-contrast fills, seen 4 times. Token `inverse-surface`.
- **Blue (#60A5FA):** Brand color in the logo, seen 15 times. Token `secondary`.
- **Orange (#C9861F):** Warnings and highlights, seen 26 times. Token `warning`.
## Typography
**Poppins** and **Lucida Console** share the interface. Fallback stack: `Poppins, Poppins Fallback`.
- **headline-display:** Poppins 56px at weight 400, line height 1.05, tracking -0.025em (37px on mobile). Page title (h1).
- **headline-lg:** Poppins 48px at weight 500, line height 1.04, tracking -0.02em (37px on mobile). Section headings (h2).
- **headline-md:** Poppins 24px at weight 500, line height 1.5. Sub-section headings.
- **headline-sm:** Lucida Console 22px at weight 700, line height 1.36. Card and feature titles.
- **body-md:** Poppins 18.5px at weight 500, line height 1.5. Body text.
- **body-lg:** Poppins 20.5px at weight 500, line height 1.5. Lead paragraphs.
- **body-sm:** Poppins 14px at weight 400, line height 1.43. Secondary and small text.
- **label-lg:** Poppins 16px at weight 400, line height 1.5. Large buttons and tabs.
- **label-md:** Poppins 14px at weight 700, line height 1.43. Buttons, navigation and labels.
- **label-sm:** Poppins 11px at weight 600, line height 1.5, tracking 0.2em. Small labels and badges.
## Layout
Spacing is mostly on a 4px grid (74% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.
- **Scale:** xs 2px, sm 6px, md 12px, lg 24px, xl 48px.
- **Sections:** 72px vertical padding between major sections.
- **Gaps:** 12px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1280px.
- **Page margin:** 24px on each side of full-width sections.
- **Breakpoints:** 640px, 641px, 840px, 860px, 900px, 980px, 1180px, 1360px.
## Elevation & Depth
Raised elements use soft drop shadows. The most used recipes:
- `color(srgb 0.839216 0.65098 0.313726 / 0.42) 0px 0px 14px 0px`
- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, color(srgb 0.839216 0.65098 0.313726 / 0.2) 0px 12px 30px 0px`
## Shapes
Most elements use 4px corners. Measured radii, most used first:
- **sm (4px):** 56 elements.
- **lg (8px):** 56 elements.
- **md (6px):** 40 elements.
## Components
Measured from the rendered page. Token values reference the tokens above.
- **button-primary (“Plan Your Trip”):** #D6A650 fill, #2B2B2B text, 13px/700, 4px radius, padding 0px 18px, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, color(srgb 0.839216 0.65098 0.313726 / 0.2) 0px 12px 30px 0px`.
- **button-secondary (“Install”):** #D6A650 fill, #07110DF0 text, 13px/700, 4px radius, padding 6px 12px.
- **button-outline (“UAN”):** #D6A6501A fill, #D6A650 text, 11px/600, 3.35544e+07px radius, padding 4px 10px, border 1px solid #D6A65073.
- **button-ghost (“USE MY LOCATION”):** transparent fill, #B9C0B4 text, 10px/600, 3.35544e+07px radius, padding 2px 8px, border 1px solid #FFFFFF21.
- **input-field (“Search…”):** transparent fill, #FFFFFF text, 13px/400, padding 0px 12px 0px 0px.
- **link:** transparent fill, #F5F1E8 text, padding 0px.
## Do's and Don'ts
- Do use #DDDDDD for the page.
- Do reserve #D6A650 for primary actions and key highlights.
- Do set headlines in Poppins with tight tracking (-0.025em).
- Do reuse the measured spacing steps (6px, 12px, 24px).
- Do use 4px corners on most elements; larger surfaces also use 8px and 6px.
- Don't introduce new font families beyond Poppins and Lucida Console.
- Don't use #D6A650 for large backgrounds or body text.
- Don't make interface transitions slower than 0.2s.
## Motion
Interface transitions are quick: 0.15s, 0.2s, 0.16s.
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `ease`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.
Generated by [Sitepeel](https://sitepeel.dev/design-md/greenpaktourism.com/destinations/), the free DESIGN.md generator.
What you can build with it
Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.
Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.
Build a landing page for my product. Follow for every color, font, spacing value, corner and button.
Need more than one page?
Design MD in the Sitepeel tools for Chrome measures pages behind a login, combines several pages into one file and works on any site you open.
More designs
See all →
FAQ
Questions
What can I build with the Greenpaktourism DESIGN.md?
Any page or component in this style: a landing page, pricing table, dashboard or sign-up form. Your AI coding agent uses the measured colors, Poppins type, spacing, corners and buttons instead of its own defaults.
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 Greenpaktourism’s official design system?
No. Sitepeel measured it from greenpaktourism.com/destinations’s public page on October 24, 2026. It is an independent analysis, not made or approved by Greenpaktourism.
Can I use Greenpaktourism’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 Greenpaktourism’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.