Mohammad Kheirkhah

Generated Nov 6, 2026

DESIGN.md for pamidordesign.co

pamidordesign.co8 colors4 componentsfunnelDisplay

Remix

2 screenshots captured· pamidordesign.co

1 / 2 · Dor Sharaby | Brand & Product Designer | Pamidor Studio · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Pamidordesign
description: |
  Pamidor Studio's design system embodies a refined, minimalist aesthetic rooted
  in Swiss typography and contemporary digital restraint. The palette is
  dominated by near-black ink paired with a warm, off-white canvas, creating
  high contrast and editorial clarity. Accent punctuation arrives in a striking
  deep red, used sparingly for interactive highlights and brand moments. The
  typography system is anchored in funnelDisplay—a geometric sans-serif with
  pronounced negative letter-spacing on display sizes—lending the interface a
  distinctive, modern gravity. Whitespace is generous and intentional; layouts
  breathe. All interactive elements are sharp-edged (0px radius), reinforcing
  the precise, no-nonsense personality. Depth comes from color blocking and
  minimal elevation rather than dramatic shadows. The overall mood is
  authoritative yet approachable—a designer's portfolio that practices what it
  preaches.
source:
  url: "https://pamidordesign.co/"
  pagesAnalyzed: 1
  extractedAt: 2026-11-06
  tokensMeasured: true
colors:
  primary: "#0A0A0A"
  canvas: "#EFEEEB"
  on-primary: "#FFFFFF"
  ink: "#0A0A0A"
  body: "#6B6862"
  muted: "#9E9991"
  faint: "#FFFFFF"
  hairline: "#B8B5B0"
  accent-1: "#D12424"
  neutral-1: "#E5E7EB"
typography:
  display-xxl:
    fontFamily: funnelDisplay
    fontSize: 103.997px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -2.08px
  display-xl:
    fontFamily: funnelDisplay
    fontSize: 99.9936px
    fontWeight: 500
    lineHeight: 0.88
    letterSpacing: -3px
  display-lg:
    fontFamily: funnelDisplay
    fontSize: 68px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -1.36px
    textTransform: uppercase
  display-md:
    fontFamily: funnelDisplay
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.9px
  display-sm:
    fontFamily: funnelDisplay
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.6px
  display-sm-uppercase:
    fontFamily: funnelDisplay
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.6px
    textTransform: uppercase
  body-md:
    fontFamily: funnelDisplay
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-sm:
    fontFamily: funnelDisplay
    fontSize: 15.9984px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.16px
  body-xs:
    fontFamily: funnelDisplay
    fontSize: 11.9952px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.72px
  button:
    fontFamily: funnelDisplay
    fontSize: 15.9984px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -0.16px
  label:
    fontFamily: funnelDisplay
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.18px
  caption-xs:
    fontFamily: funnelDisplay
    fontSize: 11.9952px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.72px
    textTransform: uppercase
  caption-xs-strong:
    fontFamily: Archivo
    fontSize: 11.9952px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.72px
rounded:
  none: 0px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 32px
  section: 36px
  band: 40px
borderWidths:
  thin: 1px
shadows:
  sm: "rgba(10, 10, 10, 0.28) 0px 18px 40px -12px"
elevationStrategy: single-tier
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#EFEEEB"
    surface: "#E8E7E4"
    surfaceRaised: "#DFDEDB"
    text: "#0A0A0A"
    textMuted: "#6B6862"
    border: "#B8B5B0"
    accent: "#0A0A0A"
    accentFg: "#FFFFFF"
    focusRing: "#0A0A0A"
    elevation: shadow
  dark:
    bg: "#0F0F10"
    surface: "#1D1D1E"
    surfaceRaised: "#29292A"
    text: "#F5F5F5"
    textMuted: "#9E9E9E"
    border: "#353536"
    accent: "#848484"
    accentFg: "#0B0B0C"
    focusRing: "#666666"
    elevation: "border+surface"
gradients:
  - context: section
    kind: linear
    value: "linear-gradient(to right, rgba(0, 0, 0, 0), rgb(239, 238, 235))"
  - context: section
    kind: linear
    value: "linear-gradient(rgba(4, 4, 4, 0) 19%, rgba(4, 4, 4, 0.94) 100%)"
components:
  button-primary:
    typography: "{typography.button}"
    textColor: "{colors.faint}"
    border: "1px solid {colors.primary}"
    height: 44px
    padding: "9px 15px 9px 15px"
    backgroundColor: "{colors.primary}"
  button-filled:
    typography: "{typography.button}"
    textColor: "rgb(13, 13, 11)"
    border: "1px solid {colors.on-primary}"
    height: 44px
    padding: "9px 15px 9px 15px"
    backgroundColor: "{colors.on-primary}"
  button-outline:
    typography: "{typography.button}"
    textColor: "{colors.ink}"
    border: "1px solid rgba(10, 10, 10, 0.25)"
    height: 44px
    padding: "9px 15px 9px 15px"
  button-outline-2:
    typography: "{typography.button}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.primary}"
    height: 44px
    padding: "9px 15px 9px 15px"
  button-icon:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    height: 44px
    padding: "16px 8px 16px 8px"
  navigation:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    height: 26px
  footer:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    backgroundColor: "rgb(13, 13, 11)"
  link:
    typography: "{typography.label}"
    textColor: "{colors.faint}"
    padding: "11px 0px 11px 0px"
  link-2:
    typography: "{typography.body-sm}"
    textColor: "{colors.ink}"
states:
  other-focus-visible:
    target: other
    state: focus-visible
    outline: "{colors.accent-1} solid 2px"
    rounded: 2px
    outlineColor: "{colors.accent-1}"
    outlineWidth: 2px
  other-hover:
    target: other
    state: hover
    borderColor: "rgba(10, 10, 10, 0.3)"
  other-focus:
    target: other
    state: focus
    borderWidth: 1px
  other-disabled:
    target: other
    state: disabled
    opacity: 0.5
  button-hover:
    target: button
    state: hover
    opacity: 0
breakpoints:
  - width: 375
    containerWidth: 360
    gridColumns: 5
    navLinksVisible: 1
    menuToggleVisible: true
    headingPx: 87
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 753
    gridColumns: 3
    navLinksVisible: 1
    menuToggleVisible: true
    headingPx: 55
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 1009
    gridColumns: 3
    navLinksVisible: 1
    menuToggleVisible: true
    headingPx: 74
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1265
    gridColumns: 2
    navLinksVisible: 1
    menuToggleVisible: true
    headingPx: 92
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1425
    gridColumns: 2
    navLinksVisible: 1
    menuToggleVisible: true
    headingPx: 104
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 31
  gradientsFound: 2
  rolesUnassigned: 2
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Pamidor Studio

1. Visual Theme & Atmosphere

Pamidor Studio's design system embodies a refined, minimalist aesthetic rooted in Swiss typography and contemporary digital restraint. The palette is dominated by near-black ink paired with a warm, off-white canvas, creating high contrast and editorial clarity. Accent punctuation arrives in a striking deep red, used sparingly for interactive highlights and brand moments. The typography system is anchored in funnelDisplay—a geometric sans-serif with pronounced negative letter-spacing on display sizes—lending the interface a distinctive, modern gravity. Whitespace is generous and intentional; layouts breathe. All interactive elements are sharp-edged (0px radius), reinforcing the precise, no-nonsense personality. Depth comes from color blocking and minimal elevation rather than dramatic shadows. The overall mood is authoritative yet approachable—a designer's portfolio that practices what it preaches.

Key Characteristics

Sharp, geometric sans-serif typography (funnelDisplay) with tight negative letter-spacing on headlines
High-contrast ink-on-canvas palette with minimal accent color
Zero border radius throughout (sharp corners on all components)
Generous whitespace and color-based depth rather than heavy shadows
Minimal, single-tier shadow treatment (one shadow option for subtle lift)
Editorial, Swiss-influenced layout grid
Accessible, high-contrast interactive states with red (#D12424) accent feedback

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #0A0A0A): Deep black ink. Primary text, headings, primary CTAs, active states. The dominant color of the interface.
On Primary ({colors.on-primary} — #FFFFFF): White text, icons, and content layers on dark backgrounds. Label text and placeholder copy on brand surfaces.

Accent Colors

Accent Red ({colors.accent-1} — #D12424): Decorative and interactive accent. Used for link hovers, focus states, and brand punctuation. No assigned semantic role; treat as decorative highlight.

Neutral Scale

Canvas ({colors.canvas} — #EFEEEB): Warm off-white. Default page background and light surface areas. The breathing space of the system.
Body ({colors.body} — #6B6862): Mid-tone brown-gray. Body copy and secondary text, readable against canvas.
Muted ({colors.muted} — #9E9991): Lighter gray-brown. Captions, metadata, and tertiary text. Lower contrast for de-emphasized content.
Hairline ({colors.hairline} — #B8B5B0): Subtle divider gray. 1px borders, rule lines, and light dividers between sections.
Neutral Scale ({colors.neutral-1} — #E5E7EB): Light neutral gray. General-purpose neutral surface or border role (unassigned).

Surface & Borders

Light gray surface: {colors.neutral-1} (#E5E7EB)
Divider / hairline: {colors.hairline} (#B8B5B0)

3. Typography Rules

Font Family

Primary: funnelDisplay (geometric sans-serif, weight 400–500)
- Fallback: system-ui, -apple-system, sans-serif
Secondary: Archivo (weights 400–500)
- Fallback: system-ui, -apple-system, sans-serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XL	funnelDisplay	99.9936px	500	0.88	-3px	Hero / page title
Display XXL	funnelDisplay	103.997px	500	1	-2.08px	Large hero headline
Display Large	funnelDisplay	68px	500	1	-1.36px	Uppercase display; tight spacing
Display Medium	funnelDisplay	60px	500	1.05	-0.9px	Section headline
Display Small Uppercase	funnelDisplay	40px	500	1.2	-0.6px	Secondary headline, uppercase variant
Display Small	funnelDisplay	40px	500	1.2	-0.6px	Section subheading
Body MD	funnelDisplay	16px	400	1.5	0px	Link text, medium body
Body SM	funnelDisplay	15.9984px	400	1.55	-0.16px	Body copy, default paragraph text
Button	funnelDisplay	15.9984px	500	1.5	-0.16px	Button labels and call-to-action text
Label	funnelDisplay	18px	400	1.5	-0.18px	Form labels and input placeholders
Caption XS	funnelDisplay	11.9952px	400	1.4	0.72px	Uppercase captions and metadata
Caption XS Strong	Archivo	11.9952px	500	1.4	0.72px	Emphasized captions in supporting font
Body XS	funnelDisplay	11.9952px	400	1.4	0.72px	Smallest body text, fine print

Principles

Negative letter-spacing on display: All display sizes (40px and above) use tight, negative tracking (-0.6px to -3px) to create visual impact and density.
Consistent baseline: All text uses funnelDisplay as the primary typeface; Archivo appears only in emphasized captions.
Line-height restraint: Display sizes run tight (0.88–1.2 line-height) for typographic compression; body text relaxes to 1.5–1.55 for readability.
Weight economy: Only 400 (regular) and 500 (medium) weights are used; no black or thin variants.
Case sensitivity: A few sizes include text-transform: uppercase (Display Large, Caption XS); apply only where specified.

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#0A0A0A)
Text Color: {colors.on-primary} (#FFFFFF)
Font: {typography.button} (funnelDisplay, 15.9984px, weight 500)
Padding: {spacing.xs} 15px / 9px 15px 9px 15px (rendered as 9px 15px)
Height: 44px
Border: 1px solid {colors.primary} (1px solid #0A0A0A)
Border Radius: {rounded.none} (0px)
Box Shadow: None
Hover State: Opacity 0.85 or background-color shift (verify from stylesheet)
Focus State: 2px solid {colors.accent-1} outline (2px solid #D12424), border-radius 2px

Filled Button

Background: {colors.on-primary} (#FFFFFF)
Text Color: #0D0D0B (near-black)
Font: {typography.button} (funnelDisplay, 15.9984px, weight 500)
Padding: 9px 15px
Height: 44px
Border: 1px solid {colors.on-primary} (1px solid #FFFFFF)
Border Radius: {rounded.none} (0px)
Box Shadow: None
Hover State: Background or text color shift
Focus State: Outline applied with {colors.accent-1} (#D12424)

Outline Button

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: {colors.primary} (#0A0A0A)
Font: {typography.button} (funnelDisplay, 15.9984px, weight 500)
Padding: 9px 15px
Height: 44px
Border: 1px solid rgba(10, 10, 10, 0.25) (light ink border)
Border Radius: {rounded.none} (0px)
Box Shadow: None
Hover State: Border color or background shifts to higher contrast
Focus State: Border becomes 1px solid {colors.primary} or outline applied

Ghost / Text Button (outline-2)

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: {colors.primary} (#0A0A0A)
Font: {typography.button} (funnelDisplay, 15.9984px, weight 500)
Padding: 9px 15px
Height: 44px
Border: 1px solid {colors.primary} (1px solid #0A0A0A)
Border Radius: {rounded.none} (0px)
Box Shadow: None
Hover State: Text or border color shifts; background may lighten
Focus State: Outline or border reinforced with {colors.accent-1} (#D12424)

Icon Button

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: {colors.primary} (#0A0A0A)
Font: funnelDisplay, 16px, weight 400
Padding: 16px 8px
Height: 44px
Border: None or 1px solid {colors.neutral-1}
Border Radius: {rounded.none} (0px)
Box Shadow: None
Hover State: Color or opacity change
Focus State: Focus-visible outline applied

Navigation

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: {colors.primary} (#0A0A0A)
Font: {typography.body-md} (funnelDisplay, 16px, weight 400)
Height: Auto / 26px (measured)
Border: None
Padding: 0px (links laid out horizontally)
Hover State: Text color shifts to {colors.accent-1} (#D12424) or opacity changes
Mobile Toggle: Visible on all breakpoints; no hamburger collapse observed in data

Cards & Containers

Background: {colors.canvas} (#EFEEEB) or {colors.neutral-1} (#E5E7EB)
Border: 1px solid {colors.hairline} (1px solid #B8B5B0) or none
Border Radius: {rounded.none} (0px)
Padding: {spacing.md} to {spacing.xxxl} (16px–32px) depending on card type
Box Shadow: Optional sm shadow (rgba(10, 10, 10, 0.28) 0px 18px 40px -12px) for elevated cards
Hover State: Border color or background color shift; no transform observed in card data

Inputs & Forms

Background: {colors.canvas} (#EFEEEB) or {colors.neutral-1} (#E5E7EB)
Text Color: {colors.primary} (#0A0A0A)
Label Font: {typography.label} (funnelDisplay, 18px, weight 400)
Input Font: {typography.body-sm} (funnelDisplay, 15.9984px, weight 400)
Border: 1px solid {colors.hairline} (1px solid #B8B5B0)
Border Radius: {rounded.none} (0px)
Padding: {spacing.sm} to {spacing.md} (12px–16px)
Focus State: Border color shifts to {colors.primary} (#0A0A0A) or {colors.accent-1} (#D12424)
Placeholder Color: {colors.muted} (#9E9991)
Disabled State: Opacity 0.5 or 0.65

Footer

Background: #0D0D0B (very dark, near-black)
Text Color: {colors.on-primary} (#FFFFFF)
Font: {typography.body-md} (funnelDisplay, 16px, weight 400)
Height: 495.625px (measured)
Padding: {spacing.section} to {spacing.band} (36px–40px)
Border: None
Border Radius: {rounded.none} (0px)
Links: {colors.on-primary} (#FFFFFF), weight 400
Link Hover: Color shifts to {colors.accent-1} (#D12424)

5. Layout Principles

Spacing System

The system uses a base unit of {spacing.xxs} = 4px, scaled in increments:

{spacing.xxs} = 4px — micro-adjustments, icon spacing
{spacing.xs} = 8px — tight groupings, button padding
{spacing.sm} = 12px — component gutters
{spacing.md} = 16px — default paragraph margins, standard gaps
{spacing.lg} = 20px — section dividers, moderate whitespace
{spacing.xl} = 24px — larger component spacing
{spacing.xxl} = 28px — hero section padding
{spacing.xxxl} = 32px — large content blocks
{spacing.section} = 36px — section padding, major layout breaks
{spacing.band} = 40px — full-width band/section padding

Grid & Container

Desktop max-width: ~1425px (measured at 1440px viewport)
Tablet max-width: ~1265px (measured at 1280px viewport)
Column strategy:
- 2–3 columns on tablet and up
- Single column layout on mobile (375px–768px)
- Content column width expands with viewport: 360px (375px VP) → 753px (768px VP) → 1425px (1440px VP)
Section patterns: Full-width color bands with horizontal padding; centered content blocks; asymmetric grids favoring the left or right

Whitespace Philosophy

Whitespace is not incidental; it is structural. Large gutters separate sections. Paragraphs and headings have generous line-height (0.88–1.55) and spacing. The off-white canvas ({colors.canvas} — #EFEEEB) is as much a design element as any component. Density is avoided in favor of breathing room and visual hierarchy through scale and contrast.

Border Radius Scale

{rounded.none} = 0px — applied to all interactive and content components (buttons, inputs, cards, images, badges)

The system is uniformly sharp-edged. No rounded corners appear anywhere in the component hierarchy.

Border Widths

Thin (1px): Applied to button borders, input borders, dividers, and hairlines throughout the system.

No thicker stroke weights are defined.

6. Depth & Elevation

Level	Treatment	Use
Flat	No shadow, color-blocking only	Default cards, buttons, text containers
Elevated SM	`rgba(10, 10, 10, 0.28) 0px 18px 40px -12px`	Hover states, modals, floating panels, optional card lift

Shadow Philosophy: The system relies on color blocking—changing surface colors to create depth—rather than stacking shadows. A single shadow option exists for subtle lift on interactive or floating elements. The shadow is warm-toned, using the primary ink color with 28% opacity and a soft blur (18px) and negative spread (-12px) to appear understated.

Opacity Levels

0.17 (17%) — very light, extreme background
0.45 (45%) — medium-light, secondary content
0.55 (55%) — medium, semi-transparent overlays
0.83 (83%) — nearly opaque, emphasis
1 (100%) — full opacity, primary

Disabled states typically use 0.5 or 0.65 opacity. Hover states may modulate opacity or opacity-shifted colors.

Z-index / Layering

10 — Dropdown or modal backdrop
15 — Secondary layer (dropdown nested)
20 — Primary modal or floating element
30 — Persistent floating bar or sticky nav
40 — High-priority modal or overlay
60 — Toast notification or alert
70 — Top-layer notification
90 — Topmost layer (e.g., full-screen modal)

Use these values for stacking dropdowns, modals, popovers, sticky elements, and notifications in that priority order.

7. Do's and Don'ts

Do

Use sharp corners (0px radius) on all interactive and content components for consistency and visual sharpness.
Tighten letter-spacing on display text: -0.6px to -3px depending on size. This is a defining trait of the brand.
Leverage the warm off-white canvas ({colors.canvas} — #EFEEEB) as a primary background; let it breathe.
Apply {colors.accent-1} (#D12424) sparingly: focus states, link hovers, micro-interactions. Overuse dilutes its punch.
Stack components with generous vertical spacing ({spacing.section} = 36px or more between major sections).
Use funnelDisplay as the primary typeface (weights 400 and 500 only); reserve Archivo for emphasized captions only.
Build depth through color, not shadow: Shift surface colors to create visual hierarchy; use the single shadow only for hover or elevated states.
Maintain high contrast (#0A0A0A on #EFEEEB; 107:1 WCAG AAA-compliant).
Test button states explicitly: Focus, hover, active, and disabled. Focus states always apply a {colors.accent-1} outline.

Don't

Do not round corners: All interactive and content elements render with border-radius: 0px. No pill-buttons, no soft edges.
Do not mix typefaces casually: funnelDisplay is the system voice; Archivo is a utility font for captions only.
Do not use letter-spacing on body text: Body and smaller sizes use 0px or positive tracking; tight spacing is reserved for display.
Do not layer multiple shadows: The system defines one shadow (sm). Stacking shadows creates noise.
Do not apply the accent color indiscriminately: It is not a primary fill color; it highlights interaction, focus, and state change.
Do not compress whitespace to cram more content: Generous padding and margins are core to the aesthetic.
Do not use opacity as the primary depth mechanic: Color shifts, borders, and shadows convey depth; opacity is a fine-tuning tool.
Do not invent new colors or semantic meanings: Stick to the extracted palette. If a new role is needed, choose from existing neutrals or use the accent sparingly.
Do not ignore focus states on keyboard navigation: Every interactive element must have a clear focus indicator (outline in {colors.accent-1}).

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Max Content Width	Grid Columns	Key Changes
Mobile	375px	360px	5	Single-column layout, largest heading 87px, no nav link hiding
Tablet	768px	753px	3	Still single-column, heading scales to 55px, menu remains visible
Tablet Large	1024px	1009px	3	Heading scales to 74px, broader content margins
Desktop	1280px	1265px	2	Heading reaches 92px, two-column layout emerges
Desktop Large	1440px	1425px	2	Max width, heading at 104px, full desktop experience

Note: All measured viewports show the menu toggle and nav links consistently visible; no collapse point was detected. The grid columns refer to content subdivision within sections, not a CSS grid framework.

Touch Targets

Minimum button height: 44px (measured across all button variants)
Minimum button width: 56px for icon buttons, 143px–186px for text buttons
Minimum link target: 24px line-height at 16px font-size provides adequate spacing for tapping
Form input height: 44px (matching button height for consistency)
Icon spacing: Minimum {spacing.xs} (8px) between adjacent icons or controls

Collapsing Strategy

Heading size: Scales down as viewport shrinks (104px at 1440px → 87px at 375px)
Section padding: Remains consistent (no measured collapse in horizontal padding)
Body text size: Stays at 16px across all breakpoints (no measured scaling)
Grid columns: Content subdivides into 5 columns on mobile, 3 on tablet, 2 on desktop (measured column counts; actual layout may not use all columns)
Navigation: Remains inline and visible on all breakpoints; no hamburger menu observed
Button size: Consistent 44px height across all breakpoints; text size does not change

9. Agent Prompt Guide

Quick Color Reference

Primary CTA & Text: Primary (#0A0A0A)
CTA on Dark: On Primary (#FFFFFF)
Interactive Accent (focus, hover): Accent Red (#D12424)
Page Background: Canvas (#EFEEEB)
Body Copy: Body (#6B6862)
Secondary Text: Muted (#9E9991)
Borders & Dividers: Hairline (#B8B5B0)
Footer Background: Very Dark (#0D0D0B)

Iteration Guide

All buttons and interactive elements must have border-radius: 0px. Sharp corners are non-negotiable.
Display text (40px and above) must include tight, negative letter-spacing: -0.6px at 40px, -0.9px at 60px, -1.36px at 68px, up to -3px at 100px. Do not omit.
Use {colors.accent-1} (#D12424) exclusively for focus outlines, link hovers, and micro-interactions. It is not a fill color.
Body and button text use funnelDisplay weight 400 or 500 only. No other weights.
Button height is always 44px; padding is 9px 15px across all text-button variants.
Hover states on links shift text color to #D12424. Focus states apply a 2px solid #D12424 outline.
Spacing between major sections is {spacing.section} (36px) minimum. Whitespace creates hierarchy.
The single shadow (rgba(10, 10, 10, 0.28) 0px 18px 40px -12px) is used only for elevated or hover states, never as a default.
Form inputs and buttons share the same 44px height and 0px border-radius for visual consistency.
Footer text is always #FFFFFF on #0D0D0B. Footer links hover to #D12424.

10. Known Gaps

No semantic color palette: The site does not declare error, success, warning, or info states. No colored status ramps are available. If semantic colors are needed, they must be designed and added to this system.
Unassigned accent color: {colors.accent-1} (#D12424) has no explicit assigned role in the extraction; it is treated as a decorative and interactive accent based on observed usage (link hovers, focus outlines). Confirm its intended purpose with the design team.
Unassigned neutral color: {colors.neutral-1} (#E5E7EB) was extracted but has no measured role. It may be a utility or fallback color; clarify its use.
Interaction states are inferred, not explicitly styled: The extraction captured hover, focus, active, and disabled states from the site's stylesheets, but not all states may be present in the analyzed page. Verify that disabled, active, and error states exist before implementing.
No dark mode or theme variants: Only one theme (light, with off-white canvas and dark ink) was measured. No dark-mode stylesheet or CSS custom properties for theme switching were detected.
Single-page extraction: Analysis covered only the homepage (https://pamidordesign.co/). Internal pages, authenticated surfaces, or dynamic content states were not visited. Component behavior on other pages may differ.
Gradient overlays documented, not explained: Two linear gradients were extracted (one fade-to-canvas, one dark overlay) but their exact use context (hero section, modal backdrop, etc.) was not confirmed. Refer to the component section if gradients appear undefined.
Z-index scale provided but not fully contextualized: Multiple z-index values (10, 15, 20, 30, 40, 60, 70, 90) were extracted. Map these to specific UI layers (dropdown, modal, toast) based on your implementation.
Menu toggle always visible: No mobile hamburger menu collapse was detected across all breakpoints (375px–1440px). Confirm whether a menu toggle is truly always visible or if the extraction missed a collapse point.
Line-height on button: Buttons measure line-height: 23.9976px (matching height: 44px with padding 9px 15px). This may be a rendered artifact; verify actual button line-height in CSS.

Token Reference

colors:
  primary: "#0A0A0A"
  accent-1: "#D12424"
  canvas: "#EFEEEB"
  body: "#6B6862"
  muted: "#9E9991"
  on-primary: "#FFFFFF"
  hairline: "#B8B5B0"
  neutral-1: "#E5E7EB"

typography:
  display-xl:
    font-family: funnelDisplay
    font-size: 99.9936px
    font-weight: 500
    line-height: 0.88
    letter-spacing: -3px
  display-xxl:
    font-family: funnelDisplay
    font-size: 103.997px
    font-weight: 500
    line-height: 1
    letter-spacing: -2.08px
  display-lg:
    font-family: funnelDisplay
    font-size: 68px
    font-weight: 500
    line-height: 1
    letter-spacing: -1.36px
    text-transform: uppercase
  display-md:
    font-family: funnelDisplay
    font-size: 60px
    font-weight: 500
    line-height: 1.05
    letter-spacing: -0.9px
  display-sm-uppercase:
    font-family: funnelDisplay
    font-size: 40px
    font-weight: 500
    line-height: 1.2
    letter-spacing: -0.6px
    text-transform: uppercase
  display-sm:
    font-family: funnelDisplay
    font-size: 40px
    font-weight: 500
    line-height: 1.2
    letter-spacing: -0.6px
  body-md:
    font-family: funnelDisplay
    font-size: 16px
    font-weight: 400
    line-height: 1.5
    letter-spacing: 0px
  body-sm:
    font-family: funnelDisplay
    font-size: 15.9984px
    font-weight: 400
    line-height: 1.55
    letter-spacing: -0.16px
  button:
    font-family: funnelDisplay
    font-size: 15.9984px
    font-weight: 500
    line-height: 1.5
    letter-spacing: -0.16px
  label:
    font-family: funnelDisplay
    font-size: 18px
    font-weight: 400
    line-height: 1.5
    letter-spacing: -0.18px
  caption-xs:
    font-family: funnelDisplay
    font-size: 11.9952px
    font-weight: 400
    line-height: 1.4
    letter-spacing: 0.72px
    text-transform: uppercase
  caption-xs-strong:
    font-family: Archivo
    font-size: 11.9952px
    font-weight: 500
    line-height: 1.4
    letter-spacing: 0.72px
  body-xs:
    font-family: funnelDisplay
    font-size: 11.9952px
    font-weight: 400
    line-height: 1.4
    letter-spacing: 0.72px

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 32px
  section: 36px
  band: 40px

rounded:
  none: 0px

shadows:
  sm: rgba(10, 10, 10, 0.28) 0px 18px 40px -12px

borders:
  thin: 1px

opacity:
  disabled: 0.5
  disabled-alt: 0.65
  light: 0.17
  medium-light: 0.45
  medium: 0.55
  medium-dark: 0.83
  full: 1

z-index:
  dropdown-1: 10
  dropdown-2: 15
  modal-base: 20
  sticky: 30
  modal-high: 40
  toast: 60
  notification: 70
  topmost: 90

gradients:
  fade-canvas: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(239, 238, 235))
  dark-overlay: linear-gradient(rgba(4, 4, 4, 0) 19%, rgba(4, 4, 4, 0.94) 100%)

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from pamidordesign.co

Primary

#0A0A0A

Primary CTA, brand accent, active state; Headings / primary text

#D12424

Accent / decorative

Neutral

#EFEEEB

Default page background

#6B6862

Body copy

#9E9991

Captions, secondary text

#FFFFFF

Tertiary / placeholder text; label colour on brand surfaces

#B8B5B0

1px borders and dividers

#E5E7EB

Neutral

Typography · funnelDisplay

h199.9936px · 500 · 87.9944px

h2103.997px · 500 · 103.997px

h360px · 500 · 63px

body11.9952px · 400 · 16.7933px

link16px · 400 · 24px

button15.9984px · 500 · 23.9976px

input18px · 400 · 27px

body15.9984px · 400 · 24.7975px

display40px · 500 · 48px

display68px · 500 · 68px

display40px · 500 · 48px

caption11.9952px · 400 · 16.7933px

Typography · Archivo

caption11.9952px · 500 · 16.7933px

Spacing

4px

8px

12px

16px

20px

24px

28px

32px

Elevation

rgba(10, 10, 10, 0.28) 0px 18px 40px -12px

Components · 4

Remixes of pamidordesign.co

Latest remixes

No public remixes yet. Be the first to make one.

Remix it