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