---
title: "Cornice Trivia · Who Built the Dessau Bauhaus?"
platform: ios
slug: cornice-trivia-who-built-the-dessau-bauhaus
screens: []
domains: ["education"]
style: "bauhaus"
fonts: ["SF Pro Display", "Jost"]
roles: ["top-navigation-bar", "button", "badge", "card", "divider"]
score: {clean: 100, consistent: 80, accessible: 88, comprehensible: 51}
url: https://gui.farm/ios/cornice-trivia-who-built-the-dessau-bauhaus
raw: https://gui.farm/ios/cornice-trivia-who-built-the-dessau-bauhaus/design.guix
download: https://gui.farm/ios/cornice-trivia-who-built-the-dessau-bauhaus.gui
---

# Cornice Trivia · Who Built the Dessau Bauhaus?

A light Bauhaus-style iOS trivia quiz question where a design-history player, mid-round, reads a timed multiple-choice question about who built the Dessau Bauhaus, with a progress bar, countdown, four shape-marked answer options (one selected), lifelines, and a submit action.

- **Live preview:** https://gui.farm/ios/cornice-trivia-who-built-the-dessau-bauhaus
- **Raw source:** https://gui.farm/ios/cornice-trivia-who-built-the-dessau-bauhaus/design.guix
- **Download (.gui):** https://gui.farm/ios/cornice-trivia-who-built-the-dessau-bauhaus.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Cornice Trivia · Who Built the Dessau Bauhaus?">
  <tokens>
    <color name="paper" value="#F3EEE3" />
    <color name="card" value="#FBF8F1" />
    <color name="ink" value="#15120C" />
    <color name="muted" value="#6B6456" />
    <color name="line" value="#D9D1C0" />
    <color name="red" value="#E5391B" />
    <color name="red-deep" value="#B32D12" />
    <color name="blue" value="#1E3FA8" />
    <color name="yellow" value="#F2B705" />
    <color name="white" value="#FFFFFF" />
    <color name="sel" value="#FCEBE6" />
  </tokens>
  <fonts>
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
    <font family="Jost" source="google" weights="400 500 600 700 800" styles="normal" />
  </fonts>
  <styles>
    <text-style name="StatusTime" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="18" />
    <text-style name="NavTitle" font-family="Jost" font-size="17" font-weight="700" line-height="20" letter-spacing="0.2" />
    <text-style name="NavSub" font-family="Jost" font-size="10" font-weight="700" line-height="13" letter-spacing="1.5" />
    <text-style name="Eyebrow" font-family="Jost" font-size="11" font-weight="700" line-height="14" letter-spacing="1.4" />
    <text-style name="CounterBig" font-family="Jost" font-size="22" font-weight="800" line-height="24" letter-spacing="0.5" />
    <text-style name="ChipMono" font-family="Jost" font-size="15" font-weight="700" line-height="18" letter-spacing="0.2" />
    <text-style name="Sub" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style name="LabelInk" font-family="Jost" font-size="11" font-weight="700" line-height="14" letter-spacing="1" />
    <text-style name="Question" font-family="SF Pro Display" font-size="22" font-weight="700" line-height="28" letter-spacing="-0.2" />
    <text-style name="OptTitle" font-family="SF Pro Display" font-size="17" font-weight="600" line-height="20" />
    <text-style name="OptSub" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="15" />
    <text-style name="Marker" font-family="Jost" font-size="20" font-weight="800" line-height="20" />
    <text-style name="BtnGhost" font-family="Jost" font-size="14" font-weight="700" line-height="16" letter-spacing="0.6" />
    <text-style name="BtnPrimary" font-family="Jost" font-size="16" font-weight="800" line-height="18" letter-spacing="0.6" />
  </styles>
  <col w="393" fill="$paper" clip="true">
    <row w="393" h="54" p="16 20 0 20" align="middle-left">
      <text w="fill" value="9:41" text-style="StatusTime" color="$ink" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%2315120C" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%2315120C" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%2315120C" w="20" h="16" />
      </row>
    </row>
    <row w="393" h="58" p="0 16" gap="10" align="middle-left" fill="$paper" border-bottom="2 $ink" role="top-navigation-bar">
      <col w="40" h="40" fill="$card" border="2 $ink" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/x.svg?color=%2315120C" w="18" h="18" />
      </col>
      <col w="fill" gap="2" align="middle-left">
        <text value="DESIGN HISTORY" text-style="NavSub" color="$muted" />
        <text value="Modernism" text-style="NavTitle" color="$ink" />
      </col>
      <row p="7 11" gap="6" fill="$card" border="2 $ink" align="middle-center" role="badge">
        <img src="https://api.iconify.design/lucide/star.svg?color=%23F2B705" w="14" h="14" />
        <text value="2,340" text-style="ChipMono" color="$ink" />
      </row>
    </row>
    <col w="393" p="20" gap="18">
      <col w="353" gap="12">
        <row w="353" align="bottom-left">
          <col w="fill" gap="3" align="middle-left">
            <text value="QUESTION" text-style="Eyebrow" color="$muted" />
            <text value="07 / 15" text-style="CounterBig" color="$ink" />
          </col>
          <row p="8 11" gap="6" fill="$card" border="2 $red" align="middle-center" role="badge">
            <img src="https://api.iconify.design/lucide/timer.svg?color=%23B32D12" w="14" h="14" />
            <text value="0:14" text-style="ChipMono" color="$red-deep" />
          </row>
        </row>
        <frame w="353" h="12" clip="true">
          <rect x="0" y="0" w="353" h="12" fill="$line" />
          <rect x="0" y="0" w="141" h="12" fill="$red" />
          <rect x="139" y="0" w="4" h="12" fill="$ink" />
        </frame>
        <row w="353" align="middle-left">
          <text w="fill" value="6 of 15 answered" text-style="Sub" color="$muted" />
          <text value="STREAK · 6" text-style="LabelInk" color="$ink" align="right" />
        </row>
      </col>
      <col w="353" fill="$card" border="2 $ink" p="20" gap="14" role="card">
        <appearance>
          <fill type="color" value="#FBF8F1" />
          <effect type="drop-shadow" x="6" y="6" radius="0" spread="0" color="#1E3FA8" />
        </appearance>
        <row w="313" gap="10" align="middle-left">
          <text w="fill" value="MODERNISM · ARCHITECTURE" text-style="Eyebrow" color="$ink" />
          <row gap="7" align="middle-center">
            <rect w="18" h="18" radius="999" fill="$red" />
            <img src="https://api.iconify.design/lucide/triangle.svg?color=%231E3FA8" w="18" h="18" />
            <rect w="18" h="18" radius="3" fill="$yellow" />
          </row>
        </row>
        <text w="313" value="Who designed the Bauhaus school building in Dessau, completed in 1926?" text-style="Question" color="$ink" />
        <line w="313" fill="$line" thickness="2" role="divider" />
        <text w="313" value="Select one answer. Correct locks in +150 pts." text-style="Sub" color="$muted" />
      </col>
      <col w="353" gap="12">
        <row w="353" h="70" fill="$sel" border="3 $red" p="0 15" gap="14" align="middle-left" role="button">
          <appearance>
            <fill type="color" value="#FCEBE6" />
            <effect type="drop-shadow" x="4" y="4" radius="0" spread="0" color="#E5391B" />
          </appearance>
          <col w="46" h="46" radius="999" fill="$red-deep" align="middle-center">
            <text value="A" text-style="Marker" color="$white" />
          </col>
          <col w="fill" gap="2" align="middle-left">
            <text value="Walter Gropius" text-style="OptTitle" color="$ink" />
            <text value="Founding director, 1919" text-style="OptSub" color="$muted" />
          </col>
          <col w="26" h="26" fill="$red-deep" align="middle-center">
            <img src="https://api.iconify.design/lucide/check.svg?color=%23FFFFFF" w="16" h="16" />
          </col>
        </row>
        <row w="353" h="70" fill="$card" border="2 $ink" p="0 15" gap="14" align="middle-left" role="button">
          <col w="46" h="46" radius="8" fill="$blue" align="middle-center">
            <text value="B" text-style="Marker" color="$white" />
          </col>
          <col w="fill" gap="2" align="middle-left">
            <text value="Ludwig Mies van der Rohe" text-style="OptTitle" color="$ink" />
            <text value="Last director, from 1930" text-style="OptSub" color="$muted" />
          </col>
          <rect w="26" h="26" fill="$paper" border="2 $line" />
        </row>
        <row w="353" h="70" fill="$card" border="2 $ink" p="0 15" gap="14" align="middle-left" role="button">
          <col w="46" h="46" radius="999" fill="$yellow" align="middle-center">
            <text value="C" text-style="Marker" color="$ink" />
          </col>
          <col w="fill" gap="2" align="middle-left">
            <text value="Marcel Breuer" text-style="OptTitle" color="$ink" />
            <text value="Designed the Wassily Chair" text-style="OptSub" color="$muted" />
          </col>
          <rect w="26" h="26" fill="$paper" border="2 $line" />
        </row>
        <row w="353" h="70" fill="$card" border="2 $ink" p="0 15" gap="14" align="middle-left" role="button">
          <col w="46" h="46" radius="8" fill="$ink" align="middle-center">
            <text value="D" text-style="Marker" color="$white" />
          </col>
          <col w="fill" gap="2" align="middle-left">
            <text value="Wassily Kandinsky" text-style="OptTitle" color="$ink" />
            <text value="Taught the Bauhaus form course" text-style="OptSub" color="$muted" />
          </col>
          <rect w="26" h="26" fill="$paper" border="2 $line" />
        </row>
      </col>
      <row w="353" gap="12" align="middle-left">
        <col w="fill" h="48" fill="$card" border="2 $ink" align="middle-center" role="button">
          <row gap="8" align="middle-center">
            <img src="https://api.iconify.design/lucide/scissors.svg?color=%231E3FA8" w="15" h="15" />
            <text value="50 : 50" text-style="BtnGhost" color="$ink" />
          </row>
        </col>
        <col w="fill" h="48" fill="$card" border="2 $ink" align="middle-center" role="button">
          <row gap="8" align="middle-center">
            <img src="https://api.iconify.design/lucide/lightbulb.svg?color=%23B32D12" w="15" h="15" />
            <text value="HINT" text-style="BtnGhost" color="$ink" />
          </row>
        </col>
      </row>
      <row w="353" gap="10" align="middle-center">
        <text w="fill" value="TIME LEFT" text-style="Eyebrow" color="$muted" />
        <row w="253" gap="4" align="middle-right">
          <rect w="7" h="18" fill="$red" />
          <rect w="7" h="18" fill="$red" />
          <rect w="7" h="18" fill="$red" />
          <rect w="7" h="18" fill="$red" />
          <rect w="7" h="18" fill="$red" />
          <rect w="7" h="18" fill="$red" />
          <rect w="7" h="18" fill="$red" />
          <rect w="7" h="18" fill="$red" />
          <rect w="7" h="18" fill="$red" />
          <rect w="7" h="18" fill="$red" />
          <rect w="7" h="18" fill="$red" />
          <rect w="7" h="18" fill="$red" />
          <rect w="7" h="18" fill="$red" />
          <rect w="7" h="18" fill="$red" />
          <rect w="7" h="18" fill="$line" />
          <rect w="7" h="18" fill="$line" />
          <rect w="7" h="18" fill="$line" />
          <rect w="7" h="18" fill="$line" />
          <rect w="7" h="18" fill="$line" />
          <rect w="7" h="18" fill="$line" />
        </row>
      </row>
    </col>
    <col w="393" fill="$card" border-top="2 $ink" p="14 20 12 20" gap="12">
      <row w="353" gap="12" align="middle-left">
        <col w="104" h="54" fill="$card" border="2 $ink" align="middle-center" role="button">
          <text value="SKIP" text-style="BtnGhost" color="$ink" />
        </col>
        <col w="fill" h="54" fill="$red-deep" border="2 $ink" align="middle-center" role="button">
          <appearance>
            <fill type="color" value="#B32D12" />
            <effect type="drop-shadow" x="4" y="4" radius="0" spread="0" color="#15120C" />
          </appearance>
          <row gap="8" align="middle-center">
            <text value="SUBMIT ANSWER" text-style="BtnPrimary" color="$white" />
            <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23FFFFFF" w="18" h="18" />
          </row>
        </col>
      </row>
      <row w="353" h="14" align="bottom-center">
        <rect w="134" h="5" fill="$ink" />
      </row>
    </col>
  </col>
</gui>

```