---

name: bootstrap5-design description: Use this skill to generate well-branded interfaces and assets for the Bootstrap 5 Design System, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping. user-invocable: true

Read the README.md file within this skill, and explore the other available files. If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand. If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.

Bootstrap 5 Design System

A comprehensive design system based on the Bootstrap 5 UI Kit community Figma file. This system documents the visual foundations, component library, and UI patterns for building consistent admin dashboards and presentation websites using Bootstrap 5.

Sources

• Figma File: Bootstrap 5 UI Kit (Community).fig — mounted as virtual filesystem
• Pages: Foundations, Components, Bootstrap-UI-Kit, Icons, Changelog
• Framework: Bootstrap 5

---

CONTENT FUNDAMENTALS

Voice & Tone

• Utilitarian and direct — copy is instructional and concise
• Sentence case is used throughout (e.g. "Card title", "Special title treatment")
• Labels are title-cased only for section headers
• No emoji used anywhere in the design system
• Copy is neutral and functional — e.g. "Button", "Card title", "Card subtitle"
• Placeholder text uses standard Lorem Ipsum conventions
• Links are described plainly: "Card link", "Another link"
• Tone is professional, developer-facing, documentation-style
• First-person ("I") is not used; the system speaks in third-person / imperative

Example Copy Patterns

• Button labels: "Button", "Submit", "Cancel" — never decorated
• Card descriptions: short noun phrases + one supporting sentence
• Navigation: single-word labels ("Colors", "Typography", "Spacing")
• Metadata: lowercase and muted ("Last updated 3 mins ago")

---

VISUAL FOUNDATIONS

Colors

• Primary: #7749F8 (violet-purple), dark #5227CC, light #EBE5FC
• Secondary: #007DFF (blue), dark #54595E, light #ABB5BE
• Success: #28A745 | Danger: #DC3545 | Warning: #FFC107 | Info: #17A2B8
• Gray scale: 100 (#f8f9fa) → 900 (#212529), standard Bootstrap grays
• Black/White: #000000, #FFFFFF

Typography

• Primary font: Inter (Regular, Medium, SemiBold, ExtraBold, Bold, Black)
• Secondary font: Mulish (Regular, SemiBold, Bold, ExtraBold) — used in cards/display
• Accent font: Gothic A1 (SemiBold, ExtraBold) — rare usage
• Body text: Inter 16px / 28px line-height, color #68717a
• Lead text: Inter 21px / 36px line-height
• H1: Inter ExtraBold 40px | H2: 32px | H3: 28px | H4: 24px | H5: 20px | H6: 18px
• Display headings: 1–4 scale, Mulish ExtraBold or Inter Bold, very large

Spacing Scale

4 · 8 · 12 · 16 · 20 · 24 · 28 · 32px (Bootstrap 5 standard scale)

Shadows

• Larger shadow: 0 8px 32px rgba(0,0,0,0.15)
• Regular shadow: 0 4px 16px rgba(0,0,0,0.10)
• Small shadow: 0 2px 8px rgba(0,0,0,0.08)
• No shadow: flat / border only

Border Radius

• Cards: 12px
• Buttons: 6px
• Inputs/Select: 4–6px
• Badges: 4px (pill variant: 50rem)
• Alerts: 5–8px

Cards

• White background (#fff)
• Border: 1px solid #dee2e6 (gray-300) or borderless
• Border radius: 12px
• Card body padding: 24px
• Card header background: #f8f9fa, border-bottom: 1px solid #dee2e6
• Shadow: optional regular shadow

Backgrounds

• Page backgrounds: white (#fff)
• Section headers: white
• Dark table rows: #343a40 (gray-800)
• No gradients in UI; flat color fills throughout
• No background images or textures in components

Animations

• Bootstrap standard transitions (0.15s ease-in-out)
• No custom easing; no bounces; standard fades
• Spinner uses CSS animation (border spin)

Hover States

• Buttons: darken background ~10%
• Links: underline + color shift to primary dark
• Table rows: rgba(0,0,0,0.05) highlight
• Cards: no hover transform; subtle shadow increase

Press States

• Buttons: further darken (active state), no shrink transform

Borders

• Default dividers: 1px solid #dee2e6 (gray-300)
• Component outlines in Figma: 1px dashed #9747FF (design-only, not shipped)
• Dark borders: 1px solid #000 (rare, for contrast headers)

Iconography — see ICONOGRAPHY section below

Corner Radii

• Small UI elements: 4–6px
• Cards, panels: 12px
• Pills / badges: 50rem (fully rounded)

Layout Rules

• Page max-width: 1440px design canvas
• Content padding: 162–165px horizontal margins
• Component sections: gap 32–56px between major sections

---

ICONOGRAPHY

• Bootstrap Icons are the native icon set (bi-* classes via CDN)
• Icons are inline SVG or <i class="bi bi-*"> via Bootstrap Icons CDN
• No custom icon font; no PNG icons; no emoji
• Stroke-style icons; 1px–1.5px stroke weight
• Used in buttons (with gap), alerts (exclamation-triangle-fill, close), nav items
• CDN: https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css
• Logo: "Bootstrap" wordmark in Inter 20px + "Design System" subtitle in Inter 8px
• Brand logo assets copied to assets/

---

FILES

Path	Description
README.md	This file — system overview and foundations
SKILL.md	Agent skill definition
colors_and_type.css	CSS custom properties for all tokens
assets/	Logos, brand SVGs, images
preview/	Design system card previews
ui_kits/admin/	Admin dashboard UI kit
ui_kits/website/	Presentation/marketing website UI kit

---

UI KITS

Admin Dashboard (ui_kits/admin/index.html)

Full admin panel with sidebar nav, data tables, cards, stats, forms, and modals. Click-through prototype demonstrating Bootstrap 5 component patterns in a dashboard context.

Presentation Website (ui_kits/website/index.html)

Marketing/landing page with navbar, hero, feature grid, cards, and footer. Demonstrates Bootstrap 5 grid and component usage in a public-facing context.