Personal Research

meridian

4 min read

Meridian

Evidence status: inspectable public source; recent system with limited maturity/adoption evidence.

1. Why this system is relevant

Meridian provides a compact, unusually legible implementation of global/subtree density variables layered with component size variants and a component-local table modifier. It is useful as source-code evidence, though not as a maturity peer for Spectrum or Carbon.

2. Density terminology

  • Default documentation label: comfortable
  • Runtime override: compact
  • Attribute: data-density="compact"

The source exposes only default and compact token states; comfortable is the human label for the unscoped defaults rather than a separate attribute value.

3. Density model

Density is inherited through CSS custom properties. The attribute may be set on <html> or any subtree, allowing scoped coexistence. Blocks composed from primitives inherit automatically.

The mechanism is hybrid:

  • shared control and table metrics change by inherited context
  • components retain explicit sizes
  • Table also offers a local dense prop
  • Card has a local size contract outside density

4. Token architecture

tokens/spacing.css declares unscoped defaults under :root and overrides five semantic metrics under [data-density="compact"].

fixed spacing/radius foundations
  → default control/table semantic CSS variables
  → compact attribute overrides the five variables
  → components consume those variables

The generated tokens.json contains default control and table values, but it does not encode the compact selector overrides. The CSS file is therefore necessary to reconstruct density; the JSON artefact alone is incomplete.

CSS variableDefaultCompactChange
--control-h-sm28px24px−4px / −14.3%
--control-h-md36px30px−6px / −16.7%
--control-h-lg44px38px−6px / −13.6%
--table-pad-y12px7px−5px / −41.7%
--table-pad-x16px12px−4px / −25%

This is not one multiplier: each semantic metric has a curated compact value.

6. Typography behaviour

The inherited compact scope does not remap typography tokens. Button and Input type changes only with their explicit size. The Table’s independent dense prop changes cells from --text-md to --text-sm; that is component-local typography behavior rather than global compact typography.

7. Representative component examples

Button

size="sm|md|lg" selects the corresponding inherited control-height variable. Horizontal padding stays explicit at 10/14/20px and font size uses --text-sm|md|lg. Compact context therefore changes height but not the size variant’s padding or type.

Input

The default input consumes --control-h-md; sm and lg select the matching height token and also change padding and font tokens. Density and size compose.

Select

The trigger consumes --control-h-md. Menu items keep a component-specific 32px minimum height and 6px vertical padding, so not all Select geometry responds to the inherited density scope.

Table

Cells consume --table-pad-y and --table-pad-x. A separate Boolean dense prop adds .ef-table--dense, forcing 8px vertical cell padding and --text-sm typography. Under global compact density, the local dense rule’s 8px vertical padding is actually larger than the inherited 7px table padding; this interaction is an implementation caveat, not a clean additive compression.

Card

size="sm" changes local --card-spacing from 16px to 12px. The Card does not consume the global density metrics.

8. Design/Figma implementation

No public Figma library or variable-mode mapping is documented. The repository’s design-system specimen shows comfortable and compact side by side in HTML, not in Figma.

9. Code implementation

Global or subtree activation:

<section data-density="compact">
  <!-- components inherit compact control/table variables -->
</section>

Local table activation:

<Table dense columns={columns} rows={rows} />

These controls can coexist because they operate at different layers.

10. Accessibility constraints

Compact visible control heights are 24, 30, and 38px. The Button source does not add a separate invisible hit area, so the smallest Button can be a 24px rendered target—the WCAG 2.2 AA minimum only when the target-size or spacing conditions are met, and below the stronger 44px enhanced target. The docs do not publish an input-modality policy restricting compact use to pointer/keyboard contexts.

11. Limitations / unavailable evidence

  • The repository is recent and does not provide mature adoption evidence.
  • No public Figma implementation.
  • tokens.json omits scoped compact overrides.
  • Compact affects only five variables; many component gaps/paddings remain hard-coded.
  • The interaction between global compact table padding and local dense padding is not normalized.
  • No separate touch-target layer is visible.

Graph View

Backlinks