Skip to content
Home
Design system

Design system

This page documents the Nephron Learn visual style for future pages.

Page structure

Use the same structure for clinical reference pages:

# Title

<div class="nephron-reading-intro">
<strong>Title</strong> — concise clinical positioning.
</div>

`Clinical pathway` `Domein` `Setting` `Target audience`

## In one glance
## Clinical algorithm
## Red flags
## Diagnostic work-up
## Management
## Monitoring
## Sources

Functional colors

Color Meaning
Blue standard diagnostic/treatment route
Purple immunology, pathology, complement, biopsy
Green stable, response, follow-up
Amber caution, monitoring, uncertainty
Red urgent, red flag, same-day action

SVG style

SVG figures should use:

  • white canvas
  • rounded rectangles
  • same functional colors
  • Inter/Arial/system font
  • 4–7 nodes maximum per figure
  • split large pathways into triage, diagnosis, treatment and monitoring

Use scripts/make_nephron_svg.py for reproducible SVGs.