---
title: "Lattice/StakeWizard"
platform: web
slug: lattice-stake-wizard
screens: ["wizard"]
domains: ["crypto"]
style: "neumorphic"
fonts: ["Plus Jakarta Sans", "JetBrains Mono"]
roles: ["top-navigation-bar", "chip", "stepper", "badge", "segmented-control", "text-field", "slider", "button"]
score: {clean: 100, consistent: 82, accessible: 96, comprehensible: 58}
url: https://gui.farm/web/lattice-stake-wizard
raw: https://gui.farm/web/lattice-stake-wizard/design.guix
download: https://gui.farm/web/lattice-stake-wizard.gui
---

# Lattice/StakeWizard

A neumorphic multi-step staking wizard (step 2 of 4) where a DeFi user sets the ETH amount and lock term and previews projected rewards before signing.

- **Live preview:** https://gui.farm/web/lattice-stake-wizard
- **Raw source:** https://gui.farm/web/lattice-stake-wizard/design.guix
- **Download (.gui):** https://gui.farm/web/lattice-stake-wizard.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Lattice/StakeWizard">
  <tokens>
    <color name="base" value="#E4E8F1" />
    <color name="ink" value="#191B22" />
    <color name="sub" value="#4E5568" />
    <color name="sh-dark" value="#BEC4D3" />
    <color name="sh-light" value="#FFFFFF" />
    <color name="accent" value="#FF2E88" />
    <color name="accent-strong" value="#C21568" />
    <color name="accent-deep" value="#B4155F" />
    <color name="accent-ink" value="#FFFFFF" />
    <color name="accent-tint" value="#F7DBEA" />
    <number name="r-card" value="24" />
    <number name="r-el" value="16" />
    <number name="r-pill" value="999" />
  </tokens>
  <fonts>
    <font family="Plus Jakarta Sans" source="google" weights="400 500 600 700 800" styles="normal" />
    <font family="JetBrains Mono" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>

  <col w="1440" fill="$base">

    <!-- TOP NAV -->
    <row role="top-navigation-bar" w="fill" h="76" p="0 48" align="middle-left" gap="auto" fill="$base">
      <row gap="12" align="middle-left">
        <frame w="34" h="34" radius="10">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="drop-shadow" x="5" y="5" radius="10" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-4" y="-4" radius="9" spread="0" color="$sh-light" />
          </appearance>
          <img abs="true" x="8" y="8" src="https://api.iconify.design/lucide/hexagon.svg?color=%23FF2E88" w="18" h="18" />
        </frame>
        <text value="Lattice" font-family="Plus Jakarta Sans" font-size="18" font-weight="800" color="$ink" letter-spacing="-0.3" />
      </row>
      <row gap="14" align="middle-right">
        <row p="9 14" radius="$r-pill" gap="8" align="middle-left">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
            <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
          </appearance>
          <ellipse w="8" h="8" fill="#5B8DEF" />
          <text value="Ethereum Mainnet" font-family="Plus Jakarta Sans" font-size="13" font-weight="600" color="$sub" />
        </row>
        <row role="chip" p="9 14" radius="$r-pill" gap="8" align="middle-left">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="drop-shadow" x="4" y="4" radius="8" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-3" y="-3" radius="7" spread="0" color="$sh-light" />
          </appearance>
          <img src="https://api.iconify.design/lucide/wallet.svg?color=%234E5568" w="15" h="15" />
          <text value="0x7a1c...f39e" font-family="JetBrains Mono" font-size="13" font-weight="600" color="$ink" />
        </row>
      </row>
    </row>

    <!-- CONTENT -->
    <col w="fill" p="28 48 72 48" align="top-center" gap="26">
      <col w="1040" gap="26">

        <!-- Heading -->
        <col gap="7">
          <row gap="10" align="middle-left">
            <text value="STEP 2 OF 4" font-family="Plus Jakarta Sans" font-size="11" font-weight="700" color="$accent-deep" letter-spacing="1.4" />
            <text value="Amount &amp; lock term" font-family="Plus Jakarta Sans" font-size="11" font-weight="600" color="$sub" letter-spacing="0.6" />
          </row>
          <text value="Stake your ETH" font-family="Plus Jakarta Sans" font-size="30" font-weight="800" color="$ink" line-height="38" letter-spacing="-0.6" />
          <text value="Choose how much to lock and for how long. Rewards accrue every epoch and are claimable at maturity." font-family="Plus Jakarta Sans" font-size="15" font-weight="500" color="$sub" line-height="23" w="620" />
        </col>

        <!-- Main two-column -->
        <row w="fill" gap="28" align="top-left">

          <!-- LEFT RAIL: stepper -->
          <col role="stepper" w="300" p="26 22" radius="$r-card" gap="22">
            <appearance>
              <fill type="color" value="$base" />
              <effect type="drop-shadow" x="12" y="12" radius="24" spread="0" color="$sh-dark" />
              <effect type="drop-shadow" x="-9" y="-9" radius="20" spread="0" color="$sh-light" />
            </appearance>

            <text value="Setup progress" font-family="Plus Jakarta Sans" font-size="13" font-weight="700" color="$ink" letter-spacing="0.2" />

            <!-- step 1 done -->
            <row w="fill" gap="14" align="middle-left">
              <frame w="38" h="38" radius="$r-pill">
                <appearance>
                  <fill type="color" value="$base" />
                  <effect type="drop-shadow" x="4" y="4" radius="8" spread="0" color="$sh-dark" />
                  <effect type="drop-shadow" x="-3" y="-3" radius="7" spread="0" color="$sh-light" />
                </appearance>
                <img abs="true" x="10" y="10" src="https://api.iconify.design/lucide/check.svg?color=%23B4155F" w="18" h="18" />
              </frame>
              <col gap="2" w="fill">
                <text value="Choose asset" font-family="Plus Jakarta Sans" font-size="15" font-weight="700" color="$ink" />
                <text value="ETH on Ethereum" font-family="Plus Jakarta Sans" font-size="12" font-weight="500" color="$sub" />
              </col>
            </row>

            <!-- step 2 active -->
            <row w="fill" gap="14" align="middle-left">
              <frame w="38" h="38" radius="$r-pill">
                <appearance>
                  <fill type="color" value="$accent-strong" />
                  <effect type="drop-shadow" x="0" y="6" radius="14" spread="0" color="#FF2E8859" />
                </appearance>
                <text abs="true" x="0" y="9" w="38" align="center" value="2" font-family="Plus Jakarta Sans" font-size="16" font-weight="800" color="$accent-ink" />
              </frame>
              <col gap="2" w="fill">
                <text value="Amount &amp; lock term" font-family="Plus Jakarta Sans" font-size="15" font-weight="800" color="$ink" />
                <text value="In progress" font-family="Plus Jakarta Sans" font-size="12" font-weight="600" color="$accent-deep" />
              </col>
            </row>

            <!-- step 3 upcoming -->
            <row w="fill" gap="14" align="middle-left">
              <frame w="38" h="38" radius="$r-pill">
                <appearance>
                  <fill type="color" value="$base" />
                  <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                  <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                </appearance>
                <text abs="true" x="0" y="9" w="38" align="center" value="3" font-family="Plus Jakarta Sans" font-size="15" font-weight="700" color="$sub" />
              </frame>
              <col gap="2" w="fill">
                <text value="Review terms" font-family="Plus Jakarta Sans" font-size="15" font-weight="600" color="$sub" />
                <text value="Slashing &amp; unbonding" font-family="Plus Jakarta Sans" font-size="12" font-weight="500" color="$sub" />
              </col>
            </row>

            <!-- step 4 upcoming -->
            <row w="fill" gap="14" align="middle-left">
              <frame w="38" h="38" radius="$r-pill">
                <appearance>
                  <fill type="color" value="$base" />
                  <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                  <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                </appearance>
                <text abs="true" x="0" y="9" w="38" align="center" value="4" font-family="Plus Jakarta Sans" font-size="15" font-weight="700" color="$sub" />
              </frame>
              <col gap="2" w="fill">
                <text value="Confirm &amp; sign" font-family="Plus Jakarta Sans" font-size="15" font-weight="600" color="$sub" />
                <text value="Ledger or WalletConnect" font-family="Plus Jakarta Sans" font-size="12" font-weight="500" color="$sub" />
              </col>
            </row>

            <line fill="#CBD1DE" />

            <row w="fill" gap="10" align="middle-left">
              <img src="https://api.iconify.design/lucide/shield-check.svg?color=%234E5568" w="18" h="18" />
              <text value="Audited by Trail of Bits, Mar 2026" font-family="Plus Jakarta Sans" font-size="12" font-weight="500" color="$sub" w="fill" />
            </row>
          </col>

          <!-- RIGHT PANEL: form -->
          <col w="fill" p="30 36 32 36" radius="$r-card" gap="22">
            <appearance>
              <fill type="color" value="$base" />
              <effect type="drop-shadow" x="14" y="14" radius="28" spread="0" color="$sh-dark" />
              <effect type="drop-shadow" x="-10" y="-10" radius="22" spread="0" color="$sh-light" />
            </appearance>

            <!-- panel header -->
            <row w="fill" gap="auto" align="middle-left">
              <text value="Configure your position" font-family="Plus Jakarta Sans" font-size="19" font-weight="800" color="$ink" letter-spacing="-0.3" />
              <row role="badge" p="7 12" radius="$r-pill" gap="7" align="middle-left">
                <appearance>
                  <fill type="color" value="$accent-tint" />
                </appearance>
                <img src="https://api.iconify.design/lucide/trending-up.svg?color=%23B4155F" w="14" h="14" />
                <text value="Up to 6.8% APR" font-family="Plus Jakarta Sans" font-size="12" font-weight="700" color="$accent-deep" />
              </row>
            </row>

            <!-- lock term segmented control -->
            <col w="fill" gap="12">
              <text value="LOCK TERM" font-family="Plus Jakarta Sans" font-size="11" font-weight="700" color="$sub" letter-spacing="1.2" />
              <row role="segmented-control" w="fill" gap="16" align="top-left">

                <!-- flexible (inactive, pressed) -->
                <col w="fill" p="16 18" radius="$r-el" gap="10">
                  <appearance>
                    <fill type="color" value="$base" />
                    <effect type="inner-shadow" x="4" y="4" radius="8" spread="0" color="$sh-dark" />
                    <effect type="inner-shadow" x="-3" y="-3" radius="6" spread="0" color="$sh-light" />
                  </appearance>
                  <row w="fill" gap="auto" align="middle-left">
                    <img src="https://api.iconify.design/lucide/unlock.svg?color=%234E5568" w="19" h="19" />
                    <ellipse w="18" h="18" fill="none" border="2 #B3BAC9" />
                  </row>
                  <text value="Flexible" font-family="Plus Jakarta Sans" font-size="16" font-weight="700" color="$ink" />
                  <text value="Unstake anytime" font-family="Plus Jakarta Sans" font-size="12" font-weight="500" color="$sub" />
                  <text value="3.2% APR" font-family="JetBrains Mono" font-size="15" font-weight="700" color="$sub" />
                </col>

                <!-- 90-day (active, raised, accent) -->
                <col w="fill" p="16 18" radius="$r-el" gap="10" border="2 $accent">
                  <appearance>
                    <fill type="color" value="$accent-tint" />
                    <effect type="drop-shadow" x="6" y="8" radius="16" spread="0" color="#FF2E8833" />
                    <effect type="drop-shadow" x="-5" y="-5" radius="12" spread="0" color="$sh-light" />
                  </appearance>
                  <row w="fill" gap="auto" align="middle-left">
                    <img src="https://api.iconify.design/lucide/lock.svg?color=%23B4155F" w="19" h="19" />
                    <frame w="18" h="18" radius="$r-pill" fill="$accent-strong">
                      <img abs="true" x="3" y="3" src="https://api.iconify.design/lucide/check.svg?color=%23FFFFFF" w="12" h="12" />
                    </frame>
                  </row>
                  <text value="90-day lock" font-family="Plus Jakarta Sans" font-size="16" font-weight="800" color="$ink" />
                  <text value="Best yield, unbonds after 90d" font-family="Plus Jakarta Sans" font-size="12" font-weight="600" color="$accent-deep" />
                  <text value="6.8% APR" font-family="JetBrains Mono" font-size="15" font-weight="700" color="$accent-deep" />
                </col>
              </row>
            </col>

            <line fill="#CBD1DE" />

            <!-- amount -->
            <col w="fill" gap="12">
              <row w="fill" gap="auto" align="middle-left">
                <text value="AMOUNT TO STAKE" font-family="Plus Jakarta Sans" font-size="11" font-weight="700" color="$sub" letter-spacing="1.2" />
                <text value="Balance: 4.00 ETH" font-family="Plus Jakarta Sans" font-size="12" font-weight="600" color="$sub" />
              </row>

              <row role="text-field" w="fill" h="76" p="0 20" gap="14" radius="$r-el" align="middle-left">
                <appearance>
                  <fill type="color" value="$base" />
                  <effect type="inner-shadow" x="5" y="5" radius="10" spread="0" color="$sh-dark" />
                  <effect type="inner-shadow" x="-4" y="-4" radius="8" spread="0" color="$sh-light" />
                </appearance>
                <frame w="40" h="40" radius="$r-pill">
                  <appearance>
                    <fill type="color" value="$base" />
                    <effect type="drop-shadow" x="4" y="4" radius="8" spread="0" color="$sh-dark" />
                    <effect type="drop-shadow" x="-3" y="-3" radius="6" spread="0" color="$sh-light" />
                  </appearance>
                  <img abs="true" x="10" y="10" src="https://api.iconify.design/lucide/gem.svg?color=%23FF2E88" w="20" h="20" />
                </frame>
                <col gap="1" w="fill">
                  <text value="2.75 ETH" font-family="JetBrains Mono" font-size="26" font-weight="700" color="$ink" />
                  <text value="≈ $10,567.15" font-family="Plus Jakarta Sans" font-size="12" font-weight="500" color="$sub" />
                </col>
                <row role="chip" p="8 14" radius="$r-pill" gap="0" align="middle-center">
                  <appearance>
                    <fill type="color" value="$base" />
                    <effect type="drop-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                    <effect type="drop-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
                  </appearance>
                  <text value="MAX" font-family="Plus Jakarta Sans" font-size="12" font-weight="800" color="$accent-deep" letter-spacing="0.5" />
                </row>
              </row>

              <!-- slider: track 560, fill 385 (2.75/4.00 = 68.75%), thumb center 385 -->
              <col gap="8" pt="4">
                <frame role="slider" w="560" h="24">
                  <rect abs="true" x="0" y="9" w="560" h="6" radius="3" fill="#C9CFDC" />
                  <rect abs="true" x="0" y="9" w="385" h="6" radius="3" fill="$accent" />
                  <frame abs="true" x="373" y="0" w="24" h="24" radius="$r-pill">
                    <appearance>
                      <fill type="color" value="#FFFFFF" />
                      <effect type="drop-shadow" x="2" y="3" radius="6" spread="0" color="#FF2E8866" />
                    </appearance>
                    <ellipse abs="true" x="7" y="7" w="10" h="10" fill="$accent" />
                  </frame>
                </frame>
                <row w="560" gap="auto" align="middle-left">
                  <text value="0 ETH" font-family="JetBrains Mono" font-size="11" font-weight="500" color="$sub" />
                  <text value="68.75% of balance" font-family="Plus Jakarta Sans" font-size="11" font-weight="600" color="$accent-deep" />
                  <text value="4.00 ETH" font-family="JetBrains Mono" font-size="11" font-weight="500" color="$sub" />
                </row>
              </col>
            </col>

            <line fill="#CBD1DE" />

            <!-- projected rewards -->
            <col w="fill" gap="12">
              <text value="PROJECTED REWARDS" font-family="Plus Jakarta Sans" font-size="11" font-weight="700" color="$sub" letter-spacing="1.2" />

              <col w="fill" gap="11">
                <row w="fill" gap="auto" align="middle-left">
                  <text value="Principal staked" font-family="Plus Jakarta Sans" font-size="14" font-weight="500" color="$sub" w="fill" />
                  <text value="2.7500 ETH" font-family="JetBrains Mono" font-size="14" font-weight="600" color="$ink" />
                </row>
                <row w="fill" gap="auto" align="middle-left">
                  <text value="Reward rate" font-family="Plus Jakarta Sans" font-size="14" font-weight="500" color="$sub" w="fill" />
                  <text value="6.8% APR" font-family="JetBrains Mono" font-size="14" font-weight="600" color="$ink" />
                </row>
                <row w="fill" gap="auto" align="middle-left">
                  <text value="Lock period" font-family="Plus Jakarta Sans" font-size="14" font-weight="500" color="$sub" w="fill" />
                  <text value="90 days" font-family="JetBrains Mono" font-size="14" font-weight="600" color="$ink" />
                </row>
                <row w="fill" gap="auto" align="middle-left">
                  <text value="Est. reward (90 days)" font-family="Plus Jakarta Sans" font-size="14" font-weight="500" color="$sub" w="fill" />
                  <text value="+0.0461 ETH" font-family="JetBrains Mono" font-size="14" font-weight="700" color="$accent-deep" />
                </row>
              </col>

              <!-- total -->
              <row w="fill" p="16 20" radius="$r-el" gap="auto" align="middle-left">
                <appearance>
                  <fill type="color" value="$base" />
                  <effect type="drop-shadow" x="6" y="6" radius="14" spread="0" color="$sh-dark" />
                  <effect type="drop-shadow" x="-5" y="-5" radius="12" spread="0" color="$sh-light" />
                </appearance>
                <col gap="2">
                  <text value="Total at maturity" font-family="Plus Jakarta Sans" font-size="14" font-weight="700" color="$ink" />
                  <text value="Principal + rewards, before gas" font-family="Plus Jakarta Sans" font-size="12" font-weight="500" color="$sub" />
                </col>
                <col gap="2" align="top-right">
                  <text value="2.7961 ETH" font-family="JetBrains Mono" font-size="22" font-weight="700" color="$ink" align="right" />
                  <text value="≈ $10,744.33" font-family="Plus Jakarta Sans" font-size="12" font-weight="500" color="$sub" align="right" />
                </col>
              </row>
            </col>

            <!-- actions -->
            <row w="fill" gap="14" pt="4" align="middle-left">
              <row role="button" p="15 24" radius="$r-el" gap="8" align="middle-center">
                <appearance>
                  <fill type="color" value="$base" />
                  <effect type="drop-shadow" x="5" y="5" radius="10" spread="0" color="$sh-dark" />
                  <effect type="drop-shadow" x="-4" y="-4" radius="8" spread="0" color="$sh-light" />
                </appearance>
                <img src="https://api.iconify.design/lucide/arrow-left.svg?color=%234E5568" w="17" h="17" />
                <text value="Back" font-family="Plus Jakarta Sans" font-size="15" font-weight="700" color="$sub" />
              </row>
              <row role="button" w="fill" h="52" radius="$r-el" gap="9" align="middle-center">
                <appearance>
                  <fill type="color" value="$accent-strong" />
                  <effect type="drop-shadow" x="0" y="8" radius="18" spread="0" color="#FF2E8859" />
                </appearance>
                <text value="Continue to review" font-family="Plus Jakarta Sans" font-size="15" font-weight="800" color="$accent-ink" letter-spacing="0.2" />
                <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23FFFFFF" w="18" h="18" />
              </row>
            </row>
          </col>
        </row>
      </col>
    </col>
  </col>
</gui>

```