CURATED COLLECTION · 5 REFERENCES

Your design system starter kit

A collection of design references, with notes and links to the originals.

Bring this board into your next build.

Copy the reference notes below and paste them into Claude, ChatGPT, or your coding assistant. Add what you want to build.

Board context · 5 references

# Your design system starter kit

Board: https://swipefile.design/board/your-design-system-starter-kit/
References: 5

Use this board as design direction for my project. Review the references below, identify useful layout, typography, color, and interaction patterns, then adapt them to my brief. Cite the original references you use.

Use these references for design principles. Follow the project brief and use original branding, content, and imagery. Captures document a particular date; they do not verify current product behavior.

## 1. Lucide

Source website: https://lucide.dev/
Swipefile reference: https://swipefile.design/ref/lucide-icons/
Screenshot: https://swipefile.design/_astro/full.CBlEHV6C.webp
Captured: 2026-09-04 | Scope: viewport | Type: asset | Style: Icons

A consistent outline icon library with adjustable stroke and size.

Useful for: Find a coherent icon family for navigation, actions, and status indicators.

## 2. Fontsource

Source website: https://fontsource.org/
Swipefile reference: https://swipefile.design/ref/fontsource/
Screenshot: https://swipefile.design/_astro/full.D6ITvt-F.webp
Captured: 2026-09-04 | Scope: viewport | Type: asset | Style: Typography

A searchable font catalog with self-hosting packages and specimens.

Useful for: Find a typeface and inspect the styles needed for a performant interface.

## 3. Radix Primitives

Source website: https://www.radix-ui.com/primitives
Swipefile reference: https://swipefile.design/ref/radix-primitives/
Screenshot: https://swipefile.design/_astro/full.Bk9_7-qk.webp
Captured: 2026-09-04 | Scope: viewport | Type: asset | Style: Components

Unstyled primitives for common interactive interface patterns.

Useful for: Implement dialogs, menus, tabs, and popovers with explicit interaction behavior.

## 4. Radix Colors

Source website: https://www.radix-ui.com/colors
Swipefile reference: https://swipefile.design/ref/radix-colors/
Screenshot: https://swipefile.design/_astro/full.PcyT8IM1.webp
Captured: 2026-09-04 | Scope: viewport | Type: asset | Style: Color

A color system organized around interface use and theme scales.

Useful for: Build light and dark surfaces with predictable semantic color steps.

## 5. The A11Y Project

Source website: https://www.a11yproject.com/
Swipefile reference: https://swipefile.design/ref/a11y-project/
Screenshot: https://swipefile.design/_astro/full.CKh_l3WR.webp
Captured: 2026-09-04 | Scope: viewport | Type: asset | Style: Accessibility

Practical accessibility guidance and a checklist for web projects.

Useful for: Review keyboard access, semantic structure, forms, and motion choices.

View board: https://swipefile.design/board/your-design-system-starter-kit/
Swipefile: https://swipefile.design/

Download notes

Includes design notes, source websites, and screenshot links. An assistant that supports browsing can also read the public board link.

For developers

Raw Markdown · Structured JSON

Lucide

Icons

Design notes

A consistent outline icon library with adjustable stroke and size.

Useful for: Find a coherent icon family for navigation, actions, and status indicators.

Fontsource

Typography

Design notes

A searchable font catalog with self-hosting packages and specimens.

Useful for: Find a typeface and inspect the styles needed for a performant interface.

Radix Primitives

Components

Design notes

Unstyled primitives for common interactive interface patterns.

Useful for: Implement dialogs, menus, tabs, and popovers with explicit interaction behavior.

Radix Colors

Color

Design notes

A color system organized around interface use and theme scales.

Useful for: Build light and dark surfaces with predictable semantic color steps.