DESIGN SYSTEM INVENTORY
48
Local components
36
Marked used
12
Cleanup candidates
Every local canvas component is tagged by current usage. Counts are based on component instances found in the project right now.
Used
Button Primary
Instances
58
Used
Navigation
Instances
57
Used
Footer floating
Instances
38
Used
Case Study/Cards
Instances
32
Used
Animations/Eye-animation
Instances
18
Used
Footer
Instances
18
Used
Animations/Cloud animation
Instances
14
Used
Stack/Stack tools hero
Instances
12
Used
Stack/Stack tools
Instances
9
Used
Logo-animation-v02
Instances
6
Used
Navigation-button
Instances
6
Used
Objects (Desktop)
Instances
6
Used
Article
Instances
5
Used
Objects (Phone)
Instances
5
Used
About me - Home
Instances
4
Used
brain-illustration
Instances
4
Used
Header rotation.
Instances
4
Used
Hero-V01
Instances
4
Used
Stack/Figma
Instances
4
Used
Stack/Hotjar
Instances
4
Used
Stack/Notion
Instances
4
Used
Accordion/Row
Instances
3
Used
Case Study/Cards white
Instances
3
Used
Headline
Instances
3
Used
Logo-animated
Instances
3
Used
Stack/ChatGPT
Instances
3
Used
Stack/Framer
Instances
3
Used
Stack/ProtoPie
Instances
3
Used
Stack/Relume
Instances
3
Used
Stack/Smartlook
Instances
3
Used
Stack/Typeform
Instances
3
Used
Stack/VWO
Instances
3
Used
Stack/Webflow
Instances
3
Used
Cursor-test
Instances
1
Used
Illustration 01-animation
Instances
1
Used
Stack/Fireflies
Instances
1
Not used
Accordion
Instances
0
Not used
Accordion/Section FAQ
Instances
0
Not used
Blog Post
Instances
0
Not used
Button Primary (Light)
Instances
0
Not used
Button Stroke
Instances
0
Not used
Case Study/Cards image full space
Instances
0
Not used
Cases-home
Instances
0
Not used
Elements/Pulse
Instances
0
Not used
Navigation-V01
Instances
0
Not used
Pro-Annual
Instances
0
Not used
Process
Instances
0
Not used
Stack/Expert
Instances
0
Fonts
Plus Jakarta Sans, Space Mono, Satoshi, Hanken Grotesk, Inter, Instrument Sans, JetBrains Mono, Coaster Sans, Playfair Display, Recoleta Alt, Recoleta
Icon sets
Current site sets: Logos, Iconic, Feather, and Logo. The audit page uses Feather for status and inventory details.
Code components
WordReveal, TextWrapper, StickyScroll, and NumberCounter are listed separately from canvas components because they live in code files.
A practical guide for how the current system is organized, when to reuse each foundation, and what to check before deleting unused pieces.
Typography
Use Recoleta for expressive documentation and page-level display moments on this inventory page. The production system uses Plus Jakarta Sans text presets for headings, menu items, metrics, and paragraphs. Space Mono is used for audit labels, counts, and inventory metadata.
H1, H2, H3: portfolio headings and major page hierarchy.
Paragraph 2–Tiny: long-form case-study copy, captions, and supporting labels.
Color tokens
The production palette is tokenized around a soft portfolio UI: Background, White, Black, Grey, Grey Bold, CTA, Primary scale, Support accents, and Success states. Prefer tokens on production pages; use raw colors on this inventory page only for status tags and documentation surfaces.
Background
CTA
Primary 400
Success 100
Components
Reuse existing local components before creating new ones. Navigation, Button Primary, Footer, case-study cards, stack logos, and animated objects are the core systems currently powering the site. Treat unused components as deletion candidates only after checking whether they are source components, experiments, or planned variants.
Use: Navigation, Button Primary, Footer, case-study cards, stack logo components.
Review before deleting: anything tagged Not used, especially legacy buttons and alternate navigation.
Do not duplicate a component to create a style variation; add a variant or document the exception.
Layout and spacing
Pages use centered content wrappers and stacked vertical sections. Desktop audit grids use three columns where density helps scanning; tablet moves to two columns; phone converts grids into vertical stacks. Keep sections inside a consistent max width and let cards auto-size to content instead of relying on fixed heights.
Section shell: full width, centered, max width around 1120px.
Cards: white surface, thin border, rounded 18–20px corners, compact internal rhythm.
Responsive: convert dense grids to stacked cards on phone.
Buttons
Button Primary is the default production CTA and is heavily used across the site. Button Primary (Light) and Button Stroke are currently not used, so treat them as legacy or experimental until confirmed. Button labels should stay compact, linked at the button wrapper level, and reused as component instances rather than rebuilt inline.
Navigation and links
Navigation is a core reusable component. Use the active link styles for current pages and keep navigation links simple. Link Light and Link Dark support high-contrast areas; Link Support 300 is for colored support surfaces; the default Link style is for body links and accented text.
CMS and content
The CMS currently contains Blog and Portfolio collections. Blog supports title, description, date, image, and rich text content; Portfolio is a simpler project/content collection. Use collection lists for repeated editorial content instead of manually duplicating cards.
Code components
WordReveal, TextWrapper, StickyScroll, and NumberCounter live in code files. They should be edited through code, not rebuilt as canvas layers. Keep code components reserved for behavior or rendering that the canvas cannot express cleanly.
01. Audit
Check the component grid for Not used tags and zero instance counts.
02. Verify
Open the component before deleting; confirm it is not a source, archive, or planned variant.
03. Replace
If an unused component duplicates a used one, migrate pages to the current component first.
04. Delete
Delete only after the system page, pages, and component instances still look correct.