Trmeric — Design System v2

Color Tokens

All design tokens · click hex to copy · 28 colors across 5 palettes

Brand

Orange

#FFA426

--orange

Orange Deep

#F89622

--orange-deep

Orange Dark

#E67E10

--orange-dark

Orange Subtle

#FFF8F0

--orange-subtle

Yellow

#FBB03B

--yellow

Neutral Scale

N-900

#1a1a1a

--n900

N-800

#333333

--n800

N-600

#666666

--n600

N-400

#999999

--n400

N-200

#e5e5e5

--n200

N-100

#f5f5f5

--n100

N-50

#fafafa

--n50

Rhizome — Cut root interior, saffron-orange flesh

Rh-900

#5c1f00

--rh900

Rh-800

#8b3a00

--rh800

Rh-600

#c96a00

--rh600

Rh-400

#e89240

--rh400

Rh-200

#f5d0a0

--rh200

Rh-100

#fbecd8

--rh100

Rh-50

#fef8f0

--rh50

Powder — Dried ground spice, dusty golden-amber

Pw-900

#4a2e00

--pw900

Pw-800

#7a5000

--pw800

Pw-600

#b8860b

--pw600

Pw-400

#d4a843

--pw400

Pw-200

#edcf82

--pw200

Pw-100

#f7eac4

--pw100

Pw-50

#fdf8eb

--pw50

Leaf — Tropical plant leaf, deep waxy forest green

Lf-900

#0f2410

--lf900

Lf-800

#1a3d1c

--lf800

Lf-600

#2e6b31

--lf600

Lf-400

#5a9e5e

--lf400

Lf-200

#b4d9b6

--lf200

Lf-100

#dceedd

--lf100

Lf-50

#f2f9f2

--lf50

Root Skin — Dried rhizome exterior, earthy warm brown

Rs-900

#2c1a08

--rs900

Rs-800

#4a2e12

--rs800

Rs-600

#7a5230

--rs600

Rs-400

#a8815a

--rs400

Rs-200

#d9bfa0

--rs200

Rs-100

#ede0d0

--rs100

Rs-50

#f8f3ec

--rs50

Stem — Yellow-Green Petiole, the bridge

Sm-900

#212b06

--sm900

Sm-800

#384a0c

--sm800

Sm-600

#5e7a1a

--sm600

Sm-400

#8da63c

--sm400

Sm-200

#c3d47e

--sm200

Sm-100

#e2ecb8

--sm100

Sm-50

#f4f8e4

--sm50

Semantic

Success

#10b981

--success

Success Bg

#f0fdf4

--success-bg

Error

#ef4444

--error

Error Bg

#fef2f2

--error-bg

Warning

#f59e0b

--warning

Info

#3b82f6

--info

Accent / AI

Purple (AI)

#8b5cf6

--purple

Cyan

#06b6d4

--cyan

Lime

#84cc16

--lime

Pink

#ec4899

--pink

AI Gradient

135° pur→org

--gradient-ai

Typography

Poppins only · weights 400 500 600 700 · click row to copy specs

Display

32px · 700 · -0.02em

Enterprise Platform

Heading 2

24px · 600

Demand Management

Heading 3

20px · 600

Resource Allocation

Heading 4

16px · 600

Active Demands Q2

Body

14px · 400 · 1.6lh

Trmeric helps enterprise teams align workforce capacity with strategic demand.

Caption

12px · 400 · N-400

Updated 3 minutes ago · 42 active demands

Eyebrow

10px · 700 · UC · 0.1em

Strategic Projects · Q2 2025

Spacing & Radius

4px base grid · 9 spacing steps · 7 border-radius values

Spacing Scale

4px

--s1

8px

--s2

12px

--s3

16px

--s4

20px

--s5

24px

--s6

32px

--s8

40px

--s10

48px

--s12

Border Radius

0

none

4px

--r-sm

6px

--r-md

8px

--r-base

12px

--r-lg

16px

--r-xl

full

--r-full

Elevation

6 shadow levels · canvas background #F0F2F5 · click to copy CSS

Flat

border

L1

--shadow-1

L2

--shadow-2

L3

--shadow-3

L4

--shadow-4

L5

--shadow-5

Buttons

Always pill shape (border-radius: --r-full) · 3 sizes · 5 variants

Variants

Sizes

With Icons

Chips & Badges

Status chips, type chips, filter pills, count badges

Status Chips

● Active ● In Progress ● On Hold ● At Risk ● Completed ● Under Review

Type Chips

Project Demand Portfolio

Filter Pills (click to toggle)

Count Badges

12 5 43 New AI

Design Tokens

Shell

Chip padding

6px 14px· all variants

Chip radius

var(--r-full)· pill — no exceptions

Chip font

12px / 600· Poppins

Chip gap (icon+label)

6px

Status colors

Success bg / text

#d1fae5 / #065f46· Available, Active

Warning bg / text

#fef3c7 / #92400e· At Risk, Pending

Error bg / text

#fee2e2 / #ef4444· Blocked, Overdue

Info bg / text

#dbeafe / #1d4ed8· In Progress

Neutral bg / text

var(--n100) / var(--n700)· Draft, Inactive

AI / Tango badge

Tango match bg

rgba(109,40,217,.08)

Tango match text

var(--purple)· #6d28d9

Tango match prefix

✦· star glyph

Priority indicators

High

#ef4444 dot· 8px circle

Medium

#a05500 dot· --rh600

Low

#10b981 dot· --success

Form Inputs

All field variants · Carta-style label hierarchy · title bolder than value · orange focus ring

Label hierarchy (Carta-style)

Field title13px · 700 · --n900 · dominant

Helper / hint text11.5px · 400 · --n600 · subordinate

Input value13px · 500 · --n900 · confident

Placeholder13px · 400 · --n400 · recessive

Optional11px · 400 · --n400 · italic · only shown on exceptions

Required is the default — don't label it. Every field is required unless marked otherwise. Labelling every required field with an orange badge creates visual noise that competes with the label title. Mark only the exceptions: show Optional in quiet italic when a field is genuinely non-mandatory. The title weight carries the authority on its own.

Text Input — default

Demand Name

Required

Business Unit Which BU is sponsoring this demand?

Optional

States — focus · error · disabled

Start Date

Required

Focus state — orange ring

Headcount

Required

Must be a number — e.g. 4

Programme Code

Optional

Disabled — system-assigned

Search Input

Pill shape · icon left · used in tables, panels, and global bar

Select — single

Priority Sets sequencing in the demand queue

Required

Lifecycle Stage

Toggle Group — mutually exclusive

Allocation Type

Budget TypeDetermines reporting stream

Chip Select — single choice

StatusCurrent demand state

Confidence Level

Chip Select — multi (toggle on/off)

RAID TypesSelect all that apply to this demand

Delivery StreamsCan span multiple

Multi-select Tag Input

Skills Required Type a skill and press Enter to add

Required

IoT Machine Learning SAP

Stakeholders People who need to be kept informed

Siddharth

Long Description — prose with word count + Tango

Business Problem Focus on the pain — not the solution. What would happen if this demand was never addressed?

Required 33 w

33 words

Expected Outcomes Measurable results that define success for this demand

Optional 0 w

0 words

Numeric Stepper

Headcount RequiredFTE count needed for this demand

Required

Duration (months)

Prefixed / suffixed inputs

Estimated BudgetFull demand budget across all streams

Required

$

Allocation %What % of this resource's time?

%

Cards

Hover to see elevation lift · border-radius --r-lg (12px)

AI Platform Migration

In Progress TRANSFORM

Migrate core infrastructure to AI-native stack. Critical path dependency on cloud team.

Progress68%

AJ

SR

MK

Due Jun 30

Tango Insight

3 alerts · just now

Resource utilization on TRANSFORM is at 94%. Consider reallocating 2 engineers from RUN portfolio to prevent burnout.

Avatars

4 sizes · stacked with -8px margin · 2px white border

Sizes

AJ

SR

MK

RB

DL

Stacked + Overflow

AJ

SR

MK

RB

+4

With Status Ring

AJ

SR

RB

Person Card

AK

Abhishek Kumar

Resource Manager · Meridian

React Node.js AWS

Alerts & Toasts

Icon badge style · no left border strip · semantic colours

Alert Variants

✓

Demand approved. Q2 AI Platform Migration approved by stakeholders.

!

Capacity warning. Transform portfolio is at 94% utilization.

✕

Conflict detected. Resource over-allocation in Cloud team for Q2.

i

Tango insight. Based on historical data, this demand may face a 2-week delay.

Toast Notifications

✓

Changes saved successfully ×

!

Failed to save — try again ×

Toggles

Click to toggle · orange when on · N-200 when off

Toggle Controls

AI Suggestions

Auto-prioritize

Notifications

Read-only (disabled)

Filter Tabs

All

Active

At Risk

Completed

Progress

8px track height · orange fill · border-radius full · semantic colours

Progress Bars

AI Platform Migration68%

Cloud Infrastructure92%

Data Governance34%

Security Hardening12%

Charts & Graphs

Donut charts · sparklines · mini bar charts · progress bars · all visualizations the platform uses

Thin Donut Charts

Used in the Potential Hub matchmaking panel to show match scores across multiple criteria. Thin ring, percentage in centre, semantic colour.

90%

Excellent

75%

Strong

55%

Partial

25%

Weak

Sparklines

Inline trend lines for KPI cards, executive summary strips, and hub widgets. Sit behind a number to show trend context.

Active Demands

142

▲ 12% vs last month

At Risk

4

▼ 25% vs last month

Budget Utilised

$1.2M

— stable

Mini Bar Charts

Horizontal proportional bars for distribution data — used in the Exec Summary strip and Tango home page cards.

Portfolio Allocation

Enterprise

78%

OT Automation

62%

Data & AI

45%

Infrastructure

28%

Progress Bars

For initiative completion and demand health. Warm root-skin colour for ambient progress; semantic colours kick in for threshold breaches.

AI Platform Migration68%

Cloud Infrastructure92%

Data Governance34%

Security Hardening12%

Allocation Segments

Split bars used in resource cards and roster tables to show allocation across a 3-month rolling window. Each segment is independently coloured by its own threshold.

David Chen

55%

Kavita B

75%

Rohan V

140%

Stage Status Bars

Discrete segmented bars used in the demand list to show position in the lifecycle.

Solutioning

Execution

Scoping

Design Tokens

Thin Donut

Container52 × 52px

SVG radiusr=20

Stroke width4px

Trackvar(--n100)

Line capround

Rotation-90deg (12 o'clock start)

Centre label11px / 800 / token colour

Excellent (90+)

#10b981

Strong (70–89)

var(--lf600)

Partial (40–69)

var(--rh600)

Weak (0–39)

var(--error)

Sparklines

Container100 × 24px

viewBox0 0 120 28

Stroke width2px

Opacity0.5 (background trend)

Up trend#10b981 / --success

Down trendvar(--error)

Stablevar(--orange)

Mini Bar Chart

Bar height6px

Radius9999px (pill)

Trackvar(--n100)

Row grid90px 1fr 36px

Row gap8px

Animationwidth 600ms cubic-bezier(.4,0,.2,1)

Progress Bar

Height6px

Default fillvar(--rs600)

Healthy (≥80%)--success

At risk (30–79%)#b45309

Critical (<30%)var(--error)

Allocation Segments

Segment height3px

Gap3px

Trackvar(--n200)

OK (≤80%)#639922

Warn (81–100%)#b45309

Over (>100%)#E24B4A

When to use which

Donut — multi-criteria score in a small space (matchmaking panels).

Sparkline — trend context behind a single number (KPI cards).

Mini bar chart — distribution across 3–6 categories (exec summary).

Progress bar — single value against 100% (initiative completion).

Allocation segments — multiple time periods in one row (resource roster).

Stage status bar — discrete lifecycle position (demand list).

Filter & Tabs

Filter pills and underline tab navigation

Filter Pills

Underline Tabs

Overview

Timeline

Resources

RAID

Design Tokens

Filter pill

Default bg

var(--n100)

Default text

var(--n700) / 12px / 600

Default border

1px var(--n200)

Active bg

var(--orange-subtle)

Active text

var(--orange-dark)

Active border

1px var(--orange)

Radius

var(--r-full)

Padding

5px 14px

Transition

120ms ease

Tab bar

Active indicator

2px bottom border var(--orange)

Active text

var(--n900) / 13px / 600

Inactive text

var(--n500) / 13px / 500

Tab padding

8px 16px

Bar border-bottom

1px var(--n200)

Count badge

Background

var(--n200)

Text

var(--n700) / 9px / 700

Radius

10px

Padding

1px 5px

KPI Strip

Hover to see orange border · 26px/700 big number · delta chip

Total Demands

142

▲ 12% vs last month

Resources Allocated

284

▲ 8% utilization

At Risk

7

▼ needs attention

Capacity Available

43%

— stable

Design Tokens

Card shell

Background

white

Border

1px var(--n200)

Radius

var(--r-lg)

Shadow

var(--shadow-1)

Padding

var(--s4) var(--s5)

Typography

Label

11px / 500 / var(--n500)· uppercase optional

Value

24px / 800 / var(--n900)· primary number

Delta up

11px / 600 / var(--success)· ▲ positive

Delta down

11px / 600 / var(--error)· ▼ negative

Delta neutral

11px / 500 / var(--n500)· — no change

Strip layout

Display

flex, gap var(--s4)

Card min-width

120px

Card flex

1 (equal width)

Stage Stepper

Done · active (orange) · pending states for demand lifecycle

✓

Shape

✓

Align

3

Prioritise

4

Execute

5

Close

Currently in Prioritise stage

Demand is being ranked against portfolio priority matrix. Estimated 3 days to completion.

Design Tokens

Connector line

Color

var(--n200)· inactive segment

Active color

var(--orange)· completed segment

Height

3px

Radius

2px

Stage dot

Size

24px × 24px

Done bg

var(--orange)

Done icon

white checkmark, 10px

Active bg

white

Active border

2px var(--orange)

Pending bg

var(--n100)

Pending border

2px var(--n200)

Stage label

Font active

12px / 700 / var(--n900)

Font pending

12px / 500 / var(--n400)

Font done

12px / 500 / var(--n600)

Sub-label

10px / 400 / var(--n400)

Layout

Stage gap

flex:1 (equal distribution)

Label align

center below dot

Min width

80px per stage

Demand Card

Full anatomy of a demand card with all states

AI Platform Migration

In Progress

Migrate to AI-native stack. Critical path dependency on cloud team. Q2 strategic priority.

TRANSFORM Q2 2025 Meridian Client

Progress68%

AJ

SR

Due Jun 30

Data Mesh Architecture

At Risk

Critical architectural changes required. Blocker on data governance approval. Overdue.

TRANSFORM P1

Progress22%

RB

Overdue

Design Tokens

Card shell

Background

white

Border default

1px var(--n200)

Border active

1.5px var(--orange)

Radius

var(--r-xl) / 16px

Shadow

var(--shadow-2)

Padding

var(--s5)

Hover shadow

var(--shadow-3)

Header

Title

15px / 700 / var(--n900)

Sub-meta

11px / 400 / var(--n500)

Client logo area

32px height

Stage progress bar

Track bg

var(--n200) / 3px height

Fill active

var(--orange) / 3px

Fill done

var(--success)

Radius

2px

Priority chip

H bg/text

#fee2e2 / #b91c1c

M bg/text

var(--pw100) / var(--pw800)

L bg/text

#d1fae5 / #065f46

Font

10px / 700

Radius

var(--r-full)

Padding

3px 9px

Allocation strip

Bar height

3px

≤80% fill

var(--success) / #639922

81-100% fill

var(--warning) / #b45309

>100% fill

var(--error)

Footer meta

Font

11px / 500 / var(--n500)

Icon

10px / var(--n400)

Resource Card

Card view · list view with toggle-able columns · allocation segments · conflict states · Tango match badge

Card View

Hard-Lock · cannot be moved

DC

David Chen

✦ Tango

IoT Solutions Architect · Data & AI

Allocation · May–Jul

55%

MayJunJul

Skill gap — Python missing

MR

Maya Rodriguez

ML Engineer · ML Ops

Allocation · May–Jul

90%

MayJunJul

Over-allocated by 40% — conflict

RV

Rohan Verma

SAP Functional Lead · Enterprise

Allocation · May–Jul

140%

MayJunJul

AK

Arjun Kumar

Business Analyst · Strategy

Allocation · May–Jul 0% (Bench)

MayJunJul

Border States

Conflict · white bg · error border + red dot + 140% · over-allocated

Skill risk · white bg · amber border + hover tooltip · missing skill

Default · 1.5px var(--n200) · no issue

Allocation Segments

.ok ≤80% · green

.warn ≤100% · amber

.over >100% · red

.empty free period · grey

Name Badges

✦ Tango match ⚠ 40% Over-limit ⚠ Skill Gap Risk

Lock Type Icons

Hard-Lock · closed shackle · resource fully committed, cannot be moved

Soft-Lock · open shackle · preferred allocation, negotiable with approval

Unallocated · no lock icon · available for any demand

List View — Density · Column Toggle · Row States

Three density modes · conflict and skill-risk row tinting · Tango match badge · ⋮ context button on hover · column visibility toggle.

8 resources

Name Show / Hide Columns Role Portfolio Skill Location Alloc. Type Allocation Next Available Status	Role	Portfolio	Skill	Location	Alloc. Type	Allocation	Next Available	Status
RV Rohan Verma 40% Over-limit	SAP Functional Lead SAP S/4HANA, ECC 6.0	Enterprise Systems	SAP, ERP	NRIO · Perth	Hard-Lock	140%	May 12	Over-allocated
DC David Chen ✦ 95% match	IoT Solutions Architect Python, MQTT, Azure IoT	OT Automation	Python, IoT	NRIO · RROC Perth	Hard-Lock	55%	Now	Available
KB Kavita B Data Scientist · NRIO Perth	Data Scientist ML, TensorFlow, AWS	Data & AI	ML, Python	NRIO · Brisbane	Soft-Lock	75%	Aug 1	Soft-Lock
NK Nadia Kovacs Only SCADA SME	Network Architect SCADA, OT Networks	Infrastructure Mgmt	SCADA, OT	NRIO · Kalgan Site	Hard-Lock	100%	Oct 30	Skill Risk

+ icon in Name header → opens column menu

Density: Default · Relaxed (taller, shows role skills) · Compact (text-only, hidden avatars)

conflict-flag · skill-flag · tango-match — inline badges in name cell, hidden in compact

⋮ button → appears on row hover · hidden in compact density

Design Tokens

Card states

Default

1px var(--n200) border

Conflict

1.5px var(--error) border + error-bg

Skill risk

1.5px var(--warning) border + warning-bg

Empty

1.5px dashed var(--n200)

Hover shadow

var(--shadow-3)

Avatar

Size

34px × 34px circle (table) / 40px (card)

Font

11-13px / 700

Colors

turmeric -50 bg / -600 text (per person)

Status dot

12px / border 2px white

Dot ok

#3B6D11 / ≤80%

Dot warn

var(--warning) / ≤100%

Dot over

var(--error) / >100%

Row flags

Conflict flag bg

rgba(239,68,68,.06)

Conflict flag text

var(--error) / 9px / 700

Skill flag bg

rgba(245,158,11,.08)

Skill flag text

var(--warning) / 9px / 700

Tango match bg

rgba(109,40,217,.08)

Tango match text

var(--purple) / 9px / 700

Allocation bar

Height

3px

Radius

2px

OK fill (≤80%)

#639922

Warn fill (≤100%)

var(--warning)

Over fill (>100%)

#E24B4A

Track

var(--n200)

Alloc % text

OK color

#1a5c1a

Warn color

#b45309

Over color

var(--error)

Font

11px / 700

Status chips

Available

success-bg / #065f46

Over-allocated

error-bg / var(--error)

Soft-Lock

warning-bg / #92400e

Skill Risk

warning-bg / #92400e

Radius

var(--r-full)

Font

10px / 700

Padding

3px 9px

Density modes

Default padding

13px 16px

Relaxed padding

18px 16px (shows sub-labels)

Compact padding

5px 10px (no avatar, col borders)

RAID Item

Risk · Assumption · Issue · Dependency · orange implication sub-card · semantic icon badge

Risk — High

Risk High

Lead resourcing gap on NRIO-INF-007

Implication: 11-day window before SLA breach if no backfill is assigned this week.

Issue — Open

Issue Open

Scope document not signed off by stakeholders

Dependency Blocking

Cloud team approval required before cutover

Icon badge: 28px · 8px r · semantic bg 8% opacity

Type label: 9px 700 uppercase · semantic colour

Implication strip: orange-subtle bg · 3px left border

Title: 13px 500 · n900

Design Tokens

Card shell

Background

white

Border

1px var(--n200)

Radius

var(--r-lg) / 12px

Shadow

var(--shadow-1)

Padding

14px 16px

Type badge (icon + label)

Risk bg

#fee2e2 / text #b91c1c

Assumption bg

#dbeafe / text #1d4ed8

Issue bg

#fef3c7 / text #92400e

Dependency bg

var(--n100) / text var(--n700)

Badge radius

var(--r-base) / 6px

Badge font

10px / 700

Severity dot

High

#ef4444 / 8px circle

Medium

#f59e0b / 8px circle

Low

#10b981 / 8px circle

Content

Title

13px / 600 / var(--n900)

Owner

11px / 500 / var(--n600)

Due date

11px / 500 / var(--n500)

Overdue date

11px / 600 / var(--error)

Status chip

Open

warning-bg / #92400e

Resolved

success-bg / #065f46

Closed

n100 / var(--n600)

Action Row

Inline action item · owner avatar · due date · priority dot · status chip · hover row

Action

Owner

Due

Priority

Status

Assign backfill for NRIO lead role

AJ

Aravind

2 days

High

Open

Review scope doc with stakeholders

KB

Kevin

5 days

Med

In Progress

Submit Q3 budget reforecast

RP

Roshan

10 days

Low

Done

Header: n50 · 10px 700 uppercase

Owner avatar: 22px circle · semantic fill

Priority dot: 7px circle · semantic colour

Status chip: 10px 600 · 4px r · semantic bg

Row hover: n50 background

Design Tokens

Row shell

Background

white

Hover bg

var(--n50)

Border-bottom

1px var(--n100)

Padding

10px 16px

Grid cols

2fr .8fr .8fr .7fr .6fr

Header row

Background

var(--n50)

Font

9px / 700 / var(--n500) / uppercase

Padding

8px 16px

Border-bottom

1px var(--n200)

Action title

Font

13px / 600 / var(--n900)

Sub-label

11px / 400 / var(--n500)

Priority dot

Size

8px circle

High

#ef4444

Medium

var(--rh600) / #a05500

Low

var(--success)

Assignee avatar

Size

22px circle

Font

8px / 700 / white

Colors

turmeric -50 bg / -600 text

Due date

Normal

11px / 500 / var(--n600)

Overdue

11px / 600 / var(--error)

Today

11px / 600 / var(--warning)

Context menu

Icon

⋮ / 16px / var(--n400)

Show on

row hover

Hover bg

var(--n100)

Size

24 × 24px / r-6px

Idea Card (Youreka)

Idea submission · upvote box · stage chip · tag pills · owner · engagement counts

Predictive demand flagging using historical project data

Use ML models to flag high-risk demands 2–3 weeks before SLA breach based on pattern recognition.

42

Under Review AI / ML Risk Mgmt

SB

Siddharth · 3 days ago

6

128

Tokens

Title · 13.5px 600 · n900

Desc · 11.5px · n500 · 1.6lh

Upvote box · orange border · orange-subtle bg

Vote count · 14px 700 · orange

Stage chip · semantic bg · 99px r · 10px 600

Tag pill · n50 bg · n200 border

Comments · 11px · n400 · icon + count

Views · 11px · n400 · eye icon

Design Tokens

Card shell

Background

white

Border

1px var(--n200)

Radius

var(--r-lg)

Shadow

var(--shadow-2)

Padding

16px

Max width

400px

Hover shadow

var(--shadow-3)

Hover transition

150ms ease

Header

Title

14px / 700 / var(--n900)

Source label

10px / 600 / var(--n500) / uppercase

Source icon size

10px

Tag pills

Background

var(--n100)

Text

var(--n700) / 11px / 600

Radius

var(--r-full)

Padding

3px 9px

Body text

Font

12px / 400 / var(--n700)

Line height

1.65

Max lines

3 (line-clamp)

Engagement footer

Icon color

var(--n400)

Count color

var(--n600) / 11px / 500

Border-top

1px var(--n100)

Padding-top

var(--s3)

Owner avatar

Size

20px circle

Font

7px / 700

Colors

turmeric -50 bg / -600 text

Stage badge

Background

var(--rh50)

Text

var(--rh600) / 10px / 700

Radius

var(--r-full)

Tables

Three grid patterns across Trmeric — same token foundation, different data models · no new styles

One token set, three grids

All three tables share: #fafafa header · 9px 700 uppercase th · var(--n100) hover · 1px N-100 row divider · sticky header · border-collapse. No new styles are introduced — each table is a data arrangement of the same primitives.

Table 1 — Solution Manager · Demand List

Click the + icon in the Demand Name header to toggle columns. Stage Status and Actions are always pinned.

Demand Name Show / Hide Columns Portfolio Priority Budget Owner Key Results	Portfolio	Priority	Budget	Owner	Stage Status
Meridian Digital Workforce Transformation	⊞ Meridian Enterprise	⬤ H	$480,000	RS Roshini	Solutioning 4 days, 3 hrs
Trucible Enterprise Context Wikipedia	⊞ Trucible	⬤ M	$206,360	SD Siddharth	Execution 10 days, 19 hrs
Kalgan Ranges AI Safety Analytics	⊞ Talvera NRIO	⬤ L	$94,000	AK Abhishek	Scoping 2 days

Showing 3 of 14 demands

Table 2 — Potential Hub · Demand–Role Expandable Grid

Click the + icon in the Demand header. Demand/Project and CTA are always pinned. Click chevron rows to expand/collapse roles.

Demand / Project Show / Hide Columns Phase Staffing Tango Status Period Blocker Flag	Phase	Staffing	Tango Status	Period	Blocker
Kalgan Ranges AI Safety Analytics Talvera NRIO · OT Digitisation · May–Oct 2026	Solutioning	1/3	✦ Matches Ready	May–Oct 2026	⚠ Blocker
IoT Data Engineer May 1 – Oct 30 · 100%			✦ 2 High Matches
ML Engineer Jun 1 – Oct 30 · 80%			1 Partial Match
Project Manager May 1 – Oct 30 · 50% · TBTyler Brooks			✓ Allocated
North Ridge SCADA Overhaul Talvera NRIO · Mining Systems · Jun–Aug 2026	Execution	0/2	0 Matches	Jun–Aug 2026	⚠ Blocker
Legacy SCADA SME Jun 1 – Aug 1 · 100%			0 Matches

Table 3 — Resource Roster · Column-Toggle List

Three density modes · left-border row states · Tango match badge · ⋮ context on hover

Name Show / Hide Columns Role Portfolio Skill Location Alloc. Type Allocation Next Available Status	Role	Portfolio	Skill	Location	Alloc. Type	Allocation	Next Available	Status
RV Rohan Verma 40% Over-limit	SAP Functional Lead SAP S/4HANA, ECC 6.0	Enterprise Systems	SAP, ERP	NRIO · Perth	Hard-Lock	140%	May 12	Over-allocated
DC David Chen ✦ 95% match	IoT Solutions Architect Python, MQTT, Azure IoT	OT Automation	Python, IoT	NRIO · RROC Perth	Hard-Lock	55%	Now	Available
KB Kavita B Data Scientist · NRIO Perth	Data Scientist ML, TensorFlow, AWS	Data & AI	ML, Python	NRIO · Brisbane	Soft-Lock	75%	Aug 1	Soft-Lock
NK Nadia Kovacs Only SCADA SME	Network Architect SCADA, OT Networks	Infrastructure Mgmt	SCADA, OT	NRIO · Kalgan Site	Hard-Lock	100%	Oct 30	Skill Risk

Shared Token Reference — All Three Tables

Header row

bg #fafafa
font 9px 700 uppercase
color var(--n400)
border-bottom 1px #e5e5e5
position sticky top:0

Data row

divider 1px var(--n100)
hover bg #fafafa or orange-subtle
active left 3px #FFA426
conflict left 3px #ef4444
padding T1 12px 16px

Cells

name 14px 700 #1a1a1a
meta 11px var(--n400)
portfolio chip n100 bg · r-base
status chip semantic bg · pill
avatar 26px circle gradient

Design Tokens

Shared header

Background

var(--n50)

Font

10px / 700 / var(--n500) / uppercase

Letter spacing

.07em

Border-bottom

1px var(--n200)

Padding

10px 16px

Table 1 — Demand List rows

Row padding

11px 16px

Row border-bottom

1px var(--n100)

Row hover bg

var(--orange-subtle)

Name font

14px / 600 / var(--n900)

Portfolio chip bg

var(--n100)

Portfolio chip text

var(--n600) / 10px / 600

Stage label color

var(--rh600) / #a05500

Stage sub

10px / 400 / var(--n500)

Table 2 — Potential Hub

Group row padding

11px 16px

Role sub-row padding

8px 16px → 8px 16px 8px 36px

Group name

14px / 700 / var(--n900)

Role name

13px / 500 / var(--n700)

Staffing bar height

3px

Staffing bar fill

var(--orange)

Table 3 — Resource Roster

See Resource Card tokens

above — identical component

Column toggle menu

Trigger icon

11px plus SVG / var(--n200) → var(--orange) on hover

Menu bg

white

Menu border

1.5px var(--n200)

Menu radius

var(--r-lg)

Checkbox on

var(--orange) bg + white check

Checkbox off

var(--n200) border

Overlay Panels

All right-side slide-in panels · canvas edit · demand detail · matchmaking · add member · shared shell tokens

A — Header

Business Problem

AI-Driven Project Assessment

B — Body (scrollable)

Section label

Field label

Field value or input

Meta label

Value

Suggested

Tango value

C — Footer

1

2

3

4

5

6

A — Header

1

Icon

32×32px square. border-radius: var(--r-base). Colour communicates panel type — orange (edit), blue (info), purple (AI), green (add), red (alert).

32px × 32px--r-base16px SVG

2

Title + Subtitle

Title: 13px 600 --n900. Subtitle: 11px --n400. Optional eyebrow above title for context panels (e.g. "Open Role").

truncate overflowwhite-space: nowrap

3

Close Button

28×28px. Same --r-base radius. Transparent → --n100 on hover. SVG × icon only — no text.

28px × 28px--n400 → --n800

B — Body

4

Section Label + Fields

Section labels: 10px 700 uppercase --n400. Fields use .dsp-field → label + input/select/prose. Focus ring: orange + 3px shadow.

16px body paddingoverflow-y: auto

5

Tango-Suggested Cell

Warm --orange-subtle tint with rgba(255,164,38,.25) border signals AI-filled values. cursor: default — not interactive.

read-onlyuser-select: none

C — Footer

6

Footer Actions

Always --n50 background. 1px --n100 top border. Right-aligned: ghost Cancel + orange primary CTA. Optional left slot for status notes or Tango nudge text.

btn btn-ghost btn-smbtn btn-primary btn-sm

Shell

width 340–400px slide translateX(100%)→0 320ms cubic(0.4,0,0.2,1) border-left 1px --n200 shadow -4px 0 24px rgba(0,0,0,.08) background #fff

Panel 1 — Canvas Edit (canvas-view)

Slides in from right at 460px. Orange header with section icon. Tango assist strip (purple/white). Field types: prose textarea with word count + Ask Tango, text input, select. Cancel / Save footer.

Business Problem Canvas · AI-Driven Project Assessment

Click any section → opens edit panel

Business Problem

AI-Driven Project Assessment

Tango can help AI-assisted

Business Problem

Focus on the pain — not the solution. What would happen if this demand was never addressed?

Required33 w

33 words

Business Unit

Optional

Priority

Required

Panel 2 — Demand Detail (resource manager)

White header — no colour. Phase chip + blocker badge. 3-stat KPI grid (Roles / Filled / Open). Role rows with match-state dots. Tango insight box. Full-width footer CTA.

Potential Hub / roster → click a demand row

Kalgan Ranges AI Safety Analytics

Talvera NRIO · OT Digitisation · May–Oct 2026

Solutioning ⚠ Blocker

3

Roles

1

Filled

2

Open

Roles

IoT Data Engineer

May 1 – Oct 30 · 100%

✦ 2 High

ML Engineer

Jun 1 – Oct 30 · 80%

1 Partial

Project Manager

May 1 – Oct 30 · 50% · Tyler Brooks

✓ Done

✦

Tango Insight

David Chen matches 92% on IoT skills with 45% spare capacity — best fit for the open engineer role.

Panel 3 — Matchmaking (resource manager)

Role banner + demand context. Top candidate: orange border, match score %, 3 criteria bars (skill/availability/experience). Soft-Lock AI gradient CTA. Alternatives list. Override button at bottom.

Click "Match →" on any open role

Open Role

IoT Data Engineer

Kalgan Ranges AI Safety Analytics · May–Oct 2026

DC

David Chen

IoT Solutions Architect

92%

Match

Skill fit

95%

Availability

55%

Experience

88%

Other candidates

KB

Kavita B

Data Scientist · 75% allocated

74%

LF

Lucia Ferreira

Data Analyst · Available now

61%

Panel 4 — Add Member (resource manager)

Search pill input. Grouped rows (Available / At capacity). Avatar + name + role + utilisation %. + button toggles to green tick on click. 100% resources are disabled. Done CTA shows added count.

Team panel → "Add member" button

Add Member

NRIO Infrastructure Team

Available

DC

David Chen

IoT Architect · 55% allocated

55%

LF

Lucia Ferreira

Data Analyst · Available now

0%

At capacity

NK

Nadia Kovacs

Network Architect · Hard-Lock

100%

RV

Rohan Verma

SAP Lead · Over-allocated

140%

Panel 5 — Action Detail Panel (actions hub)

Slides in from the right when an action row is clicked. Status selector as a clickable pill in the header. CTAs: Mark Done (primary) · Reassign (ghost). 2-col field grid, audit trail with connecting line, comment thread.

Actions Hub → click any action row

Action Detail

Get RROC SME sign-off on telemetry schema

Demand

Kalgan Ranges AI Safety Analytics

Assigned to

AJ

Aravind J

Due date

Priority

High

Section

Field Testing

Audit Trail

Marked overdue — missed deadline

System · May 12, 09:00

Reassigned from Raj P to Aravind J

Sarah Chen · May 10, 14:22

Comments

AJ

Aravind J 2 hrs ago

Waiting for RROC team to confirm availability for review call

AK

Panel 6 — Conversational Action Creator (actions hub)

Replaces the static new action form. Type a natural description — Tango detects the assignee, verb, and date inline as coloured chips and auto-fills the detail cells below. Try: "Ashish to complete API design by May 30" or "Roshan review the resource plan Friday, high priority"

+ New Action → conversational panel

New action

Just describe it — Tango does the rest

Describe the action

0 w

Detected entities will appear here…

0 words

Priority

Status

Details

Assigned to

Not set

Action · detected

Listening…

Linked demand · suggested

DEM-247 · Workday SSO

Origin, watchers, dependencies

Optional

Date Range — Pattern Exploration New

Four alternate approaches to date range selection — from minimal to fully visual. Each is interactive. All use Trmeric tokens. Pick the one that feels right for the context.

A — Pill pair · minimal, low footprint

Project dates

6 months

Each pill opens its own date picker in a popover. Clean and compact. Best for tables, role rows, or anywhere space is tight. Duration auto-calculates.

B — Unified bar · confident, form-native

Project dates

Start

1 May 2026

End

30 Oct 2026

6 mo

Single bordered unit — looks like one field. Clicking start or end side highlights that half and opens a calendar below. Duration shown inline. Best for panels and forms.

C — Inline calendar · visual, click-to-select range

Project dates — click to set range

D — Quick presets · fastest for common durations

Project duration

Selected: 1 May – 31 Oct 2026 · 6 months

One-tap for the common cases. Custom expands to text inputs. Great for demand intake where durations follow predictable patterns.

Recommendation by context

Role rows / tables → Pattern A · least intrusive

Overlay panels / forms → Pattern B · feels like one field

Demand canvas / detailed edit → Pattern C · gives full visual control

Demand intake / creation flow → Pattern D · fastest for standard durations

Panel 8 — Create Demand · Delivery window (demand intake)

Shows the unified range bar in a real demand creation context. Click either side of the bar to open the calendar and select start or end date. All panels share the same calendar engine.

Demand Hub → "+ New Demand"

Create demand

Fill in the basics — Tango enriches the rest

Demand name

Delivery streamWhich investment category does this fall under?

Delivery windowWhen does this demand need to be delivered?

Start

Pick date

End

Pick date

Priority

Demand ownerAccountable for delivery outcomes

Shared Panel Tokens

Shell

width 380–460px
slide translateX(100%) → 0
easing 320ms cubic(0.4,0,0.2,1)
shadow -4px 0 24px rgba(0,0,0,.08)

Canvas Edit Header

bg --orange
height 58px
icon 32px · rgba(255,255,255,.25)
Tango strip var(--purple-bg) · purple

Field Labels

label 12px 700 n800
Required orange pill
Optional n100 bg n400 text
focus ring orange + 3px shadow

Design Tokens

Shared panel shell

Width

480px (right slide)

Background

white

Radius left edge

var(--r-xl)

Shadow

0 0 40px rgba(0,0,0,.12)

z-index

80

Overlay bg

rgba(0,0,0,.3)

Panel header

Height

56px

Padding

0 20px

Border-bottom

1px var(--n200)

Title font

15px / 700 / var(--n900)

Sub font

11px / 400 / var(--n500)

Close btn size

28 × 28px / r-6px

Context bar (panel)

Background

var(--orange-subtle)

Border-bottom

1px rgba(255,164,38,.2)

Text

var(--n800) / 11px / 600

Padding

7px 20px

Panel body

Padding

20px

Overflow

overflow-y: auto

Section label

10px / 700 / var(--n500) / uppercase

Divider

1px var(--n100)

Panel footer / CTA row

Background

var(--n50)

Border-top

1px var(--n200)

Padding

14px 20px

Primary btn

var(--orange) bg / var(--n900) text

Secondary btn

transparent / 1.5px var(--n200) border

Form fields inside panels

Label

12px / 600 / var(--n900)

Hint

11px / 400 / var(--n500)

Input bg

white

Input border

1.5px var(--n200)

Input focus ring

1.5px var(--orange) + 3px rgba shadow

Input radius

var(--r-base) / 8px

Input font

13px / 400 / var(--n900)

Navigation Shell

Topbar hub toggle · Left sidebar · Right dock · 12px gap · floating cards

Topbar — Hub Toggle

Interactive hub toggle — click to switch

AJ

Left Sidebar

Collapse

Shape

Overview

References & IDs

Business Problem

Strategy & Goals

Live

width220px

active bg

--orange-subtle

icon on

orange bg

Right Dock

Tango

Ideas

Roadmaps

Projects

Portfolios

Potential

Actions

More

width64px

icon sz17px

active

orange fill

Design Tokens

Left nav expanded

Width

240px

Background

white

Border-right

1px var(--n200)

Left nav collapsed

Width

56px

Collapse transition

width 280ms cubic-bezier(.4,0,.2,1)

Nav item default

Padding

9px 14px

Radius

var(--r-base)

Font

13px / 500 / var(--n700)

Icon

16px / var(--n400)

Gap

9px

Nav item active

Background

var(--orange-subtle)

Text color

var(--orange-dark)

Icon color

var(--orange)

Font weight

600

Left bar

3px var(--orange) inside padding

Nav item hover

Background

var(--n50)

Transition

120ms ease

Section label

Font

9px / 700 / var(--n400) / uppercase

Letter spacing

.1em

Margin

var(--s4) 14px var(--s2)

Logo area

Height

56px

Border-bottom

1px var(--n100)

Expanded width

102px (full wordmark)

Collapsed width

24px (icon crop)

Crop animation

overflow:hidden width transition 380ms

Hub toggle (topbar)

Track bg

var(--n100)

Track padding

3px

Active tab bg

var(--orange)

Active tab text

var(--n900)

Active tab shadow

none

Inactive hover

0 4px 16px rgba(255,164,38,.28)

Transition

150ms cubic-bezier(0,0,.2,1)

Tango / AI

Live agent chat · garage sale of every token, type scale, component, spacing, and elevation used to build it

Tango Agent

Smart Roadmaps

Smart Roadmaps — Portfolio Overview

Colours

AI gradient

purple → orange

--orange

#FFA426 · send, CTA

--orange-subtle

#FFF8F0 · context bar

--n50

msg area bg

--n100

retry btn, dividers

--n200

borders, input ring

#8b5cf6

thinking spinner

--success

step done dot

white

panel shell, header

Typography

Agent name · Tango13px 700 n900

Smart Roadmaps10.5px 400 n400

Tango nowsender · 11px 600 / 400

Agent message body text here13px 400 n800 1.7lh

User bubble text13px 500 white on orange

Section label9px 700 uppercase

Context bar label11px 600 orange

Thinking… gradient text11.5px 500 AI gradient

0.3sstep duration pill

Chip label11.5px 600 n600

CTA primary12px 700 white on orange

CTA secondary / ghost12px 600 n600

✦ Suggested content10px 800 orange uppercase

Suggestion body text12px 400 n800 1.7lh

Spacing & Radius

Panel

Shell radius--r-xl · 16px

Header padding14px 16px

Msg area padding24px 16px 16px

Msg gap24px

Context bar pad7px 16px

Input bar pad10px 14px 12px

Components

Agent bubble pad10px 13px

Bubble radius4px 12px 12px 12px

User bubble radius12px 12px 4px 12px

Chip pad7px 14px

CTA pad9px 18px

Dropdown radius12px

Dropdown row pad9px 12px

Sug card radius10px

Send btn size32×32px · r-full

Thinking dot size24×24px circle

Component Specimens

Bubbles

Tango now

Agent response bubble. Plain text, or structured content like KPI cards.

You just now

User message bubble. Always orange, right-aligned.

Thinking States

Thinking

Reasoned · click to expand

✓

Portfolio scan 0.3s

Retrieving 7 active roadmaps across 3 portfolios.

…

Health check

Analysing at-risk indicators across portfolio.

–

Response built

Pending previous steps.

Quick Reply Chips

Review performance

Hover state

Create a new roadmap

CTA Block

Searchable Dropdown

Select Portfolio

Search portfolios…

OT

OT Automation

8 active demands · Mining Systems

DA

Data & AI

6 active demands · Veltrix

At risk

KPI Card (inline in message)

Objectives

4

Key Results

12

Timeline

18w

Suggestion Card

✦ Suggested content

KR1. Achieve 85% AI scoring accuracy by Q2.
KR2. Reduce review time by 40% within 3 months.

Input Bar

Ask Tango anything…

Focus state shown · border --orange · shadow rgba(255,164,38,.08) 3px

Avatar + Sender

Tango now · 22×22 star SVG

You just now

AJ

· 22×22 initials circle

Stage Transition Block

Collapsed — default

Next stage

Solutioning

Expanded — picker open

Next stage

Solutioning

Recommended

Return to Evaluation

Place On Hold

Approve

Decline

Cancel

Pill is the selector — chevron opens inline. Recommended pinned at top with badge. CTAs act on whichever stage is selected. Disabled states at 38% opacity.

Context Bar

Smart Roadmaps — Portfolio Overview

bg #FFF8F0 · border rgba(255,164,38,.2) · text 11px 600 --orange

Elevation & Borders

Panel shell

shadow-4 · 1px n200

KPI / dropdown

0 1px 3px 6% · 1px n200

Suggestion card

1.5px orange 30%

Thinking panel

1px purple 20%

Input focus

1.5px orange · ring 3px

Dropdown

1.5px n200 · 0 2px 8px

Panel Shell

bgwhite

radius--r-xl (16px)

context bar

msg area bgvar(--n50)

Bubbles

agent bubble--n50 + N-200

user bubble

agent font13px 1.7lh n800

msg gap24px

Input Bar

bg--n50

border1.5px N-200

focus ring

send btn

Interaction Types

Quick reply chips

Multiple choice from predefined options. Fastest path — no typing needed.

CTA block

Primary + ghost button. Used when Tango is ready to take a consequential action (open, create, navigate).

Searchable dropdown

Pick from a list of portfolios, resources, or demands. Avatar + meta row. Inline search with live filter.

Suggestion card

AI-generated content preview. Insert or retry. Used for OKRs, summaries, templates.

Free text prompt

Open-ended input. Always available. Falls back gracefully to next flow step.

✦ Try it live

Step through the full flow — chips, CTA buttons, a searchable portfolio picker, and a suggestion card with Insert / Retry.

Shell Architecture — IDE Layout

Interactive prototype · Capability Dock always visible · Journey Bar collapsible · capability changes nav content

Zone Anatomy

The new shell moves away from a grid-and-modal pattern toward a true workspace-first layout. The Capability Dock sits permanently on the left — icon-only, always reachable. The Journey Bar collapses behind it. The Workspace fills whatever remains.

┌──────────────────────────────────────────────────────────┐
│                    TOP TITLE BAR                          │  ← Breadcrumb + context
├────────┬─────────────┬────────────────────────────────────┤
│  CAP.  │             │                                    │
│  DOCK  │  JOURNEY    │         WORKSPACE                  │
│        │    BAR      │                                    │
│ always │ collapsible │    The real working area.          │
│ visible│  ↔ toggle   │    No grids. No dashboards.        │
│        │             │    Drag. Act. Solve.               │
└────────┴─────────────┴────────────────────────────────────┘

Interactive Prototype

Hover the logo to expand · click ← to collapse · click any capability to switch context

PROJECTS › Overview

AJ

Zone Specifications

① Capability Dock (formerly "right dock")

Always visible. Houses capability toggles — Ideas, Demand, Projects, Portfolio, Resources. Permanently on the left, icon-only, never collapses.

Brand name candidate: Turmeric Superpowers · functional name: Capability Dock

Width: 56px fixed Never collapses Icon + label

② Journey Bar (formerly "left nav")

Collapsible. Context-aware — content changes per capability. Projects → Overview / Config / Team / Live / Retro. Resources → Roster / Potential Hub / Allocation Map.

Brand name candidate: Journey · functional name: Journey Bar

220px expanded Collapses to 0 Dynamic per capability

③ Top Title Bar

Breadcrumb trail + context label. Houses hub toggle, global search, notifications, avatar. Height 48px, always white, zero orange background.

Height: 48px No orange bg — ever Always white

④ Workspace

The heart of the reimagination. Not a dashboard. A live, dynamic space where users work, interact with Tango, and feel momentum. Every capability gets its own workspace flavour.

flex:1 fills remaining No fixed grid Capability-contextual

Workspace by Persona

Resource Manager

Open resource requests on the left. Drag into the workspace. Tango recommends matches. Items move from "open" to "resolved" — sense of motion and accomplishment.

Solution Owner

Drag in solutions to build. Tango suggests component templates. Stages of delivery laid out spatially — not a list, but an information view of full scope.

Project Manager

Troubleshoot space. Write updates, ask Tango questions, action RAID items. Blank slate with building blocks — conversational and contextual.

Demand Owner — ⚠ Do not change yet

Demand Live already functions as their workspace. Do not introduce a new workspace for demand owners in the first phase.

Design Tokens

Layout dimensions

Topbar height

48px

Left nav expanded

240px

Left nav collapsed

56px

Content padding

var(--s5) var(--s6)

z-index stack

Modals / overlays

500

Dropdown menus

200

Topbar

100

Left nav

90

Slide-in panels

80

Content

1

Topbar

Background

white

Border-bottom

1px var(--n200)

Shadow

var(--shadow-2)

Position

sticky top:0

Content area

Background

var(--n50)

Overflow

overflow-y: auto

Flex

flex:1 / min-height:0

Design Tokens

Zone Dimensions

Topbar height48px · sticky · z-100

Nav expanded240px · z-90

Nav collapsed56px · z-90

Dock width56px always visible

Content bg--n50 · flex:1

Content paddingvar(--s5) var(--s6)

Collapse animwidth 280ms cubic-bezier(.4,0,.2,1)

Nav Item Tokens

Height38px

Border radius--r-base (8px)

Active bg--orange-subtle

Active text--orange

Hover bg--n50

Font13px 500 --n900

Icon size16px

Badge bg--n100 · --n600 · 10px 600

Section label9px 700 --n400 uppercase

Topbar Tokens

Backgroundwhite

Border-bottom1px --n200

Shadow--shadow-2

Logo height24px

Hub track bg--n100

Hub active--orange bg · --n900 text

Hub inactivewhite · --shadow-1

Hub transitionall 150ms cubic-bezier(0,0,.2,1)

z-index Stack

Modals500

Col menus / dropdowns200

Topbar100

Left nav90

Slide panels · Tango80

Content1

Modal Inventory

All overlay types · trigger contexts · dismiss behaviour · sizing

Modal Types

Side Panel (right)

Width: 480px · slides from right
Dismiss: overlay click, ✕ button, Esc
Scroll: panel body only
Used for: Edit, Detail, Match Panel

Centred Modal

Max-width: 540px · centred with overlay
Dismiss: ✕ only (for confirmations)
Backdrop: rgba(0,0,0,.4)
Used for: Confirm, Create, Date picker

Tango Agent Float

Width: 340px · fixed bottom-right
Dismiss: minimise button
z-index: 80 · above content
Used for: Tango / AI agent chat

Full-screen Overlay

Full viewport · dark backdrop
Dismiss: explicit close only
Used for: Canvas view, Demand deep dive
Scroll: within modal body

Design Tokens

Side Panel (right)

Width480px

Slide-intranslateX(0) 280ms ease

Header56px · 15px 700 --n900

Body padding--s5 --s6

Shadow-4px 0 24px rgba(0,0,0,.12)

Dismissoverlay · ✕ · Esc

z-index80

Centred Modal

Max-width540px

Border radius--r-xl (16px)

Backdroprgba(0,0,0,.4)

Shadow--shadow-4

Transitionscale(.96→1) 180ms

Dismiss✕ only for confirms

z-index500

Shared Panel Tokens

Panel header height56px

Context bar height36px · --orange-subtle

Field label11px 600 --n900

Field value13px 400 --n800

Section divider1px --n100

Close btn28×28 · --n100 hover

Tango float w340px · h 560px

Tango z-index80 · fixed bottom-right

Color Usage Rules

Semantic constraints · when to use which color · enforced from May 11 2026 session

Color in Trmeric is not decorative. Every color choice carries meaning. Inconsistent color use erodes trust and confuses users who are making real business decisions. These rules are not guidelines — they are constraints.

--error

Red = Always a bad state that needs addressing

People universally associate red with something being wrong. Never use red decoratively. Never use red for categories, labels, highlights, or branding. If something is red, users will assume it is broken, at risk, or requires immediate action. Use for: overallocation, at-risk status, errors, RAID issues, conflict flags.

At Risk Over-allocated Error state Conflict

--success

Green = On track, complete, healthy

Green signals that things are within expected parameters. Use for: active status, completed items, allocated (confirmed) resources, on-track metrics. Do not use for decorative success moments unrelated to status.

Active Completed Allocated On Track

--warning

Amber = Caution, at risk, needs attention soon

Amber means "watch this." Not broken yet, but heading there. Use for: on-hold status, soft-locked resources, partial matches, near-deadline warnings. The middle signal between green and red — requires human judgment.

On Hold Soft Lock Partial Match Near Deadline

--orange

Orange = Trmeric brand only — not a status color

Orange is the Trmeric brand color. It signals interactive elements, active states, and the platform identity. It is not a status signal. Do not use orange to indicate urgency, warnings, or anything that should use amber instead. And critically: do not use orange as a background on the navigation shell — this has appeared in some versions and must be removed.

CTAs Active nav items Selected states ✗ Not status ✗ Not nav bg

--purple / AI

Purple = AI features and Tango intelligence

Purple (and the purple→orange gradient) signals that something is AI-powered. Use for Tango badges, AI action buttons, match scores powered by Tango, and insight cards. This creates a consistent mental model: purple means the system is thinking for you.

✦ Tango features AI match scores Smart suggestions

Conversational Input

Entity detection · inline highlighting · auto-fill · replaces static forms with intelligent conversations · AI-powered

Concept from May 11 session: Instead of filling out form fields, users type a natural description — "Ashish to build Action Hub by May 30" — and the system detects entities (resource, action, date) inline, highlights them as chips, and auto-fills the corresponding form fields. End result: one click on priority. That's it.

Interactive Demo

Conversational Action Creator — type to see entity detection

Tell me what you want to create

As you type, the system detects people, actions, and dates

Detected entities

Start typing to detect entities…

Auto-filled fields

Action

Not detected yet

Assigned to

Not detected yet

Due date

Not detected yet

Priority

Design Specification

Entity types & colours

👤 Personinfo blue — the assignee

⚡ Actiongreen — the task verb

📅 Dateamber — the deadline

📎 Contextpurple — demand link

When to use this pattern

Use conversational input anywhere the current flow has 4+ form fields and the user already knows what they want to say. Good candidates: Create Action, Create Demand (intake), Status Update, Add RAID item. Not suitable for: date-picker-only inputs, simple toggles, binary choices.

Design Tokens

Input Bar

Border radius--r-full (pill)

Padding8px 8px 8px 14px

Border rest1.5px --n200

Border focus1.5px --orange

Focus ring0 0 0 3px rgba(255,164,38,.08)

Font12.5px 400 --n800

Placeholder12.5px 400 --n500

Send btn32×32px --orange · --n900 icon

Entity Chip Colours

Resource / Role--lf50 · --lf200 border · --lf600

Date / Range--rs100 · --rs200 · --rs600

Portfolio--sl50 · --sl200 · --sl600

Skill--pw50 · --pw200 · --pw600

Duration--rh50 · --rh200 · --rh600

Chip padding3px 8px · --r-full

Chip font11px 600

All WCAG≥ 4.5:1 AA

Suggestion Area

Bg--n50 · border-top 1px --n100

Padding8px 14px

Font12px 400 --n700

Accept btn--orange · --n900 · 7px 12px

Max suggestions3

Transitionopacity 150ms

Usage Guidelines

Rules, conditions, and principles for engineers and agents building with the Trmeric Design System

This is the authoritative reference for building Trmeric UI — whether you are an engineer implementing a feature, an AI agent generating a prototype, or a contributor extending the system. These rules are not suggestions. They encode years of client feedback, demo experience, and design iteration. Deviating from them without reason creates visual drift that is costly to fix.

If a rule is ever unclear, the principle is: match what the design system renders, not what you assume. The live components in this document are the source of truth.

Foundation

Tokens, typography, and the CSS variable system

1

Always use CSS tokens — never raw hex values

Every color in the system has a corresponding CSS variable defined in :root. Raw hex values are only permitted inside the :root token definitions themselves. Everywhere else — inline styles, CSS classes, JS-generated styles — you must use var(--token-name). This ensures the system can be themed and audited without hunting through the entire codebase.

Do

color: var(--orange)

background: var(--success-bg)

border-color: var(--n200)

Don't

color: #FFA426

background: #f0fdf4

border-color: #e5e5e5

For AI agents: When generating any Trmeric HTML, scan the output for raw hex values before returning. Any hex that is not inside a :root{} block is a violation. Replace it with the closest named token.

2

Typography scale — only these sizes are permitted

Trmeric uses Poppins exclusively. The permitted font-size values are: 9px, 10px, 11px, 11.5px, 12px, 12.5px, 13px, 14px, 16px, 18px, 20px, 24px, 32px, 48px. Sizes outside this scale (e.g. 15px, 17px, 22px) must not appear in production or prototypes. Weight scale: 400 (regular), 500 (medium), 600 (semibold), 700 (bold). Weight 300 and 800 do not exist in this system.

Use	Size	Weight	Color token
Section title (H2)	24px	700	`--n900`
Card title / H3	20px	600	`--n900`
Field label / title	13px	700	`--n900` — must be heaviest in the field
Body / input value	13px–14px	400–500	`--n900`
Hint / helper text	11.5px	400	`--n600` — never --n400
Caption / meta	11px–12px	400–500	`--n400`
Label / badge text	10px	600–700	Semantic color
Section headers in panels	9px–10px	700	`--n400` uppercase + letter-spacing .07em

3

Spacing follows the 4px grid — use spacing tokens

All margins, paddings, and gaps must use the spacing token scale: --s1 (4px) through --s16 (64px). Raw pixel values like padding: 7px 11px are not permitted. The closest token must be used. Exception: internal component micro-spacing (e.g. icon alignment tweaks of 1–2px) may use raw values when no token applies.

Do

padding: var(--s4) var(--s5)

gap: var(--s3)

margin-bottom: var(--s6)

Don't

padding: 14px 18px

gap: 10px

margin-bottom: 22px

4

Border radius — use tokens, not arbitrary values

Six radius tokens exist. Use the right one for the right context. Do not invent intermediate values like border-radius: 10px or 7px.

Token	Value	When to use
--r-sm	4px	Small internal elements: checkboxes, code tags, tiny badges
--r-md	6px	Status chips, tags, removable chips
--r-base	8px	Table containers, popover menus, tooltips, small cards
--r-lg	12px	Panel sections, demand/resource cards, overlay panels
--r-xl	16px	Main app cards, shell containers, floating nav
--r-full	9999px	All buttons (mandatory), pill badges, search inputs, avatar frames

Color

Semantic usage, restrictions, and intent

5

Orange is the primary interaction signal — nothing else

--orange (#FFA426) is the Trmeric brand color. It signals interactivity, selected state, and primary actions. It is not a status color. Never use orange for urgency, warnings, or attention-getting unless it is an interactive element (CTA button, active nav item, focus ring).

The orange focus ring — box-shadow: 0 0 0 3px rgba(255,164,38,.1) — must appear on every focused input, select, and textarea. This is the system's primary accessibility affordance.

Do

Primary CTA buttons

Active nav item background

Focus rings on inputs

Selected chip / toggle state

Brand logo and identity marks

Don't

Warning or alert messages (use amber)

Navigation shell backgrounds

Decorative accents unrelated to interaction

Urgency indicators (use red or amber)

6

Semantic colors carry meaning — never use them decoratively

Red, green, and amber each have a single, exclusive meaning in the system. Misusing them breaks user trust — if a user sees red, they assume something is wrong. If it's decorative, that trust is damaged.

Color	Token	Meaning	Never use for
Red	--error	Broken, at risk, overallocated, form error, conflict	Decoration, urgency that doesn't require action, categories
Green	--success	On track, allocated, completed, healthy	Positive sentiment that isn't a measurable status
Amber	--warning	At risk but not critical, needs attention soon, soft-lock	Urgency that requires immediate action (use red instead)
Purple	--purple	AI-powered features, Tango output, smart suggestions	Decorative accents, categories, status indicators
Blue	--info	Informational content, links, system messages	Primary actions (orange is primary, not blue)

7

Cool-gray palette is banned — use warm neutrals only

Trmeric uses a warm neutral scale. Tailwind/Slate grays (var(--n400), var(--n600), var(--n100)) make the UI feel cold and generic. Any gray used in the system must come from the --n50 through --n900 token scale only.

For AI agents: The most common token violation is using Tailwind-origin cool grays. Before outputting any Trmeric HTML, check for these hex values and replace them: var(--n400) → --n400, var(--n600) → --n600, var(--n100) → --n100, var(--n200) → --n200, #475569 → --n600, #334155 → --n800.

Components

Rules for buttons, inputs, cards, overlays, and navigation

8

All buttons are pill-shaped — no exceptions

Every interactive button in the Trmeric system uses border-radius: var(--r-full). This is the single most recognizable element of the Trmeric design language. Sharp-cornered buttons or buttons with border-radius: 8px do not belong in this system. This applies to all button variants: primary, secondary, ghost, AI gradient, icon-only.

The only elements that are permitted to have non-pill radius are: cards (--r-lg), input fields (--r-base or 10px), and containers.

Button hierarchy: Use Primary (orange fill) for the single most important action in a view. Secondary (orange outline) for secondary actions. Ghost for cancel/dismiss. AI gradient only for Tango-powered actions. Never stack two primary buttons side-by-side.

9

Required is the default — never label it. Only mark Optional.

Every field in Trmeric is required unless explicitly marked otherwise. Showing "Required" on every field is redundant noise — it competes with the label title and adds no information the user didn't already know. The orange badge on every field creates visual clutter that dilutes the brand color's meaning.

The rule: show Optional in quiet italic (.dsp-opt / .fi-opt) only when a field is genuinely non-mandatory. Required fields carry their authority through label weight (700, --n900) alone. If a form has more Optional fields than Required, reconsider the form's scope.

Do

Bold 700 label title — implies required

Optional italic label only where truly optional

Inline error on submit if empty — "This field is required"

Don't

Orange "REQUIRED" badge on every field

Red asterisk (*) — adds anxiety without clarity

Both Required and Optional badges in the same form

10

Overlay panels use the .dsp shell — never a raw modal

All overlay panels in Trmeric use the .dsp shell system: .ph header + .dsp-body content area + .dsp-footer. Panels slide in from the right at 360–420px width. They are never centered modals unless the design explicitly requires a confirmation dialog.

The panel header (.ph) always contains: a colored icon block (.ph-icon), a title + subtitle stack, and a close button (.ph-close). The icon color signals the panel type — orange for creation, blue for information, green for success actions, purple for AI actions.

11

Chip components — three variants, each with distinct behavior

Three chip patterns exist and must not be interchanged:

Variant	Class	Behavior	Use for
Status chip	`.chip .chip-{state}`	Read-only display	Demand status, resource state, RAID type — anywhere a value is shown, not chosen
Single-select chip	`.fi-chip`	One active at a time, orange selected state	Priority, confidence level, status change — mutually exclusive choices
Multi-select chip	`.fi-chip.sel-multi`	Toggle on/off independently, orange fill when selected	RAID types, delivery streams, skills — multiple concurrent selections

Tango & AI Conventions

How AI features are identified, rendered, and written

12

Purple signals AI — nothing else

The purple token (--purple, #8b5cf6) and the AI gradient (--gradient-ai) are exclusively reserved for Tango and AI-powered features. When a user sees purple, they know Tango is involved. Using purple for decorative purposes, category labels, or non-AI features breaks this mental model and is a critical violation.

Tango identity elements: Header gradient (purple→orange), sparkle icon, ✦ prefix character on AI action buttons, purple pill background on "Ask Tango" CTAs, purple-tinted insight boxes. All other UI must not use these elements.

13

Tango copy rules — brevity and actionability are mandatory

Tango speaks in short, specific, actionable sentences. Every insight must answer "so what?" — a number without a consequence is not an insight. Every Tango message must end with a next action or a question.

Quality	✓ Example	✗ Never
Concise	"3 demands need your attention today."	"There are currently 3 demands in the system that may require your attention at some point today."
Specific	"Talvera NRIO: resource gap of 2 FTEs by March 14."	"Some demands have resource gaps."
Actionable	"Recommend: extend Maya Nair's allocation through Q2."	"You might want to consider looking at resource allocations."
Non-robotic	"Heads up: 2 milestones slip this week — both recoverable."	"As an AI, I have detected that 2 milestones may be at risk."

Max message length in the chat panel: 3 sentences. Insight cards in the UI: 1–2 sentences. No bullet points inside a Tango bubble — use them only in dedicated insight panels.

Engineering Conventions

File structure, state, fonts, and prototype rules

14

All prototypes are single-file HTML — no exceptions

Every Trmeric prototype is delivered as a single .html file with all CSS and JS inline. No external stylesheets, no separate JS files, no build tools. This is a deliberate constraint — it keeps prototypes shareable, demo-safe, and version-stable. The design system itself follows this rule.

Do

Inline <style> at top of file

Inline <script> at bottom of file

Google Fonts CDN link only

All state in JS memory variables

Don't

External .css or .js files

localStorage or sessionStorage

Framework CDNs (React, Vue, etc.)

Build tool dependencies

15

Font loading — Poppins from Google Fonts, always

Every Trmeric file must include the Poppins font import as the first link in <head>. Never use Inter, Roboto, system-ui, or any other font. The fallback stack is: -apple-system, BlinkMacSystemFont, sans-serif — only used if Google Fonts fails to load.

<!-- Required in every Trmeric file -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
      rel="stylesheet">

/* CSS body rule */
body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

16

Use real Trmeric data in demos — never placeholder text

Demo-facing screens must use realistic domain data. Placeholder text (Value, N/A, Lorem ipsum, Test User) destroys the illusion of a production system. Use data from the client context: Talvera NRIO project names, real skill labels (IoT, SAP, ML Engineer), realistic demand names, real persona names (Ashish, Roshan, Siddharth).

Real data

"Kalgan Ranges AI Safety Analytics"

"David Chen · IoT Architect · 55%"

"DEM-247 · Workday SSO Integration"

Placeholder

"Project Name Here"

"User 1 · Role · N/A"

"DEM-001 · Test Demand"

Anti-Patterns

Things that must never appear in Trmeric output

✗No Inter, Roboto, or system fonts. Poppins is mandatory. Using a different font creates visible inconsistency, especially at small sizes where Poppins' rounded letterforms are distinctive.

✗No sharp-cornered buttons. border-radius: 8px on a button is a violation. All buttons use var(--r-full). No exceptions for "compact" or "inline" buttons.

✗No blue primary actions. Blue (--info) is for informational UI only. Primary actions are always orange. Secondary confirmation, info messages, and links can use blue.

✗No purple outside Tango/AI contexts. If a developer uses purple for a category label, a section heading, or a decorative accent, it erodes the semantic meaning Tango relies on to stand out.

✗No chart gridlines or Y-axis labels. Trmeric charts are clean and executive-friendly. No grid lines, no Y-axis, no tick marks. X-axis labels only. Data labels on bars/lines where needed.

✗No KPI numbers under 32px on dashboards. Hero numbers on dashboard KPI cards must be at minimum 32px, ideally 40–48px. Anything smaller defeats the purpose of a KPI strip.

✗No long Tango messages. Tango speaks in 1–3 sentences. Paragraphs of AI text break the conversational metaphor and make users feel lectured, not assisted.

✗No orange background on the navigation shell. The top bar is always white. The capability dock is always dark (--n900). Orange on the nav shell has appeared in early prototypes and must be removed wherever found.

✗No hint text in --n400. Hint / helper text that is nearly invisible defeats its own purpose. Hint text uses --n600 — visible and readable, but clearly subordinate to the label title in --n900.

✗No four uniform cards in a row on a dashboard. A 4-column grid of identical cards is a pattern audit failure. Dashboard grids must mix card sizes — hero card, supporting metrics, charts — not a flat 4×N grid.

✗No Mermaid.js for pixel-accurate diagrams. Mermaid is acceptable for flowcharts in documentation. For client-facing flow diagrams, lifecycle maps, and connection diagrams, use inline SVG with CSS for pixel control.

Design Principles

The 10 beliefs that shape every Trmeric decision

1 — Warm, not cold

Default to --orange-subtle and warm off-whites. Avoid clinical grey-heavy palettes. Trmeric should feel approachable, not sterile.

2 — Executive-ready

Data must be scannable in under 5 seconds. Generous whitespace, clear hierarchy, no cognitive overload. If an executive has to squint, the design has failed.

3 — Confident typography

Use 600 and 700 weights assertively. The label title must always be the heaviest element in its container. Weak labels make the product feel uncertain.

4 — Pill buttons always

Every interactive button uses border-radius: var(--r-full). This is a hard constraint, not a preference. It is the most recognizable element of Trmeric's design language.

5 — AI features signal differently

Purple and the AI gradient are exclusively for Tango. When users see purple, they know the system is thinking. This mental model must be protected at all costs.

6 — Subtle animation

150–250ms for interactions. Nothing slow, bouncy, or decorative without purpose. Animation communicates state change, not personality.

7 — Orange is the anchor

#FFA426 on white is the primary interaction signal across the platform. Active states, focus rings, primary buttons — all orange. Consistent without exception.

8 — System over invention

Use the tokens and patterns defined here. Novel treatments must have a clear, documented reason to exist. Creativity is encouraged in layout and content — not in violating the token system.

9 — Persona-specific

Never show the same screen to all personas. Resource Managers, Demand Owners, Portfolio Leaders, and Executives each see a filtered, relevant view. One-size-fits-all dashboards are an anti-pattern.

10 — Tango speaks last

AI insights feel like a thoughtful colleague's observation — concise, specific, actionable. Tango never overwhelms. It surfaces the signal, not the noise, and always ends with a path forward.

Live Playground

Select a component, adjust controls, copy the generated HTML

<button class="btn btn-primary">Primary Button</button>