---
title: "Vela Language — Today"
platform: ios
slug: vela-language-ios
screens: ["dashboard"]
domains: ["education"]
style: "minimal"
fonts: ["SF Pro", "Georgia"]
roles: ["top-navigation-bar", "badge", "card", "chip", "button", "tab-bar"]
score: {clean: 100, consistent: 72, accessible: 75, comprehensible: 63}
url: https://gui.farm/ios/vela-language-ios
raw: https://gui.farm/ios/vela-language-ios/design.guix
download: https://gui.farm/ios/vela-language-ios.gui
---

# Vela Language — Today

An iOS language-learning dashboard with a daily Spanish lesson, practice shortcuts, streak tracking, and a guided learning route.

- **Live preview:** https://gui.farm/ios/vela-language-ios
- **Raw source:** https://gui.farm/ios/vela-language-ios/design.guix
- **Download (.gui):** https://gui.farm/ios/vela-language-ios.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Vela Language — Today">
  <tokens><color name="paper" value="#F4F0E8"/><color name="surface" value="#FFFDF8"/><color name="ink" value="#172346"/><color name="muted" value="#73766F"/><color name="line" value="#D8D2C7"/><color name="cobalt" value="#2446D8"/><color name="tomato" value="#E65D3F"/><color name="pale-blue" value="#DDE5FF"/><color name="pale-red" value="#F7DDD4"/></tokens>
  <fonts><font family="SF Pro" source="system" weights="400 500 600 700" styles="normal"/><font family="Inter" source="google" weights="400 500 600 700" styles="normal"/><font family="Georgia" source="system" weights="400 700" styles="normal italic"/></fonts>
  <col w="390" h="844" fill="$paper">
    <row w="fill" h="54" p="16 20 0 20" gap="auto" align="top-center">
      <text value="9:41" font-family="SF Pro" font-size="15" line-height="18" font-weight="600" fill="$ink"/>
      <row gap="8" align="middle-right"><img w="18" h="18" src="https://api.iconify.design/lucide/signal.svg?color=%23172346"/><img w="18" h="18" src="https://api.iconify.design/lucide/wifi.svg?color=%23172346"/><img w="20" h="16" src="https://api.iconify.design/lucide/battery-full.svg?color=%23172346"/></row>
    </row>
    <row role="top-navigation-bar" w="fill" h="77" p="4 20 10 20" gap="auto" align="middle-left">
      <col gap="2"><text value="Buenos días, Maya" font-family="Georgia" font-size="28" line-height="34" font-weight="700" fill="$ink"/><text value="TUESDAY · 12 MINUTES PLANNED" font-family="SF Pro" font-size="11" line-height="14" font-weight="600" letter-spacing="1.2" fill="$muted"/></col>
      <col gap="2" align="middle-center"><row role="badge" w="44" h="44" radius="22" fill="$surface" border="1 $line" align="middle-center"><img w="20" h="20" src="https://api.iconify.design/lucide/flame.svg?color=%23E65D3F"/></row><text value="8 days" font-family="SF Pro" font-size="11" line-height="13" font-weight="700" fill="$tomato"/></col>
    </row>
    <col w="fill" h="617" p="10 20 12 20" gap="14">
      <frame role="card" w="350" h="231" radius="24" fill="$cobalt" clip>
        <ellipse x="245" y="-40" w="170" h="170" fill="#3958DE"/><ellipse x="286" y="91" w="98" h="98" fill="#1B36B4"/>
        <col x="20" y="20" w="310" gap="7"><text value="TODAY'S LESSON" font-family="SF Pro" font-size="11" line-height="14" font-weight="700" letter-spacing="1.3" fill="$pale-blue"/><text value="At the market" font-family="Georgia" font-size="30" line-height="36" font-weight="700" fill="$surface"/><text w="280" value="Learn to ask for quantities, compare prices, and check out with confidence." font-family="SF Pro" font-size="14" line-height="20" font-weight="400" fill="$pale-blue"/></col>
        <row x="20" y="146" gap="8" align="middle-left"><row h="28" radius="14" fill="$surface" p="0 12" align="middle-center" role="chip"><text value="A2 · Spanish" font-family="SF Pro" font-size="11" line-height="15" font-weight="600" fill="$ink"/></row><row h="28" radius="14" fill="#3958DE" p="0 12" align="middle-center" role="chip"><text value="8 min" font-family="SF Pro" font-size="11" line-height="15" font-weight="600" fill="$surface"/></row></row>
        <row role="button" x="20" y="184" w="310" h="35" radius="17" fill="$surface" gap="8" align="middle-center"><text value="Continue lesson" font-family="SF Pro" font-size="14" line-height="18" font-weight="700" fill="$cobalt"/><img w="18" h="18" src="https://api.iconify.design/lucide/arrow-right.svg?color=%232446D8"/></row>
      </frame>
      <row w="350" h="62" gap="10">
        <row role="card" w="170" h="62" radius="16" fill="$surface" border="1 $line" p="12" gap="10" align="middle-left"><row w="38" h="38" radius="12" fill="$pale-red" align="middle-center"><img w="18" h="18" src="https://api.iconify.design/lucide/mic-2.svg?color=%23E65D3F"/></row><col gap="1"><text value="Speaking" font-family="SF Pro" font-size="13" line-height="17" font-weight="700" fill="$ink"/><text value="3 prompts" font-family="SF Pro" font-size="12" line-height="16" font-weight="400" fill="$muted"/></col></row>
        <row role="card" w="170" h="62" radius="16" fill="$surface" border="1 $line" p="12" gap="10" align="middle-left"><row w="38" h="38" radius="12" fill="$pale-blue" align="middle-center"><img w="18" h="18" src="https://api.iconify.design/lucide/layers-3.svg?color=%232446D8"/></row><col gap="1"><text value="Review" font-family="SF Pro" font-size="13" line-height="17" font-weight="700" fill="$ink"/><text value="14 words" font-family="SF Pro" font-size="12" line-height="16" font-weight="400" fill="$muted"/></col></row>
      </row>
      <row w="350" h="28" align="middle-left"><text w="fill" value="Your daily route" font-family="Georgia" font-size="21" line-height="26" font-weight="700" fill="$ink"/><text value="2 of 3" font-family="SF Pro" font-size="12" line-height="16" font-weight="600" fill="$muted"/></row>
      <col w="350" gap="8">
        <row w="fill" h="50" gap="16" align="middle-left"><row w="36" h="36" radius="18" fill="$cobalt" align="middle-center"><img w="18" h="18" src="https://api.iconify.design/lucide/check.svg?color=%23FFFDF8"/></row><col w="fill" gap="1"><text value="Warm-up phrases" font-family="SF Pro" font-size="15" line-height="20" font-weight="700" fill="$ink"/><text value="6 useful phrases · completed" font-family="SF Pro" font-size="13" line-height="18" font-weight="400" fill="$muted"/></col></row>
        <row role="button" w="fill" h="50" gap="16" align="middle-left"><row w="36" h="36" radius="18" fill="$tomato" align="middle-center"><img w="18" h="18" src="https://api.iconify.design/lucide/headphones.svg?color=%23FFFDF8"/></row><col w="fill" gap="1"><text value="Listen: Saturday market" font-family="SF Pro" font-size="15" line-height="20" font-weight="700" fill="$ink"/><text value="Dialogue practice · 4 min" font-family="SF Pro" font-size="13" line-height="18" font-weight="400" fill="$muted"/></col><img w="20" h="20" src="https://api.iconify.design/lucide/chevron-right.svg?color=%2373766F"/></row>
        <row role="button" w="fill" h="50" gap="16" align="middle-left"><row w="36" h="36" radius="18" fill="$surface" border="2 $line" align="middle-center"><img w="18" h="18" src="https://api.iconify.design/lucide/message-circle.svg?color=%2373766F"/></row><col w="fill" gap="1"><text value="Speak with Vela" font-family="SF Pro" font-size="15" line-height="20" font-weight="700" fill="$ink"/><text value="Role-play checkout · 3 min" font-family="SF Pro" font-size="13" line-height="18" font-weight="400" fill="$muted"/></col><img w="20" h="20" src="https://api.iconify.design/lucide/chevron-right.svg?color=%2373766F"/></row>
      </col>
    </col>
    <row role="tab-bar" w="fill" h="96" fill="$surface" border="1 $line" p="10 20 28 20" gap="auto" align="top-center">
      <col w="70" h="58" radius="18" fill="$pale-blue" gap="3" align="middle-center"><img w="22" h="22" src="https://api.iconify.design/lucide/house.svg?color=%232446D8"/><text value="Today" font-family="SF Pro" font-size="10" line-height="13" font-weight="700" fill="$cobalt"/></col>
      <col w="70" h="58" gap="3" align="middle-center"><img w="22" h="22" src="https://api.iconify.design/lucide/mic-2.svg?color=%2373766F"/><text value="Practice" font-family="SF Pro" font-size="10" line-height="13" font-weight="600" fill="$muted"/></col>
      <col w="70" h="58" gap="3" align="middle-center"><img w="22" h="22" src="https://api.iconify.design/lucide/layers-3.svg?color=%2373766F"/><text value="Review" font-family="SF Pro" font-size="10" line-height="13" font-weight="600" fill="$muted"/></col>
      <col w="70" h="58" gap="3" align="middle-center"><img w="22" h="22" src="https://api.iconify.design/lucide/user-round.svg?color=%2373766F"/><text value="Profile" font-family="SF Pro" font-size="10" line-height="13" font-weight="600" fill="$muted"/></col>
    </row>
  </col>
</gui>
```