[skip-changelog] Add Figma Make design system guidelines

[Gert-Jan Vercauteren (gert-janvercauteren)]

Fills in the Figma Make kit template (received from our Figma TAM) under docs/figma-make-kit/guidelines/ with concrete Backpack guidance, replacing every <!-- NOTE: ... --> placeholder. Content is sourced directly from component source code, bpk-foundations-web tokens, and Storybook stories — not invented — covering foundations (color, typography, spacing, borders, iconography), a component catalog with 18 individual component guides, and three composition patterns (card list, filter panel, confirmation modal). This gives Figma Make the design-token and component-API context it needs to generate on-brand, Backpack-correct code from Figma designs.

• Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [Clover-123][BpkButton] Updating the colour
• README.md (If you have created a new component)
• Component README.md
• Tests
• Accessibility tests
  • The following checks were performed:
    • Ability to navigate using a keyboard only
    • Zoom functionality (Deque University explanation):
      • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
      • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
    • Ability to navigate using a screen reader only
• Storybook examples created/updated
• For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

[skyscanner-backpack-bot]

Visit https://backpack.github.io/storybook-prs/4959 to see this build running in a browser.

[Copilot]

Pull request overview

Note

Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.

Adds a complete set of Backpack design-system guidelines for the Figma Make kit, replacing the starter template content with concrete token/component/composition guidance.

Changes:

• Adds setup + QA checklist docs for generating Backpack-correct code.
• Documents foundations (color, typography, spacing, borders, iconography) and a component catalog with per-component usage rules.
• Introduces page-level composition patterns (card list, filter panel, confirmation modal) for consistent layouts.

Reviewed changes

Copilot reviewed 39 out of 39 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
docs/figma-make-kit/guidelines/setup.md	Documents install, stylesheet imports, BpkProvider usage, and dark-mode switching.
docs/figma-make-kit/guidelines/qa.md	Adds a structured QA checklist to validate generated output against Backpack rules.
docs/figma-make-kit/guidelines/overview.md	Defines product character, reading order, and global rules for Figma Make output.
docs/figma-make-kit/guidelines/keywords.md	Adds keyword-to-component/pattern routing rules for prompts.
docs/figma-make-kit/guidelines/foundations/typography.md	Documents TEXT_STYLES scale, usage patterns, and rules for typography.
docs/figma-make-kit/guidelines/foundations/spacing.md	Documents spacing tokens, layout guidance, and rules for token-only spacing.
docs/figma-make-kit/guidelines/foundations/iconography.md	Documents icon imports, sizing, and do/don’t rules for alignment and styling.
docs/figma-make-kit/guidelines/foundations/color.md	Documents palette roles and guidance on applying color via component props/tokens.
docs/figma-make-kit/guidelines/foundations/borders.md	Documents border radius tokens and border usage rules.
docs/figma-make-kit/guidelines/content-and-terminology.md	Defines copy/accessibility-label conventions and approved terminology.
docs/figma-make-kit/guidelines/composition/overview.md	Introduces composition pattern concept and general rules.
docs/figma-make-kit/guidelines/composition/filter-panel.md	Defines a filter panel composition and recommended component order.
docs/figma-make-kit/guidelines/composition/confirmation-modal.md	Defines a confirmation modal composition using BpkModalV3 slots.
docs/figma-make-kit/guidelines/composition/card-list.md	Documents using BpkCardList for card-list layouts rather than manual grids.
docs/figma-make-kit/guidelines/composition/_pattern-template.md	Keeps a template for future composition patterns.
docs/figma-make-kit/guidelines/components/overview.md	Adds a component catalog, decision trees, and common prop guidance.
docs/figma-make-kit/guidelines/components/button.md	Documents BpkButton usage, variants, and icon rules.
docs/figma-make-kit/guidelines/components/link.md	Documents BpkLink usage and as-based behavior.
docs/figma-make-kit/guidelines/components/input.md	Documents BpkInput variants and labeling/clear-button rules.
docs/figma-make-kit/guidelines/components/textarea.md	Documents BpkTextarea usage and labeling rules.
docs/figma-make-kit/guidelines/components/select.md	Documents BpkSelect usage and native <option> constraints.
docs/figma-make-kit/guidelines/components/checkbox.md	Documents BpkCheckbox labeling and state props.
docs/figma-make-kit/guidelines/components/radio.md	Documents BpkRadio grouping conventions and props.
docs/figma-make-kit/guidelines/components/switch.md	Documents BpkSwitch ariaLabel requirement and variants.
docs/figma-make-kit/guidelines/components/text.md	Documents BpkText usage, props, and rules for typography-only via textStyle.
docs/figma-make-kit/guidelines/components/badge.md	Documents BpkBadge variants and icon-in-children pattern.
docs/figma-make-kit/guidelines/components/card.md	Documents BpkCardV2 variants, surface colors, and slot composition.
docs/figma-make-kit/guidelines/components/accordion.md	Documents BpkAccordion state wiring via HOCs and item props.
docs/figma-make-kit/guidelines/components/breadcrumb.md	Documents BpkBreadcrumb structure and active-item rules.
docs/figma-make-kit/guidelines/components/navigation-bar.md	Documents BpkNavigationBar variants and on-dark button styling requirement.
docs/figma-make-kit/guidelines/components/modal.md	Documents BpkModalV3 slots/requirements and RTL/provider guidance.
docs/figma-make-kit/guidelines/components/floating-notification.md	Documents BpkFloatingNotification usage and urgency rules.
docs/figma-make-kit/guidelines/components/popover.md	Documents BpkPopover required label/onClose and deprecated prop avoidance.
docs/figma-make-kit/guidelines/components/tooltip.md	Documents BpkTooltip ariaLabel requirement and “no interactive content” rule.
docs/figma-make-kit/guidelines/components/spinner.md	Documents spinner sizing-by-import and button loading guidance.
docs/figma-make-kit/guidelines/components/_component-template.md	Keeps a template for future per-component guideline docs.

Comments suppressed due to low confidence (4)

docs/figma-make-kit/guidelines/overview.md:1

• Markdown tables are written with a double leading pipe (||), which renders as an extra empty column in most Markdown parsers. Use a single leading pipe (|) for headers/separators/rows (and apply consistently across the guideline docs where this pattern appears).
  docs/figma-make-kit/guidelines/foundations/color.md:1
• BpkBannerAlert is described elsewhere in this doc set as deprecated, and INFO_BANNER_TYPES doesn’t match the BpkInfoBanner API described in components/info-banner.md (which references ALERT_TYPES). Update this example to use BpkInfoBanner + the correct enum naming to avoid directing Make to generate deprecated/incorrect code.
  docs/figma-make-kit/guidelines/foundations/spacing.md:1
• This table states the SCSS tokens are functions, but the Base row uses — instead of listing the corresponding bpk-spacing-base() function. Add the base function entry so the table matches the stated rule and gives Make a concrete token to use.
  docs/figma-make-kit/guidelines/setup.md:1
• Hardcoding an exact React patch-range in docs is likely to become stale quickly and can contradict the actual peerDependency range. Prefer describing the supported major/minor range (or referencing the package’s peerDependency constraints) rather than enumerating specific patch versions.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[skyscanner-backpack-bot]

Visit https://backpack.github.io/storybook-prs/4959 to see this build running in a browser.