Pulliv0.1
8px
13 — Enterprise subset

The same system, with the expressive layer off.

One stylesheet and one attribute. It removes everything that is culturally specific or visually novel, keeps everything that is structurally useful, and adds the two things regulated procurement asks for that the base system does not have: forced-colors support and a measured high-contrast theme.

Three profiles

Set on the root element. Each is a strict subset of the one before it.

full

Everything. Consumer, brand and marketing surfaces where there is a genuine cultural relationship to the tradition.

<html>
no enterprise.css

enterprise

Pattern layer removed, one typeface, generator demoted to a build-time brand tool. The dot-and-loop state language is kept — it is clear, greyscale-safe, and removing it would leave nothing derived.

<html data-profile="enterprise">

regulated

Everything above, plus fully conventional form controls and a density floor. For clinical, safety-critical and heavily audited financial surfaces.

<html data-profile="regulated">
Why regulated exists. In clinical software a novel affordance is a patient-safety question, not a branding one — a misread checkbox on a medication screen is a harm event. Usability engineering under IEC 62366 will ask you to justify every deviation from convention, and that argument is worth spending on something more important than the shape of a mark. The same logic applies to financial surfaces under heavy conduct scrutiny.

Side by side

The same markup under each profile. Nothing below is a mockup — the profiles are applied live.

full

enterprise

regulated

Notice what does not change. Spacing, radii, control heights, type, motion and colour roles are identical across all three. The profiles differ only in the expressive layer and, at the regulated tier, in two control marks. That is the point of the three-layer model — the parts that carry the identity are separable from the parts that carry the structure.

What it removes

FeaturefullenterpriseregulatedReason
Corner pulli on panels and cardsonoffoffCulturally specific, no functional role
Curl boundaryonoffoffSame
Threshold bandonoffoffSame
Decorative generated patternsonoffoffDetected by aria-hidden, so content kolams survive
Draw-on animationonoffoffDecorative; enterprise loaders should be determinate or textual
Display serifSpectralUI faceUI faceA display serif earns nothing at 13px over an eight-hour shift
Checkbox as crossingonontickAn X reads as remove to many software users
Radio as closing loopdashed → soliddashed → solidsolid ringNovel affordance in a safety-critical form
Tabs / segmented as dot railononunderlineConventional indicator under audit
Table sort and selection loopsononarrow + barSame
Progress with head loopononplain fillSame
Compact densityP = 6P = 6floors at 8Gloves, styluses, shared workstations, standing users
Toggle as travelling loopononkeptDeliberately retained. Position carries the state, which makes it clearer than a conventional switch, not more novel in any way that matters

What it adds

Two capabilities the base system lacks, both of which appear on regulated procurement checklists.

Forced colors — Windows High Contrast Mode

When forced colors are active the user's palette replaces ours entirely and backgrounds are dropped. Any state carried by a fill disappears — which, in the base system, includes the dot in every rail, the fill in the progress bar, and the selected table row.

The subset re-expresses all of it as border and system colour, which survive: CanvasText for structure, Highlight for selection, GrayText for disabled, LinkText for links.

This is a hard requirement in most government and healthcare procurement, and unsupported by the base system.

@media (forced-colors: active){
  .rail > button::before{ border-color: CanvasText; }
  .rail > button[aria-selected="true"]::before{
    border-color: Highlight; border-width: 2px;
  }
  .data-table tbody tr[aria-selected="true"]{
    outline: 2px solid Highlight;
  }
  /* status colour is gone entirely — the text label is
     now the only carrier, which is why the system
     required one all along */
  .badge, .alert{ border: 1px solid CanvasText; }
}

High-contrast theme

An explicit AAA palette, independent of the OS setting, for users who need it and for evaluators who ask. Every pair measured at ≥ 8:1 against its ground. Combine with data-theme as usual.

RoleLightRatioDarkRatio
--color-text#00000021.00#FFFFFF21.00
--color-text-secondary#1F1A1617.25#E8E2D616.28
--color-text-tertiary#3A312912.72#C4BAA810.94
--color-accent#8A2F0E8.42#FFB48C12.16
--color-success#1F5A2E8.20#8FE0A213.35
--color-warning#5C42009.40#FFD07014.51
--color-info#1B3A7A10.86#A8C4FF12.00
--color-danger#8A16169.52#FF9E9E10.64

--border-hairline also rises to 2px in this theme — a one-pixel rule at AAA contrast is still a one-pixel rule, and it disappears for exactly the users the theme exists for.

How to adopt

<link rel="stylesheet" href="assets/tokens.css">
<link rel="stylesheet" href="assets/system.css">
<link rel="stylesheet" href="assets/enterprise.css">   ← after the others

<html data-profile="regulated" data-contrast="high" data-theme="dark">

Composable

  • data-profileenterprise | regulated
  • data-contrasthigh
  • data-themelight | dark
  • data-densitycompact | default | comfortable

All four are independent. Scope any of them to a subtree rather than the root to mix profiles on one page — as this page does.

What you still owe

  • The generator becomes a build-time tool. Use it to produce brand assets; do not ship kolam.js to the client.
  • Credit the source anyway. Removing the visual layer does not remove the derivation — the lattice, the state language and the motion model are still kolam-derived.
  • Run the gaps. The subset does not close the component, RTL, or conformance gaps. It makes the system appropriate, not complete.

Regulated checklist

Before shipping this into a clinical or heavily audited financial surface.

Must be true

  • data-profile="regulated" set at the root, not per component.
  • No decorative pattern anywhere in the product, at any opacity.
  • Every status has a text label; colour is reinforcement only. Verify by testing in forced-colors, where colour is gone entirely.
  • Density never below default on touch or shared-workstation surfaces.
  • Semantic colours reviewed against domain conventions — red and green carry established clinical meanings that may conflict.
  • A usability engineering file exists for any control that still deviates from convention. In this profile that is the toggle, and the justification is that position carries state.

Still not covered by this system

  • PHI masking and reveal, screen-privacy states.
  • Alert-fatigue hierarchies and clinical escalation patterns.
  • Dose, unit and precision display rules.
  • Audit trail, session timeout and step-up authentication patterns.
  • Regulated disclosure typography — minimum size and prominence rules.
  • Number formatting: tabular figures, locale negative-value conventions, currency alignment.

These are domain patterns, not styling. A design system can host them but this one has not written them, and no profile setting substitutes for doing so.