Shared product language

Quiet foundations.
Clear interfaces.

A practical visual system for building consistent experiences across Kantoku, Superviso, and JPRL Platform—without erasing what makes each product distinct.

Explore foundations Read adoption guide

J

Workspace Assurance Overview Reviews Reports

Active

Review

Draft

01

Semantic first

Name decisions by purpose—surface, status, hierarchy—not by the color they happen to use.

02

Calm by default

Neutral surfaces and restrained elevation keep attention on product information and actions.

03

Product aware

Share presentation primitives while keeping navigation, terminology, and workflows local.

01 / Foundations

The visual baseline

Existing cross-product decisions, made explicit and reusable. These values should be consumed through semantic tokens.

Color

Neutral structure with muted semantic feedback.

Canonical

Canvas--surface-canvas#F6F6F4

Panel--surface-panel#FFFFFF

Strong text--text-strong#1C1917

Muted text--text-muted#78716C

Subtle border--border-subtle#DEDBD7

Inverse--surface-inverse#292524

Allowed accents

Muted organizational color for selection, categories, charts, icons, and restrained callouts.

Canonical

Selected

Blue--accent-blue-surfaceInformation · platform features

Assurance

Violet--accent-violet-surfaceGovernance · workflow milestones

Assets

Teal--accent-teal-surfaceTechnical categories · integrations

Allowed: blue, violet, and teal can organize an interface.

Reserved: green, amber, and red communicate status or severity.

Brand: Kantoku red identifies the product; it is not a general accent.

Typography

Native system fonts keep product UI crisp and familiar.

Page titleExternal exposure--type-page-title · 22px / 600

Section titleObserved services--type-section-title · 14px / 600

BodyReview the evidence before changing the asset.--type-body · 14px / 400

LabelAuthentication profile--type-label · 13px / 500

MetadataUpdated 4 minutes ago--type-metadata · 12px / 400

Shape & rhythm

A small radius scale clarifies hierarchy.

Control--radius-control · 10px

Navigation--radius-navigation · 12px

Panel--radius-panel · 16px

Modal--radius-modal · 18px

40px--control-height

64px--navigation-height

1440px--content-max-width

150ms--motion-interface

02 / Components

Buttons

Use one visually dominant action per region. Labels are concise, specific, and sentence case.

Height40px standard; 36px only for dense toolbars.

Radius10px with a clear 2px focus indicator.

LoadingKeep the original width and disable repeat submission.

Semantic CSS

.button-primary {
  min-height: var(--control-height);
  border-radius: var(--radius-control);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  transition: background var(--motion-interface);
}

List page · one primary action

Detail page · contextual actions only

PrimaryUse for the single forward action: Add, Create, Invite. A page does not require one.

SecondaryUse for contextual operations such as Edit, Sync, Export, or Duplicate.

OrderKeep the primary action at the far right. On narrow screens, move actions below the title without changing priority.

BoundariesUse neutral button styles. Keep destructive actions out of the header unless they are immediate and explicit.

Read the complete page-header action guidance →

03 / Components

Form controls

Labels stay visible, errors remain adjacent, and controls use the same height across forms.

2–8 stable options

Standard select

No search

Use when the complete option set is short, stable, and easy to scan.

Review frequency

Open directly to the options.
Keep the selected option visible with a checkmark.

Dynamic or 8–10+ options

Searchable select

Combobox

Use for people, assets, owners, countries, or any long and changing collection.

Owner

Move focus to search when opened.
Support arrows, Home/End, Enter, and Escape.

Read the complete select guidance →

Integration name Shown to workspace administrators.

Provider

Select the delivery destination.

Webhook URL Enter a valid HTTPS URL.

Organization Managed by your account.

Checkboxes

Select any number of independent options.

Email findingsSend a message when a new finding is created. Weekly summaryBundle lower-priority activity into one summary.

Radio group

Choose exactly one visible option.

QuarterlyReview this record every three months. AnnuallyReview this record once per year.

Switch

Use only for a setting that applies immediately.

Automatic synchronizationKeep records aligned with the connector. Include archived recordsShow archived records in registry results.

CheckboxIndependent choices; zero, one, or many may be selected.

RadioOne choice from a short set that benefits from remaining visible.

SwitchAn immediate binary setting—not a value waiting for Save.

Hit areaMake the full label row clickable and keep explanations adjacent.

Next review date

Display a localized date; persist an unambiguous ISO value. --calendar-width 288px · --calendar-cell-size 32px

Evidence file Choose a filePDF, PNG, or JPG · maximum 10 MB No file selected.

IdentityJPJean-Philippe Rivard Lauzierjp@kantoku.io

Classification tagInternal

Removable chip

Read the complete form-control guidance →

Asset details

Update the information used to identify and govern this asset.

Name

Owner

Description Help reviewers understand the purpose and scope of this asset.

Governance rules

Apply workflow requirements that save with the asset details.

Approval requiredChanges require an owner’s approval. Exclude from requestsHide this asset from access requests.

CardUse one borderless panel per save boundary. Do not wrap each field in a separate card.

BodyConstrain content with --form-content-max-width; use one column by default and two for related fields.

SectionsUse headings and dividers for groups that save together. Use separate cards when submission is independent.

ActionsPlace Cancel before Save in reading order, with the neutral filled Save action at the far right.

Read the complete form section card guidance →

04 / Components

Notification banners

Use banners for page-level feedback that must remain visible long enough to understand or act on. Tone, icon, and copy communicate the same meaning.

PlacementPlace feedback above the affected page region, below the page header. Avoid floating banners over content.

SemanticsUse status for routine updates. Reserve alert for urgent errors that need immediate announcement.

BehaviorDismiss only when the message remains recoverable or no longer blocks the task. Never auto-dismiss critical guidance.

Read the complete notification banner guidance →

Transient feedback

Toast notifications

Candidate

Superviso uses bottom-right toasts for short operation feedback. Kantoku has toast styling available, but currently uses banners and local action messages instead.

Review updatedThe decision was saved.

Use only for brief, non-blocking confirmation.
Do not put required actions or critical guidance in a timed toast.
Default to bottom-right and avoid stacking more than three.

Contextual help

Tooltips

Reference

Both products use tooltips for icon meaning, timestamps, truncated values, and brief supplemental context.

Open on hover and keyboard focus; dismiss on Escape.
Keep content concise and non-interactive.
Never use a tooltip as the only accessible name or source of critical information.

Tooltip guidance →

05 / Components

Status badges

Status language is semantic. Superviso’s audited product labels map to six shared workflow tones and one additional high-risk severity tier.

Active

Success--status-success-surfaceApproved, completed, healthy

Returned

Danger--status-danger-surfaceFailed, denied, overdue

Draft

Warning--status-warning-surfaceOpen, onboarding, needs attention

In progress

Information--status-info-surfacePending, provisioning, under review

Submitted

Milestone--status-special-surfaceSubmitted, provisioned, offboarding

Archived

Neutral--status-neutral-surfaceInactive, canceled, unavailable

Color supports the label; it never replaces it. Use --badge-radius, compact spacing, semibold text, and an explicit workflow label.

Superviso audit

Workflow vocabulary

66 mappings

Neutral

None · inactive · canceled · incomplete · closed · archived

Attention

Draft · open · onboarding

Active work

Pending · in progress · reviewing · provisioning · under review

Milestone

Submitted · reviewed · provisioned · deprovisioned · offboarding

Positive

Successful · active · approved · completed

Negative

Failed · suspended · declined · denied · returned · overdue

Superviso audit

Risk & classification

Audit notes

None

Low

Medium

High

Critical

--severity-high-surface

Orange is reserved for the high-risk step between amber medium and red critical. Classification badges may reuse blue, violet, amber, and red only when their visible label carries the taxonomy.

Migration target

Legacy raw Tailwind badge colors are valid existing behavior, but they are not additional canonical colors.

06 / Components

Panels & hierarchy

The canvas separates primary panels. Borders belong to nested structure, controls, and meaningful divisions.

Do Primary panel on canvas

Use a borderless 16px panel, then retain borders on nested rows or cards.

Don’t Stack decorative containers

Avoid heavy shadows, competing radii, and borders around every surface.

ReversibleRecord lifecycle

Record lifecycle

Archive asset

Remove this asset from active records. It can be restored later.

IrreversibleDanger zone

Danger zone

Delete asset

Permanently remove this asset, its history, results, and events.

PlacementPlace lifecycle and destructive sections after the normal Edit form and its Save controls.

LanguageName the exact action and consequence. Archive and Delete must never be interchangeable.

ConfirmationConfirm in a modal. Use filled danger only for the final irreversible action.

PermissionsHide unavailable actions, or explain a disabled state when that context helps the user.

Read the complete lifecycle and danger guidance →

07 / Components

Registry filters

Search remains immediate. Structured filters are deliberate, countable, removable, and easy to clear.

Active

08 / Components

Data & collection states

Registries stay scannable, record details stay semantic, and every collection keeps useful context while empty, loading, or unavailable.

Active

	Email address	Type	Status	Last login
JPJean-Philippe Rivard LauzierUSR-1	jp@kantoku.io	Internal	Active	a few seconds ago
JSJohn SmithUSR-2	jsmith@kantoku.io	Internal	Active	a day ago
PNPriya NairUSR-3	pnair@kantoku.io	External	Invited	Never

1–3 of 24 users

Density--table-row-height keeps rows at least 48px; toolbar controls may use the compact height.

Applied filtersKeep labeled removable chips visible below the toolbar when the filter popover is closed.

Empty collectionsHide search and filters when no source records exist; keep them visible when an active query returns no matches.

ResponsivePreserve columns with horizontal overflow before hiding meaningful data.

PaginationShow the result range and preserve query state while pages change.

Read the complete registry table guidance →Collection-state guidance →

Privilege details

Privilege ID: PRV-5
Asset: Superviso
Owner: JPJean-Philippe Rivard Lauzier
Status: Active
External ID: 01a01b32-533e-71cc-86d2-23a29cd266b2
Description: None

Governance

Add approval: Required
Remove approval: Not required
Separation of duties: Not enforced

Groups

Manage groups

No delegated groups.

--detail-label-width140px stable label column--empty-state-max-widthConstrained explanatory copy--avatar-size32px default identity

Read the complete record-detail guidance →

09 / Components

Page navigation & overlays

Breadcrumbs locate the page, tabs move between peer views, menus collect secondary commands, and dialogs contain focused interruptions.

BreadcrumbsRegular metadata text, a 16px home icon, and hierarchy that never replaces the page title.

Page titlesName the resource directly; do not repeat product context already established by the sidebar or breadcrumb.

Page frameBreadcrumb, header, actions, and primary panel share the constrained content width and start edge.

TabsUse links and aria-current for routes; use tab semantics only for in-page panels.

Small screensCollapse distant ancestors and scroll tabs horizontally rather than wrapping.

Read the complete breadcrumb and tab guidance →

Contextual commands

Action menu

Use for infrequent row, account, or page actions—not for selecting a value.

Focused interruption

Dialog family

Choose information/form, neutral confirmation, or destructive confirmation by consequence.

--menu-min-width220px menu baseline--dialog-max-width448px focused dialogEscapeClose and restore focus

Read the complete menu and dialog guidance →

10 / Guidance

Application patterns

Patterns align presentation while leaving routing, permissions, tenancy, and business behavior in each product.

J

Contextual sidebar

Labels, chevrons & row surfaces

The eyebrow labels the area switcher, subsection titles organize local rows, and active and hover use distinct neutral surfaces.

Dimensions--navigation-rail-width is 64px and --navigation-sidebar-width is 240px.

HierarchySeparate the Navigation eyebrow, area switcher, subsection titles, and destination rows.

MobileUse a modal drawer with a scrim. Close after navigation and return focus to its trigger.

AccessibilityExpose current location, name icon-only actions, support Escape, and preserve a logical tab order.

Read the complete navigation shell guidance →

Primary access

Branded split shell

Use for sign in and account creation when the product benefits from a stronger first impression.

JJPRL

Clear access. Calm entry.

Start with context,
then get to work.

Keep this message concise, product-owned, and useful. Authentication remains the primary task.

Secure workspace access

Utility flows

Compact card shell

Use for password recovery, verification, invitations, and two-factor challenges.

Choose by taskUse split presentation for primary entry and the compact card for short supporting flows.

Brand boundaryThe supporting pane may use product identity and concise positioning, but never campaign navigation.

ResponsiveRemove the supporting pane on narrow screens and keep the form within --auth-form-max-width.

SecurityPreserve password-manager compatibility, recovery access, error context, and stable loading states.

Read the complete authentication shell guidance →

11 / Guidance

Accessibility is a state

A component is not specified until its keyboard, focus, disabled, loading, error, and responsive behavior are known.

01

Keyboard first

All actions are reachable in a logical order. Escape closes transient surfaces and returns focus.

02

Visible focus

Interactive elements receive a clear 2px indicator that is not removed for aesthetic reasons.

03

Names and labels

Icon-only controls have accessible names. Inputs keep persistent, associated labels.

04

Beyond color

Status and validation always include text, structure, or an icon in addition to tone.

05

Stable feedback

Loading does not shift layout. Disabled controls remain legible and communicate availability.

06

Responsive meaning

Smaller screens change layout—not information hierarchy or action clarity.

12 / Adoption

Adopt foundations before sharing code.

Version 0.11 adds the canonical localized date field and calendar popup, including month navigation, selected and outside-month states, keyboard movement, and responsive positioning. Component extraction still waits for stable cross-product APIs.

View token source Component status

1
Reference
Use canonical appearance and states during product work.
2
Tokens
Replace duplicated foundations with versioned semantic variables.
3
Components
Extract only stable, product-neutral primitives.

Quiet foundations.Clear interfaces.

Semantic first

Calm by default

Product aware

The visual baseline

Color

Allowed accents

Typography

Shape & rhythm

Buttons

Users

Asset Management - Administrator

Form controls

Standard select

Searchable select

Governance rules

Notification banners

Integration saved

Sync in progress

Review required

Connector unavailable

Toast notifications

Tooltips

Status badges

Workflow vocabulary

Risk & classification

Panels & hierarchy

Record lifecycle

Danger zone

Registry filters

Filter records

Data & collection states

No matching users

Users could not be loaded

Page navigation & overlays

Asset Management - Administrator

Action menu

Dialog family

Application patterns

Navigation switcher

Labels, chevrons & row surfaces

Branded split shell

Start with context,then get to work.

Sign in to your workspace

Compact card shell

Reset your password

Accessibility is a state

Keyboard first

Visible focus

Names and labels

Beyond color

Stable feedback

Responsive meaning

Adopt foundations before sharing code.

Quiet foundations.
Clear interfaces.

Start with context,
then get to work.