Build Assets

Main call-to-action button for the single most important action on a surface.

Single-line text field for user-entered data with label, placeholder, and validation states.

Container for a discrete piece of content with optional action - the most reusable pattern in any product.

Focused overlay for decisions, confirmations, or short forms that require immediate attention.

Non-blocking feedback message that appears briefly after a user action.

Designed placeholder when a list, table, or view has no content yet.

Persistent vertical navigation for multi-section products with 5+ destinations.

Compact label for status, category, count, or metadata.

Binary on/off control for settings that take immediate effect.

Horizontal navigation between related content sections within the same context.

Animated placeholder that mirrors the shape of loading content.

Navigation control for moving through paged content sets.

Single-choice selector for 5–15 options that would clutter the layout as radio buttons.

Contextual label that appears on hover/focus to clarify a UI element.

Mutually exclusive single-choice selector where all options are visible simultaneously.

Structured rows and columns for comparing, scanning, and acting on multiple records.

Navigation trail showing the user's location within a hierarchy.

Multi-step flow indicator that shows progress through a sequential process.

Multi-select input where users can choose any number of options simultaneously.

Specialized text input for querying content with clear, loading, and results feedback.

Collapsible sections for progressive disclosure of related content groups.

Icon button with unread count badge that opens a notification dropdown.

Linear indicator of completion for determinate and indeterminate processes.

User or entity representation - image, initials fallback, and group stack.

Drag-and-drop + click file selection with progress, validation, and error states.

Calendar overlay for selecting single dates or date ranges.

Draggable control for selecting a value from a continuous or stepped range.

Inline, persistent message that communicates the status of a task or the state of the system.

Floating panel anchored to a trigger, holding rich content or controls without leaving the page.

Compact, interactive token representing an input, attribute, filter, or selection.

A linear set of mutually exclusive options shown together for quick switching between views or modes.

One-file drag-and-drop + click picker with a type-aware preview, validation, progress and error states.

Drag-and-drop + click picker for many files, each row with its own preview, progress and error.

Image-only picker with a live thumbnail preview in a square, circular avatar, or wide cover frame.

A data-table preset for stored files: type icon + name, type, size, uploader/date, status, and row actions.

A predefined checklist of required documents, each row with its own upload control, status, and preview.

A responsive, type-aware preview: images, PDFs, CSV & Excel spreadsheets as a table, text, and video/audio, with a download fallback.

A wizard that splits a long form into ordered steps with a progress indicator and Back/Next/Finish navigation.

Verify all text meets WCAG AA contrast minimums before shipping.

All interactive elements are large enough to tap accurately on mobile.

Every meaning conveyed by color is also conveyed by a second signal (icon, label, pattern).

Every list, table, and data view has a designed empty state.

All interactive functionality is reachable and operable with keyboard alone.

Validation errors are shown inline, immediately, with clear corrective guidance.

Every async operation has a loading state that appears within 400ms.

Every error state tells users what went wrong and provides a specific next action.

All layouts tested and functional at mobile (375px), tablet (768px), and desktop (1280px+).

All meaningful images have descriptive alt text; decorative images are marked empty.

Focus is managed correctly when UI changes - modals, navigation, dynamic content.

Page headings follow a logical h1→h2→h3 sequence with no skipped levels.

LCP, FID/INP, and CLS scores meet Google's "Good" threshold before launch.

Developers have everything they need to implement without guessing.

All animations respect prefers-reduced-motion and have a no-motion fallback.

Final verification sweep before shipping to production.

Essential on-page SEO requirements for public-facing pages.

Layouts and strings are ready for translation without breaking.

UI copy is clear, consistent, and serves user goals - not internal jargon.

All UI elements use system components - no one-off implementations.

Minimum security requirements before shipping a product to users.

Verify type scale, weights, and line lengths are consistent across the product.

Verify no hardcoded hex values exist outside the token file.

Touch interactions work correctly and don't conflict with system gestures.

Pages that users are likely to print render cleanly in print view.

Non-essential animation is disabled for users who request reduced motion.

The interface is legible and correct in dark mode, not just inverted.

Form fields declare the right type and autocomplete so browsers and password managers assist correctly.

Primary landing page hero communicating the core product value to new visitors.

Mid-page section showcasing a specific product feature with visual support.

Side-by-side plan comparison that makes the recommended option obvious.

Social proof section using customer quotes to build trust mid-page.

Metrics and activity overview for signed-in users - the product home screen.

Minimal focused layout for authentication - the highest-friction point in onboarding.

First-run experience that helps new users reach their first value moment quickly.

Designed error page that recovers users rather than abandoning them.

Page-level footer with navigation, legal, and brand elements.

Full-page inbox for user activity, mentions, and system notifications.

Organized preferences with sidebar navigation and grouped form controls.

Full-page search with filters, result count, and sorted results.

User identity and account information overview page.

Objection-handling section that answers the questions blocking a conversion decision.

Pre-launch hero that captures interest with a single email-capture action.

Minimum breathing room around the logo to maintain visual presence.

How to specify brand color values correctly across all production media.

The approved typefaces and their roles in brand communications.

How the brand sounds across all written communications - consistent personality, adaptive tone.

How imagery reinforces brand personality - subject matter, color treatment, and composition.

The base spacing unit and grid that creates visual rhythm across all surfaces.

How elements animate - timing, easing, and purpose - as an expression of brand character.

How to use, size, and apply the brand icon system consistently.

Approved dimensions and brand treatments for social media assets.

Brand standards for transactional and marketing emails.

Brand standards for slides, decks, and presentations.

Brand standards for internal documents, specs, and wikis.

Rules that keep an icon set visually consistent - grid, stroke, and corner treatment.

A categorical + sequential color palette for charts that stays legible and accessible.

The smallest dimensions at which the logo remains legible in print and digital contexts.

Common logo applications that damage brand equity and must be avoided.

How to display the Mathesis logo alongside partner or client logos.

Approved and prohibited background treatments for logo placement.

How and when the logo mark may be animated.

How to derive a legible favicon and app icon from the full logo.