Open the catalogue
No build or installation is required. Browse foundations, controls, and complete application patterns.
Browse componentsSTART BUILDING
Getting started
Explore the components, reuse the patterns, and keep implementation and guidance in sync.
Read the guidelines
Use the project's semantic tokens, typography, accessible states, and responsive rules.
Read guidelinesSee complete examples
Explore Dashboard Overview, Enterprise Account, Knowledge & Macros, Teams, and Support Inbox.
Open page examplesUpdate the design and its contract
Edit the specimen and relevant guideline together. Regenerate documentation and validate the changed behavior.
Read the maintenance workflowLocal preview
Open responsive preview to choose mobile, tablet or desktop sizes, rotate the frame and check both themes.
Open index.html directly, or serve the folder over localhost for camera features and HTTP previews.
cd /Users/guritnoadisaputra/Documents/gas/design-system
python3 -m http.server 8080 --bind 127.0.0.1Then open localhost:8080. Only the camera requests device permission, after an explicit click. All business actions are local demonstrations.
Validate your changes
python3 scripts/sync.py --note "Describe the change and its reason"
python3 scripts/sync.py --check
# Optional browser checks
npm ci
npx playwright install chromium firefox webkit
npm testComplex forms and content editors
Use Advanced form patterns for repeatable and conditional fields, dependent selects, selection cards, validation, reviewed saves and sticky actions. Try Comfortable/Compact density and the local failure controls.
HTML & JSON editor adds Code/Preview tabs, variables, sample payloads, JSON formatting and an isolated static preview. Both sections appear under Forms and in component search.
Search and recruitment
Search with leading filters combines a left custom dropdown with query text. Clear keeps the filter; Reset all clears both.
Explore the Recruitment workspace and recruitment guide for scoped candidates, stage transitions, interviews, job forms and talent consent. The page is also available in Responsive preview.
EBS tables and heading summaries
Try Table pagination & remote states for Rows per page and Compact page-heading summaries for role counts. Both are in Data & reports.
Read the Vue/Persona integration recipe for props, slots, server query state and responsive behavior.
Contract lifecycle management
Five sections cover fourteen CLM patterns, from contract requests to renewals and reporting. The catalogue includes 74 sections and seven full-page examples.
Open CLM workspace · Read CLM guide · Responsive preview
All contracts and actions are synthetic/local. Run node scripts/clm-check.mjs for focused verification.
Use the skill in another application
Choose Download Skill from the catalogue account menu, or download the skill ZIP. Extract the privy-design-system folder into your agent’s skill directory. This ZIP contains only skill files; the shared design-system source remains separate. Use the skill’s source resolver with --source /path/to/design-system when needed. Downloaded packages are snapshots.
Install the maintained Privy Design System skill once, then invoke $privy-design-system from another application’s Codex session.
python3 scripts/install_skill.py
python3 scripts/install_skill.py --check
python3 skills/privy-design-system/scripts/resolve_source.py --check
npm run test:skillThe installer links the skill into your user skill directory and refuses to overwrite another installation. The normal synchronization command refreshes its catalogue and source fingerprint. This updates the guidance, not application code; there is no background watcher.
Read cross-project setup and update instructions. Keep the full checkout available, and restart the Codex session if the skill does not appear.
Bot messages and request recovery
Open the specimen for bot availability, one-time secrets, same-request recovery and rate-limit feedback. These examples are local and do not send messages.