---
title: "Parla - What does leggere mean?"
platform: android
slug: parla-what-does-leggere-mean
screens: []
domains: ["education"]
style: "claymorphism"
fonts: ["Roboto", "Fredoka"]
roles: ["top-navigation-bar", "card", "chip", "button", "badge", "toolbar"]
score: {clean: 100, consistent: 88, accessible: 98, comprehensible: 60}
url: https://gui.farm/android/parla-what-does-leggere-mean
raw: https://gui.farm/android/parla-what-does-leggere-mean/design.guix
download: https://gui.farm/android/parla-what-does-leggere-mean.gui
---

# Parla - What does leggere mean?

A claymorphic Italian language-learning quiz screen where the learner hears a word and taps the correct English meaning, with progress, hearts, and a Check button.

- **Live preview:** https://gui.farm/android/parla-what-does-leggere-mean
- **Raw source:** https://gui.farm/android/parla-what-does-leggere-mean/design.guix
- **Download (.gui):** https://gui.farm/android/parla-what-does-leggere-mean.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Parla - What does leggere mean?">
  <tokens>
    <color name="bg" value="#F6EEF1" />
    <color name="surface" value="#FFFFFF" />
    <color name="sel" value="#FCE4EB" />
    <color name="ink" value="#2A1E24" />
    <color name="sub" value="#665059" />
    <color name="line" value="#EEDCE3" />
    <color name="ring" value="#E2CCD5" />
    <color name="track-bg" value="#EED9E0" />
    <color name="rose" value="#F43F5E" />
    <color name="rose-deep" value="#B3123B" />
    <color name="rose-ink" value="#A00E36" />
    <number name="r-card" value="24" />
    <number name="r-tile" value="14" />
    <number name="r-btn" value="20" />
    <number name="r-pill" value="999" />
  </tokens>
  <styles>
    <text-style name="Status" font-family="Roboto" font-size="13" font-weight="500" line-height="16" />
    <text-style name="Num" font-family="Fredoka" font-size="14" font-weight="700" line-height="17" />
    <text-style
      name="Eyebrow"
      font-family="Fredoka"
      font-size="12"
      font-weight="700"
      line-height="15"
      letter-spacing="1.3"
    />
    <text-style
      name="H1"
      font-family="Fredoka"
      font-size="24"
      font-weight="700"
      line-height="29"
      letter-spacing="-0.3"
    />
    <text-style
      name="AudioWord"
      font-family="Fredoka"
      font-size="21"
      font-weight="700"
      line-height="25"
      letter-spacing="-0.2"
    />
    <text-style name="Meta" font-family="Roboto" font-size="12.5" font-weight="500" line-height="16" />
    <text-style
      name="ChipTag"
      font-family="Fredoka"
      font-size="11"
      font-weight="700"
      line-height="14"
      letter-spacing="0.8"
    />
    <text-style name="OptLabel" font-family="Fredoka" font-size="17" font-weight="600" line-height="21" />
    <text-style name="Badge" font-family="Fredoka" font-size="15" font-weight="700" line-height="19" />
    <text-style
      name="Btn"
      font-family="Fredoka"
      font-size="17"
      font-weight="700"
      line-height="21"
      letter-spacing="0.6"
    />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 600 700" styles="normal" />
    <font family="Fredoka" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>
  <col w="360" fill="$bg" h="765">
    <!-- Status + Titlebar -->
    <col w="fill" gap="0" align="top-center">
      <!-- Status bar (untagged device chrome) -->
      <row w="fill" p="10 20 0" align="middle-center" gap="auto">
        <text text-style="Status" value="9:41" color="$ink" />
        <row gap="7" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%232A1E24"
            w="16"
            h="16"
          />
          <img
            src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%232A1E24"
            w="16"
            h="16"
          />
          <img
            src="https://api.iconify.design/material-symbols/battery-full-rounded.svg?color=%232A1E24"
            w="16"
            h="16"
          />
        </row>
      </row>
      <!-- Top navigation: close, progress, hearts -->
      <row role="top-navigation-bar" w="fill" p="10 16 6" align="middle-center" gap="12">
        <frame w="40" h="40" radius="$r-pill" align="middle-center">
          <appearance>
            <fill type="color" value="$surface" />
            <effect type="drop-shadow" x="4" y="5" radius="10" spread="0" color="#C79EA859" />
            <effect type="drop-shadow" x="-3" y="-3" radius="7" spread="0" color="#FFFFFFCC" />
          </appearance>
          <img
            abs="true"
            x="9"
            y="9"
            src="https://api.iconify.design/material-symbols/close-rounded.svg?color=%232A1E24"
            w="22"
            h="22"
          />
        </frame>
        <frame w="200" h="14" radius="$r-pill" clip="true">
          <rect abs="true" x="0" y="0" w="200" h="14" radius="$r-pill" fill="$track-bg" />
          <rect abs="true" x="0" y="0" w="80" h="14" radius="$r-pill" fill="$rose" />
          <rect abs="true" x="6" y="3" w="68" h="4" radius="$r-pill" fill="#FFFFFF66" />
        </frame>
        <row w="64" h="34" radius="$r-pill" gap="5" align="middle-center">
          <appearance>
            <fill type="color" value="$surface" />
            <effect type="drop-shadow" x="3" y="4" radius="9" spread="0" color="#C79EA84D" />
            <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="#FFFFFF80" />
          </appearance>
          <img
            src="https://api.iconify.design/material-symbols/favorite-rounded.svg?color=%23F43F5E"
            w="18"
            h="18"
          />
          <text text-style="Num" value="4" color="$rose-ink" />
        </row>
      </row>
    </col>
    <!-- Header -->
    <col h="fill">
      <col w="fill" p="16 20 2" gap="8" align="top-left">
        <text
          text-style="Eyebrow"
          text-case="uppercase"
          value="Question 7 of 15  ·  Italian"
          color="$rose-ink"
        />
        <text w="fill" text-style="H1" value="What does this word mean?" color="$ink" />
      </col>
      <!-- Audio word card -->
      <col w="fill" p="16 20 0" align="top-center">
        <row role="card" w="fill" radius="$r-card" p="14 15" gap="14" align="middle-center">
          <appearance>
            <fill type="color" value="$surface" />
            <effect type="drop-shadow" x="6" y="8" radius="18" spread="0" color="#C79EA84D" />
            <effect type="drop-shadow" x="-5" y="-5" radius="12" spread="0" color="#FFFFFFCC" />
          </appearance>
          <frame w="56" h="56" radius="$r-pill" align="middle-center">
            <appearance>
              <fill type="color" value="$rose" />
              <effect type="drop-shadow" x="0" y="5" radius="12" spread="0" color="#F43F5E66" />
              <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="#FFFFFF80" />
            </appearance>
            <img
              abs="true"
              x="16"
              y="16"
              src="https://api.iconify.design/material-symbols/volume-up-rounded.svg?color=%23FFFFFF"
              w="24"
              h="24"
            />
          </frame>
          <col gap="3" align="top-left" w="fill">
            <text text-style="AudioWord" value="leggere" color="$ink" />
            <text text-style="Meta" value="/ˈlɛd.dʒe.re/  ·  tap to hear it" color="$sub" />
          </col>
          <row role="chip" radius="$r-pill" p="6 12" align="middle-center">
            <appearance>
              <fill type="color" value="$sel" />
            </appearance>
            <text text-style="ChipTag" text-case="uppercase" value="verb" color="$rose-ink" />
          </row>
        </row>
      </col>
      <!-- Answer options -->
      <col w="fill" p="18 20 8" gap="12" align="top-center">
        <!-- A (unselected) -->
        <row role="button" w="fill" radius="$r-card" p="13 15" gap="14" align="middle-center">
          <appearance>
            <fill type="color" value="$surface" />
            <effect type="drop-shadow" x="5" y="7" radius="15" spread="0" color="#C79EA840" />
            <effect type="drop-shadow" x="-4" y="-4" radius="10" spread="0" color="#FFFFFFCC" />
          </appearance>
          <frame w="36" h="36" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$sel" />
              <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="#FFFFFF80" />
            </appearance>
            <text abs="true" x="0" y="8" w="36" text-style="Badge" value="A" color="$rose-ink" align="center" />
          </frame>
          <text w="fill" text-style="OptLabel" value="To write" color="$ink" />
          <frame w="26" h="26" radius="$r-pill" border="2 $ring" align="middle-center">
            <appearance>
              <fill type="color" value="$surface" />
            </appearance>
          </frame>
        </row>
        <!-- B (selected) -->
        <row role="button" w="fill" radius="$r-card" p="13 15" gap="14" border="2 $rose" align="middle-center">
          <appearance>
            <fill type="color" value="$sel" />
            <effect type="drop-shadow" x="5" y="7" radius="16" spread="0" color="#F43F5E40" />
            <effect type="drop-shadow" x="-4" y="-4" radius="10" spread="0" color="#FFFFFFCC" />
          </appearance>
          <frame w="36" h="36" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$rose-deep" />
              <effect type="drop-shadow" x="0" y="3" radius="7" spread="0" color="#B3123B59" />
              <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="#FFFFFF4D" />
            </appearance>
            <text abs="true" x="0" y="8" w="36" text-style="Badge" value="B" color="#FFFFFF" align="center" />
          </frame>
          <text w="fill" text-style="OptLabel" value="To read" color="$ink" />
          <frame role="badge" w="28" h="28" radius="$r-pill" align="middle-center">
            <appearance>
              <fill type="color" value="$rose-deep" />
              <effect type="drop-shadow" x="0" y="2" radius="5" spread="0" color="#B3123B59" />
            </appearance>
            <img
              abs="true"
              x="6"
              y="6"
              src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFFFFF"
              w="16"
              h="16"
            />
          </frame>
        </row>
        <!-- C (unselected) -->
        <row role="button" w="fill" radius="$r-card" p="13 15" gap="14" align="middle-center">
          <appearance>
            <fill type="color" value="$surface" />
            <effect type="drop-shadow" x="5" y="7" radius="15" spread="0" color="#C79EA840" />
            <effect type="drop-shadow" x="-4" y="-4" radius="10" spread="0" color="#FFFFFFCC" />
          </appearance>
          <frame w="36" h="36" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$sel" />
              <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="#FFFFFF80" />
            </appearance>
            <text abs="true" x="0" y="8" w="36" text-style="Badge" value="C" color="$rose-ink" align="center" />
          </frame>
          <text w="fill" text-style="OptLabel" value="To run" color="$ink" />
          <frame w="26" h="26" radius="$r-pill" border="2 $ring" align="middle-center">
            <appearance>
              <fill type="color" value="$surface" />
            </appearance>
          </frame>
        </row>
        <!-- D (unselected) -->
        <row role="button" w="fill" radius="$r-card" p="13 15" gap="14" align="middle-center">
          <appearance>
            <fill type="color" value="$surface" />
            <effect type="drop-shadow" x="5" y="7" radius="15" spread="0" color="#C79EA840" />
            <effect type="drop-shadow" x="-4" y="-4" radius="10" spread="0" color="#FFFFFFCC" />
          </appearance>
          <frame w="36" h="36" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$sel" />
              <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="#FFFFFF80" />
            </appearance>
            <text abs="true" x="0" y="8" w="36" text-style="Badge" value="D" color="$rose-ink" align="center" />
          </frame>
          <text w="fill" text-style="OptLabel" value="To listen" color="$ink" />
          <frame w="26" h="26" radius="$r-pill" border="2 $ring" align="middle-center">
            <appearance>
              <fill type="color" value="$surface" />
            </appearance>
          </frame>
        </row>
        <rect w="fill" h="6" fill="$bg" />
      </col>
    </col>
    <!-- Bottom action bar (viewport-fixed, last flow child) -->
    <col role="toolbar" w="fill" fill="$surface" border="1 $line" p="14 20 12" gap="12" align="top-center">
      <row role="button" w="fill" h="56" radius="$r-btn" gap="8" align="middle-center">
        <appearance>
          <fill type="color" value="$rose-deep" />
          <effect type="drop-shadow" x="0" y="7" radius="16" spread="0" color="#B3123B66" />
          <effect type="inner-shadow" x="0" y="2" radius="2" spread="0" color="#FFFFFF40" />
        </appearance>
        <text text-style="Btn" text-case="uppercase" value="Check" color="#FFFFFF" />
        <img
          src="https://api.iconify.design/material-symbols/arrow-forward-rounded.svg?color=%23FFFFFF"
          w="20"
          h="20"
        />
      </row>
      <rect w="128" h="4" radius="$r-pill" fill="$ring" />
    </col>
  </col>
</gui>
```