---
title: "Openfloor - Where Should the Design System Live?"
platform: web
slug: openfloor-where-should-the-design-system-live
screens: []
domains: ["social"]
style: "brutalist"
fonts: ["Space Grotesk", "Space Mono"]
roles: ["top-navigation-bar", "tab-bar", "badge", "avatar", "toolbar", "chip", "stepper", "item-indicator", "card"]
score: {clean: 100, consistent: 80, accessible: 69, comprehensible: 51}
url: https://gui.farm/web/openfloor-where-should-the-design-system-live
raw: https://gui.farm/web/openfloor-where-should-the-design-system-live/design.guix
download: https://gui.farm/web/openfloor-where-should-the-design-system-live.gui
---

# Openfloor - Where Should the Design System Live?

A live audience-poll presenter screen showing a conference question with real-time vote bars, join code, and a voting-pulse panel.

- **Live preview:** https://gui.farm/web/openfloor-where-should-the-design-system-live
- **Raw source:** https://gui.farm/web/openfloor-where-should-the-design-system-live/design.guix
- **Download (.gui):** https://gui.farm/web/openfloor-where-should-the-design-system-live.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Openfloor - Where Should the Design System Live?">
  <tokens>
    <color name="ground" value="#ECE7DA" />
    <color name="card" value="#FAF7EF" />
    <color name="ink" value="#1A1712" />
    <color name="soft" value="#5E574B" />
    <color name="track" value="#E2DBCB" />
    <color name="magenta" value="#D20E62" />
    <color name="magenta-deep" value="#B00C55" />
    <color name="on-mag" value="#FFF4F9" />
  </tokens>
  <fonts>
    <font family="Space Grotesk" source="google" weights="500 600 700" styles="normal" />
    <font family="Space Mono" source="google" weights="400 700" styles="normal" />
  </fonts>
  <styles>
    <text-style name="Wordmark" font-family="Space Grotesk" font-size="20" font-weight="700" line-height="24" letter-spacing="1" />
    <text-style name="Tab" font-family="Space Mono" font-size="12" font-weight="700" line-height="15" letter-spacing="0.5" />
    <text-style name="Question" font-family="Space Grotesk" font-size="42" font-weight="700" line-height="47" letter-spacing="-0.8" />
    <text-style name="OptLabel" font-family="Space Grotesk" font-size="20" font-weight="600" line-height="26" />
    <text-style name="OptLabelLead" font-family="Space Grotesk" font-size="20" font-weight="700" line-height="26" />
    <text-style name="Pct" font-family="Space Grotesk" font-size="28" font-weight="700" line-height="30" letter-spacing="-0.5" />
    <text-style name="PctLead" font-family="Space Grotesk" font-size="40" font-weight="700" line-height="42" letter-spacing="-1" />
    <text-style name="CardTitle" font-family="Space Grotesk" font-size="18" font-weight="700" line-height="23" />
    <text-style name="CodeBig" font-family="Space Grotesk" font-size="40" font-weight="700" line-height="44" letter-spacing="8" />
    <text-style name="StatNum" font-family="Space Mono" font-size="22" font-weight="700" line-height="26" />
    <text-style name="Idx" font-family="Space Mono" font-size="15" font-weight="700" line-height="18" />
    <text-style name="Count" font-family="Space Mono" font-size="13" font-weight="400" line-height="17" />
    <text-style name="Body" font-family="Space Mono" font-size="13" font-weight="400" line-height="19" />
    <text-style name="BodyB" font-family="Space Mono" font-size="13" font-weight="700" line-height="17" />
    <text-style name="Label" font-family="Space Mono" font-size="11" font-weight="700" line-height="14" letter-spacing="1" />
    <text-style name="Tiny" font-family="Space Mono" font-size="10" font-weight="700" line-height="13" letter-spacing="0.5" />
    <text-style name="Clock" font-family="Space Mono" font-size="14" font-weight="700" line-height="17" letter-spacing="0.5" />
  </styles>

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

    <!-- ================= MASTHEAD ================= -->
    <row w="1440" h="64" p="0 28" gap="22" align="middle-left" fill="$card" border="0 0 3 0 $ink" role="top-navigation-bar">
      <row gap="11" align="middle-left">
        <col w="34" h="34" fill="$magenta" border="2 $ink" align="middle-center">
          <img src="https://api.iconify.design/lucide/radio-tower.svg?color=%23FFF4F9" w="19" h="19" />
        </col>
        <text text-style="Wordmark" value="OPENFLOOR" color="$ink" />
      </row>
      <row w="fill" h="64" gap="0" align="middle-left" role="tab-bar">
        <row h="64" p="0 16" align="middle-center" border="0 0 4 0 $magenta">
          <text text-style="Tab" value="PRESENT" color="$ink" text-case="uppercase" />
        </row>
        <row h="64" p="0 16" align="middle-center">
          <text text-style="Tab" value="RESULTS" color="$soft" text-case="uppercase" />
        </row>
        <row h="64" p="0 16" align="middle-center">
          <text text-style="Tab" value="Q &amp; A" color="$soft" text-case="uppercase" />
        </row>
        <row h="64" p="0 16" align="middle-center">
          <text text-style="Tab" value="ANALYTICS" color="$soft" text-case="uppercase" />
        </row>
      </row>
      <row gap="12" align="middle-right">
        <row p="7 11" gap="8" fill="$magenta" border="2 $ink" align="middle-center" role="badge">
          <ellipse w="8" h="8" fill="$on-mag" />
          <text text-style="Label" value="LIVE" color="$on-mag" />
        </row>
        <row p="8 11" gap="8" fill="$card" border="2 $ink" align="middle-center">
          <img src="https://api.iconify.design/lucide/users.svg?color=%231A1712" w="15" h="15" />
          <text text-style="BodyB" value="1,510 in room" color="$ink" />
        </row>
        <text text-style="Clock" value="10:42" color="$ink" />
        <col w="38" h="38" fill="$ink" border="2 $ink" align="middle-center" role="avatar">
          <text text-style="BodyB" value="PN" color="$card" />
        </col>
      </row>
    </row>

    <!-- ================= SUB BAR ================= -->
    <row w="1440" h="48" p="0 28" gap="14" align="middle-left" fill="$ground" border="0 0 2 0 $ink" role="toolbar">
      <text text-style="Label" value="QUESTION 4 / 9" color="$ink" />
      <row p="3 8" fill="$card" border="2 $ink" align="middle-center" role="chip">
        <text text-style="Tiny" value="SINGLE CHOICE" color="$ink" />
      </row>
      <rect w="2" h="18" fill="$soft" />
      <text text-style="BodyB" value="1,284 votes" color="$ink" />
      <text text-style="Body" value="85% of the room" color="$soft" />
      <row w="fill" gap="10" align="middle-right">
        <row p="4 9" gap="7" fill="$card" border="2 $ink" align="middle-center" role="badge">
          <ellipse w="7" h="7" fill="$magenta" />
          <text text-style="Tiny" value="CLOSES IN 0:48" color="$ink" />
        </row>
        <row gap="4" align="middle-center" role="stepper">
          <rect w="16" h="7" fill="$ink" />
          <rect w="16" h="7" fill="$ink" />
          <rect w="16" h="7" fill="$ink" />
          <rect w="16" h="7" fill="$magenta" />
          <rect w="16" h="7" fill="$track" />
          <rect w="16" h="7" fill="$track" />
          <rect w="16" h="7" fill="$track" />
          <rect w="16" h="7" fill="$track" />
          <rect w="16" h="7" fill="$track" />
        </row>
      </row>
    </row>

    <!-- ================= BODY ================= -->
    <row w="1440" p="28" gap="24" align="top-left">

      <!-- ============ LEFT: QUESTION + OPTIONS ============ -->
      <col w="908" gap="22">

        <!-- question -->
        <col w="908" gap="12">
          <row gap="10" align="middle-left">
            <row p="5 9" fill="$magenta" border="2 $ink" align="middle-center">
              <text text-style="Tiny" value="NOW ASKING" color="$on-mag" />
            </row>
            <text text-style="Label" value="STACKED 2026 · DESIGN SYSTEMS TRACK" color="$soft" />
          </row>
          <text w="908" text-style="Question" value="Where should your design system actually live?" color="$ink" />
        </col>

        <!-- options -->
        <col w="908" gap="14">

          <!-- OPTION A (leader) -->
          <col w="908" p="18 20" gap="14" fill="$card" border="2 $ink" role="item-indicator">
            <appearance>
              <fill type="color" value="#FAF7EF" />
              <effect type="drop-shadow" x="6" y="6" radius="0" spread="0" color="#D20E62" />
            </appearance>
            <row w="868" gap="14" align="middle-left">
              <col w="44" h="44" fill="$magenta" border="2 $ink" align="middle-center">
                <text text-style="Idx" value="A" color="$on-mag" />
              </col>
              <col w="fill" gap="5" align="middle-left">
                <text text-style="OptLabelLead" value="In the design tool - Figma is the source of truth" color="$ink" />
                <row p="4 8" fill="$magenta" border="2 $ink" align="middle-center">
                  <text text-style="Tiny" value="LEADING" color="$on-mag" />
                </row>
              </col>
              <col w="150" gap="2" align="middle-right">
                <text w="150" align="right" text-style="PctLead" value="33.6%" color="$magenta-deep" />
                <text w="150" align="right" text-style="Count" value="432 votes" color="$soft" />
              </col>
            </row>
            <frame w="868" h="20" clip="true">
              <rect x="0" y="0" w="868" h="20" fill="$track" />
              <rect x="0" y="0" w="292" h="20" fill="$magenta" />
            </frame>
          </col>

          <!-- OPTION B -->
          <col w="908" p="18 20" gap="14" fill="$card" border="2 $ink" role="card">
            <row w="868" gap="14" align="middle-left">
              <col w="44" h="44" fill="$ground" border="2 $ink" align="middle-center">
                <text text-style="Idx" value="B" color="$ink" />
              </col>
              <text w="fill" text-style="OptLabel" value="In code - the repository is the source of truth" color="$ink" />
              <col w="150" gap="2" align="middle-right">
                <text w="150" align="right" text-style="Pct" value="28.4%" color="$ink" />
                <text w="150" align="right" text-style="Count" value="365 votes" color="$soft" />
              </col>
            </row>
            <frame w="868" h="20" clip="true">
              <rect x="0" y="0" w="868" h="20" fill="$track" />
              <rect x="0" y="0" w="247" h="20" fill="$magenta" />
            </frame>
          </col>

          <!-- OPTION C -->
          <col w="908" p="18 20" gap="14" fill="$card" border="2 $ink" role="card">
            <row w="868" gap="14" align="middle-left">
              <col w="44" h="44" fill="$ground" border="2 $ink" align="middle-center">
                <text text-style="Idx" value="C" color="$ink" />
              </col>
              <text w="fill" text-style="OptLabel" value="A platform team owns it end to end" color="$ink" />
              <col w="150" gap="2" align="middle-right">
                <text w="150" align="right" text-style="Pct" value="18.8%" color="$ink" />
                <text w="150" align="right" text-style="Count" value="241 votes" color="$soft" />
              </col>
            </row>
            <frame w="868" h="20" clip="true">
              <rect x="0" y="0" w="868" h="20" fill="$track" />
              <rect x="0" y="0" w="163" h="20" fill="$magenta" />
            </frame>
          </col>

          <!-- OPTION D -->
          <col w="908" p="18 20" gap="14" fill="$card" border="2 $ink" role="card">
            <row w="868" gap="14" align="middle-left">
              <col w="44" h="44" fill="$ground" border="2 $ink" align="middle-center">
                <text text-style="Idx" value="D" color="$ink" />
              </col>
              <text w="fill" text-style="OptLabel" value="Every squad maintains its own" color="$ink" />
              <col w="150" gap="2" align="middle-right">
                <text w="150" align="right" text-style="Pct" value="12.3%" color="$ink" />
                <text w="150" align="right" text-style="Count" value="158 votes" color="$soft" />
              </col>
            </row>
            <frame w="868" h="20" clip="true">
              <rect x="0" y="0" w="868" h="20" fill="$track" />
              <rect x="0" y="0" w="107" h="20" fill="$magenta" />
            </frame>
          </col>

          <!-- OPTION E -->
          <col w="908" p="18 20" gap="14" fill="$card" border="2 $ink" role="card">
            <row w="868" gap="14" align="middle-left">
              <col w="44" h="44" fill="$ground" border="2 $ink" align="middle-center">
                <text text-style="Idx" value="E" color="$ink" />
              </col>
              <text w="fill" text-style="OptLabel" value="We do not have one yet" color="$ink" />
              <col w="150" gap="2" align="middle-right">
                <text w="150" align="right" text-style="Pct" value="6.9%" color="$ink" />
                <text w="150" align="right" text-style="Count" value="88 votes" color="$soft" />
              </col>
            </row>
            <frame w="868" h="20" clip="true">
              <rect x="0" y="0" w="868" h="20" fill="$track" />
              <rect x="0" y="0" w="59" h="20" fill="$magenta" />
            </frame>
          </col>

        </col>
      </col>

      <!-- ============ RIGHT RAIL ============ -->
      <col w="452" gap="22">

        <!-- SESSION card -->
        <col w="452" fill="$card" border="2 $ink" role="card">
          <img w="452" h="150" src="https://images.unsplash.com/photo-1587825140708-dfaf72ae4b04?w=904&amp;h=300&amp;fit=crop&amp;crop=edges&amp;q=80&amp;auto=format" />
          <col w="fill" p="16 18" gap="10">
            <text text-style="Label" value="LIVE SESSION" color="$magenta-deep" />
            <text text-style="CardTitle" value="Who Owns the Source of Truth?" color="$ink" />
            <row w="fill" gap="10" align="middle-left">
              <col w="34" h="34" fill="$magenta" border="2 $ink" align="middle-center">
                <text text-style="Tiny" value="PN" color="$on-mag" />
              </col>
              <col w="fill" gap="2" align="middle-left">
                <text text-style="BodyB" value="Priya Nair" color="$ink" />
                <text text-style="Body" value="Staff Design Eng, Northwind" color="$soft" />
              </col>
              <text text-style="Tiny" value="ROOM B" color="$soft" align="right" />
            </row>
          </col>
        </col>

        <!-- JOIN card (inverted) -->
        <col w="452" p="20" gap="14" fill="$ink" border="2 $ink" role="card">
          <appearance>
            <fill type="color" value="#1A1712" />
            <effect type="drop-shadow" x="6" y="6" radius="0" spread="0" color="#D20E62" />
          </appearance>
          <row w="412" align="middle-left">
            <text w="fill" text-style="Label" value="JOIN THE POLL" color="$card" />
            <ellipse w="9" h="9" fill="$magenta" />
          </row>
          <text w="412" text-style="Body" value="Open openfloor.live on your phone and enter the code:" color="$track" />
          <col w="412" h="66" fill="$card" border="2 $magenta" align="middle-center">
            <text text-style="CodeBig" value="4471" color="$ink" />
          </col>
          <row w="412" align="middle-left">
            <text w="fill" text-style="Tiny" value="1,284 VOTED" color="$card" />
            <text text-style="Tiny" value="226 STILL TO VOTE" color="$track" align="right" />
          </row>
        </col>

        <!-- PULSE card -->
        <col w="452" p="18 20" gap="14" fill="$card" border="2 $ink" role="card">
          <row w="412" align="middle-left">
            <text w="fill" text-style="Label" value="VOTE PULSE" color="$ink" />
            <text text-style="Tiny" value="LAST 3 MIN" color="$soft" align="right" />
          </row>
          <img w="412" h="72" src="https://gui.farm/tools/charts/line-chart.svg?data=0:6,1:9,2:14,3:22,4:31,5:44,6:52,7:48,8:57,9:61,10:55,11:59&amp;line=%23D20E62&amp;curve=smooth&amp;area=on&amp;points=hide&amp;grid=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=824&amp;height=144" />
          <row w="412" gap="0" align="middle-left">
            <col w="fill" gap="2" align="middle-left">
              <text text-style="StatNum" value="+37" color="$magenta-deep" />
              <text text-style="Tiny" value="LAST 15s" color="$soft" />
            </col>
            <rect w="2" h="34" fill="$track" />
            <col w="fill" gap="2" p="0 0 0 16" align="middle-left">
              <text text-style="StatNum" value="214" color="$ink" />
              <text text-style="Tiny" value="PEAK / MIN" color="$soft" />
            </col>
            <rect w="2" h="34" fill="$track" />
            <col w="fill" gap="2" p="0 0 0 16" align="middle-left">
              <text text-style="StatNum" value="0:48" color="$ink" />
              <text text-style="Tiny" value="CLOSES IN" color="$soft" />
            </col>
          </row>
        </col>

      </col>
    </row>

    <!-- ================= FOOTER STATUS ================= -->
    <row w="1440" h="34" p="0 28" gap="16" align="middle-left" fill="$ink" border="3 0 0 0 $ink" role="toolbar">
      <row gap="7" align="middle-left">
        <ellipse w="7" h="7" fill="$magenta" />
        <text text-style="Tiny" value="RESULTS UPDATING LIVE" color="$card" />
      </row>
      <rect w="2" h="14" fill="$soft" />
      <text text-style="Tiny" value="1,284 RESPONSES" color="$track" />
      <rect w="2" h="14" fill="$soft" />
      <text text-style="Tiny" value="openfloor.live/e/stacked26" color="$track" />
      <row w="fill" gap="16" align="middle-right">
        <text text-style="Tiny" value="SINGLE CHOICE · ANONYMOUS" color="$track" />
        <text text-style="Tiny" value="OPENFLOOR PRESENTER v3.1" color="$card" />
      </row>
    </row>

  </col>
</gui>

```