This page is the live source of truth for consistent styling across components and site-wide design decisions. Match new UI work to the patterns below.
Surfaces are intended to be layered parent-to-child. Keep Surface 1 borderless and nest deeper surfaces inside it.
Buttons
Use btn-primary for green primary actions, btn-secondary for orange support actions, btn-ghost for light white actions, btn-info for AI/info actions in purple, and btn-error for destructive actions. Outlined buttons should include a second inner line and darken slightly on hover.
Form Controls
Regular Size
Use for main create and edit forms where the page is the primary task.
Small Size
Use on busier pages where controls need to stay compact.
Validation Messaging
Use semantic text classes for state messages.
Saved successfully.
Please fill out required fields before continuing.
Form Action Rule
Treat the bottom action row as the commit point for the form. On edit pages, support the two different exit destinations directly in the footer and guard both when the form has unsaved changes.
Place Back to Items on the left side of the footer, and keep Submit then Cancel grouped on the right.
Use a compact dock wrapper with p-1.
Use Submit for the primary save/create action, regardless of create or edit mode.
Use Cancel to leave the form and return to the current record's detail page.
Use Back to Items to leave the form and return to the full items library.
If the form is dirty, both exit actions should prompt: Save and leave, Leave without saving, or Stay.
Breadcrumbs and other navigation links should use the same unsaved-changes guard before leaving the page.
AI Helper Demo
Use simple kid-friendly wording for robot helpers: My idea, Give me one, Start over, Make changes, and Undo.
Demo AI Helper
This demo uses the approved wording and fake lorem ipsum output.
Dungeon Summary
Do you already have an idea?
or
Image Creation Pattern
Proposed shared shell for image creation sections. Keep the overall flow predictable even when the prompt content changes by resource type.
or
Shared Section Shell
Top action row opens one of two sibling modals. The page section underneath stays compact and predictable.
Current Coverage
CharacterCreator image step with character tags
MonsterCreator monster image panel
ItemCreator item image panel
MapCreationPanel map image creator
MapEditor map image + inpaint flow
CampaignMapAttachDropdown compact create-map flow
DungeonStoryBuilder cover image and event scene image flows
Shared Rules
Top action row should always start with Use Existing Image and the AI create path.
Prompt area stays in the same place across modes.
Tags stay visible when tags are part of that mode.
Generated image preview and retry/edit actions stay in one predictable bottom area.
Mode-specific extras like scene prompt suggestion or map inpaint come after the shared core.
Recommendation: standardize the shell first, then allow mode-specific differences only in prompt wording, available tags, image size defaults, and post-generation extras like inpaint.
Cards
Use one consistent library card pattern across characters, monsters, items, images, and maps. The image and title are the entry points into the detail page, and the card should show a clear sitewide hover/focus state.
Detail pages should keep editing simple at the top with one edit action, and reserve deletion for a single bottom-of-page Danger Zone. Remove other delete buttons from the rest of the UI.
Detail Page Footer Pattern
Danger Zone
Delete This Character
Permanently remove this entry and all attached data. This action cannot be undone.
Danger Zone Rules
Every `/[id]` page should expose one edit action near the top of the page.
Deletion should live only in a bottom-of-page Danger Zone section.
Use one descriptive warning sentence plus a single destructive button.
Remove delete actions from cards, list rows, and other inline surfaces.
Apply this same pattern to characters, monsters, items, maps, and images.
Cards, Panels, and Tables
Character Summary Card
Reusable card shell for list views and quick actions.
Nested Panel
Keep nested blocks inside base-200 for separation.
Status
Example
Normal
Standard data row styling for mechanics and library tables.
Alternate
Zebra rows improve readability for dense game data.
Loading
Loading records...
Empty
No items found for this filter.
Error
Could not load data.
Print Theme Notes
Print layouts intentionally use a high-contrast document style. Keep print cards and sheets explicit with `print-page`, `bg-white`, `text-black`, and `border-black`.
When to use print styles
Dedicated print routes and printable card components.
Any layout expected to be exported or physically printed.
Grayscale helper copy with `text-gray-*` in print-specific markup.
Print Sample
Use explicit black borders and white background for reliable printer output.
Example shell: rounded-none border border-black bg-white p-4 text-black
