{"view":"postnatal","product":"After the Birth","role":"patient","description":"Patient app after the birth: baby's weight and checks, feeding log, mum's recovery, appointments, messages.","theme":{"id":"patient","name":"Patient","layout":"top","description":"Warm and roomy for mums-to-be and new parents: larger Raleway type, round corners, blush accent, menu along the top. Shared by the antenatal and postnatal views."},"stylesheets":["https://systemc-mockup.tooze.dev/ds/base.css","https://systemc-mockup.tooze.dev/ds/patient.css"],"nav":[{"label":"Home","path":"","slug":"home","url":"https://systemc-mockup.tooze.dev/postnatal"},{"label":"My baby","path":"baby","slug":"baby","url":"https://systemc-mockup.tooze.dev/postnatal/baby"},{"label":"Feeding","path":"feeding","slug":"feeding","url":"https://systemc-mockup.tooze.dev/postnatal/feeding"},{"label":"My recovery","path":"recovery","slug":"recovery","url":"https://systemc-mockup.tooze.dev/postnatal/recovery"},{"label":"Appointments","path":"appointments","slug":"appointments","url":"https://systemc-mockup.tooze.dev/postnatal/appointments"},{"label":"Messages","path":"messages","slug":"messages","url":"https://systemc-mockup.tooze.dev/postnatal/messages"}],"shell":{"open":"
\n \n After the BirthMock-up
","close":"
"},"navTemplates":{"item":"
  • {label}
    • ","group":"","nav":""},"subpages":[],"components":"# System C mock-up design system - components\n\nPages are plain HTML using these classes. The shell (header, menu, footer) is added around the page; never write your own header or menu.\n\n## Page\n- `.ds-page-head` - title row: `

    Title

    Subtitle

    buttons
    `\n- `.ds-breadcrumb` - small trail above the h1.\n- `.ds-stack` - vertical gap between blocks. `.ds-row` - horizontal, wrapping, centred.\n- `.ds-grid-2`, `.ds-grid-3`, `.ds-grid-4` - responsive card grids. `.ds-split` - main column plus a side column (2:1).\n- `.ds-muted`, `.ds-small`, `.ds-right` - text helpers.\n\n## Cards\n- `.ds-card` - white panel. Head: `

    Title

    Link
    `.\n- `.ds-card--soft` (tinted), `.ds-card--accent` (brand colour, white text), `.ds-card--flush` (no padding - wrap a table).\n- `.ds-stat` with `.ds-stat-value` and `.ds-stat-label` - a big number.\n\n## Actions\n- `.ds-btn` plus `.ds-btn--primary` | `.ds-btn--secondary` | `.ds-btn--ghost` | `.ds-btn--danger`, `.ds-btn--sm` for small. Works on `` and `