/* ============================================================================= DEX Portal - Design Tokens Every colour, dimension, radius and timing value used anywhere in the product is declared here. Component stylesheets reference these variables and never hard-code a literal value, so a change made here propagates everywhere. ============================================================================= */ :root { /* --------------------------------------------------------------------- Surfaces --------------------------------------------------------------------- */ --surface-header: #000000; --surface-header-hover: #1c1c21; --surface-header-input: #131317; --surface-header-border: #2a2a31; --surface-navigation-rail: #ffffff; --surface-navigation-rail-hover: #f2f4f6; --surface-panel: #ffffff; --surface-canvas: #e9eff0; --surface-subtle: #f7f8f9; /* A band that groups the rows under it. A step darker than --surface-subtle, because the column headings already use that and the two would otherwise be the same shade doing different jobs. */ --surface-row-band: #eef0f3; /* --------------------------------------------------------------------- Text --------------------------------------------------------------------- */ --text-primary: #0f1115; --text-secondary: #43484f; --text-muted: #8b929b; --text-on-dark: #ffffff; --text-on-dark-muted: #7d838c; /* --------------------------------------------------------------------- Borders --------------------------------------------------------------------- */ --border-default: #e8ebed; --border-subtle: #f1f3f5; --border-strong: #d5dadf; /* Panel dividers. Inside a slide-over there are no card outlines to separate one section from the next, so a single line has to do that work alone - which is why it is heavier than a hairline border and a shade darker than --border-default. Rows *within* a section keep the hairline, so the two levels of separation stay told apart. */ --divider-width: 2px; --divider-colour: #e2e7ea; /* Telephony is green throughout the product - the Call button, the answered state, the inbound arrow. The dialler's own badge follows, rather than wearing the brand gradient above a green button and reading as two different features stacked on each other. */ --gradient-call: linear-gradient(135deg, #16a45c, #0a7f43); /* The softer, pastel call green used on the round call chips in records and the panel header - gentler than the dialler's deep green, still legible under a white phone glyph. */ --gradient-call-soft: linear-gradient(135deg, #74d3a2, #57c78f); /* --------------------------------------------------------------------- Brand The three-stop gradient is the logo mark. The solid accent is what interactive states use, because a gradient reads poorly at small sizes. --------------------------------------------------------------------- */ --brand-gradient-start: #d400c9; --brand-gradient-middle: #8a2be2; --brand-gradient-end: #1e70ff; --brand-gradient: linear-gradient(135deg, #d400c9, #8a2be2, #1e70ff); /* The header of every modal panel in the product. Near-black at both ends with the violet lifted through the middle, so a panel reads as a separate surface laid over the page rather than as more page. Named here because it belongs to all of them, not to whichever one it was first drawn for. */ --panel-header: linear-gradient(135deg, #0e0d1d 0%, #342a59 45%, #41245c 75%, #1a1027 100%); --accent: #6d5cff; --accent-hover: #5b48ff; --accent-tint: #f0edff; --accent-border: #ded8ff; /* --------------------------------------------------------------------- Status --------------------------------------------------------------------- */ --status-success: #0f9d58; --status-success-tint: #e6f6ed; --status-warning: #b26a00; --status-warning-tint: #fdf1de; --status-danger: #d92d20; --status-danger-tint: #fdeceb; --status-neutral: #667085; --status-neutral-tint: #f0f2f5; --status-info: #1e70ff; --status-info-tint: #e8f0ff; /* --------------------------------------------------------------------- Dimensions --------------------------------------------------------------------- */ --height-top-header: 56px; --width-navigation-rail: 80px; --width-sub-navigation-panel: 272px; /* Default opening width of the slide-over. The user can drag it wider or narrower from the grip on its left edge, and their choice is remembered, so this is only the starting point. */ --width-slide-over-panel: 55vw; /* Records open wider than forms: two columns and a thread need the room a single column of fields does not. */ --width-slide-over-wide: 63vw; --width-slide-over-minimum: 440px; /* Kept in step with SECONDARY_PANEL_WIDTH_IN_PIXELS in slide-over-panel.js, which shifts the primary panel left by exactly this much. */ --width-slide-over-secondary: 460px; /* Barely more than a square corner. A field outline with the name written into its top edge is read as a ruled line, and 8px on a box that short rounds the notch's corner inset away with it. */ --radius-tiny: 3px; /* The product's corner. One value, one place to change it: buttons, cards, panels, inputs, chips and every widget read from here. The three size names below are kept because hundreds of rules already ask for them by name, and because a future design that wants a card softer than a button needs somewhere to say so. Today they all mean the same thing, which is the point: nothing in the product picks its own corner by accident. */ --radius-button: 5px; --radius-small: var(--radius-button); --radius-medium: var(--radius-button); --radius-large: var(--radius-button); /* A true pill: progress tracks, switches, count beads and avatars. */ --radius-pill: 999px; /* --------------------------------------------------------------------- Motion One easing curve across the whole product. Durations are named for what they animate rather than how long they take, so they can be retuned in one place without hunting for magic numbers. --------------------------------------------------------------------- */ --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --duration-instant: 140ms; --duration-quick: 200ms; --duration-panel-close: 240ms; --duration-panel-open: 320ms; --duration-sub-navigation: 340ms; /* --------------------------------------------------------------------- Elevation --------------------------------------------------------------------- */ --shadow-sub-navigation: 0 1px 2px rgba(16, 24, 40, 0.04), 8px 0 24px -12px rgba(16, 24, 40, 0.18); --shadow-dropdown: 0 12px 40px -8px rgba(16, 24, 40, 0.28), 0 0 0 1px rgba(16, 24, 40, 0.06); --shadow-slide-over: -24px 0 60px -16px rgba(16, 24, 40, 0.32), 0 0 0 1px rgba(16, 24, 40, 0.05); --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04); /* --------------------------------------------------------------------- Typography --------------------------------------------------------------------- */ --font-interface: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-logo: 'Montserrat', sans-serif; --font-monospace: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* --------------------------------------------------------------------- Interface scale Every font size, control height and gutter in the product is expressed as a multiple of these, so the whole interface can be tightened on a small screen by changing four numbers rather than by writing a media query for each component. --------------------------------------------------------------------- */ --font-size-tiny: 11.5px; --font-size-small: 12.5px; --font-size-base: 13.5px; --font-size-medium: 15px; --font-size-large: 19px; --control-height: 38px; --control-height-small: 32px; --input-height: 40px; /* Every slide-over header is this tall, badge or no badge, so two open panels put their titles on the same line. */ --height-slide-over-header: 78px; /* The sticky column headings of a data table: 11px padding either side of an 11.5px line. Anything else that sticks below them offsets by this. */ --height-data-table-head: 38px; --gutter: 24px; --gutter-tight: 18px; } /* ============================================================================= SMALL SCREENS Token overrides rather than per-component rules. Text drops roughly one step, controls lose 4-6px of height, the navigation rail narrows and gutters halve. Components inherit all of it without knowing a small screen exists. ============================================================================= */ @media (max-width: 900px) { :root { --font-size-tiny: 10.5px; --font-size-small: 11.5px; --font-size-base: 12.5px; --font-size-medium: 14px; --font-size-large: 17px; --control-height: 34px; --control-height-small: 29px; --input-height: 38px; --gutter: 16px; --gutter-tight: 12px; --height-top-header: 52px; --width-navigation-rail: 68px; --width-sub-navigation-panel: 248px; } } @media (max-width: 560px) { :root { --font-size-tiny: 10px; --font-size-small: 11px; --font-size-base: 12px; --font-size-medium: 13.5px; --font-size-large: 16px; --control-height: 32px; --control-height-small: 28px; --input-height: 36px; --gutter: 12px; --gutter-tight: 10px; --width-navigation-rail: 60px; --width-sub-navigation-panel: 100vw; } }