One system for every
supply-chain experience.
This is the single source of truth for Ecovium's visual language and interface components. It unifies our principles, color, typography, and the full component library into one place — so every team builds a product that feels consistent, accessible, and built to get the job done. For all matters related to the design system or design-related work, please contact our Principal UX/UI Designer, Jeton Lakna. at jeton.lakna@ecovium.com or by teams, or you can create a ticket in Jira.
Design Principles
Design principles are the philosophies that direct every choice we make. They keep us consistent, give Ecovium a cohesive identity, and speed up decisions by aligning teams on what matters most.
Design for the supply-chain industry first
We prioritize our customers and the logistics industry in every choice — validating with internal experts, usability tests, interviews, and continuous user feedback.
Build trust at every touchpoint
Always give users a clear next step, handle sensitive data with care, and keep interactions consistent across the whole ecovium ecosystem.
Design to get the job done
Deliver concise, timely, relevant information exactly when needed. Remove unnecessary steps, keep a clear hierarchy. Keep it simple.
Be dependable across platforms
Shared features look and behave the same on every platform, while staying authentic to each device's strengths.
Rethink traditional processes
Go beyond digitizing the status quo. Understand the industry deeply, then connect users, tools, workflows, and third-party apps into one seamless experience.
Accessibility
We design to improve the lives of everyone in logistics — including those who need diverse means to access our products. Ecovium components, patterns, layouts, and styles target the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA.
The POUR principles
Where we focus
- Keyboard compatibility — every component, pattern, and layout is navigable without a mouse.
- Optimal contrast — colors are chosen for sufficient contrast across forms of color blindness and contrast sensitivity.
- Clear, hierarchical layout — information is structured so users can focus on what matters.
- Text-to-speech ready — content converts cleanly and coherently for screen readers.
- Ample target size — links, buttons, and controls are sized for touch and assistive devices.
- Video captions & customizable text — zoomable text without losing hierarchy or legibility.
Color
Ecovium's palette is built on neutral shades that complement our primary blue. Use color intentionally — to establish hierarchy, communicate status, and draw attention only where it counts.
Core · Brand Primary & Base
Accent
Decorative
Guidelines
- Use semantic colors consistently — green = success, yellow = warning, red = error.
- Reserve the primary blue for the single most important action on a view.
- Lean on neutrals; let accent colors carry meaning, not decoration.
- Use light tints (100–300) for text — they fail contrast.
- Introduce off-palette hex values for one-off needs.
- Rely on color alone to convey state; always add an icon or label.
- Map every color to a token; components reference
var(--blue-500), never raw hex. - Build a
semanticlayer (--color-success→--green-500) so meaning survives a re-theme. - Run automated contrast checks in CI against text/background pairs.
Typography
Our typeface is Roboto — built for user interfaces, it stays legible at small sizes and adjusts gracefully across web and mobile. Unifying type across every Ecovium tool keeps the experience seamless and scalable.
Headline scale
Control text sizes
| Name | Size | Rem | Use case |
|---|---|---|---|
| Large Text | 16px | 1 rem | Stand-out text controls, such as the author name in a feed. |
| Body Text | 14px | 0.875 rem | Body size used in controls — buttons, inputs, tables, or a tree. |
| Small Text | 12px | 0.75 rem | Exceptional cases inside controls — timestamps or a unit of measurement. |
Guidelines
- Use the defined scale (h1–h6 + Large/Body/Small) — no arbitrary sizes.
- Apply medium weight to headers and labels to separate them from body text.
- Use 1.5 line-height for long, wrapping copy.
- Set custom font sizes outside the scale.
- Apply line-height to single-line controls — it misaligns content.
- Use more than two weights in one block of text.
- Size type in
remso it scales with the user's root font setting. - Expose the scale as tokens (
--text-body: .875rem) and reference them. - Load only the Roboto weights you use (300/400/500/700) to keep payload small.
Iconography
Icons convey actions, signal status, and help categorize data. Every icon should be clear, intuitive, and consistent. The majority of our icons are filled, giving strong contrast against dense content.
Construction
- 16px base grid; 1.6px line thickness, scaled proportionally (e.g. 20px / 2px).
- Regular corner radius 2px · small 1px · large 5px.
- Default sizing 24×24px; small 16×16px; large 32×32px.
Categories
action, alert, audiovisual, communication, content, device, editor, file, hardware, image, map, navigation, notification, places, social, toggle. Each icon belongs to exactly one category.
Grid & Adaptive Design
The grid is the base of our design philosophy. Layouts use a 12-column grid for the main content area (excluding navigation, headers, and footers) so designs stay flexible across complex interfaces.
12-column responsive grid
Our grid blends fixed and flexible paradigms: it stays fluid up to a maximum width, then becomes fixed while only the margins continue to expand.
Adaptive design
Sometimes responsive isn't enough. You might enter large amounts of data on desktop, but only view or enter a small subset on tablet or phone. Adaptive design means manually crafting device-specific layouts and adapting the complexity of each use case to the form factor — slightly more effort, but far more targeted support.
Guidelines
- Build the main content on the 12-column grid.
- Keep gutters and margins on the 4px spacing scale.
- Switch to adaptive layouts when a use case genuinely differs by device.
- Place navigation, headers, or footers inside the content grid.
- Hard-code pixel widths that break the fluid-then-fixed behavior.
- Nest grids so deeply the column logic becomes unpredictable.
- Use native CSS Grid / Flexbox; reserve absolute positioning for overlays.
- Drive column count and gaps from tokens and the breakpoint set.
- Test each layout at every breakpoint, not just desktop.
Illustrations
UX illustrations pair with written messages to help users grasp a concept quickly, make complex ideas relatable, and add personality. Today they're used only for empty states and onboarding — sparingly, so they never distract from the workflow.
Elevation & Shadow
Shadows show the depth and edge of an elevated component. Elevation is determined by a component's height and its relationship to others — as elevation increases, so does the shadow's intensity.
Guidelines
- Match shadow intensity to a component's elevation level (1–3).
- Use elevation to signal relationships — overlays sit above content.
- Keep resting surfaces flat or at level 1.
- Stack many heavy shadows — it muddies the hierarchy.
- Invent custom shadow values per component.
- Use shadow as a decorative border substitute.
- Reference the shadow tokens (
--shadow-1/2/3); don't write ad-hocbox-shadow. - Raise elevation on
:hover/ open states to reinforce interaction. - Avoid animating
box-shadowdirectly on large surfaces — animate a pseudo-element for performance.
Engineering Guide
Practical rules for the team building Ecovium. Use the tokens, spacing, breakpoints, and accessibility conventions below so what ships matches what's designed — and stays consistent as the product grows.
Design tokens
Never hard-code a hex value or pixel. Reference the CSS custom properties so a single change propagates everywhere. The full set lives in the Figma Web Library; the most-used are below.
| Token | Value | Use for |
|---|---|---|
| --blue-500 | #0066CC | Primary actions, links, focus, selected states |
| --header | #152F4E | App header, top-level navigation, tooltips |
| --ink | #232628 | Primary body text |
| --ink-muted | #7C7D7E | Secondary text, captions, placeholders |
| --green-500 | #3FBF30 | Success status & banners |
| --yellow-400 | #FCCF15 | Warning status & banners |
| --red-500 | #FC5D19 | Error / destructive status & banners |
| --lightblue | #EAF0F6 | Selected rows, hover surfaces, subtle fills |
Spacing scale
All spacing is a multiple of 4px (the baseline grid). Stick to the scale for margins, padding, and gaps — it keeps rhythm consistent across every screen.
Responsive breakpoints
The 12-column grid stays fluid up to the max width, then becomes fixed while margins expand. Where a responsive layout doesn't fit the task, switch to adaptive device-specific designs.
Accessibility checklist
Every component ships to WCAG 2.1 AA. Before merging, confirm:
- All interactive elements are reachable and operable by keyboard (Tab / Shift-Tab / Enter / Space / arrows where relevant).
- A visible focus ring appears on keyboard focus and never on inactive controls.
- Text contrast is at least 4.5:1 (3:1 for large text and non-text UI like icons and borders).
- Color is never the only signal — pair it with an icon, label, or text.
- Inputs have associated <label>s; icon-only buttons have an accessible name (aria-label).
- Touch targets are at least 44 × 44px; status changes are announced to screen readers.
Contrast — get it right
Light tints (100–300) are for backgrounds and decoration, never for text. For text, use 600+ shades or ink tokens.
State naming convention
Every interactive component shares the same five states. Name classes and design layers consistently:
- Consume tokens, not literals —
var(--blue-500)over#0066CC, spacing from the 4px scale. - Reach for semantic HTML first (
<button>,<table>,<nav>) before adding ARIA — native semantics are free accessibility. - Build the five states for every interactive element; don't ship default-only.
- Keep components controlled & stateless where possible; pass data and callbacks in, emit events out.
- Respect
prefers-reduced-motion— gate non-essential animation behind it.
Text Input
Inputs let users enter a short string of information into a form.
Anatomy
- 1Label
- 2Text input field
- 3Placeholder / Value
| Element | Casing | Limit |
|---|---|---|
| Label | Title case, no punctuation, single noun/noun-phrase (no verbs) | 25 chars |
| Placeholder | Sentence case, no punctuation — typically "Enter [item]" | 30 chars |
Guidelines
- Pair every field with a visible, title-case label.
- Show inline validation on blur or submit, with a clear message.
- Use placeholder text only as a hint, not as the label.
- Use the placeholder as the only label — it disappears on typing.
- Block typing of valid characters; validate, don't restrict silently.
- Pack verbs into labels (labels are nouns).
- Always bind a
<label for>(or wrap) — placeholders are not labels. - Link errors with
aria-describedbyand setaria-invalid. - Use the right
type/inputmodefor mobile keyboards (email, number, tel).
Extended states & slots
- Label — a short, title-case noun naming the field; always visible, even when filled.
- Placeholder — an optional hint shown only while empty (“Enter article name”); never a stand-in for the label.
- Leading / trailing slot — an optional icon, unit (€), or action such as a password-visibility toggle.
- Helper text — quiet guidance under the field describing the expected format or purpose.
- Feedback text — replaces the helper text to report validation status (error / success).
- Required indicator — a red asterisk marks fields that must be completed.
- Interaction — clicking anywhere in the container focuses the field for editing.
- Validation — validate on blur or submit; pair color with a text message and icon, never color alone.
- Truncation — overflowing text clips to the container width; the full value stays editable.
- Alignment — text aligns left; right alignment is reserved for number fields.
- Bind a real
<label for>and link helper / error text witharia-describedby. - Set
aria-invalid="true"on error and move focus to the first invalid field on submit. - Choose the right
type/inputmodeso mobile shows the correct keyboard.
Search
Search lets users quickly find items on a tool's landing page, or — as a typeahead in forms — find information to associate with the form. Offer search whenever data is too large to scan.
Anatomy
- 1Search icon
- 2Placeholder text
- 3Text value
- 4Clear search
Guidelines
- Show a clear (✕) control once the user has typed.
- Keep placeholder text scoped to what's searchable here.
- Debounce typeahead requests to avoid flooding the server.
- Trigger a full reload on every keystroke.
- Hide the magnifier icon — it's the recognized affordance.
- Exceed the 30-character placeholder limit.
- Use
<input type="search">inside arole="search"landmark. - Debounce input (~250–300ms) and cancel stale in-flight requests.
- Announce result counts to screen readers via an
aria-liveregion.
Data Select
Date selects let users enter a date by selecting it from a calendar or typing it into a date field. The input opens a calendar dialog on click.
Anatomy
- 1Date picker input
- 2Calendar
| Element | Detail |
|---|---|
| Label | Title case, no punctuation · limit 25 chars |
| Placeholder | Lowercase mm/dd/yyyy |
| Day labels | Su, Mo, Tu, We, Th, Fr, Sa |
Guidelines
- Let users either type or pick from the calendar.
- Use the lowercase mm/dd/yyyy placeholder to signal format.
- Open the calendar on focus / click of the field.
- Force a specific input method — support both.
- Allow impossible dates; clamp to valid ranges.
- Trap keyboard focus when the calendar is open.
- Parse and validate typed dates leniently, then normalize on blur.
- Make the calendar a
role="dialog"with full arrow-key navigation. - Return focus to the input when the calendar closes.
Checkbox
Checkboxes let users select or deselect multiple values from a list, or toggle a single option (e.g. a setting on a configure page).
Anatomy
- 1Checkbox
- 2Label
Guidelines
- Use parallel, sentence-case labels within a list.
- Use checkboxes for multi-select or a single independent toggle.
- Show an error style when a required selection is missing.
- Use a checkbox for mutually exclusive options (use radios).
- Make the label too small or far from the box to tap.
- Add punctuation to labels unless it's a proper noun.
- Use a native
<input type="checkbox">; style the box, keep the input operable. - Support the indeterminate state for 'select all' headers via the DOM property.
- Make the whole label clickable by associating it with the input.
Radio Button
Radio buttons let users select a single option from a mutually exclusive set. Use radios when all options should be visible at once; use a dropdown when the list is long.
Anatomy
- 1Radio control
- 2Label
Interactive group
Labels are sentence case without punctuation unless a proper noun · limit 60 characters.
Guidelines
- Use a native
<input type="radio">set sharing onename. - Arrow keys move within the group; only the checked radio is tabbable.
- Wrap related radios in a
<fieldset>with a<legend>.
Switch
Switches let users choose between two mutually exclusive states on the same line — usually enabling vs. disabling. Changes save immediately, so avoid switches on pages that require a save/update action.
Anatomy
- 1Track
- 2Handle
- 3Label
Label: sentence case without punctuation · limit 30 characters.
Guidelines
- Use
role="switch"witharia-checked; toggle on Space/Enter. - Persist the change immediately and reflect server state on failure.
- Don't use where a Save step is required — that's a checkbox pattern.
Slider
A slider is a bar with a grabbable handle. Users drag horizontally to a value within a predefined range. Always display the corresponding value nearby.
Anatomy
- 1Track
- 2Label
- 3Handle
Use the standard range slider for granular numeric values, such as percentages from 0–100%.
Guidelines
- Always show the current value near the handle.
- Use sliders for granular ranges like 0–100%.
- Give the handle a large enough hit area.
- Use a slider where a precise number entry is needed.
- Hide the selected value.
- Use tiny handles that are hard to grab on touch.
- Prefer
<input type="range">for free keyboard + screen-reader support. - Set
aria-valuetextwhen the raw number needs units (e.g. '35%'). - Support arrow keys, Home/End, and Page Up/Down for stepping.
Dropdown Menu
Dropdowns present a list or menu of options. Users can filter and select one or several concurrently. Their main purpose is to initiate an action or guide the user to a page or modal.
Anatomy
- 1Label
- 2Field + chevron
- 3Helper text
- 4Menu option list
- 5Scrollbar
Guidelines
- Describe options with a clear label and optional helper text.
- Show a scrollbar once items exceed the visible height.
- Indicate open/closed state with the chevron direction.
- Use a dropdown to perform an action (use a button/menu).
- Cram very long option lists without search/filtering.
- Leave the trigger without an accessible name.
- Use
role="listbox"+role="option"witharia-expandedon the trigger. - Implement type-ahead and full arrow-key navigation; Esc closes.
- Render long lists virtualized to keep the menu snappy.
Dropdown Flyout
The dropdown flyout nests additional menu items within parent items, giving users more options. It can contain multiple levels and is launched from a button, overflow, or dropdown.
Guidelines
- Flip the flyout side based on available space.
- Keep nesting shallow (2–3 levels max).
- Open submenus on hover and on focus / keyboard.
- Let menus run off-screen.
- Nest so deep users lose their place.
- Require a pixel-perfect hover path between levels.
- Use
role="menu"/menuitemwith rovingtabindex. - Right/Left arrows open and close submenu levels.
- Detect viewport edges and reposition (left/right flip) before paint.
Links
Links give users quick references to relevant Ecovium or affiliate pages. Use links to navigate to a page (or sometimes a modal) — never to perform actions.
Inline
You can review every shipment on the Invoices overview before exporting. To add a record, create a new invoice from the dashboard.
Standalone
On a dark surface
| Type | Casing | Rule |
|---|---|---|
| Inline | Sentence case | Hyperlink the phrase that describes the destination; start with a verb if it leads to an action. |
| Standalone | Title case | Link text is always the exact title of the linked page. |
Links are blue by default, or white inside a tooltip / on dark surfaces. Limit: 50 characters. Don't tell users to "click the link" — the link is the call to action.
Guidelines
- Make link text describe the destination.
- Start action-page links with a verb.
- Match standalone link text to the page title exactly.
- Use 'click here' or raw URLs as link text.
- Use links to perform actions (use buttons).
- Tell users to 'click the link' in body copy.
- Use
<a href>for navigation; buttons for actions. - External links: signal it and add
rel="noopener"ontarget="_blank". - Never remove the focus outline without a visible replacement.
Button
Buttons initiate actions across the app. Labels clearly describe what happens on click — whether linking to another page or triggering an action. If several items share the same verb, use a Dropdown instead.
Anatomy
- 1Button container
- 2Label
- 3Icon (optional)
Kinds
| Kind | Use case |
|---|---|
| Primary | The most important CTA, tied to the user's main goal. Aim for one primary action per screen, section, or container. |
| Secondary | Regular, non-primary actions. Several may appear per screen. |
| Tertiary | Lowest priority, or paired with a primary to mark an optional action — e.g. "Save" (primary) + "Edit" (tertiary). |
| Ghost | The least emphasis, best for the lowest-priority actions. |
Sizes
With icon & icon-only
States
| State | Behavior |
|---|---|
| Default | Resting appearance before any interaction. |
| Hover | Color changes to indicate the button can be pressed. |
| Focus | A blue outline appears on keyboard/tab navigation. Never on inactive buttons. |
| Pressed | Color shifts while the button is being pressed. |
| Disabled | 40% opacity — the option exists but isn't available. |
Guidelines
- Use one primary action per screen or container.
- Write labels as a clear verb + noun ('Create order').
- Add a tooltip to every icon-only button.
- Place multiple competing primary buttons together.
- Disable a button without explaining why nearby.
- Use a button for navigation when a link is correct.
- Use a real
<button>(type=button/submit) — not a clickable<div>. - Icon-only buttons need
aria-label; disabled buttons getdisabled, not just opacity. - Group spacing follows the scale: 20 / 16 / 12 / 8px for L / M / S / mini.
- Label — short, scannable text describing the action (verb + noun, e.g. “Create order”).
- Leading icon — sits left of the label to reinforce meaning; the preferred position. In a loading state it is swapped for a spinner.
- Trailing icon — only when it reads naturally, e.g. a “Next ›” wizard step or an export download arrow.
- Type — use
submitto send a form; use the defaultbuttonfor dialogs, navigation and other actions.
- Interaction — the whole container is the hit area; a focused button fires on Space or Enter.
- No truncation — labels stay on one line and are never cut off; shorten the wording instead.
- Width & alignment — buttons size to content with a sensible minimum so pairs like “OK / Cancel” align; they may also span a container’s full width.
- Clustering — group related actions with an 8px gap; a cluster may mix one primary with secondary and tertiary buttons.
- Lead with a verb and keep to one or two words where possible.
- Add an ellipsis (“Save as…”) when the action needs more input before it completes.
- Reserve the danger variant for irreversible actions; don’t repeat it down a list or table.
Split Button
A split button combines a standard button with a dropdown menu — a main action on the left, and an arrow on the right that expands related, parallel actions.
Anatomy
- 1Icon (optional)
- 2Label
- 3Dropdown action icon
Use the split button when…
- More than two related actions are possible but space is limited or packed.
- Users select from multiple parallel actions — each a path forward, none cancelling the action.
- You want to reduce visual complexity across several available actions.
Hover, disabled and other states reuse the same styling as Buttons.
Guidelines
- Use it when 2+ parallel actions share limited space.
- Make the left side the most common default action.
- Keep the secondary actions related to the default.
- Put unrelated or destructive actions in the menu.
- Hide the default action behind the dropdown.
- Use it when a single button would do.
- Two buttons in one shell: the main action and a menu toggle with
aria-haspopup. - Arrow keys move within the menu; Esc closes and returns focus to the toggle.
- States reuse the Button tokens — don't fork the styling.
Tabs
Tabs navigate between different but related content — commonly on tool landing pages and item detail pages.
Tab states
Guidelines
- Use 1–3 noun tab names in title case.
- Collapse overflowing tabs into an overflow menu.
- Keep the selected tab's content related to its label.
- Use tabs for sequential steps (use a wizard).
- Change content destructively on tab switch without warning.
- Exceed the 30-character tab-name limit.
- Use
role="tablist"/"tab"/"tabpanel"witharia-selected. - Arrow keys move between tabs; only the active tab is in the tab order.
- Lazy-load heavy panels but preserve scroll/state on return.
Table
Data tables present structured records so users can scan, sort, filter, and act on many items at once. The table is the backbone of Ecovium's list pages — orders, invoices, products, and subscriptions all live in one.
Anatomy
- 1Tabs
- 2Search field
- 3Header row
- 4Row
- 5Container
- 6Row checkbox
- 7Sort button
- 8Filter button
- 9Link button
- 10Tooltip
- 11Add / remove columns
- 12Button
- 13Advanced filter
- 14Action button
- 15Expand dropdown
- 16Highlight row
- 17Status info
- 18Pagination
- 19Page numbers
- 20Page arrows
- 21Rows-per-page
Full table · interactive
Interactive elements
| Element | Behavior |
|---|---|
| Sort button | Click a column header arrow to sort ascending / descending. |
| Filter button | The funnel icon opens a filter for that column's values. |
| Advanced filter | When the switcher is On, an extra filter row appears below the toolbar. |
| Add / remove columns | The overflow icon in the header lets users show or hide columns. |
| Action button | The three-dot inline menu reveals row-level actions. |
| Expand dropdown | The chevron expands the row to reveal a detail card (try it below). |
| Link button | Order numbers are links that open the related record or an external page. |
Row behavior
Text
- Column header text uses a medium weight font to differentiate it from row text.
- Text longer than the column width truncates with an ellipsis; on hover a tooltip shows the full value.
- If sorting is enabled, a sort arrow appears next to the ellipsis in the column header.
- Important values may be set in bold; box / package icons use a soft color at 50% opacity.
Status information
Statuses reuse the semantic palette — green (done), blue (open), red (return), orange (in fulfillment) — paired with a progress indicator of colored segments.
Specs · Height & padding
| Property | Value |
|---|---|
| Header row height | 54px |
| Row height | 54px |
| Space between rows | 2px |
| Cell padding | 24 × 24px |
| Container corner radius | 5px (rectangular by default) |
| Important-row highlight | 4–5px dark bar on the left edge |
Guidelines
- Use semantic
<table><th scope><td>— not stacked divs. - Sortable headers are
<button>s witharia-sort. - For large datasets, paginate or virtualize; keep selection state outside the row component.
Pagination
Pagination breaks large datasets into pages so users can navigate without endless scrolling. It pairs a record count, page controls, and a rows-per-page selector.
Anatomy
- 1Status information
- 2Page numbers
- 3Previous / next arrows
- 4Rows-per-page dropdown
- Status information tells users where they are — "Showing 12–18 of 256 records".
- Page numbers jump straight to a page; the current page is filled with the primary color.
- Arrows move to the previous or next page and disable at the boundaries.
- Rows-per-page lets users tune density (13 / 25 / 50).
Guidelines
- Always show the record range ('12–18 of 256').
- Disable the arrows at the first / last page.
- Remember the rows-per-page choice per user.
- Reset the user to page 1 on every filter change unintentionally.
- Show dozens of page numbers — truncate with an ellipsis.
- Make targets too small to tap.
- Wrap in
<nav aria-label="Pagination">; mark current witharia-current="page". - Sync the active page to the URL so it's shareable and back-button friendly.
- Arrows are buttons with accessible names ('Previous page').
Banner
Banners contextually convey complicated or supplemental information — about a feature, an action the user must take, or an error encountered. Messages are informative and actionable: explain what to know, and provide a next step.
Anatomy
- 1Left bar
- 2Banner icon
- 3Header
- 4Secondary text
- 5Dismiss icon
| Type | When to use |
|---|---|
| Error / Alert | Notify about an action or system failure. |
| Warning | Notify about potential trouble or unexpected system behavior. |
| Success | Notify when an action completes successfully. |
| Info | Inform about useful and relevant information. |
Guidelines
- Lead with what the user needs to know, then a next step.
- Match the type/color to severity (error/warning/success/info).
- Keep headings ≤50 and body ≤230 characters.
- Tell users to 'click the button' in the body.
- Stack many banners and bury the page.
- Use a banner for transient confirmations (use a toast).
- Errors use
role="alert"(assertive); info usesrole="status"(polite). - If dismissible, the ✕ is a
<button aria-label="Dismiss">. - Don't rely on the left bar color alone — the icon carries meaning too.
Tooltip
Tooltips display additional descriptive information about an element — explaining a term, denoting a required format (e.g. mm/dd/yyyy), or clarifying why a button is disabled. They appear on hover and cannot themselves be hovered.
Hover any control above to preview placement.
Best practices
- Provide useful, additional information or clarification; succinctly expand on the element.
- Use for icon-only buttons or buttons with a keyboard shortcut.
- Don't communicate critical information (e.g. form errors) or include links / buttons.
- Use sparingly — aim for 2–4 per page. A 24×24px help icon may draw attention when needed.
Content is concise, sentence case with punctuation · limit 200 characters. A dotted underline indicates a text trigger.
Guidelines
- Keep content to one concise, sentence-case line.
- Attach tooltips to icon-only buttons and shortcuts.
- Aim for 2–4 tooltips per page, max.
- Put links, buttons, or critical info inside a tooltip.
- Show tooltips on tap-only mobile flows.
- Exceed the 200-character limit.
- Trigger on hover and focus; link via
aria-describedby. - Dismiss on Esc; never trap focus inside the tooltip.
- Position with collision detection so it never clips off-screen.
Spinner
Spinners indicate a loading state on a full page or a smaller component like a menu, select, or button.
Sizes
Color
Optional label sits below the large or medium spinner — sentence case, no punctuation, limit 60 characters.
Guidelines
- Wrap in
role="status"with a visually-hidden 'Loading' label. - Gate the spin animation behind
prefers-reduced-motion. - Avoid full-page spinners — use skeletons for page-level loads.
Progress Bar
Progress bars visually show system loading — uploading a file or loading a page — as well as user progress, like filling out a form.
Anatomy
- 1Track / Background
- 2Progress
The progress bar is a block element that fills the width of its container (responsive widths).
Guidelines
- Show a percentage or step count when known.
- Use the indeterminate style only when duration is unknown.
- Let the bar fill the width of its container.
- Use a progress bar for instant actions.
- Leave a determinate bar stuck at one value.
- Replace it with a spinner when real progress is measurable.
- Use
<progress>orrole="progressbar"witharia-valuenow/min/max. - Update
aria-valuenowas it advances; omit it for indeterminate. - Pair long operations with a textual status update.
Empty State
Empty states appear on pages where nothing has been created yet. They tell users what they need to know and how to get started with the page's main features.
Anatomy
- 1Illustration
- 2Heading
- 3Secondary text
- 4Primary button
No invoices yet
Create your first invoice to start tracking payments, statuses, and clients all in one place.
When to use
- When no data exists yet.
- When users must take an action to display content.
- When a search or filter returned no results.
Guidelines
- One primary CTA only; render it conditionally on create permission.
- Reuse the shared illustration set — don't ship one-off art.
- Distinguish 'no data yet' from 'no results' with different copy.
Modal & Dialog
Modals focus the user on a single task or decision by overlaying content above the page and dimming everything behind it. Use them for create/edit flows, confirmations, and contextual selections that shouldn't navigate the user away.
Anatomy
- 1Overlay / scrim
- 2Title
- 3Close icon
- 4Body
- 5Footer actions
Best practices
- Keep modals focused on one task — don't stack multiple modals.
- Always provide a clear way out: a close icon, a cancel action, and dismissing via the overlay or Esc.
- Place the primary action on the right of the footer, secondary to its left.
- Use a compact confirm dialog for short, reversible-risk decisions; use a larger modal for forms.
Guidelines
- Focus on one task per modal.
- Provide close (✕), cancel, overlay-click, and Esc to exit.
- Put the primary action on the right of the footer.
- Stack modals on top of modals.
- Trap users with no clear way out.
- Use a large modal for a simple yes/no (use the dialog).
- Use
role="dialog" aria-modal="true"with a labelled title. - Trap focus inside while open; restore focus to the trigger on close.
- Lock background scroll and close on Esc / overlay click.
Avatar
Avatars visually represent users, places, and things — as rich media or representative illustrations. They act as visual cues that help users identify an item faster in long lists and dense interfaces.
Anatomy
- 1Background
- 2Image
- 3Initials
- 4Icon
Types
Sizes
With status & group
Guidelines
- Use avatars as fast identity cues in dense lists.
- Crop rich media correctly to avoid distortion.
- Fall back to initials on a gray circle when no image exists.
- Use avatars as purely decorative flair.
- Show clipped or stretched images.
- Rely on the avatar alone to identify a user — pair with a name.
- Provide meaningful
alt(the person/company name); emptyaltif a name sits beside it. - Generate initials from first + last name; pick text color for contrast on the fill.
- Lazy-load list avatars and reserve space to avoid layout shift.
Badge & Pill
A badge is a visual label that conveys status or highlights content. Pills are read-only status indicators — not interactive. We suggest semantic colors (red, yellow, green) for statuses.
Status types
With icon
Sizes
| Size | Use case |
|---|---|
| Large | Larger viewports or heroes that need to draw a user's attention. |
| Medium | Default — use in most cases while maintaining visual balance. |
| Small | Compact contexts where balance must be preserved. |
Labels are uppercase without punctuation · limit 30 characters. Available colors: gray (default), blue, green, yellow, red, cyan, magenta.
Guidelines
- Use semantic colors for status (green/yellow/red).
- Keep labels short, uppercase, ≤30 characters.
- Pick a size that balances with surrounding content.
- Make badges interactive — they're read-only.
- Use too many colors at once.
- Let labels wrap (unless translation forces it).
- Render as a non-interactive
<span>; don't add click handlers. - If the badge is the only status signal, add visually-hidden text for screen readers.
- Drive color from the semantic token, not a hard-coded value.
Token
Tokens appear in multi-select dropdowns and file attachers to indicate what's been selected or attached. Tokens here are removable — a single click on the icon clears one.
Anatomy
- 1Container
- 2Label
- 3Remove icon
When not user-inputted, values are title case without punctuation · limit 30 characters. Tokens that exceed the limit truncate with an ellipsis.
Guidelines
- Use tokens to show what's selected or attached.
- Make the remove (✕) clearly tappable.
- Truncate long values with an ellipsis.
- Use tokens for non-removable, read-only labels (use a badge).
- Hide the remove affordance.
- Let one long token break the layout.
- The remove control is a real
<button aria-label="Remove {value}">. - Support Backspace to remove the last token from the field.
- Keep the parent field focusable and announce additions/removals.
Thumbnail
Thumbnails preview images or files — either a smaller version of an uploaded image, or an icon representing the file type. If an image preview can be generated, display it.
Anatomy
- 1Image
- 2File icon
- 3Caption
Large thumbnails are 104px. Captions sit below (default) or pinned to the right, truncate after 2 lines, and don't use special truncation for the file extension · limit 36 characters. Use a fallback icon-file-unknown when the type can't be determined.
Guidelines
- Show an image preview when one can be generated.
- Use a file-type icon when no preview exists.
- Cap captions at 2 lines / 36 characters.
- Stretch non-square images to fit.
- Use special truncation that hides the file extension.
- Leave an undetermined file without the fallback icon.
- Use
object-fit: coverfor previews; map MIME types to icons for the rest. - Set width/height to reserve space and prevent layout shift.
- Fall back to
icon-file-unknownon load error or unknown type.
Dropzone
The dropzone is a block element that fills its container. Instructive text is centered inside, with a button-styled link for accessibility.
Anatomy
- 1Dropzone area
- 2Icon (optional)
- 3Button / link
- 4Instructive text
Either dropzone has identical functionality — choose the icon variant when the layout allows more space, the basic variant when space is limited.
Guidelines
- Use the icon variant when space allows, the basic variant when it's tight.
- Let users either drop or click to browse.
- Show clear states for hover, dragging-over, and disabled.
- Accept files silently with no feedback.
- Hide the accepted file types / size limit.
- Make the click target ambiguous.
- Pair the visible dropzone with a hidden
<input type="file">for keyboard/AT users. - Validate type & size on the client, but re-validate on the server.
- Handle
dragenter/over/leave/dropand alwayspreventDefaultto enable dropping.
AutoComplete New
An input with real-time suggestions as the user types. It speeds up entry for large value sets — countries, clients, products — while letting users still type freely.
Try typing "ge", "un", or "sw".
- Highlight the matching substring in each suggestion.
- Debounce remote lookups and cap the list height.
- Allow free text when no match is required.
- Block submission while suggestions are loading.
- Auto-select the first item without user intent.
- Show hundreds of unfiltered options.
- Pattern:
role="combobox"+aria-expanded, list isrole="listbox". - Arrow keys move the active option (
aria-activedescendant); Enter selects, Esc closes. - Debounce input ~250ms and cancel stale requests.
MultiSelect New
Select several values from a list at once. Choices appear as removable tokens in the field, with a checkbox menu for adding or removing.
Click to open, tick items, and remove tokens with the ✕.
- Use
role="listbox"witharia-multiselectable="true"; options carryaria-selected. - Reflect selection in both the tokens and the menu checkboxes from one source of truth.
- Support "select all" and search for long lists.
Input Number New
A numeric input with stepper controls and formatting. Use it for quantities, prices, and any value the user nudges up or down.
- Use
inputmode="decimal"; format on blur, store the raw number. - Respect
min/max/stepand clamp on the steppers. - Steppers are buttons with
aria-label("Increase quantity").
Rating New
A star control for capturing or displaying a score. Supports hover preview, read-only display, and clearing.
- Interactive ratings are a
radiogroup; arrow keys change the value. - Read-only ratings get
aria-label="4 out of 5"and no tab stop. - Provide a clear/reset affordance for optional ratings.
Select Button New
A segmented control for picking one option (or toggling several) from a small, always-visible set — a compact alternative to a dropdown or radios.
- Single select behaves like a
radiogroup; multi behaves like togglebutton[aria-pressed]. - Keep options short (1–2 words) and the set small (2–5).
Password New
A masked input with a show/hide toggle and a live strength meter that guides users toward a secure password.
- The show/hide toggle is a
buttonwitharia-pressed; never log the value. - Compute strength on the client for UX, but enforce policy on the server.
- Announce strength changes via an
aria-live="polite"region.
Input OTP New
Discrete single-character fields for one-time codes and PINs. Focus auto-advances as the user types and steps back on delete.
Type to advance; Backspace to step back.
- Set
inputmode="numeric"+autocomplete="one-time-code"so mobile offers the SMS code. - Handle paste of the full code across boxes; move focus programmatically.
- Expose the combined value to the form as a single field.
Color Picker New
A compact swatch that opens a palette for choosing a color — used for labels, tags, and theming.
- Offer the brand palette first; a native
<input type="color">can back the custom option. - Show the selected value as a hex string for copy/paste.
Knob New
A circular input for a bounded value — a space-saving, visual alternative to a slider for things like capacity, volume, or completion.
- Expose as
role="slider"witharia-valuenow/min/max; back it with a real range input for keyboard support. - Render the arc with
stroke-dasharray/dashoffsetfor crisp scaling.
Accordion New
Stacked, collapsible sections that let users expand only the content they need — ideal for FAQs, settings, and dense detail panels.
Orders are processed within 24 hours. Delivery windows depend on the destination country and selected carrier.
Returns are accepted within 30 days. Refunds are issued to the original payment method once the item is received.
EU tariff data is attached automatically when present on the product record.
- Each header is a
buttonwitharia-expandedcontrolling a region viaaria-controls. - Decide single- vs multi-open up front; animate height with
grid-template-rowsor max-height.
Card New
A flexible container that groups related content and actions. Cards organize dashboards and list items into scannable, self-contained units.
Order #02564
7 packages · Warehouse → Germany. Estimated delivery in 2 days.
Sebastian Breitzke
Logistics Lead
Sizes & padding
Three sizes scale padding and title with content density. All spacing stays on the 4px grid.
| Size | Padding | Main title | Use case |
|---|---|---|---|
| S — Compact | 16px | Bold 16px · 1 rem | Dense lists, sidebars, inline cards |
| M — Default | 20px | Bold 20px · 1.25 rem | Most content cards and detail panels |
| L — Spacious | 24px | Bold 20px · 1.25 rem | Hero cards and primary dashboards |
Card patterns — in the product
Ecovium
Hannover Nr 3
Germany
+49 22393532
Select order
- Use
<article>/<section>with a heading; make only inner controls focusable. - If the whole card is a link, use a single anchor with an accessible name — avoid nested interactive elements.
- Drive padding/title from the size token (S/M/L); status pills read from the semantic palette.
Stepper New
Guides users through a multi-step task, showing where they are and what's left. Use for wizards like onboarding, checkout, or creating an order.
- Mark the active step with
aria-current="step"; completed steps get a checkmark and accessible "completed" text. - Allow back-navigation to completed steps; validate before advancing.
Panel & Fieldset New
A titled container that groups content, optionally collapsible. Use panels to chunk long forms and dashboards into digestible blocks.
Article ID, name, category, and description live here. Click the chevron to collapse this panel.
- Group related form controls in a real
<fieldset>+<legend>for screen readers. - Collapsible panels use the disclosure pattern (
aria-expanded).
Divider New
A thin rule that separates content into groups — horizontally or vertically, with an optional centered label.
Section one of the content.
Section two, separated by a plain divider.
- Use
<hr>orrole="separator"; a labelled divider's text should be informative. - Keep it decorative-light — don't overuse to compensate for poor spacing.
Toolbar New
A horizontal surface that groups actions and controls — typically anchoring the top of a page, editor, or table with primary actions on the right.
- Wrap in
role="toolbar"with anaria-label; arrow keys move between controls. - Collapse low-priority actions into an overflow menu on narrow screens.
Timeline New
Displays a sequence of events along a connected track — perfect for order history, activity logs, and shipment tracking.
- Order placed07/02/2023 · 5:31 PM
Order #02564 created by Sebastian Breitzke.
- Packed at warehouse07/02/2023 · 9:12 PM
2 packages prepared for dispatch.
- In transit08/02/2023 · 6:40 AM
Departed origin facility, Germany.
- Out for deliveryPending
Awaiting final-mile carrier.
- Render as an ordered list so order is conveyed without relying on visuals.
- Mark the current event with
aria-current; keep timestamps machine-readable in<time>.
Tree New
Displays hierarchical data with expandable nodes — categories, file systems, organizational structures, or nested locations.
- Warehouse — Germany
- Fashion
- Linen Trouser
- Cotton Tank
- Electronics
- Hub — Switzerland
- Returns bin
- Use
role="tree"/"treeitem"/"group"witharia-expandedon parent nodes. - Arrow keys: Right expands, Left collapses, Up/Down move between visible nodes.
- Lazy-load deep branches on first expand.
Breadcrumb New
Shows the user's location within the app hierarchy and offers one-click navigation back up the tree.
- Wrap in
<nav aria-label="Breadcrumb">with an ordered list; mark the last itemaria-current="page". - Truncate the middle with an overflow menu on long paths.
Menubar New
A horizontal navigation surface anchoring the top of the app — the home of Ecovium's primary navigation, tenant switcher, and account controls.
- Use
<nav>withrole="menubar"; submenus open on click and arrow keys. - Mark the active route with
aria-current="page"; collapse to a drawer on mobile.
Toast New
Brief, auto-dismissing notifications that confirm an action without interrupting the workflow. Use toasts for transient feedback — banners for persistent, in-page messages.
Toasts stack in the corner and dismiss after 4 seconds.
- Render in an
aria-liveregion —politefor info/success,assertivefor errors. - Pause auto-dismiss on hover/focus; always allow manual close.
- Keep messages short; never put the only copy of critical info in a toast.
Drawer New
A panel that slides in from the edge of the screen for secondary tasks — filters, details, quick edits — without leaving the current page.
- Treat as a modal
dialog: trap focus, close on Esc / scrim click, restore focus on close. - Pick the edge by content type — filters from the right, primary nav from the left.
Popover New
A lightweight overlay anchored to a trigger, holding rich content — quick details, mini-forms, or actions — more than a tooltip, less than a modal.
- Anchor with collision-aware positioning; close on outside click and Esc.
- Manage focus into the panel; non-modal, so the page stays interactive.
Carousel New
Cycles through a set of items in a limited space — product images, onboarding slides, or featured content — with navigation and indicators.
- Use
aria-roledescription="carousel"; provide prev/next buttons and pause for any autoplay. - Don't autoplay essential content; respect
prefers-reduced-motion.
Chip New
Compact elements representing an input, attribute, or entity — often with an icon or avatar, and optionally removable. Distinct from a read-only Badge.
- Removable chips: the ✕ is a
buttonwitharia-label="Remove {label}". - Use chips for entities/attributes; use Badge for read-only status only.
Meter Group New
Visualizes how a whole splits across multiple categories in a single bar — storage usage, budget allocation, or order-status breakdowns.
- Each segment is a
role="meter"witharia-valuenow; pair with a visible legend. - Order segments logically and keep the legend labels in sync with colors.
Skeleton New
Placeholder shapes that mimic content while it loads, reducing perceived wait and layout shift. Prefer skeletons over spinners for full page or list loads.
- Mark skeletons
aria-hidden="true"and expose a singlearia-busy/ live "Loading" status instead. - Match the skeleton's shape and size to the real content to avoid layout shift.
- Gate the shimmer behind
prefers-reduced-motion.
App Header New
The global bar at the top of every Ecovium screen. It carries the logo, primary navigation, the tenant & location switcher, and account controls — in a dark or light variant, with an optional secondary sub-navigation row.
Anatomy
- 1Logo
- 2Primary nav
- 3Tenant / location switcher
- 4Notification badge
- 5Utility icons
- 6Avatar
- 7Sub-navigation
Dark variant — primary
Light variant — with notifications
Secondary sub-navigation — drill-down
- The header is a
<header role="banner">; primary nav is a<nav>witharia-current="page"on the active item. - The notification badge exposes a live count to screen readers ("9 unread"); the bell is a labelled button.
- Collapse the primary nav into a drawer below the Tablet breakpoint; keep the logo, tenant, and avatar visible.
Help & Onboarding New
Contextual guidance — from a single help icon to a multi-step product tour and a full documentation side-panel. Use these to teach features in place without pulling users out of their flow.
Help button & tooltips
Onboarding tour
Popover text. One more line. Another sentence. Use a tour to introduce a new feature step by step.
Popover text. One more line. Another sentence. The dark variant suits image-rich or dimmed backdrops.
Documentation panel
- Tour popovers anchor to their target, announce step changes (
aria-live), and always offer Skip / Close. - The documentation panel is a non-blocking drawer (
role="dialog") with its own search and history; deep-link each article. - Never gate critical task info behind a tour the user can dismiss.
Tracking Timeline New
Purpose-built trackers for the logistics journey — a horizontal shipment timeline with milestone icons, a vertical delivery log, and a compact return-process tracker.
Shipment timeline · horizontal
Delivery log · vertical
- Order Confirmed07/02/2023 · 5:31PM
- On The Way10/02/2023 · 6:31PM
- Out For DeliveryExpected 10/02 · 8:31PM
- DeliveredExpected 10/02 · 9:31PM
Return process
- Express milestones as an ordered list with
aria-current="step"on the live stage. - Drive icon + color state from a single status enum; keep ETAs in machine-readable
<time>. - Carrier marks (DHL, UPS…) are decorative — provide an accessible carrier name in text.
Screen Foundation
These additions connect the component library with the real Ecovium product screens you submitted: order headers, action toolbars, dashboard tiles, login, split workspaces, enterprise tables, and blueprint spacing rules.
Product screen rules
Use the light blue application canvas, white cards, rounded overlay corners, compact Roboto typography, and one clear primary action on the right. The header remains functional and calm: title first, metadata second, toolbar actions grouped and separated by vertical dividers.
Human-Centered Design (HCD)
Every ecovium screen in this system is the output of a human-centered design process — the product is shaped around the operator on the warehouse floor, the dispatcher, and the customs clerk, not around the database behind them.
The standard describes four activities that repeat until the design meets its requirements. The patterns in this library are how each activity shows up in the product.
Understand the context of use
Who is the user, what task are they doing, and in what environment? The order header, tour stops and shipment cards reflect the real logistics context.
Specify user requirements
What must the system let people accomplish? Clear primary actions, status pills and required-field validation encode those requirements.
Produce design solutions
Tokens, components and the screen templates here are the reusable solutions — built once, applied consistently across every app.
Evaluate against requirements
Accessibility checks, usability testing and the Do / Don’t guidance close the loop and feed the next iteration.
Design Thinking
Where HCD sets the standard to meet, Design Thinking is the working method the team uses to get there — a non-linear, five-mode process for understanding users and turning insight into tested solutions.
Empathize
Observe and interview real users — dispatchers, packers, customs staff — to understand their goals and pain points.
Define
Frame the right problem: a clear, user-centered problem statement that the design must solve.
Ideate
Generate many possible solutions — layouts, flows, components — without judging early.
Prototype
Build the screens cheaply and quickly — exactly the rendered patterns shown throughout this system.
Test
Put prototypes in front of users, learn, and loop back to any earlier mode as needed.
The two methods reinforce each other: Design Thinking supplies the empathy and rapid iteration, while ISO 9241-210 human-centered design supplies the rigor — measurable requirements and formal evaluation — so that “usable and useful” is verified, not assumed.
Header Pattern & Measurement System
The object-header pattern defines the exact hierarchy and spacing for detail pages, expressed below as reusable product tokens with the live header rendered from the component library.
- Keep the object title left-aligned and the primary action on the right.
- Group toolbar icons with 24px rhythm and divider lines between functional groups.
- Use the tab underline as the main active-state signal.
- Let action buttons float without the right-side action area.
- Mix many type sizes in the header.
- Reduce the rounded overlay corner; it is part of the product identity.
Order Detail Page Pattern
Object detail screens combine a clear object header, contextual metadata, status badges, an action toolbar and a tabbed content rail. This pattern is reused for orders, invoices, declarations and logistics records.
| Area | Rule |
|---|---|
| Title | 20px bold; object type + number + assignment state. |
| Badge | Outline pill next to title; status or declaration type. |
| Metadata | 14px, two lines max, links in primary blue. |
| Toolbar | Icon-only buttons need tooltips and accessible labels. |
| Primary action | One filled blue button; secondary action as blue text link. |
Packing Workspace Layout
The fulfillment workspace uses a two-panel structure: selectable order items on the left and the current packing state on the right. Empty states guide the next action without blocking the workflow.
Workspace rules
- Use equal-height panels to compare source and destination.
- Keep item cards short: thumbnail, name, SKU, quantity, overflow action.
- Pair every packed item with a clear confirmation state.
- Use large decoration inside work-heavy panels.
- Hide the quantity; it is the operational decision point.
- Put critical packing instructions only inside an image.
Application Launcher & Tiles
The launcher shows the cross-product pattern: a top application bar, a news ticker, contextual tabs and grouped application tiles with colored icon chips.
| Tile part | Specification |
|---|---|
| Icon chip | 44px rounded chip, semantic or category color. |
| Surface | White card with small radius and level-1 shadow. |
| Content | Title, short descriptor, optional NEW badge. |
| Layout | Grouped sections (All Apps, Favorite Screen) with clear headings. |
Login Template
The login screen is calm and minimal: a centered card on a soft brand background, rounded inputs, a single primary button and clear secondary actions.
- Use
autocomplete="email"andautocomplete="current-password". - Preserve visible labels even when inputs are filled.
- Never show authentication errors only through color; include text.
Enterprise Table Pages
The invoice and fulfillment table screens share one core page pattern: two-level navigation, contextual tabs, search, optional advanced filter, a primary create action, status pills, row actions and bottom pagination.
- The primary button sits at the right of the list toolbar.
- Rows stay white with light separators to support dense scanning.
- Status text pairs color with an icon for stronger meaning.
Content-area layout blueprint
Planning structure for notifications, header, tabs and the content area.
- Notifications sit above the header and appear only when attention is required.
- Align the tab underline with the content area and the left module boundary.
- Reserve a clear action zone on the right side of the header row.
Order Record — Full Detail
The full order record expands the header pattern into a working record: addressee, transport, tour stops and shipments up top, then deep panels for shipping method, business partners, a pickup/delivery timeline and monetary values. It shows how one object scales from summary to complete operational detail.
| Region | Purpose |
|---|---|
| Header cards | Addressee, Transport, Tour Stops, Shipments — the at-a-glance state of the order. |
| Sub-tabbed cards | Supplier / Receiver / Order switch role (Consignor, Delivery, Pick-Up…) without leaving the page. |
| Timeline | Milestone track with done / in-progress / pending nodes and a dotted future segment. |
| Monetary values | Inline highlights: customs value (amber) and net worth (red) draw the eye to figures that need review. |
Order Quick View
A focused overlay variant of the record for in-context editing — opened over a list with a dismiss control. The left rail switches to General Information (user groups, applications and removable tags) while the partner, timeline and monetary panels stay identical, so users never relearn the layout.
- State is shown as a colored status word in the subtitle (e.g. In preparation), with provenance (created by, assigned to) beside it.
- Removable application tags use the blue token chip with a trailing dismiss icon.
- The overlay keeps the same Supplier/Receiver/Order, timeline and monetary components as the full record.
Master Data — Help & Profile
Contextual panels overlay any list without navigating away. The Help Center explains the current page and links to support and how-to guides; the Profile menu groups account actions. Both are dismissible flyouts anchored to the top bar.
- Flyouts dim nothing — the underlying list stays visible and operable context.
- Help is grouped: page help, Support, and How-to-work-with entries with chevrons for drill-in.
- The Profile menu mirrors the account sub-navigation for consistency.
Account & Profile
The account area uses the standard app frame with a sub-navigation rail. A profile header (avatar, name, role) pairs with a Personal Information form, an isolated Change-password card, and an extensible More Information block.
- Read-only or system-managed fields (e.g. email) use a muted fill to distinguish them from editable inputs.
- Destructive or sensitive actions (change password) are separated into their own card.
- Primary save sits top-right with a secondary Discard link, matching every other detail screen.
Tenant Management — Users & Roles
Administration screens reuse the enterprise table with role-specific affordances: a Select-Action split button, filter pills, per-row enable toggles, semantic status (Active, Inactive, Invited, Pending) and a row action menu. Creating a role opens a focused modal over a dimmed table.
| Control | Behavior |
|---|---|
| Select Action | Split button opens bulk operations for checked rows. |
| Enable toggle | Inline switch; reflects and sets the user's active state. |
| Status | Color-coded text: green Active, red Inactive, amber Invited / Pending. |
| Row menu | Per-row overflow: Deactivate, Activate, Resend Invitation. |
| Add role modal | Dim the table, focus the form; permissions as a checkbox grid. |
Design System · Component Library · Built with love for the supply-chain industry first by Jeton Lakna.