Skip to content

CoreTender Enterprise Design System™

One design language for every CoreTender capability

CEDS™ is the visual, interaction, accessibility and usability foundation of CoreTender Procurement OS™. Every page, component, workflow, AI interaction, dashboard and administration surface is composed from the tokens and primitives documented here. The simplicity of Notion, Linear and Stripe with the governance depth of an enterprise procurement platform.

Design principles

Ten rules that decide every design argument. When two options are both reasonable, the one that satisfies more of these wins.

  • Simplicity over complexity

    Every screen states one job first; depth is reachable, never in the way.

  • AI-first interactions

    The Copilot is a teammate in the surface, not a separate destination.

  • Progressive disclosure

    Summary → detail → evidence. Never all three at once.

  • Consistency everywhere

    Same navigation, same tabs, same semantics in every module.

  • Accessibility by default

    WCAG 2.2 AA is the floor, verified per component.

  • Minimal clicks

    Every primary action reachable in two interactions or one keystroke.

  • Mobile responsive

    Layouts adapt; functionality is never removed on small screens.

  • Keyboard accessible

    Full keyboard path plus ⌘K for everything.

  • Fast performance

    Skeletons over spinners; never block on non-critical data.

  • Human-centered design

    AI proposes with confidence and sources; humans approve.

Color system

Brand foundation plus procurement semantics. Colour always carries a text label: meaning never depends on hue alone.

Brand foundation

Ink (Black)

--navy

Primary brand surface, headings, dark bands.

Ink Deep

--navy-deep

Deepest contrast band and hover state for ink surfaces.

Gold

--gold

Accent only: focus rings, primary CTA, key emphasis.

White

--background

Base canvas in light theme.

Surface

--surface

Neutral page section separation.

Surface raised

--surface-raised

Cards and panels lifted above the canvas.

Surface sunken

--surface-sunken

Wells, code blocks, inset regions.

Procurement semantics

Success

Ready, compliant, submitted, won, healthy.

Warning

At risk, expiring, SLA nearing breach, partial evidence.

Danger

Blocked, non-compliant, breached, integrity failure.

Info

Neutral state, in review, informational guidance.

AI

Anything generated or suggested by the AI Procurement Copilot™.

CompliantExpiring in 14 daysBlocking gapIn reviewAI suggestedReady · 91At risk · 58

Typography hierarchy

Poppins for headings, Inter for everything else.

  • Display

    Marketing heroes only.

  • Heading 1

    Page title.

  • Heading 2

    Section title.

  • Heading 3

    Panel and card title.

  • Body

    Default application text.

  • Body large

    Editorial and long-form reading.

  • Caption

    Hints, metadata, table sub-values.

  • Eyebrow

    Labels above titles and metric names.

Spacing: 8pt grid

Every gap, pad and stack comes from this scale.

  • 2xs0.25rem
  • xs0.5rem
  • sm0.75rem
  • md1rem
  • lg1.5rem
  • xl2rem
  • 2xl3rem
  • 3xl5rem

Radius, elevation & motion

Depth communicates layer; motion communicates causality.

  • sm, Chips, tags, inline controls.
  • md, Inputs and buttons.
  • lg, Default surface radius.
  • xl, Cards and panels.
  • 2xl, Dialogs, drawers, hero surfaces.
Elevation 1
Elevation 2
Elevation 3
Elevation 4
  • fast · 120ms, State toggles, hover, checkbox.
  • base · 200ms, Default transitions and reveals.
  • slow · 320ms, Drawers, dialogs, page-level motion.
  • ease-standard · cubic-bezier(0.2, 0, 0, 1), Most transitions.
  • ease-entrance · cubic-bezier(0.22, 1, 0.36, 1), Entering surfaces.

Dashboard framework

KPI cards, health indicators, progress and alerts share one shape so any widget can live in any dashboard.

Readiness

82

6 ptsLast 30 days
Live opportunities

14

2
Expiring evidence

3

1
Active buyers

9

Across 4 countries
Submission completeness78%

19 of 25 components complete

Compliance coverage94%
Pricing confidence46%

Two cost lines unverified

  1. Submission package generated

    2h ago
  2. Tax clearance flagged expiring

    Yesterday
    Renewal owner assigned to Finance.
  3. Copilot drafted the technical response

    2 days ago
  4. Opportunity qualified

    5 days ago

Data grid

Sortable, filterable, screen-reader correct. One table component for every module.

Example opportunity pipeline
National grid metering rolloutMinistry of PowerReady · 9112 Sep
Regional logistics frameworkPorts AuthorityNearly ready · 7428 Aug
Clinical supplies renewalHealth ServiceAt risk · 5805 Oct
Data centre managed servicesFederal RevenueNot ready · 4119 Aug

Workspace experience

Every procurement opportunity presents the identical eleven sections, in the identical order, with the identical navigation.

Overview: this section keeps the same layout grammar in every workspace: summary first, detail on demand, evidence one level deeper.

Global search

One intelligent index across every entity, with filters, saved searches and recent activity.

OpportunitiesDocumentsSuppliersContractsUsersOrganizationsAI conversationsTemplatesReports

Command palette

Press ⌘K (Ctrl-K) anywhere on the platform. Keyboard-first is the fastest path to every action.

⌘K
  • Open Home
  • Open Platform overview
  • Open Procurement OS™
  • Open Readiness dashboard
  • Open Portfolio
  • Open Design System
  • Open Product Dictionary™
  • Open CoreTender Industry Editions™
  • Create opportunity
  • Generate proposal
  • Build submission package
  • Review risks

AI experience

The AI Procurement Copilot™ behaves like a teammate: it states confidence, cites sources, shows its reasoning, and always hands the decision to a human.

What is blocking this bid?
AI Procurement Copilot™
High confidence · 86%
Two blocking gaps. Renew the tax clearance before 2 September and attach local content evidence for section 4.3: closing both moves readiness from 74 to an estimated 89.
Reasoning summary

Two of 23 readiness dimensions are below threshold. The tax clearance expires before the submission date, and the local content declaration has no supporting evidence attached.

  • Tax clearance 2025.pdf

    Evidence Vault · expires 2 Sep

  • ITT Section 4.3

    Local content requirement

Requires human approval
Current position compared with Copilot recommendation
DimensionCurrent positionCopilot recommendation
Readiness74 · At risk89 · Ready
PricingCost-plus 18%Blended 14% with volume commitment
PartnerNoneLocal integrator for 30% content

Forms & inputs

Labelled, described, inline-validated and keyboard complete.

We only use this for procurement notifications.

Empty, loading & error states

Every asynchronous surface ships all three.

No opportunities yet

Connect a source or add your first opportunity to start scoring readiness.

  • Tip: ⌘K → Create opportunity
  • Tip: the Copilot can qualify a tender from a PDF
Loading

Accessibility: WCAG 2.2 AA

Not a review stage. A build-time property of every component.

  • WCAG 2.2 AA contrast for text, icons and chart series in both themes.
  • Visible 2px gold focus ring on every interactive element, never removed.
  • Skip-to-content link as the first tab stop on every page.
  • Tables use real th/scope markup with captions for screen readers.
  • Charts ship an accessible data table fallback, never colour alone.
  • High-contrast and reduced-motion are user preferences, not OS-only.
  • Tap targets are at least 44×44px on touch viewports.

Iconography & illustration

One icon library, one illustration language, zero AI clichés.

  • lucide-react is the only icon library; never mix icon sets.
  • Inline icon size is 16px (size-4); standalone controls use 20px (size-5).
  • Icons are decorative by default. Add aria-hidden and label the control.
  • Never use a sparkle as the AI identity; use the Copilot mark.
  • Illustration style: flat geometric line work in ink + gold, no gradients, no robots or brains.

See CEDS™ at work across the Procurement OS