---
title: "Noura Labs — LDL Result"
platform: ios
slug: noura-labs-ldl-result
screens: ["lab-result"]
domains: ["healthcare"]
style: "minimal"
fonts: ["SF Pro Display"]
roles: ["top-navigation-bar", "button", "badge", "card", "divider", "accordion", "toolbar"]
score: {clean: 100, consistent: 74, accessible: 100, comprehensible: 34}
url: https://gui.farm/ios/noura-labs-ldl-result
raw: https://gui.farm/ios/noura-labs-ldl-result/design.guix
download: https://gui.farm/ios/noura-labs-ldl-result.gui
---

# Noura Labs — LDL Result

Lab result detail for an LDL cholesterol reading with a target-range gauge, trend history, and next steps.

- **Live preview:** https://gui.farm/ios/noura-labs-ldl-result
- **Raw source:** https://gui.farm/ios/noura-labs-ldl-result/design.guix
- **Download (.gui):** https://gui.farm/ios/noura-labs-ldl-result.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Noura Labs — LDL Result">
  <tokens>
    <color name="bg" value="#F4F7F5" /><color name="surface" value="#FFFFFF" /><color name="surface-soft" value="#EAF0EC" />
    <color name="text-primary" value="#182019" /><color name="text-secondary" value="#4B594D" /><color name="border" value="#CAD3CB" />
    <color name="primary" value="#1E6543" /><color name="primary-soft" value="#DCEFE4" /><color name="warning" value="#7A4B00" />
    <color name="warning-soft" value="#FFF0D6" /><color name="critical" value="#8F2D25" /><color name="critical-soft" value="#FCE4E1" /><color name="white" value="#FFFFFF" />
    <number name="radius-sm" value="8" /><number name="radius-md" value="14" /><number name="radius-lg" value="20" /><number name="radius-pill" value="999" />
  </tokens>
  <styles>
    <text-style name="NavTitle" font-family="SF Pro Display" font-size="17" font-weight="600" line-height="22" />
    <text-style name="Title" font-family="SF Pro Display" font-size="28" font-weight="700" line-height="34" letter-spacing="-0.4" />
    <text-style name="Metric" font-family="SF Pro Display" font-size="52" font-weight="700" line-height="56" letter-spacing="-1.2" />
    <text-style name="Title2" font-family="SF Pro Display" font-size="22" font-weight="600" line-height="28" />
    <text-style name="Headline" font-family="SF Pro Display" font-size="17" font-weight="600" line-height="22" />
    <text-style name="Body" font-family="SF Pro Display" font-size="17" font-weight="400" line-height="22" />
    <text-style name="Callout" font-family="SF Pro Display" font-size="16" font-weight="400" line-height="21" />
    <text-style name="Subheadline" font-family="SF Pro Display" font-size="15" font-weight="400" line-height="20" />
    <text-style name="Footnote" font-family="SF Pro Display" font-size="13" font-weight="400" line-height="18" />
    <text-style name="FootnoteStrong" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="18" />
    <text-style name="Caption" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
  </styles>
  <fonts><font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" /><font family="Inter" source="google" weights="400 500 600 700" styles="normal" /></fonts>
  <col w="393" fill="$bg" clip="true">
    <row w="393" h="47" p="12 20 0 20" align="middle-left">
      <text w="fill" value="9:41" text-style="FootnoteStrong" color="$text-primary" />
      <row gap="7" align="middle-left"><img src="https://api.iconify.design/lucide/signal.svg?color=%23182019" w="16" h="16" /><img src="https://api.iconify.design/lucide/wifi.svg?color=%23182019" w="16" h="16" /><img src="https://api.iconify.design/lucide/battery-full.svg?color=%23182019" w="20" h="20" /></row>
    </row>
    <row role="top-navigation-bar" w="fill" h="52" p="0 16" gap="auto" align="middle-left">
      <row role="button" w="44" h="44" align="middle-left"><img src="https://api.iconify.design/lucide/chevron-left.svg?color=%231E6543" w="24" h="24" /></row>
      <text value="Result details" text-style="NavTitle" color="$text-primary" />
      <row role="button" w="44" h="44" align="middle-right"><img src="https://api.iconify.design/lucide/share.svg?color=%231E6543" w="21" h="21" /></row>
    </row>
    <col w="393" p="16 16 28 16" gap="24">
      <col w="361" gap="8">
        <row role="badge" h="28" radius="$radius-pill" fill="$warning-soft" p="0 10" gap="7" align="middle-left"><ellipse w="7" h="7" fill="$warning" /><text value="Above target range" text-style="FootnoteStrong" color="$warning" /></row>
        <text value="LDL cholesterol" text-style="Title" color="$text-primary" />
        <text value="Lipid panel · Collected 12 Aug 2026" text-style="Subheadline" color="$text-secondary" />
      </col>
      <col role="card" w="361" fill="$surface" radius="$radius-lg" border="1 $border" p="20 16" gap="16">
        <row w="329" align="baseline"><text value="128" text-style="Metric" color="$text-primary" /><text value=" mg/dL" text-style="Headline" color="$text-secondary" /></row>
        <col w="329" gap="8">
          <row w="fill" gap="auto" align="middle-left"><text value="Your result" text-style="FootnoteStrong" color="$text-secondary" /><text value="Target: below 100" text-style="FootnoteStrong" color="$primary" /></row>
          <frame w="329" h="42" clip="true">
            <rect x="0" y="14" w="164.5" h="12" radius="6" fill="$primary-soft" /><rect x="164.5" y="14" w="98.7" h="12" fill="$warning-soft" /><rect x="263.2" y="14" w="65.8" h="12" radius="6" fill="$critical-soft" />
            <rect x="210.56" y="5" w="2" h="30" radius="1" fill="$text-primary" /><ellipse x="205.56" y="0" w="12" h="12" fill="$text-primary" />
          </frame>
          <row w="fill" gap="auto" align="middle-left"><text value="0" text-style="Caption" color="$text-secondary" /><text value="100" text-style="Caption" color="$text-secondary" /><text value="160" text-style="Caption" color="$text-secondary" /><text value="200" text-style="Caption" color="$text-secondary" /></row>
        </col>
        <line role="divider" w="329" fill="$border" />
        <row w="329" gap="10" align="top-left"><row w="36" h="36" radius="18" fill="$warning-soft" align="middle-center"><img src="https://api.iconify.design/lucide/info.svg?color=%237A4B00" w="19" h="19" /></row><text w="283" value="This is 28 mg/dL above your lab's target. One result does not establish a diagnosis." text-style="Callout" color="$text-primary" /></row>
      </col>
      <col w="361" fill="$primary-soft" radius="$radius-md" border="1 $border" p="16" gap="12">
        <row w="329" gap="10" align="middle-left"><img src="https://api.iconify.design/lucide/message-circle.svg?color=%231E6543" w="22" h="22" /><text value="What happens next" text-style="Headline" color="$text-primary" /></row>
        <text w="329" value="Your care team will review the full lipid panel. Ask how this result fits with your history and other risk factors." text-style="Callout" color="$text-primary" />
        <row role="button" w="329" h="48" radius="$radius-md" fill="$primary" align="middle-center"><text value="Message care team" text-style="Headline" color="$white" /></row>
      </col>
      <col w="361" gap="12">
        <row w="fill" gap="auto" align="middle-left"><text value="Recent results" text-style="Title2" color="$text-primary" /><text value="mg/dL" text-style="Footnote" color="$text-secondary" /></row>
        <col role="card" w="361" fill="$surface" radius="$radius-md" border="1 $border" clip="true">
          <row w="361" h="54" p="0 16" gap="10" align="middle-left"><text w="52" value="14 Feb" text-style="Footnote" color="$text-secondary" /><frame w="200" h="8" radius="4" clip="true"><rect x="0" y="0" w="200" h="8" fill="$surface-soft" /><rect x="0" y="0" w="102" h="8" radius="4" fill="$primary" /></frame><text w="67" value="102" text-style="Headline" color="$text-primary" align="right" /></row>
          <line role="divider" w="329" fill="$border" />
          <row w="361" h="54" p="0 16" gap="10" align="middle-left"><text w="52" value="18 May" text-style="Footnote" color="$text-secondary" /><frame w="200" h="8" radius="4" clip="true"><rect x="0" y="0" w="200" h="8" fill="$surface-soft" /><rect x="0" y="0" w="116" h="8" radius="4" fill="$warning" /></frame><text w="67" value="116" text-style="Headline" color="$text-primary" align="right" /></row>
          <line role="divider" w="329" fill="$border" />
          <row w="361" h="54" p="0 16" gap="10" align="middle-left"><text w="52" value="12 Aug" text-style="FootnoteStrong" color="$text-primary" /><frame w="200" h="8" radius="4" clip="true"><rect x="0" y="0" w="200" h="8" fill="$surface-soft" /><rect x="0" y="0" w="128" h="8" radius="4" fill="$warning" /></frame><text w="67" value="128" text-style="Headline" color="$warning" align="right" /></row>
        </col>
      </col>
      <col w="361" gap="12">
        <text value="Related results" text-style="Title2" color="$text-primary" />
        <col role="card" w="361" fill="$surface" radius="$radius-md" border="1 $border" clip="true">
          <row w="fill" h="64" p="0 16" gap="auto" align="middle-left"><col gap="2"><text value="HDL cholesterol" text-style="Headline" color="$text-primary" /><text value="In target range" text-style="Footnote" color="$primary" /></col><row gap="8" align="middle-right"><text value="56 mg/dL" text-style="Headline" color="$text-primary" /><img src="https://api.iconify.design/lucide/chevron-right.svg?color=%234B594D" w="18" h="18" /></row></row>
          <line role="divider" w="329" fill="$border" />
          <row w="fill" h="64" p="0 16" gap="auto" align="middle-left"><col gap="2"><text value="Triglycerides" text-style="Headline" color="$text-primary" /><text value="In target range" text-style="Footnote" color="$primary" /></col><row gap="8" align="middle-right"><text value="118 mg/dL" text-style="Headline" color="$text-primary" /><img src="https://api.iconify.design/lucide/chevron-right.svg?color=%234B594D" w="18" h="18" /></row></row>
        </col>
      </col>
      <col role="accordion" w="361" fill="$surface" radius="$radius-md" border="1 $border" p="16" gap="12">
        <row w="fill" gap="auto" align="middle-left"><text value="About LDL cholesterol" text-style="Headline" color="$text-primary" /><img src="https://api.iconify.design/lucide/chevron-up.svg?color=%234B594D" w="19" h="19" /></row>
        <line role="divider" w="329" fill="$border" />
        <text w="329" value="LDL carries cholesterol through the blood. Your clinician may consider this value alongside age, blood pressure, family history, and other results." text-style="Callout" color="$text-secondary" />
        <text w="329" value="Reference ranges can differ by laboratory and care plan." text-style="FootnoteStrong" color="$text-secondary" />
      </col>
    </col>
    <col role="toolbar" w="393" fill="$surface" border="1 0 0 0 $border" p="12 16 10 16" gap="10">
      <row role="button" w="361" h="50" radius="$radius-md" fill="$primary" gap="9" align="middle-center"><img src="https://api.iconify.design/lucide/file-text.svg?color=%23FFFFFF" w="20" h="20" /><text value="View full report" text-style="Headline" color="$white" /></row>
      <frame w="361" h="20" clip="true"><rect x="111" y="10" w="139" h="5" radius="3" fill="$text-primary" /></frame>
    </col>
  </col>
</gui>
```