ONE DESWIK

    • Design System Foundations

    How our software applications look, behave and feel across the product suite — providing a unified, familiar experience for planning, production and reporting tools.

    Principles

    Our key UX principles we must abide by for our customers' benefit.

    Clarity over complexity

    Reveal only what is relevant, gradually displaying complexity progressively when required.

    Consistency builds confidence

    The same action, agnostic of application or service, must behave the same way.

    Efficiency under pressure

    Beyond minimising clicks — reduce friction and pain points wherever possible.

    Safety by design

    Always ensure users are clearly informed of destructive and irreversible actions.

    Transparency in feedback

    Always display visually what the system is doing. Never hide important information in the background.

    Tone & Personality

    At Deswik we strive for a professional and calm digital presence, reflective in our software and how it is designed and how it functions. Our users perform precise, data-driven actions and our solutions should aid them as best as possible.

    Because our users work abroad, we avoid internal jargon and slang that is not industry-wide knowledge. We use clear and direct language when our systems communicate on our behalf.

    Theme & Consistency

    • Always design in light theme first.
    • Allow users to switch between light, dark, or system preference.

    Colors

    Greyscale

    Scales are generated from lightness values at 98, 96, 94, 90, 85, 80, 60, 40, 20 and 10. The active color can be used on backgrounds of --gray-1 and --gray-2. Backgrounds of --gray-3 and higher will fail contrast without shading the active color.

    Background--background
    Gray 1--gray-1
    Gray 2--gray-2
    Gray 3--gray-3
    Gray 4--gray-4
    Gray 5--gray-5
    Gray 6--gray-6
    Gray 7--gray-7
    Gray 8--gray-8
    Gray 9--gray-9
    Gray 10--gray-10

    Active

    Some "active" colors are shaded to pass contrast ratio (4.5:1) guidelines: used for the primary button background color and as the active color on a selected color background.

    Active--active
    Active Primary--active-primary
    Active on Selected--active-on-selected

    Validation — three variants

    Pick whichever suits your application best. You can use the validation classes for general text highlighting, but use .warning-text rather than .warning as the warning colour does not pass contrast on light backgrounds.

    Colourful

    Incomplete — fields awaiting input.
    Information — supporting context.
    Success — your changes were saved.
    Warning — review before proceeding.
    Error — operation failed. Try again.

    Plain

    Incomplete — fields awaiting input.
    Information — supporting context.
    Success — your changes were saved.
    Warning — review before proceeding.
    Error — operation failed. Try again.

    Bright

    Incomplete — fields awaiting input.
    Information — supporting context.
    Success — your changes were saved.
    Warning — review before proceeding.
    Error — operation failed. Try again.

    Typography

    Headings are sized proportional to the base text size. Line heights are calculated at 1.25× the font size and may be rounded to the nearest pixel if fractional sizes are not supported.

    Headings

    Heading 1 — Display

    Heading 2 — Section

    Heading 3 — Subsection

    Heading 4 — Group

    Heading 5 — Label
    Heading 6 — Micro

    Font size modifiers

    Font bigger — .font-bigger

    Font big — .font-big

    Default body text — base size.

    Font small — .font-small

    Font smaller — .font-smaller

    Font weights

    Light weight (200) — .font-light

    Regular weight (400) — .font-regular

    Semibold weight (600) — .font-semibold

    Bold weight (700) — .font-bold

    Inline text

    Use strong or bold to highlight specific words. Use links for navigation. Use inline code or samples in monospace. Subscript H2O and superscript E = mc2.

    Date & time formats

    Unless specified otherwise, display dates and times in the local format. The standard user-facing format is MMM DD, YYYY, HH:MM AM/PM — identified as the fastest to scan visually.

    For tables, lists, and anywhere dates appear stacked, the digits must line up by column even when the dates themselves vary. The cleanest way to do that without breaking out of the page font is font-variant-numeric: tabular-nums: it keeps Inter as the family but engages the font's tabular-figure OpenType feature, so every digit takes the same advance width. The result reads as ordinary body text yet every comma, colon, and AM/PM lands in the same horizontal column down the list.

    Don't — proportional digits
    Jan 01, 2023, 09:05 AM
    Mar 17, 2023, 11:28 AM
    Aug 08, 2024, 02:30 PM
    Dec 31, 2024, 10:00 PM
    Feb 04, 2025, 12:45 PM
    Sep 22, 2025, 05:00 AM

    Inter's proportional digits make 1 narrower than 0 — every comma, colon, and meridiem token drifts row to row.

    Do — tabular-nums (still Inter)
    Jan 01, 2023, 09:05 AM
    Mar 17, 2023, 11:28 AM
    Aug 08, 2024, 02:30 PM
    Dec 31, 2024, 10:00 PM
    Feb 04, 2025, 12:45 PM
    Sep 22, 2025, 05:00 AM

    Same Inter family as the rest of the page — only the digit width has changed. The time portion locks to a perfect column.

    One caveat: the MMM month abbreviation is still proportional (Jan, Mar, and Sep have different widths in Inter), so the comma after the day number can shift a pixel or two between rows. For columns where perfect start-to-end alignment is non-negotiable — reconciliation tables, audit logs, batched timestamps — use a numeric format like YYYY-MM-DD HH:MM or MM/DD/YYYY HH:MM AM/PM with tabular-nums. Every character then comes from the digit set or fixed punctuation.

    Implementation

    Apply font-variant-numeric: tabular-nums on the cell, the column's td rule, or use the existing .tabular-nums utility from the product layer. The foundation already wires this on td.num and th.num in the Tables & Grids section, so the «Tonnes» and «Grade» columns there are already tabular without any per-cell styling.

    Sizing

    Sizes are units of measurement and sizing across the system — font sizes, padding, margins, gaps.

    --size-1
    0.25rem4 px
    --size-2
    0.5rem8 px
    --size-3
    0.75rem12 px
    --size-4
    0.875rem14 px
    --size-5
    1rem16 px
    --size-6
    1.25rem20 px
    --size-7
    1.5rem24 px
    --size-8
    1.75rem28 px
    --size-9
    2rem32 px
    --size-10
    2.5rem40 px

    Usage notes

    • --size-1 — Typical spacing between grouped icons.
    • --size-2 — Gap between icons and text, labels and fields, vertical spacing between grouped form fields.
    • --size-3 — Gap between labels and groups, gap between grouped buttons, sub-content spacing.
    • --size-4 — Typically used for base font size and icon size.
    • --size-5 — Content spacing when grouped content is not directly related.
    • --size-7 — Spacing between page content such as multiple UI cards.
    • --size-8 — Page margins for main content or at designer's discretion.

    Tables and Data Grids

    Table — used when space is available, visual display is more important and when data has a complex structure. Data grid — used when high density is needed, with inline editing as a key feature, where Excel would be a substitution.

    Table (banded, with row states)

    Block Material Tonnes (t) Grade (g/t) Dimensions Status
    BX-01Ore 12,450.002.45 100 × 80 OK
    BX-02Ore 9,820.503.10 100 × 80 Reviewing
    BX-03Waste 21,300.000.15 120 × 90 Check
    BX-04Waste 8,775.250.08 100 × 80 Failed
    BX-05Ore 15,612.752.90 110 × 85 OK

    Data grid (high density)

    IDDescription Length (m)Width (m) Depth (m)Volume (m³) Status
    D-001Drift heading north128.405.505.203,672.18OK
    D-002Cross-cut east42.104.804.80970.30Warning
    D-003Stope access88.655.505.202,536.95Error
    D-004Return airway204.003.503.502,499.00Info
    D-005Service decline312.756.005.5010,320.75Incomplete

    Alignment rules

    • Numerical data is right-aligned. Textual data is left-aligned. Headers align with their data.
    • Use center alignment for small controls — checkboxes, validation icons, numbered rows.
    • Multi-part values (e.g. 100 × 80) align by the separator; match decimal places.
    • Include the unit in the header so it isn't repeated in every cell.
    • Use font-variant-numeric: tabular-nums for clean number alignment.

    Buttons

    Button contents may include icons and text. As a general rule, contents should not wrap onto multiple lines. Each variant has states for: enabled (default), hover, focus and disabled.

    Variants

    With icons

    Icon inherits the button's text colour, sized at --size-4, with a --size-2 gap from any text — all from the foundation button rule.

    States

    Default
    Primary
    Secondary
    Danger

    Usage

    • Primary — main call to action in forms and pages.
    • Secondary — Cancel and Close actions; should never require a disabled state.
    • Transparent — menus, tabs, table sorting, filtering — blends with page layout.
    • Danger / Error — destructive actions; usually placed last in a menu to avoid accidental clicks.

    Form Inputs

    Form inputs are minimally styled — browser defaults control the main appearance. Inputs and buttons share the same height for visual consistency. Inputs should be sized to the content they accept. Labels are inline with fields, right-justified, and linked via for/id.

    Ore
    Waste
    Backfill
    Overburden
    Stockpile
    Low-grade ore
    Risk level

    Cards

    Card containers group content. Use .card-1 or .card-2 for tinted backgrounds.

    Default card

    A simple container — no background tint.

    Card 1

    Tinted with --gray-1 for subtle separation.

    Card 2

    Tinted with --gray-2 for stronger separation.

    Page Layouts

    Two primary page layout variants for product UIs.

    Top header & navigation layout

    Provides navigation in the top header without a side navigation. Allows native display with labels, without taking up additional space. The header consists of the site title, switchable account/company control, and a menu of transparent buttons (collapsible to icons).

    Side navigation layout

    Familiar app-style side navigation in a collapsible menu. Click expand to show page titles — the state should persist across pages and sessions. Long company or user names should display outside the <nav> component.

    Layout templates

    App shell — 56px sidebar · 48px top · main · 280px right
    Web shell — 48px top · main (flex) · 280px right (optional)

    App and Model Space Considerations

    General app considerations

    • Handling files generically: create new, open, see recent, save, save as, share, download, search, comment, see activity/details, export.
    • Generic header: consistent use of the main app icon, primary icons and other elements; show submenus, validation or functions directly from the menu.
    • In-flight validation: extending NOVA's framework — Incomplete / Info / Warning / Error / OK.

    Modal space considerations

    • Icon library: CAD's extensive icon library reflects desktop heritage; a reduced palette or thematic colours may suit a modern cloud platform while reusing Suite content for familiarity.
    • Layer tree / object browser: common functions and layouts for hierarchical model objects — grouping, indenting, ghosting, visibility, row options.