# Role and permissions matrix > A dark violet permissions grid: toggles flip for two roles, a Save button is pressed and a confirmation toast appears. - Category: Developer tools - Version: 1.0 - Source: https://ownlyplans.com/bhaskar/role-and-permissions-matrix/ ## Overview A roles table with five roles and four permissions as toggle switches. The Support agent publish toggle switches on, the Editor publish toggle switches off, the two rows glow, Save is pressed and a green toast confirms. Topic inspired by OpenDesign's public dashboard prompt list; this prompt and design are written from scratch. ## Tech stack - CSS - Dashboard - HTML ## Build steps ### 1. Paste the prompt The AI builds the matrix and toggles. Prompt: ```text Create a single-file HTML roles and permissions matrix, 1280x720, deep violet background #150f2b, panel #1d1640, header row #241b52, accent violet #8b5cf6, text #ece8ff. System fonts, no libraries. Header: H1 "Roles and permissions" and a muted subtitle "Decide who can view, edit, publish and bill". Table with columns Role, View, Edit, Publish, Billing and five rows (Admin, Editor, Support agent, Finance, Viewer). Each permission cell is a 46x26px toggle switch (off: #3a2f78, on: violet with a white knob that moves 20px). Sensible defaults: Admin all on, Editor all but Billing, Support agent View and Edit, Finance View and Billing, Viewer View only. Bottom right: a violet "Save changes" button. Bottom left: a green toast "Permissions updated for 2 roles". Motion (8 second loop): rows rise in with a stagger. The Support agent row and the Editor row get a faint violet highlight. The Support agent Publish toggle animates from off to on (colour and knob), the Editor Publish toggle animates from on to off. The Save button presses (scale .92), then the toast slides up and fades. Everything resets at the end. Respect prefers-reduced-motion. Return only the complete HTML. ``` ### 2. Check the toggles Two toggles should flip with a smooth knob. ### 3. Check the save The button press should be followed by the toast. **Done when:** You can see it working in the browser. ### 4. Make it real Wire the toggles to your role data and a save endpoint. ## Assets ### prompt.md — The full prompt. ~~~~ # Role and permissions matrix Copy this prompt into Claude, Cursor or Lovable. ```text Create a single-file HTML roles and permissions matrix, 1280x720, deep violet background #150f2b, panel #1d1640, header row #241b52, accent violet #8b5cf6, text #ece8ff. System fonts, no libraries. Header: H1 "Roles and permissions" and a muted subtitle "Decide who can view, edit, publish and bill". Table with columns Role, View, Edit, Publish, Billing and five rows (Admin, Editor, Support agent, Finance, Viewer). Each permission cell is a 46x26px toggle switch (off: #3a2f78, on: violet with a white knob that moves 20px). Sensible defaults: Admin all on, Editor all but Billing, Support agent View and Edit, Finance View and Billing, Viewer View only. Bottom right: a violet "Save changes" button. Bottom left: a green toast "Permissions updated for 2 roles". Motion (8 second loop): rows rise in with a stagger. The Support agent row and the Editor row get a faint violet highlight. The Support agent Publish toggle animates from off to on (colour and knob), the Editor Publish toggle animates from on to off. The Save button presses (scale .92), then the toast slides up and fades. Everything resets at the end. Respect prefers-reduced-motion. Return only the complete HTML. ``` ~~~~ ### index.html.md — Complete code of the result in the video. ~~~~ # index.html The finished result as one file. Save it as index.html and open it. ```html Role and permissions matrix

Roles and permissions

Decide who can view, edit, publish and bill
RoleViewEditPublishBilling
Admin
Editor
Support agent
Finance
Viewer
Permissions updated for 2 roles
Save changes
``` ~~~~ ## Build instructions by tool ### Claude Code Open a terminal in an empty folder, run `claude`, then paste the prompt. ```text Build the "Role and permissions matrix" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/role-and-permissions-matrix/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the toggles → Check the save → Make it real. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Claude Code.) ``` ### Cursor Open an empty folder in Cursor, start an Agent chat, then paste the prompt. ```text Build the "Role and permissions matrix" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/role-and-permissions-matrix/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the toggles → Check the save → Make it real. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Cursor.) ``` ### Lovable Start a new Lovable project and paste the prompt as your first message. ```text Build the "Role and permissions matrix" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/role-and-permissions-matrix/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the toggles → Check the save → Make it real. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Lovable.) ``` ## Definition of done - Every build step is complete and the app runs locally. - The main user flow works end to end. - Share your build on OwnlyPlans with a demo link, build time and tool.