# Flatpay Design > Documentation for the @flatpay-dk/ui design system — components, > foundations, content guidance, and bootstrap prompts for AI tools. Append `.md` to any page URL to receive the page's content as plain Markdown. The full corpus is at `/llms-full.txt` if you want every page concatenated in one fetch. ## Top - [Flatpay Design](https://design.flatpay.dev/) — Landing page for the Flatpay design system docs — components, foundations, content guidance. - [Getting started](https://design.flatpay.dev/getting-started) — Install @flatpay-dk/ui + the Tailwind preset, wire fonts, render the first Page. - [Release notes](https://design.flatpay.dev/release-notes) — Every published version of @flatpay-dk/ui and @flatpay-dk/tailwind-preset on npm — when each shipped and what changed. - [AI tools](https://design.flatpay.dev/ai-tools) — Bootstrap prompts that point Claude Code, Cursor, Codex, and Lovable at the Flatpay design system. ## AI tools - [Claude Code](https://design.flatpay.dev/ai-tools/claude-code) — Bootstrap prompt for Claude Code. - [Codex](https://design.flatpay.dev/ai-tools/codex) — Bootstrap prompt for OpenAI Codex. - [Cursor](https://design.flatpay.dev/ai-tools/cursor) — Bootstrap prompt for Cursor. - [Lovable](https://design.flatpay.dev/ai-tools/lovable) — Bootstrap prompt for Lovable. ## Foundations - [Design tokens](https://design.flatpay.dev/foundations/tokens) — How we name, layer, and consume the system's primitives. - [Typography](https://design.flatpay.dev/foundations/typography) — Founders Grotesk X Condensed, Inter Tight, Martian Mono — and the scale that uses them. - [Typography · Typefaces](https://design.flatpay.dev/foundations/typography/typefaces) — Each family in detail, with OpenType features for currency and tabular data. - [Typography · Type tokens](https://design.flatpay.dev/foundations/typography/tokens) — Heading, body, metric, and code token reference. - [Color](https://design.flatpay.dev/foundations/color) — Surfaces, text, borders, status. OKLCH foundations, semantic token roles. - [Color · Color palette](https://design.flatpay.dev/foundations/color/palette) — Every primitive swatch in the system, ramp by ramp. - [Color · Accent colors](https://design.flatpay.dev/foundations/color/accents) — Categorical hues for content where colour is one of many — and the layering rule that keeps them quiet. - [Color · All color tokens](https://design.flatpay.dev/foundations/color/tokens) — Searchable reference of every semantic color token, with light + dark values. - [Color · Data visualization](https://design.flatpay.dev/foundations/color/data-visualization) — Color choices for charts, dashboards, and tabular data. - [Spacing](https://design.flatpay.dev/foundations/spacing) — The 4-pixel grid, the Tailwind scale, and the rules for padding, gap, and page rhythm. - [Breakpoints](https://design.flatpay.dev/foundations/breakpoints) — Tailwind's standard breakpoints — sm 640, md 768, lg 1024, xl 1280, 2xl 1536. Mobile-first, unchanged from defaults. - [Border](https://design.flatpay.dev/foundations/border) — Width, radius, color, focus, and dividers — the line work that carries 30% of the interface's visual weight. - [Radius](https://design.flatpay.dev/foundations/radius) — Two starring values — 4 px for buttons, 8 px for cards — and the small Tailwind scale that supports them. - [Elevation](https://design.flatpay.dev/foundations/elevation) — Borders before shadows. The Tailwind shadow scale, surface stacking, and the z-index ladder for floating UI. - [Motion](https://design.flatpay.dev/foundations/motion) — Durations, easings, and the moments that earn animation. - [Iconography](https://design.flatpay.dev/foundations/iconography) — Sizing, placement, and the rules for using the Material icon set in Flatpay surfaces. - [Iconography · Icon library](https://design.flatpay.dev/foundations/iconography/library) — Every icon in the curated Flatpay set, searchable by name and category. - [Illustrations](https://design.flatpay.dev/foundations/illustrations) — Two categories — spot illustrations and spotlight UI — with anatomy, principles, and a library. - [Imagery](https://design.flatpay.dev/foundations/imagery) — Photography and product imagery — high-resolution 3D renders, in-situ merchant photos, and the rules that keep both honest. - [Logos](https://design.flatpay.dev/foundations/logos) — Marque, wordmark, anatomy, clear-space rules, minimum sizes, misuse, and downloads. ## Content - [Voice and tone](https://design.flatpay.dev/content/voice-and-tone) — One voice, many tones. The 3-word voice and how it shifts under instruction, error, and confirmation. - [Style, grammar, and punctuation](https://design.flatpay.dev/content/style) — Sentence case, Oxford commas, em dashes, contractions, lists — every micro-decision in one place. - [Date and time](https://design.flatpay.dev/content/date-and-time) — Format, separators, relative dates, time zones, and the locale exceptions across the eight markets. - [Currency](https://design.flatpay.dev/content/currency) — European format, prefix vs. suffix, negatives in orange, slashed zero — the numerical recipe every metric inherits. - [Localisation](https://design.flatpay.dev/content/localisation) — Default British English, eight markets, ten languages — and the rules that keep translation from breaking the layout. ## Components - [Divider](https://design.flatpay.dev/components/layout/divider) - [Page](https://design.flatpay.dev/components/layout/page) - [Section](https://design.flatpay.dev/components/layout/section) - [Sticky footer](https://design.flatpay.dev/components/layout/sticky-footer) - [Call to action](https://design.flatpay.dev/components/editorial/call-to-action) - [FAQ block](https://design.flatpay.dev/components/editorial/faq-block) - [Hero](https://design.flatpay.dev/components/editorial/hero) - [Partner block](https://design.flatpay.dev/components/editorial/partner-block) - [Statement block](https://design.flatpay.dev/components/editorial/statement-block) - [Success screen](https://design.flatpay.dev/components/editorial/success-screen) - [Testimonial](https://design.flatpay.dev/components/editorial/testimonial) - [Timeline](https://design.flatpay.dev/components/editorial/timeline) - [Button](https://design.flatpay.dev/components/actions/button) - [Button group](https://design.flatpay.dev/components/actions/button-group) - [Menu](https://design.flatpay.dev/components/actions/menu) - [Checkbox](https://design.flatpay.dev/components/forms/checkbox) - [Choice list](https://design.flatpay.dev/components/forms/choice-list) - [Combobox](https://design.flatpay.dev/components/forms/combobox) - [Date picker](https://design.flatpay.dev/components/forms/date-picker) - [Detail field](https://design.flatpay.dev/components/forms/detail-field) - [File upload](https://design.flatpay.dev/components/forms/file-upload) - [Money field](https://design.flatpay.dev/components/forms/money-field) - [Radio button](https://design.flatpay.dev/components/forms/radio-button) - [Radio card](https://design.flatpay.dev/components/forms/radio-card) - [Range slider](https://design.flatpay.dev/components/forms/range-slider) - [Search](https://design.flatpay.dev/components/forms/search) - [Segmented control](https://design.flatpay.dev/components/forms/segmented-control) - [Select](https://design.flatpay.dev/components/forms/select) - [Switch](https://design.flatpay.dev/components/forms/switch) - [Chip](https://design.flatpay.dev/components/forms/chip) - [Text field](https://design.flatpay.dev/components/forms/text-field) - [Time picker](https://design.flatpay.dev/components/forms/time-picker) - [Icon](https://design.flatpay.dev/components/media/icon) - [Animated success mark](https://design.flatpay.dev/components/status-and-display/animated-success-mark) - [Avatar](https://design.flatpay.dev/components/status-and-display/avatar) - [Badge](https://design.flatpay.dev/components/status-and-display/badge) - [Banner](https://design.flatpay.dev/components/status-and-display/banner) - [Toast notification](https://design.flatpay.dev/components/status-and-display/toast-notification) - [Indicator](https://design.flatpay.dev/components/status-and-display/indicator) - [Progress bar](https://design.flatpay.dev/components/status-and-display/progress-bar) - [Spinner](https://design.flatpay.dev/components/status-and-display/spinner) - [Chart](https://design.flatpay.dev/components/tables-and-data/chart) - [Table](https://design.flatpay.dev/components/tables-and-data/data-table) — One table for both jobs — read-only ledgers and object lists with selection, drag-and-drop, and bulk actions. - [Editable table](https://design.flatpay.dev/components/tables-and-data/editable-table) - [Metrics group](https://design.flatpay.dev/components/tables-and-data/metrics-group) - [Summary box](https://design.flatpay.dev/components/tables-and-data/summary-box) - [Transfer list](https://design.flatpay.dev/components/tables-and-data/transfer-list) - [Links](https://design.flatpay.dev/components/navigation/links) - [Nav card](https://design.flatpay.dev/components/navigation/nav-card) - [Navigation](https://design.flatpay.dev/components/navigation/navigation) - [Pagination](https://design.flatpay.dev/components/navigation/pagination) - [Tabs](https://design.flatpay.dev/components/navigation/tabs) - [Coach marks](https://design.flatpay.dev/components/overlays/coach-marks) - [Modal & drawer](https://design.flatpay.dev/components/overlays/modal-and-drawer) - [Tooltip](https://design.flatpay.dev/components/overlays/tooltip) - [Collapsible](https://design.flatpay.dev/components/utilities/collapsible) ## Patterns - [Filters](https://design.flatpay.dev/patterns/filters) — Filtering tables and indexes. - [Portal shell](https://design.flatpay.dev/patterns/portal-shell) — The canonical Flatpay merchant portal chrome — top bar + sidebar + content + mobile drawer, composed from `NavigationPage` and the `NavigationItems` preset. Start here when bootstrapping a new prototype.