---
title: "Meridian Diagnostics - Fasting Lipid Panel"
platform: android
slug: meridian-diagnostics-fasting-lipid-panel
screens: ["lab-result"]
domains: ["healthcare"]
style: "skeuomorphic"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "button", "card", "badge", "divider", "tab-bar"]
score: {clean: 100, consistent: 69, accessible: 46, comprehensible: 30}
url: https://gui.farm/android/meridian-diagnostics-fasting-lipid-panel
raw: https://gui.farm/android/meridian-diagnostics-fasting-lipid-panel/design.guix
download: https://gui.farm/android/meridian-diagnostics-fasting-lipid-panel.gui
---

# Meridian Diagnostics - Fasting Lipid Panel

A dark skeuomorphic Android lab-result screen where a patient reviews a fasting lipid panel, with per-analyte reference-range bars and value markers, one borderline-high LDL flagged, and a share-with-physician action.

- **Live preview:** https://gui.farm/android/meridian-diagnostics-fasting-lipid-panel
- **Raw source:** https://gui.farm/android/meridian-diagnostics-fasting-lipid-panel/design.guix
- **Download (.gui):** https://gui.farm/android/meridian-diagnostics-fasting-lipid-panel.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Meridian Diagnostics - Fasting Lipid Panel">
  <mode name="theme" values="light dark" default="dark" />

  <tokens>
    <color name="bg"       value="#0E1013" />
    <color name="panel"    value="#16191E" />
    <color name="panel2"   value="#1E232A" />
    <color name="ink"      value="#F2F4F7" />
    <color name="ink-2"    value="#9AA3AD" />
    <color name="ink-3"    value="#828A93" />
    <color name="hair"     value="#262C33" />
    <color name="track"    value="#242A31" />
    <color name="gold"     value="#F2B03D" />
    <color name="gold-t"   value="#F7C766" />
    <color name="gold-d"   value="#3A2E12" />
    <color name="red"      value="#FF5A52" />
    <color name="red-t"    value="#FF8B84" />
    <color name="red-d"    value="#3A1614" />

    <number name="r-pill" value="999" />
    <number name="r-card" value="20" />
    <number name="r-tile" value="14" />
  </tokens>

  <fonts>
    <font family="Roboto" source="system" weights="400 500 600 700" styles="normal" />
  </fonts>

  <styles>
    <text-style name="Eyebrow"  font-family="Roboto" font-size="11" font-weight="600" line-height="14" letter-spacing="1.4" />
    <text-style name="NavTitle" font-family="Roboto" font-size="16" font-weight="600" line-height="20" />
    <text-style name="HeroNum"  font-family="Roboto" font-size="46" font-weight="700" line-height="48" letter-spacing="-1.5" />
    <text-style name="HeroUnit" font-family="Roboto" font-size="18" font-weight="600" line-height="22" />
    <text-style name="H2"       font-family="Roboto" font-size="15" font-weight="700" line-height="19" />
    <text-style name="Metric"   font-family="Roboto" font-size="22" font-weight="700" line-height="25" letter-spacing="-0.5" />
    <text-style name="Unit"     font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="ItemName" font-family="Roboto" font-size="14" font-weight="600" line-height="18" />
    <text-style name="Ref"      font-family="Roboto" font-size="11" font-weight="600" line-height="14" letter-spacing="0.2" />
    <text-style name="Chip"     font-family="Roboto" font-size="10" font-weight="700" line-height="13" letter-spacing="0.7" />
    <text-style name="Axis"     font-family="Roboto" font-size="10" font-weight="600" line-height="13" letter-spacing="0.2" />
    <text-style name="Label"    font-family="Roboto" font-size="10" font-weight="700" line-height="13" letter-spacing="0.9" />
    <text-style name="MetaVal"  font-family="Roboto" font-size="13" font-weight="600" line-height="17" />
    <text-style name="Body"     font-family="Roboto" font-size="13" font-weight="500" line-height="19" />
    <text-style name="Tiny"     font-family="Roboto" font-size="10" font-weight="600" line-height="13" letter-spacing="0.3" />
  </styles>

  <col w="360" fill="$bg" gap="13" align="top-center">

    <!-- Status bar (untagged device chrome) -->
    <row w="fill" p="13 16 0" align="middle-center" gap="auto">
      <text value="9:41" font-family="Roboto" font-size="14" font-weight="600" color="$ink" />
      <row gap="7" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt.svg?color=%23F2F4F7" w="16" h="16" />
        <img src="https://api.iconify.design/material-symbols/wifi.svg?color=%23F2F4F7" w="16" h="16" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt.svg?color=%23F2F4F7" w="16" h="16" />
      </row>
    </row>

    <!-- Top navigation -->
    <row role="top-navigation-bar" w="fill" p="4 12 0" align="middle-center" gap="auto">
      <col role="button" w="40" h="40" radius="$r-pill" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23F2F4F7" w="24" h="24" />
      </col>
      <col gap="2" align="middle-center">
        <text text-style="Eyebrow" text-case="uppercase" value="Fasting Lipid Panel" color="$gold-t" align="center" />
        <text text-style="NavTitle" value="Results" color="$ink" align="center" />
      </col>
      <col role="button" w="40" h="40" radius="$r-pill" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/ios-share.svg?color=%23F2F4F7" w="21" h="21" />
      </col>
    </row>

    <!-- Hero: summary -->
    <col role="card" w="328" radius="$r-card" p="16" gap="14" fill="$panel" border="1 $hair">
      <appearance>
        <fill type="linear-gradient" value="linear-gradient(180deg, #1B1F26 0%, #12151A 100%)" />
        <effect type="drop-shadow" x="0" y="8" radius="20" spread="-8" color="#00000066" />
        <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF12" />
      </appearance>
      <row w="fill" align="middle-left" gap="auto">
        <col gap="6" align="top-left">
          <text text-style="Label" text-case="uppercase" value="Markers in range" color="$ink-2" />
          <row gap="7" align="bottom-left">
            <text text-style="HeroNum" value="5" color="$gold" />
            <text text-style="HeroUnit" value="/ 6" color="$ink-3" pb="6" />
          </row>
        </col>
        <col gap="8" align="top-right">
          <row role="badge" h="26" radius="$r-pill" fill="$red-d" p="0 11" gap="6" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/error-circle-rounded-outline.svg?color=%23FF8B84" w="14" h="14" />
            <text text-style="Chip" text-case="uppercase" value="1 to review" color="$red-t" />
          </row>
          <text text-style="Tiny" value="Ref. lab: within limits" color="$ink-3" align="right" />
        </col>
      </row>
      <line w="fill" fill="$hair" role="divider" />
      <row w="fill" align="top-left" gap="auto">
        <col gap="4" align="top-left">
          <text text-style="Label" text-case="uppercase" value="Collected" color="$ink-3" />
          <text text-style="MetaVal" value="Aug 12, 2026" color="$ink" />
        </col>
        <col gap="4" align="top-left">
          <text text-style="Label" text-case="uppercase" value="Ordered by" color="$ink-3" />
          <text text-style="MetaVal" value="Dr. P. Anand" color="$ink" />
        </col>
        <col gap="4" align="top-right">
          <text text-style="Label" text-case="uppercase" value="Specimen" color="$ink-3" />
          <text text-style="MetaVal" value="Serum, fasting" color="$ink" align="right" />
        </col>
      </row>
    </col>

    <!-- Legend -->
    <row w="328" align="middle-left" gap="16" p="0 4">
      <row gap="7" align="middle-center">
        <rect w="16" h="8" radius="4" fill="$gold" />
        <text text-style="Tiny" value="Target range" color="$ink-2" />
      </row>
      <row gap="7" align="middle-center">
        <rect w="4" h="12" radius="2" fill="$ink" />
        <text text-style="Tiny" value="Your value" color="$ink-2" />
      </row>
      <row gap="7" align="middle-center">
        <rect w="4" h="12" radius="2" fill="$red" />
        <text text-style="Tiny" value="Out of range" color="$ink-2" />
      </row>
    </row>

    <!-- Panel card -->
    <col role="card" w="328" radius="$r-card" p="16" gap="16" fill="$panel" border="1 $hair">
      <appearance>
        <fill type="linear-gradient" value="linear-gradient(180deg, #1A1E24 0%, #131619 100%)" />
        <effect type="drop-shadow" x="0" y="8" radius="20" spread="-8" color="#00000066" />
        <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF10" />
      </appearance>

      <row w="fill" align="middle-left" gap="auto">
        <text text-style="H2" value="Lipid panel" color="$ink" />
        <text text-style="Label" text-case="uppercase" value="mg/dL" color="$ink-3" />
      </row>

      <!-- 1 Total cholesterol -->
      <col w="296" gap="9">
        <row w="fill" align="top-left" gap="auto">
          <col gap="4" align="top-left">
            <text text-style="ItemName" value="Total cholesterol" color="$ink" />
            <row gap="4" align="bottom-left">
              <text text-style="Metric" value="184" color="$ink" />
              <text text-style="Unit" value="mg/dL" color="$ink-2" pb="3" />
            </row>
          </col>
          <col gap="6" align="top-right">
            <row role="badge" h="22" radius="$r-pill" fill="$gold-d" p="0 9" align="middle-center">
              <text text-style="Chip" text-case="uppercase" value="Desirable" color="$gold-t" />
            </row>
            <text text-style="Ref" value="Desirable &lt; 200" color="$ink-2" align="right" />
          </col>
        </row>
        <frame w="296" h="18">
          <rect x="0" y="4" w="296" h="10" radius="5" fill="$track" />
          <rect x="0" y="4" w="148.00" h="10" radius="5" fill="$gold" />
          <rect x="122.32" y="0" w="4" h="18" radius="2" fill="$ink" />
        </frame>
        <row w="fill" align="middle-left" gap="auto">
          <text text-style="Axis" value="100" color="$ink-3" />
          <text text-style="Axis" value="300" color="$ink-3" />
        </row>
      </col>

      <line w="296" fill="$hair" role="divider" />

      <!-- 2 LDL cholesterol (flagged) -->
      <col w="296" gap="9">
        <row w="fill" align="top-left" gap="auto">
          <col gap="4" align="top-left">
            <text text-style="ItemName" value="LDL cholesterol" color="$ink" />
            <row gap="4" align="bottom-left">
              <text text-style="Metric" value="143" color="$red-t" />
              <text text-style="Unit" value="mg/dL" color="$ink-2" pb="3" />
            </row>
          </col>
          <col gap="6" align="top-right">
            <row role="badge" h="22" radius="$r-pill" fill="$red-d" p="0 9" align="middle-center">
              <text text-style="Chip" text-case="uppercase" value="Borderline" color="$red-t" />
            </row>
            <text text-style="Ref" value="Optimal &lt; 100" color="$ink-2" align="right" />
          </col>
        </row>
        <frame w="296" h="18">
          <rect x="0" y="4" w="296" h="10" radius="5" fill="$track" />
          <rect x="0" y="4" w="111.00" h="10" radius="5" fill="$gold" />
          <col x="188.55" y="0" w="4" h="18" radius="2" fill="$red">
            <appearance>
              <fill type="color" value="#FF5A52" />
              <effect type="drop-shadow" x="0" y="0" radius="6" spread="0" color="#FF5A5299" />
            </appearance>
          </col>
        </frame>
        <row w="fill" align="middle-left" gap="auto">
          <text text-style="Axis" value="40" color="$ink-3" />
          <text text-style="Axis" value="200" color="$ink-3" />
        </row>
      </col>

      <line w="296" fill="$hair" role="divider" />

      <!-- 3 HDL cholesterol -->
      <col w="296" gap="9">
        <row w="fill" align="top-left" gap="auto">
          <col gap="4" align="top-left">
            <text text-style="ItemName" value="HDL cholesterol" color="$ink" />
            <row gap="4" align="bottom-left">
              <text text-style="Metric" value="58" color="$ink" />
              <text text-style="Unit" value="mg/dL" color="$ink-2" pb="3" />
            </row>
          </col>
          <col gap="6" align="top-right">
            <row role="badge" h="22" radius="$r-pill" fill="$gold-d" p="0 9" align="middle-center">
              <text text-style="Chip" text-case="uppercase" value="Optimal" color="$gold-t" />
            </row>
            <text text-style="Ref" value="Good &gt; 40" color="$ink-2" align="right" />
          </col>
        </row>
        <frame w="296" h="18">
          <rect x="0" y="4" w="296" h="10" radius="5" fill="$track" />
          <rect x="84.57" y="4" w="211.43" h="10" radius="5" fill="$gold" />
          <rect x="158.69" y="0" w="4" h="18" radius="2" fill="$ink" />
        </frame>
        <row w="fill" align="middle-left" gap="auto">
          <text text-style="Axis" value="20" color="$ink-3" />
          <text text-style="Axis" value="90" color="$ink-3" />
        </row>
      </col>

      <line w="296" fill="$hair" role="divider" />

      <!-- 4 Triglycerides -->
      <col w="296" gap="9">
        <row w="fill" align="top-left" gap="auto">
          <col gap="4" align="top-left">
            <text text-style="ItemName" value="Triglycerides" color="$ink" />
            <row gap="4" align="bottom-left">
              <text text-style="Metric" value="96" color="$ink" />
              <text text-style="Unit" value="mg/dL" color="$ink-2" pb="3" />
            </row>
          </col>
          <col gap="6" align="top-right">
            <row role="badge" h="22" radius="$r-pill" fill="$gold-d" p="0 9" align="middle-center">
              <text text-style="Chip" text-case="uppercase" value="Normal" color="$gold-t" />
            </row>
            <text text-style="Ref" value="Normal &lt; 150" color="$ink-2" align="right" />
          </col>
        </row>
        <frame w="296" h="18">
          <rect x="0" y="4" w="296" h="10" radius="5" fill="$track" />
          <rect x="0" y="4" w="155.05" h="10" radius="5" fill="$gold" />
          <rect x="76.93" y="0" w="4" h="18" radius="2" fill="$ink" />
        </frame>
        <row w="fill" align="middle-left" gap="auto">
          <text text-style="Axis" value="40" color="$ink-3" />
          <text text-style="Axis" value="250" color="$ink-3" />
        </row>
      </col>

      <line w="296" fill="$hair" role="divider" />

      <!-- 5 Non-HDL cholesterol -->
      <col w="296" gap="9">
        <row w="fill" align="top-left" gap="auto">
          <col gap="4" align="top-left">
            <text text-style="ItemName" value="Non-HDL cholesterol" color="$ink" />
            <row gap="4" align="bottom-left">
              <text text-style="Metric" value="126" color="$ink" />
              <text text-style="Unit" value="mg/dL" color="$ink-2" pb="3" />
            </row>
          </col>
          <col gap="6" align="top-right">
            <row role="badge" h="22" radius="$r-pill" fill="$gold-d" p="0 9" align="middle-center">
              <text text-style="Chip" text-case="uppercase" value="In range" color="$gold-t" />
            </row>
            <text text-style="Ref" value="Optimal &lt; 130" color="$ink-2" align="right" />
          </col>
        </row>
        <frame w="296" h="18">
          <rect x="0" y="4" w="296" h="10" radius="5" fill="$track" />
          <rect x="0" y="4" w="129.50" h="10" radius="5" fill="$gold" />
          <rect x="120.10" y="0" w="4" h="18" radius="2" fill="$ink" />
        </frame>
        <row w="fill" align="middle-left" gap="auto">
          <text text-style="Axis" value="60" color="$ink-3" />
          <text text-style="Axis" value="220" color="$ink-3" />
        </row>
      </col>

      <line w="296" fill="$hair" role="divider" />

      <!-- 6 Chol / HDL ratio -->
      <col w="296" gap="9">
        <row w="fill" align="top-left" gap="auto">
          <col gap="4" align="top-left">
            <text text-style="ItemName" value="Chol / HDL ratio" color="$ink" />
            <row gap="4" align="bottom-left">
              <text text-style="Metric" value="3.2" color="$ink" />
              <text text-style="Unit" value="ratio" color="$ink-2" pb="3" />
            </row>
          </col>
          <col gap="6" align="top-right">
            <row role="badge" h="22" radius="$r-pill" fill="$gold-d" p="0 9" align="middle-center">
              <text text-style="Chip" text-case="uppercase" value="Low risk" color="$gold-t" />
            </row>
            <text text-style="Ref" value="Low risk &lt; 3.5" color="$ink-2" align="right" />
          </col>
        </row>
        <frame w="296" h="18">
          <rect x="0" y="4" w="296" h="10" radius="5" fill="$track" />
          <rect x="0" y="4" w="105.71" h="10" radius="5" fill="$gold" />
          <rect x="91.03" y="0" w="4" h="18" radius="2" fill="$ink" />
        </frame>
        <row w="fill" align="middle-left" gap="auto">
          <text text-style="Axis" value="1.0" color="$ink-3" />
          <text text-style="Axis" value="8.0" color="$ink-3" />
        </row>
      </col>
    </col>

    <!-- Flagged note -->
    <col role="card" w="328" radius="$r-card" p="16" gap="13" fill="$panel" border="1 $red-d">
      <appearance>
        <fill type="linear-gradient" value="linear-gradient(180deg, #201519 0%, #14161A 100%)" />
        <effect type="drop-shadow" x="0" y="8" radius="20" spread="-8" color="#00000066" />
      </appearance>
      <row w="fill" align="top-left" gap="11">
        <col w="34" h="34" radius="$r-tile" fill="$red-d" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/flag-rounded.svg?color=%23FF8B84" w="19" h="19" />
        </col>
        <col w="fill" gap="3" align="top-left">
          <text text-style="H2" value="LDL is above optimal" color="$ink" />
          <text w="fill" text-style="Body" value="At 143 mg/dL your LDL sits in the borderline-high band. Diet, activity, and a follow-up in 3 months are common next steps to discuss with Dr. Anand." color="$ink-2" />
        </col>
      </row>
      <line w="fill" fill="$hair" role="divider" />
      <row w="fill" align="middle-left" gap="auto">
        <col gap="3" align="top-left">
          <text text-style="Label" text-case="uppercase" value="LDL trend" color="$ink-3" />
          <text text-style="Tiny" value="Last 4 draws, up 15" color="$ink-2" />
        </col>
        <img src="https://gui.farm/tools/charts/line-chart.svg?data=0:128,1:136,2:141,3:143&amp;line=%23FF5A52&amp;surface=dark&amp;curve=smooth&amp;area=on&amp;points=show&amp;grid=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=280&amp;height=88" w="140" h="44" fit="contain" />
      </row>
    </col>

    <!-- Primary action -->
    <col role="button" w="328" h="52" radius="$r-pill" align="middle-center" fill="$gold">
      <appearance>
        <fill type="linear-gradient" value="linear-gradient(180deg, #F7C15A 0%, #E19A28 100%)" />
        <effect type="drop-shadow" x="0" y="5" radius="16" spread="-4" color="#E19A2866" />
        <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF66" />
      </appearance>
      <row gap="9" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/send-rounded.svg?color=%231A1206" w="19" h="19" />
        <text font-family="Roboto" font-size="15" font-weight="700" value="Share with physician" color="#1A1206" />
      </row>
    </col>

    <!-- Tab bar (viewport-fixed, last flow child) -->
    <row role="tab-bar" w="fill" h="hug" fill="$panel" border="1 $hair" p="12 30 22" align="top-center" gap="auto">
      <appearance>
        <fill type="linear-gradient" value="linear-gradient(180deg, #181C22 0%, #101317 100%)" />
        <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF10" />
      </appearance>
      <col w="58" align="top-center" gap="5">
        <img src="https://api.iconify.design/material-symbols/labs-outline-rounded.svg?color=%23F2B03D" w="23" h="23" />
        <text text-style="Tiny" value="Results" color="$gold" align="center" />
      </col>
      <col w="58" align="top-center" gap="5">
        <img src="https://api.iconify.design/material-symbols/monitoring.svg?color=%23828A93" w="23" h="23" />
        <text text-style="Tiny" value="Trends" color="$ink-3" align="center" />
      </col>
      <col w="58" align="top-center" gap="5">
        <img src="https://api.iconify.design/material-symbols/folder-outline-rounded.svg?color=%23828A93" w="23" h="23" />
        <text text-style="Tiny" value="Records" color="$ink-3" align="center" />
      </col>
      <col w="58" align="top-center" gap="5">
        <img src="https://api.iconify.design/material-symbols/person-outline-rounded.svg?color=%23828A93" w="23" h="23" />
        <text text-style="Tiny" value="Profile" color="$ink-3" align="center" />
      </col>
    </row>

  </col>
</gui>
```