Skip to content

DiagramsStudy diagram system

Study diagram system

The diagram system used in the cognitive-distance case study. Six HTML parts, three tones, one CSS file. Eight diagrams share the system.

6 parts3 tonesPage-scoped CSS under .study-case

The six parts

PartRoleHTML
study-diagramThe wrapper. Page-scoped CSS under .study-case .<div class='study-diagram'>
study-diagram__headEyebrow + title at the top of the diagram.<header class='study-diagram__head'>
study-diagram__stepsThe grid that holds the steps. Responsive from 1 col to 5 col.<div class='study-diagram__steps'>
study-diagram__stepA single step. Holds a panel + a note. Flex column with stretch.<div class='study-diagram__step'>
study-diagram__panelThe visual panel. Tone: light, dark, or accent.<DiagramPanel tone='light' eyebrow='Step 01' title='Welcome' />
study-diagram__step-noteA one-line note below the panel. body-sm, muted-foreground.<p class='study-diagram__step-note'>

The three tones

ToneWhatWhen
lightCream background, ink text. Default tone.Most steps. The eye should land here first.
darkInk background, cream text. Reserved for 1 step per diagram.The one step that is the 'system acts' moment.
accentCream background, accent text. Reserved for 1 step per diagram.The one step that is the 'editorial aside'.

Responsive behavior

The steps grid is a CSS grid that responds to the viewport.

  • Mobile (< 640 px): 1 column, full width. Each step is its own row.
  • Tablet (640 — 1024 px): 2 columns. Steps wrap to 2-up.
  • Desktop (≥ 1024 px): 5 columns. All steps on one row.

Each step's panel stretches to the height of the tallest panel in the row, so the visual weight is balanced on desktop and stack-aligned on mobile.

The CSS

study-diagrams.css
.study-case .study-diagram__steps {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .study-case .study-diagram__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .study-case .study-diagram__steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.study-case .study-diagram__step {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.study-case .study-diagram__step .study-diagram__panel {
  flex: 1;
  justify-content: flex-start;
}

@media (min-width: 1024px) {
  .study-case .study-diagram__step .study-diagram__panel-title {
    min-height: calc(2 * 1.3 * 1.375rem);
  }
}

Why page-scoped CSS

The diagram CSS lives inapp/work/everyday-services-study/study-diagrams.cssand is scoped to .study-case. The reason: the diagram system is bespoke to that case study. Promoting it to a global component would be premature — the design system itself doesn't ship a study diagram. The system is documented in this section because the design is reusable as a pattern, not as a component.