---
title: "Pipkin - What should Wren explore first?"
platform: ios
slug: pipkin-what-should-wren-explore-first
screens: ["onboarding"]
domains: ["education"]
style: "claymorphism"
fonts: ["Fredoka", "SF Pro Display"]
roles: ["top-navigation-bar", "hyperlink", "avatar", "card", "badge", "toolbar", "item-indicator", "button"]
score: {clean: 100, consistent: 85, accessible: 100, comprehensible: 49}
url: https://gui.farm/ios/pipkin-what-should-wren-explore-first
raw: https://gui.farm/ios/pipkin-what-should-wren-explore-first/design.guix
download: https://gui.farm/ios/pipkin-what-should-wren-explore-first.gui
---

# Pipkin - What should Wren explore first?

A claymorphism onboarding step for a preschool early-learning app where a parent picks focus topics for their child before continuing setup.

- **Live preview:** https://gui.farm/ios/pipkin-what-should-wren-explore-first
- **Raw source:** https://gui.farm/ios/pipkin-what-should-wren-explore-first/design.guix
- **Download (.gui):** https://gui.farm/ios/pipkin-what-should-wren-explore-first.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Pipkin - What should Wren explore first?">
  <tokens>
    <color name="bg" value="#F6EEE8" />
    <color name="card" value="#FFFFFF" />
    <color name="card-sel" value="#FFF4F0" />
    <color name="ink" value="#33261F" />
    <color name="sub" value="#6E5D52" />
    <color name="faint" value="#B4A498" />
    <color name="line" value="#EFE3DB" />
    <color name="ring" value="#E4D7CE" />
    <color name="coral" value="#F26A4B" />
    <color name="coral-deep" value="#CB3D20" />
    <color name="coral-ink" value="#B5381E" />
    <color name="c-apricot" value="#FBC57C" />
    <color name="c-rose" value="#F6A5B0" />
    <color name="c-amber" value="#FBD86B" />
    <color name="c-peach" value="#FF9E7A" />
    <color name="c-blush" value="#F7B39B" />
    <color name="c-gold" value="#FFCB57" />
    <color name="tile-ink" value="#4A2E1E" />
    <number name="r-card" value="26" />
    <number name="r-tile" value="18" />
    <number name="r-btn" value="28" />
    <number name="r-pill" value="999" />
  </tokens>
  <styles>
    <text-style
      name="Eyebrow"
      font-family="Fredoka"
      font-size="12"
      font-weight="700"
      line-height="15"
      letter-spacing="1.5"
    />
    <text-style
      name="H1"
      font-family="Fredoka"
      font-size="26"
      font-weight="700"
      line-height="31"
      letter-spacing="-0.3"
    />
    <text-style name="Body" font-family="SF Pro Display" font-size="15" font-weight="400" line-height="21" />
    <text-style
      name="Wordmark"
      font-family="Fredoka"
      font-size="16"
      font-weight="600"
      line-height="20"
      letter-spacing="0.3"
    />
    <text-style name="CardLabel" font-family="Fredoka" font-size="17" font-weight="600" line-height="21" />
    <text-style name="CardSub" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style name="ChipName" font-family="Fredoka" font-size="15" font-weight="600" line-height="19" />
    <text-style
      name="ChipMeta"
      font-family="SF Pro Display"
      font-size="12"
      font-weight="500"
      line-height="15"
    />
    <text-style name="Avatar" font-family="Fredoka" font-size="18" font-weight="600" line-height="22" />
    <text-style name="Count" font-family="Fredoka" font-size="13" font-weight="600" line-height="16" />
    <text-style
      name="Btn"
      font-family="Fredoka"
      font-size="17"
      font-weight="700"
      line-height="21"
      letter-spacing="0.2"
    />
    <text-style name="Sys" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="18" />
  </styles>
  <fonts>
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
    <font family="Fredoka" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>
  <col w="393" fill="$bg" gap="0" align="top-center">
    <!-- Status bar (untagged device chrome) -->
    <row w="fill" p="15 22 0" align="middle-center" gap="auto">
      <text text-style="Sys" value="9:41" color="$ink" />
      <row gap="7" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%2333261F" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%2333261F" w="17" h="17" />
        <row w="24" h="12" radius="3" border="1 $faint" p="2" align="middle-left">
          <rect w="15" h="6" radius="1" fill="$ink" />
        </row>
      </row>
    </row>
    <!-- Top navigation -->
    <row role="top-navigation-bar" w="fill" p="12 20 6" align="middle-center" gap="auto">
      <frame w="40" h="40" radius="$r-pill" align="middle-center">
        <appearance>
          <fill type="color" value="$card" />
          <effect type="drop-shadow" x="4" y="5" radius="10" spread="0" color="#C79E8666" />
          <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/lucide/chevron-left.svg?color=%2333261F"
          w="22"
          h="22"
        />
      </frame>
      <row gap="8" align="middle-center">
        <frame w="22" h="22" radius="$r-pill" align="middle-center">
          <appearance>
            <fill type="color" value="$coral-deep" />
            <effect type="drop-shadow" x="0" y="2" radius="5" spread="0" color="#CB3D2059" />
          </appearance>
          <img
            abs="true"
            x="4"
            y="4"
            src="https://api.iconify.design/lucide/sprout.svg?color=%23FFFFFF"
            w="14"
            h="14"
          />
        </frame>
        <text text-style="Wordmark" value="Pipkin" color="$ink" />
      </row>
      <text role="hyperlink" text-style="Body" value="Skip" color="$sub" />
    </row>
    <!-- Header -->
    <col w="fill" p="18 22 0" gap="9" align="top-left">
      <text text-style="Eyebrow" text-case="uppercase" value="Step 2 of 3" color="$coral-ink" />
      <text w="fill" text-style="H1" value="What should Wren explore first?" color="$ink" />
      <text
        w="320"
        text-style="Body"
        value="Pick 3 to start. You can change these anytime in Settings."
        color="$sub"
      />
    </col>
    <!-- Child profile chip -->
    <row w="fill" p="16 22 0" align="middle-left">
      <row radius="$r-pill" p="7 16 7 7" gap="11" align="middle-center">
        <appearance>
          <fill type="color" value="$card" />
          <effect type="drop-shadow" x="4" y="5" radius="12" spread="0" color="#C79E8659" />
          <effect type="drop-shadow" x="-3" y="-3" radius="8" spread="0" color="#FFFFFFCC" />
        </appearance>
        <frame role="avatar" w="38" h="38" radius="$r-pill" align="middle-center">
          <appearance>
            <fill type="color" value="$coral-deep" />
            <effect type="inner-shadow" x="0" y="-2" radius="3" spread="0" color="#00000026" />
            <effect type="inner-shadow" x="0" y="2" radius="3" spread="0" color="#FFFFFF4D" />
          </appearance>
          <text text-style="Avatar" value="W" color="#FFFFFF" align="center" x="10" y="10" />
        </frame>
        <col gap="1" align="middle-left">
          <text text-style="ChipName" value="Wren" color="$ink" />
          <text text-style="ChipMeta" value="Age 4 - Preschool" color="$sub" />
        </col>
        <img src="https://api.iconify.design/lucide/pencil.svg?color=%236E5D52" w="15" h="15" />
      </row>
    </row>
    <!-- Topic grid -->
    <col w="fill" p="20 20 26" gap="13" align="top-center">
      <!-- Row 1 -->
      <row w="fill" gap="13" align="top-center">
        <!-- Letters (selected) -->
        <col role="card" w="170" h="138" radius="$r-card" p="16" gap="12" border="2 $coral" align="top-left">
          <appearance>
            <fill type="color" value="$card-sel" />
            <effect type="drop-shadow" x="7" y="9" radius="18" spread="0" color="#C79E8659" />
            <effect type="drop-shadow" x="-5" y="-5" radius="12" spread="0" color="#FFFFFFCC" />
          </appearance>
          <frame role="badge" abs="true" x="132" y="12" w="26" h="26" radius="$r-pill" align="middle-center">
            <appearance>
              <fill type="color" value="$coral-deep" />
              <effect type="drop-shadow" x="0" y="2" radius="5" spread="0" color="#CB3D2066" />
            </appearance>
            <img
              abs="true"
              x="5"
              y="5"
              src="https://api.iconify.design/lucide/check.svg?color=%23FFFFFF"
              w="16"
              h="16"
            />
          </frame>
          <frame w="52" h="52" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$c-apricot" />
              <effect type="drop-shadow" x="3" y="4" radius="8" spread="0" color="#B98A6E55" />
              <effect type="inner-shadow" x="0" y="3" radius="4" spread="0" color="#FFFFFF80" />
            </appearance>
            <img
              abs="true"
              x="13"
              y="13"
              src="https://api.iconify.design/lucide/type.svg?color=%234A2E1E"
              w="26"
              h="26"
            />
          </frame>
          <col gap="3" align="top-left">
            <text text-style="CardLabel" value="Letters" color="$ink" />
            <text text-style="CardSub" value="A B C" color="$sub" />
          </col>
        </col>
        <!-- Numbers (selected) -->
        <col role="card" w="170" h="138" radius="$r-card" p="16" gap="12" border="2 $coral" align="top-left">
          <appearance>
            <fill type="color" value="$card-sel" />
            <effect type="drop-shadow" x="7" y="9" radius="18" spread="0" color="#C79E8659" />
            <effect type="drop-shadow" x="-5" y="-5" radius="12" spread="0" color="#FFFFFFCC" />
          </appearance>
          <frame role="badge" abs="true" x="132" y="12" w="26" h="26" radius="$r-pill" align="middle-center">
            <appearance>
              <fill type="color" value="$coral-deep" />
              <effect type="drop-shadow" x="0" y="2" radius="5" spread="0" color="#CB3D2066" />
            </appearance>
            <img
              abs="true"
              x="5"
              y="5"
              src="https://api.iconify.design/lucide/check.svg?color=%23FFFFFF"
              w="16"
              h="16"
            />
          </frame>
          <frame w="52" h="52" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$c-rose" />
              <effect type="drop-shadow" x="3" y="4" radius="8" spread="0" color="#B98A6E55" />
              <effect type="inner-shadow" x="0" y="3" radius="4" spread="0" color="#FFFFFF80" />
            </appearance>
            <img
              abs="true"
              x="13"
              y="13"
              src="https://api.iconify.design/lucide/calculator.svg?color=%234A2E1E"
              w="26"
              h="26"
            />
          </frame>
          <col gap="3" align="top-left">
            <text text-style="CardLabel" value="Numbers" color="$ink" />
            <text text-style="CardSub" value="1 2 3" color="$sub" />
          </col>
        </col>
      </row>
      <!-- Row 2 -->
      <row w="fill" gap="13" align="top-center">
        <!-- Shapes (unselected) -->
        <col role="card" w="170" h="138" radius="$r-card" p="16" gap="12" align="top-left">
          <appearance>
            <fill type="color" value="$card" />
            <effect type="drop-shadow" x="7" y="9" radius="18" spread="0" color="#C79E8640" />
            <effect type="drop-shadow" x="-5" y="-5" radius="12" spread="0" color="#FFFFFFCC" />
          </appearance>
          <rect abs="true" x="132" y="12" w="26" h="26" radius="$r-pill" border="2 $ring" />
          <frame w="52" h="52" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$c-amber" />
              <effect type="drop-shadow" x="3" y="4" radius="8" spread="0" color="#B98A6E55" />
              <effect type="inner-shadow" x="0" y="3" radius="4" spread="0" color="#FFFFFF80" />
            </appearance>
            <img
              abs="true"
              x="13"
              y="13"
              src="https://api.iconify.design/lucide/shapes.svg?color=%234A2E1E"
              w="26"
              h="26"
            />
          </frame>
          <col gap="3" align="top-left">
            <text text-style="CardLabel" value="Shapes" color="$ink" />
            <text text-style="CardSub" value="Circle, square" color="$sub" />
          </col>
        </col>
        <!-- Animals (selected) -->
        <col role="card" w="170" h="138" radius="$r-card" p="16" gap="12" border="2 $coral" align="top-left">
          <appearance>
            <fill type="color" value="$card-sel" />
            <effect type="drop-shadow" x="7" y="9" radius="18" spread="0" color="#C79E8659" />
            <effect type="drop-shadow" x="-5" y="-5" radius="12" spread="0" color="#FFFFFFCC" />
          </appearance>
          <frame role="badge" abs="true" x="132" y="12" w="26" h="26" radius="$r-pill" align="middle-center">
            <appearance>
              <fill type="color" value="$coral-deep" />
              <effect type="drop-shadow" x="0" y="2" radius="5" spread="0" color="#CB3D2066" />
            </appearance>
            <img
              abs="true"
              x="5"
              y="5"
              src="https://api.iconify.design/lucide/check.svg?color=%23FFFFFF"
              w="16"
              h="16"
            />
          </frame>
          <frame w="52" h="52" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$c-peach" />
              <effect type="drop-shadow" x="3" y="4" radius="8" spread="0" color="#B98A6E55" />
              <effect type="inner-shadow" x="0" y="3" radius="4" spread="0" color="#FFFFFF80" />
            </appearance>
            <img
              abs="true"
              x="13"
              y="13"
              src="https://api.iconify.design/lucide/rabbit.svg?color=%234A2E1E"
              w="26"
              h="26"
            />
          </frame>
          <col gap="3" align="top-left">
            <text text-style="CardLabel" value="Animals" color="$ink" />
            <text text-style="CardSub" value="Sounds &amp; names" color="$sub" />
          </col>
        </col>
      </row>
      <!-- Row 3 -->
      <row w="fill" gap="13" align="top-center">
        <!-- Music (unselected) -->
        <col role="card" w="170" h="138" radius="$r-card" p="16" gap="12" align="top-left">
          <appearance>
            <fill type="color" value="$card" />
            <effect type="drop-shadow" x="7" y="9" radius="18" spread="0" color="#C79E8640" />
            <effect type="drop-shadow" x="-5" y="-5" radius="12" spread="0" color="#FFFFFFCC" />
          </appearance>
          <rect abs="true" x="132" y="12" w="26" h="26" radius="$r-pill" border="2 $ring" />
          <frame w="52" h="52" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$c-blush" />
              <effect type="drop-shadow" x="3" y="4" radius="8" spread="0" color="#B98A6E55" />
              <effect type="inner-shadow" x="0" y="3" radius="4" spread="0" color="#FFFFFF80" />
            </appearance>
            <img
              abs="true"
              x="13"
              y="13"
              src="https://api.iconify.design/lucide/music.svg?color=%234A2E1E"
              w="26"
              h="26"
            />
          </frame>
          <col gap="3" align="top-left">
            <text text-style="CardLabel" value="Music" color="$ink" />
            <text text-style="CardSub" value="Sing along" color="$sub" />
          </col>
        </col>
        <!-- Colors (unselected) -->
        <col role="card" w="170" h="138" radius="$r-card" p="16" gap="12" align="top-left">
          <appearance>
            <fill type="color" value="$card" />
            <effect type="drop-shadow" x="7" y="9" radius="18" spread="0" color="#C79E8640" />
            <effect type="drop-shadow" x="-5" y="-5" radius="12" spread="0" color="#FFFFFFCC" />
          </appearance>
          <rect abs="true" x="132" y="12" w="26" h="26" radius="$r-pill" border="2 $ring" />
          <frame w="52" h="52" radius="$r-tile" align="middle-center">
            <appearance>
              <fill type="color" value="$c-gold" />
              <effect type="drop-shadow" x="3" y="4" radius="8" spread="0" color="#B98A6E55" />
              <effect type="inner-shadow" x="0" y="3" radius="4" spread="0" color="#FFFFFF80" />
            </appearance>
            <img
              abs="true"
              x="13"
              y="13"
              src="https://api.iconify.design/lucide/palette.svg?color=%234A2E1E"
              w="26"
              h="26"
            />
          </frame>
          <col gap="3" align="top-left">
            <text text-style="CardLabel" value="Colors" color="$ink" />
            <text text-style="CardSub" value="Mix &amp; match" color="$sub" />
          </col>
        </col>
      </row>
    </col>
    <!-- Bottom action bar (viewport-fixed, last flow child) -->
    <col role="toolbar" w="fill" fill="$card" border="1 $line" p="16 20 12" gap="14" align="top-center">
      <row w="fill" align="middle-center" gap="auto">
        <row role="item-indicator" gap="8" align="middle-center">
          <ellipse w="8" h="8" fill="$ring" />
          <rect w="22" h="8" radius="$r-pill" fill="$coral" />
          <ellipse w="8" h="8" fill="$ring" />
        </row>
        <text text-style="Count" value="3 of 6 chosen" color="$coral-ink" />
      </row>
      <row role="button" w="fill" h="56" radius="$r-btn" gap="8" align="middle-center">
        <appearance>
          <fill type="color" value="$coral-deep" />
          <effect type="drop-shadow" x="0" y="6" radius="16" spread="0" color="#CB3D2066" />
          <effect type="inner-shadow" x="0" y="2" radius="2" spread="0" color="#FFFFFF40" />
        </appearance>
        <text text-style="Btn" value="Continue" color="#FFFFFF" />
        <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23FFFFFF" w="20" h="20" />
      </row>
      <rect w="140" h="5" radius="$r-pill" fill="$faint" />
    </col>
  </col>
</gui>
```