---
title: "Courtside · Rialto Reign vs Fulton Aces (Box Score)"
platform: android
slug: courtside-rialto-reign-vs-fulton-aces-box-score
screens: ["analytics"]
domains: []
style: "material"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "badge", "divider", "segmented-control", "table", "card", "tab-bar"]
score: {clean: 100, consistent: 81, accessible: 72, comprehensible: 47}
url: https://gui.farm/android/courtside-rialto-reign-vs-fulton-aces-box-score
raw: https://gui.farm/android/courtside-rialto-reign-vs-fulton-aces-box-score/design.guix
download: https://gui.farm/android/courtside-rialto-reign-vs-fulton-aces-box-score.gui
---

# Courtside · Rialto Reign vs Fulton Aces (Box Score)

A dark Material 3 Android live box-score screen where a fan follows a tied third-quarter pro basketball game, with quarter-by-quarter scoring, a full team box score, game leaders, and shooting splits.

- **Live preview:** https://gui.farm/android/courtside-rialto-reign-vs-fulton-aces-box-score
- **Raw source:** https://gui.farm/android/courtside-rialto-reign-vs-fulton-aces-box-score/design.guix
- **Download (.gui):** https://gui.farm/android/courtside-rialto-reign-vs-fulton-aces-box-score.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Courtside · Rialto Reign vs Fulton Aces (Box Score)">
  <tokens>
    <color name="bg" value="#121016" />
    <color name="surface-container" value="#201C28" />
    <color name="surface-container-high" value="#2B2633" />
    <color name="on-surface" value="#ECE5F1" />
    <color name="on-surface-variant" value="#C9C0D4" />
    <color name="outline" value="#948CA0" />
    <color name="outline-variant" value="#443E50" />
    <color name="track" value="#332E3C" />
    <color name="primary" value="#FF5FA8" />
    <color name="on-primary" value="#48002A" />
    <color name="primary-text" value="#FF8FC3" />
    <color name="primary-container" value="#5A123E" />
    <color name="on-primary-container" value="#FFD9E9" />
    <color name="away" value="#A6B0C0" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="18" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="Display" font-family="Roboto" font-size="44" font-weight="700" line-height="46" />
    <text-style name="TitleLarge" font-family="Roboto" font-size="22" font-weight="500" line-height="28" />
    <text-style name="TitleMed" font-family="Roboto" font-size="16" font-weight="500" line-height="22" />
    <text-style name="BodyRow" font-family="Roboto" font-size="14" font-weight="500" line-height="18" />
    <text-style name="BodySmall" font-family="Roboto" font-size="13" font-weight="400" line-height="18" />
    <text-style name="NumRow" font-family="Roboto" font-size="14" font-weight="400" line-height="18" />
    <text-style name="NumBold" font-family="Roboto" font-size="14" font-weight="700" line-height="18" />
    <text-style name="LabelLarge" font-family="Roboto" font-size="14" font-weight="500" line-height="20" />
    <text-style name="LabelMedium" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Section" font-family="Roboto" font-size="11" font-weight="600" line-height="16" letter-spacing="0.7" />
    <text-style name="Overline" font-family="Roboto" font-size="10" font-weight="700" line-height="14" letter-spacing="0.8" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
  </fonts>
  <components>
    <component name="PlayerRow" id="comp-prow">
      <props>
        <prop name="name" type="text" target="pname" />
        <prop name="pos" type="text" target="ppos" />
        <prop name="min" type="text" target="pmin" />
        <prop name="pts" type="text" target="ppts" />
        <prop name="reb" type="text" target="preb" />
        <prop name="ast" type="text" target="past" />
      </props>
      <row w="300" h="40" gap="0" align="middle-left">
        <row w="fill" gap="7" align="middle-left">
          <text id="pname" text-style="BodyRow" value="Name" color="$on-surface" />
          <text id="ppos" text-style="Overline" value="G" color="$on-surface-variant" text-case="uppercase" />
        </row>
        <row w="44" align="middle-right">
          <text id="pmin" text-style="NumRow" value="0" color="$on-surface-variant" />
        </row>
        <row w="40" align="middle-right">
          <text id="ppts" text-style="NumBold" value="0" color="$on-surface" />
        </row>
        <row w="40" align="middle-right">
          <text id="preb" text-style="NumRow" value="0" color="$on-surface-variant" />
        </row>
        <row w="40" align="middle-right">
          <text id="past" text-style="NumRow" value="0" color="$on-surface-variant" />
        </row>
      </row>
    </component>
    <component name="LeaderCard" id="comp-leader">
      <props>
        <prop name="cat" type="text" target="lcat" />
        <prop name="mono" type="text" target="lmono" />
        <prop name="name" type="text" target="lname" />
        <prop name="val" type="text" target="lval" />
        <prop name="unit" type="text" target="lunit" />
      </props>
      <col w="98" radius="$r-md" fill="$surface-container-high" p="12 12 14 12" gap="10" align="top-left">
        <text id="lcat" text-style="Overline" value="CAT" color="$primary-text" text-case="uppercase" />
        <row w="74" gap="8" align="middle-left">
          <row w="30" h="30" radius="$r-full" fill="$primary-container" align="middle-center">
            <text id="lmono" text-style="LabelMedium" value="AA" color="$on-primary-container" />
          </row>
        </row>
        <col w="74" gap="2" align="top-left">
          <row w="74" gap="4" align="bottom-left">
            <text id="lval" text-style="TitleLarge" value="0" color="$on-surface" />
            <text id="lunit" text-style="LabelMedium" value="pts" color="$on-surface-variant" />
          </row>
          <text id="lname" text-style="BodySmall" value="Player" color="$on-surface-variant" />
        </col>
      </col>
    </component>
    <component name="ShootRow" id="comp-shoot">
      <props>
        <prop name="label" type="text" target="slabel" />
        <prop name="made" type="text" target="smade" />
        <prop name="pct" type="text" target="spct" />
        <prop name="fillw" type="text" target="sfill" />
      </props>
      <col w="300" gap="8" align="top-left">
        <row w="fill" gap="auto" align="middle-left">
          <row w="fill" gap="8" align="bottom-left">
            <text id="slabel" text-style="LabelLarge" value="FG" color="$on-surface" />
            <text id="smade" text-style="BodySmall" value="0-0" color="$on-surface-variant" />
          </row>
          <text id="spct" text-style="LabelLarge" value="0%" color="$primary-text" />
        </row>
        <frame w="300" h="8" radius="$r-full" clip="true">
          <rect x="0" y="0" w="300" h="8" radius="$r-full" fill="$track" />
          <rect id="sfill" x="0" y="0" w="10" h="8" radius="$r-full" fill="$primary" />
        </frame>
      </col>
    </component>
  </components>
  <col w="360" fill="$bg">
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="LabelMedium" value="9:41" color="$on-surface" />
      <row gap="6" align="middle-right">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23ECE5F1" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23ECE5F1" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23ECE5F1" w="15" h="15" />
      </row>
    </row>
    <row role="top-navigation-bar" w="fill" h="64" p="0 8 0 4" gap="4" align="middle-left">
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23ECE5F1" w="24" h="24" />
      </row>
      <col w="fill" gap="0" align="middle-left">
        <text text-style="TitleMed" value="Game Center" color="$on-surface" />
        <text text-style="LabelMedium" value="Continental League · Reg. Season" color="$on-surface-variant" />
      </col>
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/cast-rounded.svg?color=%23C9C0D4" w="24" h="24" />
      </row>
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/more-vert-rounded.svg?color=%23C9C0D4" w="24" h="24" />
      </row>
    </row>
    <col w="360" p="6 16 0 16">
      <col w="328" radius="$r-lg" fill="$surface-container" border="1 $outline-variant" p="18 16 16 16" gap="14">
        <row w="296" gap="10" align="middle-center">
          <col w="fill" gap="8" align="middle-center">
            <row w="52" h="52" radius="$r-full" fill="$primary" align="middle-center">
              <text text-style="TitleMed" value="RIA" color="$on-primary" />
            </row>
            <col w="fill" gap="1" align="middle-center">
              <text text-style="BodyRow" value="Rialto Reign" color="$on-surface" />
              <text text-style="LabelMedium" value="31-14" color="$on-surface-variant" />
            </col>
          </col>
          <col w="118" gap="6" align="middle-center">
            <row w="118" gap="10" align="middle-center">
              <text text-style="Display" value="69" color="$on-surface" />
              <rect w="2" h="26" radius="$r-full" fill="$outline-variant" />
              <text text-style="Display" value="69" color="$on-surface" />
            </row>
            <row role="badge" h="24" radius="$r-full" fill="$primary-container" p="0 10" gap="6" align="middle-center">
              <ellipse w="7" h="7" radius="$r-full" fill="$primary" />
              <text text-style="LabelMedium" value="Q3 · 4:12" color="$on-primary-container" />
            </row>
          </col>
          <col w="fill" gap="8" align="middle-center">
            <row w="52" h="52" radius="$r-full" fill="$away" align="middle-center">
              <text text-style="TitleMed" value="FUL" color="#151319" />
            </row>
            <col w="fill" gap="1" align="middle-center">
              <text text-style="BodyRow" value="Fulton Aces" color="$on-surface" />
              <text text-style="LabelMedium" value="28-17" color="$on-surface-variant" />
            </col>
          </col>
        </row>
        <rect role="divider" w="296" h="1" fill="$outline-variant" />
        <row w="296" gap="8" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/sports-basketball-outline-rounded.svg?color=%23C9C0D4" w="16" h="16" />
          <text text-style="BodySmall" value="Rialto has possession · Bonus" color="$on-surface-variant" />
          <ellipse w="3" h="3" fill="$outline" />
          <text text-style="BodySmall" value="Harbor Arena" color="$on-surface-variant" />
        </row>
      </col>
    </col>
    <col w="360" p="16 16 0 16">
      <row role="segmented-control" w="328" h="40" radius="$r-full" fill="$surface-container" border="1 $outline-variant" clip="true" align="middle-left">
        <row w="fill" h="40" align="middle-center">
          <text text-style="LabelLarge" value="Summary" color="$on-surface-variant" />
        </row>
        <row w="fill" h="40" fill="$primary-container" gap="6" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/table-rows-rounded.svg?color=%23FFD9E9" w="16" h="16" />
          <text text-style="LabelLarge" value="Box Score" color="$on-primary-container" />
        </row>
        <row w="fill" h="40" align="middle-center">
          <text text-style="LabelLarge" value="Insights" color="$on-surface-variant" />
        </row>
      </row>
    </col>
    <col w="360" p="20 16 0 16" gap="10">
      <text text-style="Section" value="SCORING BY QUARTER" color="$on-surface-variant" text-case="uppercase" p="0 0 0 2" />
      <col role="table" w="328" radius="$r-lg" fill="$surface-container" p="8 14 12 14" gap="0">
        <row w="300" h="30" gap="0" align="middle-left">
          <row w="fill" align="middle-left">
            <text text-style="Overline" value="TEAM" color="$on-surface-variant" text-case="uppercase" />
          </row>
          <row w="44" align="middle-right"><text text-style="Overline" value="1" color="$on-surface-variant" /></row>
          <row w="44" align="middle-right"><text text-style="Overline" value="2" color="$on-surface-variant" /></row>
          <row w="44" align="middle-right"><text text-style="Overline" value="3" color="$primary-text" /></row>
          <row w="44" align="middle-right"><text text-style="Overline" value="4" color="$on-surface-variant" /></row>
          <row w="40" align="middle-right"><text text-style="Overline" value="T" color="$on-surface" /></row>
        </row>
        <rect role="divider" w="300" h="1" fill="$outline-variant" />
        <row w="300" h="44" gap="0" align="middle-left">
          <row w="fill" gap="10" align="middle-left">
            <row w="24" h="24" radius="$r-full" fill="$primary" align="middle-center">
              <text text-style="Overline" value="RIA" color="$on-primary" />
            </row>
            <text text-style="BodyRow" value="Rialto" color="$on-surface" />
          </row>
          <row w="44" align="middle-right"><text text-style="NumRow" value="28" color="$on-surface-variant" /></row>
          <row w="44" align="middle-right"><text text-style="NumRow" value="22" color="$on-surface-variant" /></row>
          <row w="44" align="middle-right"><text text-style="NumBold" value="19" color="$primary-text" /></row>
          <row w="44" align="middle-right"><text text-style="NumRow" value="-" color="$outline" /></row>
          <row w="40" align="middle-right"><text text-style="NumBold" value="69" color="$on-surface" /></row>
        </row>
        <rect role="divider" w="300" h="1" fill="$outline-variant" />
        <row w="300" h="44" gap="0" align="middle-left">
          <row w="fill" gap="10" align="middle-left">
            <row w="24" h="24" radius="$r-full" fill="$away" align="middle-center">
              <text text-style="Overline" value="FUL" color="#151319" />
            </row>
            <text text-style="BodyRow" value="Fulton" color="$on-surface" />
          </row>
          <row w="44" align="middle-right"><text text-style="NumRow" value="24" color="$on-surface-variant" /></row>
          <row w="44" align="middle-right"><text text-style="NumRow" value="27" color="$on-surface-variant" /></row>
          <row w="44" align="middle-right"><text text-style="NumBold" value="18" color="$primary-text" /></row>
          <row w="44" align="middle-right"><text text-style="NumRow" value="-" color="$outline" /></row>
          <row w="40" align="middle-right"><text text-style="NumBold" value="69" color="$on-surface" /></row>
        </row>
      </col>
    </col>
    <col w="360" p="20 16 0 16" gap="10">
      <row w="fill" gap="auto" align="middle-left">
        <text text-style="Section" value="BOX SCORE" color="$on-surface-variant" text-case="uppercase" p="0 0 0 2" />
        <row role="segmented-control" w="150" h="30" radius="$r-full" fill="$surface-container" border="1 $outline-variant" clip="true" align="middle-left">
          <row w="fill" h="30" fill="$primary-container" align="middle-center">
            <text text-style="LabelMedium" value="Rialto" color="$on-primary-container" />
          </row>
          <row w="fill" h="30" align="middle-center">
            <text text-style="LabelMedium" value="Fulton" color="$on-surface-variant" />
          </row>
        </row>
      </row>
      <col role="card" w="328" radius="$r-lg" fill="$surface-container" p="14" gap="0">
        <row w="300" h="24" gap="0" align="middle-left">
          <row w="fill" align="middle-left"><text text-style="Overline" value="STARTERS" color="$on-surface-variant" text-case="uppercase" /></row>
          <row w="44" align="middle-right"><text text-style="Overline" value="MIN" color="$on-surface-variant" /></row>
          <row w="40" align="middle-right"><text text-style="Overline" value="PTS" color="$on-surface-variant" /></row>
          <row w="40" align="middle-right"><text text-style="Overline" value="REB" color="$on-surface-variant" /></row>
          <row w="40" align="middle-right"><text text-style="Overline" value="AST" color="$on-surface-variant" /></row>
        </row>
        <rect role="divider" w="300" h="1" fill="$outline-variant" />
        <instance component="comp-prow" name="G. Amoako" pos="F" min="30" pts="18" reb="7" ast="3" />
        <instance component="comp-prow" name="D. Prieto" pos="G" min="28" pts="15" reb="2" ast="6" />
        <instance component="comp-prow" name="M. Okonkwo" pos="C" min="27" pts="12" reb="9" ast="1" />
        <instance component="comp-prow" name="T. Ballard" pos="G" min="25" pts="9" reb="4" ast="5" />
        <instance component="comp-prow" name="R. Vasquez" pos="F" min="22" pts="6" reb="5" ast="2" />
        <row w="300" h="22" gap="0" p="8 0 4 0" align="middle-left">
          <row w="fill" align="middle-left"><text text-style="Overline" value="BENCH" color="$on-surface-variant" text-case="uppercase" /></row>
        </row>
        <rect role="divider" w="300" h="1" fill="$outline-variant" />
        <instance component="comp-prow" name="J. Whitfield" pos="G" min="12" pts="5" reb="1" ast="2" />
        <instance component="comp-prow" name="K. Berhane" pos="F" min="9" pts="4" reb="3" ast="0" />
        <instance component="comp-prow" name="L. Sorensen" pos="C" min="6" pts="0" reb="2" ast="1" />
        <rect role="divider" w="300" h="1" fill="$outline" />
        <row w="300" h="40" gap="0" align="middle-left">
          <row w="fill" align="middle-left"><text text-style="BodyRow" value="Team totals" color="$on-surface" /></row>
          <row w="44" align="middle-right"><text text-style="NumRow" value="159" color="$on-surface-variant" /></row>
          <row w="40" align="middle-right"><text text-style="NumBold" value="69" color="$primary-text" /></row>
          <row w="40" align="middle-right"><text text-style="NumBold" value="33" color="$on-surface" /></row>
          <row w="40" align="middle-right"><text text-style="NumBold" value="20" color="$on-surface" /></row>
        </row>
      </col>
    </col>
    <col w="360" p="20 16 0 16" gap="10">
      <text text-style="Section" value="GAME LEADERS" color="$on-surface-variant" text-case="uppercase" p="0 0 0 2" />
      <row w="328" gap="8" align="top-left">
        <instance component="comp-leader" cat="POINTS" mono="GA" name="G. Amoako" val="18" unit="pts" />
        <instance component="comp-leader" cat="REBOUNDS" mono="MO" name="M. Okonkwo" val="9" unit="reb" />
        <instance component="comp-leader" cat="ASSISTS" mono="DP" name="D. Prieto" val="6" unit="ast" />
      </row>
    </col>
    <col w="360" p="20 16 24 16" gap="10">
      <text text-style="Section" value="RIALTO SHOOTING" color="$on-surface-variant" text-case="uppercase" p="0 0 0 2" />
      <col role="card" w="328" radius="$r-lg" fill="$surface-container" p="16 14" gap="16">
        <instance component="comp-shoot" label="Field goals" made="26-58" pct="44.8%" fillw="134" />
        <instance component="comp-shoot" label="Three-point" made="7-21" pct="33.3%" fillw="100" />
        <instance component="comp-shoot" label="Free throws" made="10-13" pct="76.9%" fillw="231" />
      </col>
    </col>
    <row role="tab-bar" w="fill" h="80" fill="$surface-container" border="1 $outline-variant" p="12 0 16 0" gap="auto" align="top-center">
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/scoreboard-outline-rounded.svg?color=%23C9C0D4" w="24" h="24" />
        </row>
        <text text-style="LabelMedium" value="Scores" color="$on-surface-variant" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" radius="$r-full" fill="$primary-container" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/sports-basketball-rounded.svg?color=%23FFD9E9" w="24" h="24" />
        </row>
        <text text-style="LabelMedium" value="Live" color="$on-surface" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/newsmode-outline-rounded.svg?color=%23C9C0D4" w="24" h="24" />
        </row>
        <text text-style="LabelMedium" value="News" color="$on-surface-variant" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/account-circle-outline-rounded.svg?color=%23C9C0D4" w="24" h="24" />
        </row>
        <text text-style="LabelMedium" value="You" color="$on-surface-variant" />
      </col>
    </row>
  </col>
</gui>
```