Guides · 5 min read
Planning a calmer workflow
A sample article about keeping decisions visible.
Updated 13 October 2026
{results.length} sample results
"},{"id":"modal-dialog","category":"overlays","name":"Modal dialog","status":"shared-primitive","componentIds":["sheet","input","button"],"description":"A focused task with a labelled title, contained keyboard focus and explicit completion or cancellation.","source":"cora-frontend/components/design-system/primitives.tsx","variants":["centred modal","narrow-screen modal"],"states":["closed","open","submitting","validation error","dismissed"],"usage":["Reuse Sheet with placement=modal for a centred dialog at every width. The native dialog supplies background inertness and focus containment.","Escape and an explicit close action dismiss; return focus to the trigger.","Keep one clear task per modal and protect unsaved work in caller state. Use placement=sheet or drawer when mobile bottom-sheet geometry is appropriate."],"example":"Selected sample project
The sample will disappear from this preview.
Sample changes saved.
How are project states used?
Draft is editable; Ready for review awaits a decision; Complete records the final outcome.
Keep decisions visible
A clear project record gives the team one place to find context.
- Define the outcome.
- Assign the next action.
Write the decision beside the work.
Use --cora-text-body for reading copy.
No projects yet
Create a project to keep the next delivery organised.
| Project | Status |
|---|---|
| Studio refresh |
In progress · 1
Studio refresh
PNG or JPEG. Maximum 5 MB. Local preview only.
"},{"id":"icon-library","category":"media","name":"Icons and meaningful labels","status":"reference-recipe","componentIds":["icons","button"],"description":"Consistent SVG glyphs for navigation, actions, files, media and status, paired with accessible names.","source":"cora-frontend/components/features/FeatureIcon.tsx","variants":["16px inline","20px control","24px tile","icon with label","icon-only action"],"states":["decorative","labelled","focus-visible","disabled"],"usage":["Use lucide-react or existing product SVGs; typically 16/20/24px with 1.8–2.2px stroke. Do not substitute emojis.","Keep decorative icons aria-hidden and name the containing action in human language.","Icon-only buttons need aria-label or visible accessible text. Status icons still require a readable state label."],"example":""}],"responsive":[{"range":"< 640px","rule":"Phone: one-column forms and cards, 16px outer gutter, 44px targets, 16px input text, bottom sheets; local table/code overflow only."},{"range":"640–767px","rule":"Large phone / small tablet: grow gutters to 24px when space permits; do not assume desktop panel behavior."},{"range":"768–1023px","rule":"Tablet: two-column content where readable. Existing workspace sheets use <=1023px; preserve the module breakpoint."},{"range":">= 1024px","rule":"Desktop: persistent in-flow navigation, 24–32px gutters and content max width. Desktop panels only where the feature supports them."},{"range":"Zoom / safe area","rule":"Reflow at 320px and 200% zoom. Respect env(safe-area-inset-bottom). Never disable pinch zoom or hide essential overflow."}],"accessibility":["Normal text contrast at least 4.5:1; large text 3:1; necessary control boundaries / focus indicators 3:1. Verify each actual pairing, including dark mode.","Keyboard focus must remain clearly visible. A subtle focus outline is required even though heavy decorative outlines are forbidden.","Use semantic landmarks, sequential headings, associated labels, native controls and an accessible name for every icon action.","Announce asynchronous status without moving focus. Errors identify the field and explain how to recover.","Modal focus is contained and restored; Escape and an explicit close work. Never place hidden panels in the tab order.","Respect prefers-reduced-motion, browser zoom and touch input. No automatic marquee or smooth scrolling for reduced-motion users.","Status is conveyed by label or icon plus color. Do not use muted opacity for essential text."],"contentRules":["Use clear task language: Save changes, Create invoice, Move lead. Avoid technical infrastructure terms in customer workflows.","Use fictional sample identities and no real owner or customer data in public UI or fixtures.","Workspace labels resolve from active industry: equipment/property listings, shoots/showings, client/buyer leads. Do not hardcode industry names in shared views.","Show currency, tax assumptions, dates and timezone explicitly. Keep identifiers and financial numbers tabular.","Destructive actions explain the affected record and recovery limits; use custom confirmation surfaces."],"deviations":[{"id":"D01","scope":"Legacy token files","observed":"Root cora-design-tokens.js and frontend lib/cora-tokens.ts duplicate values and are not the executable source for current styling.","decision":"Historical references only. New UI consumes this contract and primitives; migrate a feature when touching it.","status":"migration-required","sources":["cora-design-tokens.js","cora-frontend/lib/cora-tokens.ts","cora-design-system.html"]},{"id":"D02","scope":"Typography","observed":"Old tokens and brand page specify Inter; marketing runtime loads General Sans.","decision":"Preserve General Sans on marketing and Inter in workspace. Reconcile brand documentation in a separate scoped edit.","status":"documented-exception","sources":["cora-frontend/styles/globals.css","cora-frontend/components/brand/BrandTypographySection.tsx"]},{"id":"D03","scope":"Color","observed":"Legacy WordPress Tailwind palette includes gold/bronze; status shades differ between brand and token files.","decision":"Zinc remains the inherited UI baseline. New status text tokens use darker legible colors; no gold action theme.","status":"migration-required","sources":["app/public/wp-content/plugins/cora-workspace/tailwind.config.js","cora-frontend/components/brand/BrandColorsSection.tsx"]},{"id":"D04","scope":"Mobile panels","observed":"Legacy tokens permit sliding drawers; workspace instructions require bottom sheets. CSS has overlapping 641px/1023px panel ranges.","decision":"Mobile vertical sheets take precedence. Audit the feature breakpoint and focus behavior before modifying a legacy panel.","status":"migration-required","sources":[".agents/AGENTS.md","app/public/wp-content/plugins/cora-workspace/assets/css/admin-style.css"]},{"id":"D05","scope":"Overlay backdrop","observed":"Workspace guidance calls for blurred dark backdrop; some runtime CSS makes backdrops transparent.","decision":"The dark backdrop token is recommended for new modal patterns. Preserve and investigate existing module overrides when migrating.","status":"documented-exception","sources":["app/public/wp-content/plugins/cora-workspace/assets/css/admin-style.css"]},{"id":"D06","scope":"Feedback","observed":"Marketing and workspace toast locations and z-index stacks differ.","decision":"Reuse host API and placement. The local layer scale applies to new isolated components, not a global z-index rewrite.","status":"documented-exception","sources":["cora-frontend/components/ui/Toast.tsx","app/public/wp-content/plugins/cora-workspace/assets/js/admin-script.js"]},{"id":"D07","scope":"Accessibility","observed":"Existing outline bans and animations can conflict with keyboard focus and reduced-motion needs.","decision":"Visible focus and reduced motion take precedence. New primitives implement focus and motion behavior; audit existing features on touch.","status":"migration-required","sources":[".agents/AGENTS.md","cora-frontend/components/providers/SmoothScrollProvider.tsx"]}],"verification":["Source contract and all machine exports stay synchronized.","No undocumented color/font literals in new design-system UI.","Button loading, field errors, theme contrast and search work with keyboard.","Inspect 390px and 1440px layouts and ensure no page-level horizontal overflow.","Confirm /docs, /tools and marketing homepage still render with unchanged host styles.","Build static export and confirm manifest.json, llms.txt and tokens.css exist in out/design-system."]}