DmPriorityDESIGN.md alpha

One product. One shared visual language.

This guide defines DmPriority's design foundation and should be followed in every frontend project. It provides a coherent starting point for colors, typography, spacing, components, and behavior. It can improve over time as the product and its users reveal better choices.

DmPriority should feel calm, clear, and trustworthy. People, messages, prices, deadlines, and next actions take priority. Use restrained blue, readable typography, flat surfaces, thin dividers, and compact rounded controls. Create hierarchy through size, spacing, alignment, and emphasis.

### Core principles

• Clarity: make the purpose of a screen and its next action easy to understand.

• Consistency: the same action should look and behave the same wherever it appears.

• Restraint: every color, border, icon, and animation should have a purpose.

• Trust: communicate prices, deadlines, and outcomes precisely.

• Adaptability: preserve the same identity across themes, screen sizes, and input methods.

• Evolution: improve the shared foundation deliberately rather than accumulating unrelated styles.

The token inventory above defines the common values. Component recipes refer to those values by name. Use the color roles for the active theme and keep typography, spacing, and shapes consistent.

### Spacing scale

Use 4, 8, 12, 16, 24, 32, 48, 64, and 96px. The inventory names are indexed: space-5 means 24px.

| Relationship | Starting spacing |

|---|---|

| Icon to label | 8px |

| Label to field or helper text | 4–8px |

| Related controls | 12–16px |

| Form groups | 24px |

| Card padding | 24px; 16px in compact layouts |

| Related sections | 32–48px |

| Major section separation | 64–96px |

| Outer gutters | 16px compact, 24px medium, 32px wide |

Use alignment and whitespace before adding boxes. Related rows can share one border and subtle dividers. Avoid placing every paragraph, label, or metric in its own card.

### Content widths

| Token | Maximum width | Suitable content |

|---|---:|---|

| content-wide | 1240px | Broad compositions and multi-column groups |

| content-standard | 900px | General task content and lists |

| content-reading | 720px | Conversations and focused reading |

| content-form | 480px | A single form or request |

| content-compact | 400px | A short, focused task |

Use the available width below each limit. Maximum widths include internal padding. Keep narrow tasks narrow even on large screens.

A side navigation area starts at 220px wide. A top bar starts at 56px high and can grow when text or device clearances require it. These are layout options, not requirements for every screen.

### Responsive behavior

| Width | Behavior |

|---|---|

| Below 640px | One primary column, 16px gutters, touch-sized controls, complete compact navigation |

| 640–1023px | 24px gutters; introduce a second column only when both columns remain comfortable |

| 1024px and above | 32px gutters; use additional columns or side navigation when they help the task |

A larger screen permits more breathing room, not a different visual identity. Adapt layouts around the content rather than forcing text into a fixed composition.

Preserve the person, amount, deadline, and status when reflowing a list. Keep message content and the next action prominent in conversations and forms. Long data tables may scroll within their own region when necessary; avoid horizontal scrolling for the whole page.

### Corner radii

| Element | Radius |

|---|---:|

| Small badges and inset details | 6px |

| Buttons and fields | 8px |

| Cards and grouped lists | 12px |

| Dialogs and sheets | 16px |

| Filter chips and switch tracks | Fully rounded |

| Person avatars | Circular |

Use one button shape throughout DmPriority. Fully rounded chips should remain distinct from the primary button family.

### Elevation

| Level | Treatment |

|---|---|

| Base | Flat main background |

| Grouped | Raised surface with a subtle border |

| Floating | Raised surface, stronger border, and the theme's floating shadow |

| Modal | Floating surface with the theme's dimmed backdrop |

Use shadows to explain layering. Cards and buttons stay in place on hover; quiet color and border changes provide feedback.

Keep backgrounds restrained. Avoid decorative grain, ambient glows, glass effects, busy grids, and large gradients. Reserve the compact blue gradient treatment for the brand mark.

Floating content should remain fully visible and should not obscure the focused control.

Use simple outline icons with rounded strokes. Standard sizes are 16, 20, and 24px, with approximately 1.75–2px strokes. Maintain consistent optical weight. Use recognizable service marks for social and payment options.

Icon-only controls need a meaningful accessible name and a generous hit area. Add a tooltip when it helps clarify an unfamiliar action. Decorative icons should not interrupt the reading experience.

Person avatars are circular at 28, 40, 56, or 80px. Crop portraits to preserve the face. Use an initials fallback with a consistent, readable color pairing when no portrait is available.

Use real, permitted imagery. Product illustrations should reflect DmPriority's actual visual language. Avoid stock decoration that competes with the task.

Write the name as DmPriority. Pair a compact blue rounded-square mark containing a white dollar symbol with a Geist wordmark. Preserve proportions and clear space; keep the mark recognizable in both themes.

Both themes are equally important throughout DmPriority. Preserve hierarchy, meaning, and component identity in each: a raised card remains raised, a primary action remains blue, and a warning remains recognizable.

Use the paired theme roles. Do not create a theme by simply inverting colors.

Respect the user's saved choice. Without an explicit choice, follow their device appearance and respond when it changes. Avoid a flash of the wrong theme when opening a screen.

The theme control should be easy to find, clearly named, and show its selected state. Theme changes should feel immediate and calm.

Review content, forms, menus, overlays, charts, logos, disabled controls, and payment elements in both themes.

Use 120ms for small state changes and 180ms for broader feedback, with the shared easing. Motion should clarify a change or reveal information.

Keep content available promptly. Avoid staged entrances, floating cards, pulsing urgency, and repeated decorative motion.

Respect reduced-motion preferences. Remove nonessential movement and smooth scrolling while preserving clear feedback.

Support keyboard navigation, screen readers, larger text, and touch. Keep a logical reading order, visible focus, and clear labels. Announce meaningful asynchronous changes without overwhelming the user.

Allow content and controls to grow. Keep interactions usable around device edges and keyboards. No action should depend on hover, precise pointing, color perception, or animation alone.

Write in plain, direct language with sentence case. Prefer specific verbs such as Reply, Save changes, and Continue to payment. Keep names, prices, deadlines, and terms close to the decisions they explain.

Be helpful and composed. Explain failures without blame. Keep urgency factual and proportionate.

Describe availability, fees, response times, refunds, and payment outcomes accurately. Use genuine imagery, ratings, testimonials, and activity. Clearly distinguish examples from real content.

This is a starting point, not a finished brand specification. Follow the shared rules for everyday design work and refine them when a clear product need emerges.

• Reuse an existing pattern before adding a new one.

• Make additions serve a recurring need rather than a single composition.

• Consider both themes, compact layouts, accessibility, and interaction states together.

• Evaluate changes with realistic content and the people who will use the product.

• Update this guide when a shared rule improves, and apply that improvement consistently.

• Keep one common foundation and a clear version so the product evolves together.

Before considering a design complete, check that its typography, colors, spacing, shapes, and states belong to this system—and that the person's task remains clear.