---
title: "Lumen - Grade Submission"
platform: web
slug: lumen-grade-submission-web
screens: []
domains: ["education"]
style: "minimal"
fonts: ["Inter", "Georgia", "IBM Plex Mono"]
roles: ["top-navigation-bar", "search-bar", "badge", "button", "avatar", "sidebar", "navigation-menu", "divider", "card", "breadcrumb", "pagination", "toolbar"]
score: {clean: 100, consistent: 86, accessible: 94, comprehensible: 52}
url: https://gui.farm/web/lumen-grade-submission-web
raw: https://gui.farm/web/lumen-grade-submission-web/design.guix
download: https://gui.farm/web/lumen-grade-submission-web.gui
---

# Lumen - Grade Submission

A desktop educator workspace for reviewing an essay, scoring a rubric, writing feedback, and advancing through submissions.

- **Live preview:** https://gui.farm/web/lumen-grade-submission-web
- **Raw source:** https://gui.farm/web/lumen-grade-submission-web/design.guix
- **Download (.gui):** https://gui.farm/web/lumen-grade-submission-web.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Lumen - Grade Submission">
  <tokens>
    <color name="bg" value="#F5F6F2" />
    <color name="surface" value="#FFFFFF" />
    <color name="surface-soft" value="#EDF1ED" />
    <color name="ink" value="#18221D" />
    <color name="muted" value="#526059" />
    <color name="line" value="#D4DBD5" />
    <color name="primary" value="#1D6045" />
    <color name="primary-soft" value="#DDEDE5" />
    <color name="primary-ink" value="#123D2C" />
    <color name="amber-soft" value="#FFF1D6" />
    <color name="amber-ink" value="#704300" />
    <color name="blue-soft" value="#E2EFF9" />
    <color name="blue-ink" value="#244F73" />
    <number name="r-sm" value="8" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="18" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="Display" font-family="Inter" font-size="28" font-weight="650" line-height="36" />
    <text-style name="H2" font-family="Inter" font-size="20" font-weight="650" line-height="28" />
    <text-style name="H3" font-family="Inter" font-size="16" font-weight="650" line-height="24" />
    <text-style name="Body" font-family="Inter" font-size="14" font-weight="400" line-height="21" />
    <text-style name="BodyStrong" font-family="Inter" font-size="14" font-weight="600" line-height="21" />
    <text-style name="Label" font-family="Inter" font-size="12" font-weight="600" line-height="16" />
    <text-style name="Caption" font-family="Inter" font-size="11" font-weight="500" line-height="16" />
    <text-style name="PaperTitle" font-family="Georgia" font-size="25" font-weight="700" line-height="33" />
    <text-style name="PaperBody" font-family="Georgia" font-size="15" font-weight="400" line-height="25" />
    <text-style name="Score" font-family="IBM Plex Mono" font-size="28" font-weight="600" line-height="34" />
    <text-style name="Mono" font-family="IBM Plex Mono" font-size="12" font-weight="500" line-height="16" />
  </styles>
  <fonts>
    <font family="Inter" source="google" weights="400 500 600 650 700" styles="normal" />
    <font family="Georgia" source="system" weights="400 700" styles="normal" />
    <font family="IBM Plex Mono" source="google" weights="500 600" styles="normal" />
  </fonts>
  <col w="1440" fill="$bg" clip="true">
    <row
      role="top-navigation-bar"
      w="1440"
      h="68"
      fill="$surface"
      border="1 $line"
      p="0 24"
      align="middle-left"
      gap="auto"
    >
      <row w="216" gap="10" align="middle-left">
        <row w="36" h="36" radius="$r-md" fill="$primary" align="middle-center">
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/graduation-cap-white.svg" w="20" h="20" />
        </row>
        <text text-style="H2" value="Lumen" color="$ink" />
      </row>
      <row
        role="search-bar"
        w="420"
        h="40"
        fill="$surface-soft"
        radius="$r-full"
        p="0 14"
        gap="10"
        align="middle-left"
      >
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/search.svg" w="18" h="18" />
        <text text-style="Body" value="Search students, classes, assignments" color="$muted" />
      </row>
      <row w="hug" gap="12" align="middle-right">
        <row role="badge" h="28" radius="$r-full" fill="$primary-soft" p="0 12" align="middle-center">
          <text text-style="Label" value="8 TO REVIEW" color="$primary-ink" />
        </row>
        <row gap="8" align="middle-center">
          <row role="button" w="40" h="40" radius="$r-full" align="middle-center">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/circle-help.svg" w="19" h="19" />
          </row>
          <row role="button" w="40" h="40" radius="$r-full" align="middle-center">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/bell.svg" w="19" h="19" />
          </row>
          <row role="avatar" w="36" h="36" radius="$r-full" fill="$blue-soft" align="middle-center">
            <text text-style="Label" value="AK" color="$blue-ink" />
          </row>
          <row role="button" h="40" p="0 8" gap="5" align="middle-center">
            <text text-style="BodyStrong" value="Amina Khan" color="$ink" />
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/chevron-down.svg" w="16" h="16" />
          </row>
        </row>
      </row>
    </row>
    <row w="1440" p="22 24 24 24" gap="20" align="top-left">
      <col role="sidebar" w="240" gap="18">
        <col role="navigation-menu" w="240" fill="$surface" border="1 $line" radius="$r-lg" p="12" gap="4">
          <row role="button" w="214" h="42" radius="$r-sm" p="0 12" gap="10" align="middle-left">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/layout-dashboard.svg" w="18" h="18" />
            <text text-style="BodyStrong" value="Overview" color="$muted" />
          </row>
          <row
            role="button"
            w="214"
            h="42"
            radius="$r-sm"
            fill="$primary-soft"
            p="0 12"
            gap="10"
            align="middle-left"
          >
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/clipboard-check.svg" w="18" h="18" />
            <text text-style="BodyStrong" value="Gradebook" color="$primary-ink" />
          </row>
          <row role="button" w="214" h="42" radius="$r-sm" p="0 12" gap="10" align="middle-left">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/book-open.svg" w="18" h="18" />
            <text text-style="BodyStrong" value="Assignments" color="$muted" />
          </row>
          <row role="button" w="214" h="42" radius="$r-sm" p="0 12" gap="10" align="middle-left">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/users.svg" w="18" h="18" />
            <text text-style="BodyStrong" value="Students" color="$muted" />
          </row>
          <line role="divider" w="214" fill="$line" />
          <row role="button" w="214" h="42" radius="$r-sm" p="0 12" gap="10" align="middle-left">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/settings.svg" w="18" h="18" />
            <text text-style="BodyStrong" value="Class settings" color="$muted" />
          </row>
        </col>
        <col role="card" w="240" fill="$surface" border="1 $line" radius="$r-lg" p="16" gap="10">
          <text text-style="Label" value="CURRENT CLASS" color="$muted" />
          <text text-style="H3" value="Research &amp; Rhetoric" color="$ink" />
          <text text-style="Body" value="Grade 11 · Section B" color="$muted" />
          <row role="badge" h="26" radius="$r-full" fill="$amber-soft" p="0 10" align="middle-center">
            <text text-style="Label" value="DUE AUG 14" color="$amber-ink" />
          </row>
        </col>
      </col>
      <col w="270" fill="$surface" border="1 $line" radius="$r-lg" clip="true">
        <col w="270" p="16" gap="10">
          <row role="breadcrumb" w="238" gap="6" align="middle-left">
            <text text-style="Caption" value="ESSAYS" color="$muted" />
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/chevron-right.svg" w="13" h="13" />
            <text text-style="Caption" value="ARGUMENT" color="$primary" />
          </row>
          <text text-style="H2" value="Student submissions" color="$ink" />
          <row w="fill" gap="auto" align="middle-center">
            <text text-style="Body" value="8 of 24 reviewed" color="$muted" />
            <text text-style="Mono" value="16 remaining" color="$primary" />
          </row>
          <frame w="238" h="6" radius="$r-full" clip="true">
            <rect x="0" y="0" w="238" h="6" fill="$surface-soft" />
            <rect x="0" y="0" w="79.333333" h="6" fill="$primary" />
          </frame>
        </col>
        <line role="divider" w="270" fill="$line" />
        <col w="270" p="8" gap="4">
          <row
            role="card"
            w="252"
            h="72"
            fill="$primary-soft"
            radius="$r-md"
            p="10"
            gap="10"
            align="middle-left"
          >
            <row role="avatar" w="38" h="38" radius="$r-full" fill="$primary" align="middle-center">
              <text text-style="Label" value="NS" color="$surface" />
            </row>
            <col w="fill" gap="2">
              <text text-style="BodyStrong" value="Nora Silva" color="$ink" />
              <text text-style="Caption" value="Submitted 9:16 AM" color="$muted" />
            </col>
            <row role="badge" h="24" radius="$r-full" fill="$surface" p="0 8" align="middle-center">
              <text text-style="Label" value="NEW" color="$primary" />
            </row>
          </row>
          <row w="252" h="64" p="8 10" gap="10" align="middle-left">
            <row role="avatar" w="36" h="36" radius="$r-full" fill="$blue-soft" align="middle-center">
              <text text-style="Label" value="JT" color="$blue-ink" />
            </row>
            <col w="158" gap="2">
              <text text-style="BodyStrong" value="Jonah Tan" color="$ink" />
              <text text-style="Caption" value="Reviewed yesterday" color="$muted" />
            </col>
            <text text-style="Mono" value="91" color="$ink" />
          </row>
          <row w="252" h="64" p="8 10" gap="10" align="middle-left">
            <row role="avatar" w="36" h="36" radius="$r-full" fill="$amber-soft" align="middle-center">
              <text text-style="Label" value="ML" color="$amber-ink" />
            </row>
            <col w="158" gap="2">
              <text text-style="BodyStrong" value="Maya Lewis" color="$ink" />
              <text text-style="Caption" value="Reviewed yesterday" color="$muted" />
            </col>
            <text text-style="Mono" value="88" color="$ink" />
          </row>
          <row w="252" h="64" p="8 10" gap="10" align="middle-left">
            <row role="avatar" w="36" h="36" radius="$r-full" fill="$surface-soft" align="middle-center">
              <text text-style="Label" value="AR" color="$muted" />
            </row>
            <col w="158" gap="2">
              <text text-style="BodyStrong" value="Adrian Ross" color="$ink" />
              <text text-style="Caption" value="Submitted Aug 11" color="$muted" />
            </col>
            <text text-style="Mono" value="76" color="$ink" />
          </row>
          <row w="252" h="64" p="8 10" gap="10" align="middle-left">
            <row role="avatar" w="36" h="36" radius="$r-full" fill="$blue-soft" align="middle-center">
              <text text-style="Label" value="ZK" color="$blue-ink" />
            </row>
            <col w="158" gap="2">
              <text text-style="BodyStrong" value="Zara Kim" color="$ink" />
              <text text-style="Caption" value="Submitted Aug 11" color="$muted" />
            </col>
            <text text-style="Mono" value="83" color="$ink" />
          </row>
        </col>
        <line role="divider" w="270" fill="$line" />
        <row role="pagination" w="fill" h="54" p="0 12" gap="auto" align="middle-center">
          <row role="button" w="32" h="32" radius="$r-sm" border="1 $line" align="middle-center">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/arrow-left.svg" w="16" h="16" />
          </row>
          <text text-style="Label" value="Page 1 of 3" color="$muted" />
          <row role="button" w="32" h="32" radius="$r-sm" border="1 $line" align="middle-center">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/arrow-right.svg" w="16" h="16" />
          </row>
        </row>
      </col>
      <col w="500" gap="12">
        <row w="fill" gap="12" align="top-center">
          <col gap="12" w="fill">
            <text text-style="Display" value="The case for public libraries" color="$ink" />
            <text text-style="Body" value="Nora Silva · 1,248 words · Version 2" color="$muted" />
          </col>
          <row gap="6" align="middle-center">
            <row role="button" h="36" radius="$r-sm" border="1 $line" p="0 11" gap="7" align="middle-center">
              <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/external-link.svg" w="16" h="16" />
              <text text-style="Label" value="Open" color="$ink" />
            </row>
            <row role="button" w="36" h="36" radius="$r-sm" border="1 $line" align="middle-center">
              <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/more-horizontal.svg" w="18" h="18" />
            </row>
          </row>
        </row>
        <col role="card" w="500" fill="$surface" border="1 $line" radius="$r-lg" p="32" gap="18">
          <col w="fill" gap="4" align="top-center">
            <text
              text-style="PaperTitle"
              value="The case for public libraries"
              color="$ink"
              align="center"
              w="fill"
            />
            <text
              text-style="PaperBody"
              value="Nora Silva · Research &amp; Rhetoric"
              color="$muted"
              align="center"
              w="408"
            />
          </col>
          <text
            text-style="PaperBody"
            value="Public libraries are often described as quiet rooms full of books. That description is accurate, but incomplete. A modern library is civic infrastructure: it gives people access to information, technology, and one another without asking them to buy entry."
            color="$ink"
            w="fill"
          />
          <col w="fill" fill="$amber-soft" border="1 $line" radius="$r-sm" p="12" gap="6">
            <row gap="7" align="middle-left">
              <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/message-square.svg" w="16" h="16" />
              <text text-style="Label" value="COMMENT 1" color="$amber-ink" />
            </row>
            <text
              text-style="PaperBody"
              value="This thesis is specific and arguable. Preview the three supporting claims here so the reader knows how the essay will proceed."
              color="$amber-ink"
              w="382"
            />
          </col>
          <text
            text-style="PaperBody"
            value="The first claim is practical. When forms, benefits, and schoolwork move online, access to a device and reliable internet becomes necessary for participating in public life. Libraries provide both, along with staff who can help visitors navigate unfamiliar systems."
            color="$ink"
            w="fill"
          />
          <text
            text-style="PaperBody"
            value="The second claim is social. Free programs bring together residents who might otherwise share a postcode but not a conversation. Story hours, language exchanges, and job-search workshops turn a building into a small network of mutual support."
            color="$ink"
            w="fill"
          />
          <col w="fill" fill="$blue-soft" border="1 $line" radius="$r-sm" p="12" gap="6">
            <row gap="7" align="middle-left">
              <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/sparkles.svg" w="16" h="16" />
              <text text-style="Label" value="STRONG EVIDENCE" color="$blue-ink" />
            </row>
            <text
              text-style="PaperBody"
              value="The municipal survey supports this paragraph well. Add the publication year to make the citation complete."
              color="$blue-ink"
              w="382"
            />
          </col>
          <text
            text-style="PaperBody"
            value="A city that protects its libraries protects a shared starting point. Residents arrive with different resources, but each person can leave with knowledge, a connection, or a practical next step."
            color="$ink"
            w="fill"
          />
        </col>
      </col>
      <col w="322" gap="12">
        <col role="card" w="322" fill="$surface" border="1 $line" radius="$r-lg" p="16" gap="16">
          <row w="fill" gap="auto" align="bottom-center">
            <col gap="2">
              <text text-style="Label" value="RUBRIC SCORE" color="$muted" />
              <text text-style="H3" value="Argument &amp; Evidence" color="$ink" />
            </col>
            <row gap="4" align="bottom-center">
              <text text-style="Score" value="84" color="$primary" />
              <text text-style="BodyStrong" value="/ 100" color="$muted" />
            </row>
          </row>
          <line role="divider" w="290" fill="$line" />
          <col w="290" gap="14">
            <col w="290" gap="6">
              <row w="fill" gap="auto" align="middle-center">
                <text text-style="BodyStrong" value="Thesis" color="$ink" />
                <text text-style="Mono" value="22 / 25" color="$muted" />
              </row>
              <frame w="240" h="7" radius="$r-full" clip="true">
                <rect x="0" y="0" w="240" h="7" fill="$surface-soft" />
                <rect x="0" y="0" w="211.2" h="7" fill="$primary" />
              </frame>
            </col>
            <col w="290" gap="6">
              <row w="fill" gap="auto" align="middle-center">
                <text text-style="BodyStrong" value="Evidence" color="$ink" />
                <text text-style="Mono" value="24 / 25" color="$muted" />
              </row>
              <frame w="240" h="7" radius="$r-full" clip="true">
                <rect x="0" y="0" w="240" h="7" fill="$surface-soft" />
                <rect x="0" y="0" w="230.4" h="7" fill="$primary" />
              </frame>
            </col>
            <col w="290" gap="6">
              <row w="fill" gap="auto" align="middle-center">
                <text text-style="BodyStrong" value="Structure" color="$ink" />
                <text text-style="Mono" value="20 / 25" color="$muted" />
              </row>
              <frame w="240" h="7" radius="$r-full" clip="true">
                <rect x="0" y="0" w="240" h="7" fill="$surface-soft" />
                <rect x="0" y="0" w="192" h="7" fill="$primary" />
              </frame>
            </col>
            <col w="290" gap="6">
              <row w="fill" gap="auto" align="middle-center">
                <text text-style="BodyStrong" value="Citations" color="$ink" />
                <text text-style="Mono" value="18 / 25" color="$muted" />
              </row>
              <frame w="240" h="7" radius="$r-full" clip="true">
                <rect x="0" y="0" w="240" h="7" fill="$surface-soft" />
                <rect x="0" y="0" w="172.8" h="7" fill="$primary" />
              </frame>
            </col>
          </col>
        </col>
        <col role="card" w="322" fill="$surface" border="1 $line" radius="$r-lg" p="16" gap="12">
          <row w="fill" gap="auto" align="middle-center">
            <text text-style="H3" value="Overall feedback" color="$ink" />
            <row role="badge" h="24" radius="$r-full" fill="$surface-soft" p="0 9" align="middle-center">
              <text text-style="Label" value="DRAFT" color="$muted" />
            </row>
          </row>
          <col w="290" min-h="146" fill="$bg" border="1 $line" radius="$r-md" p="12" gap="8">
            <text
              text-style="Body"
              value="Your argument is clear and your evidence is thoughtfully chosen. Strengthen the roadmap in the introduction and complete the survey citation before submitting the final draft."
              color="$ink"
              w="fill"
            />
          </col>
          <row w="290" gap="8" align="middle-center">
            <row
              role="button"
              h="36"
              radius="$r-sm"
              fill="$primary-soft"
              p="0 12"
              gap="7"
              align="middle-center"
            >
              <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/sparkles.svg" w="16" h="16" />
              <text text-style="Label" value="Writing prompts" color="$primary-ink" />
            </row>
            <row role="button" w="36" h="36" radius="$r-sm" border="1 $line" align="middle-center">
              <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/save.svg" w="16" h="16" />
            </row>
          </row>
        </col>
        <col role="card" w="322" fill="$surface" border="1 $line" radius="$r-lg" p="16" gap="10">
          <row gap="10" align="middle-left">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/flag.svg" w="18" h="18" />
            <col gap="1">
              <text text-style="BodyStrong" value="Needs a citation check" color="$ink" />
              <text text-style="Caption" value="One source is missing a year" color="$muted" />
            </col>
          </row>
        </col>
      </col>
    </row>
    <row
      role="toolbar"
      w="fill"
      h="76"
      fill="$surface"
      border="1 $line"
      p="0 24"
      gap="auto"
      align="middle-center"
    >
      <row gap="10" align="middle-center">
        <row w="32" h="32" radius="$r-full" fill="$primary-soft" align="middle-center">
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/check.svg" w="17" h="17" />
        </row>
        <col gap="1">
          <text text-style="BodyStrong" value="Draft saved" color="$ink" />
          <text text-style="Caption" value="Rubric total reconciled · 84 points" color="$muted" />
        </col>
      </row>
      <row gap="10" align="middle-center">
        <row role="button" h="44" radius="$r-sm" border="1 $line" p="0 16" gap="8" align="middle-center">
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/arrow-left.svg" w="17" h="17" />
          <text text-style="BodyStrong" value="Previous" color="$ink" />
        </row>
        <row role="button" h="44" radius="$r-sm" fill="$primary-soft" p="0 16" gap="8" align="middle-center">
          <text text-style="BodyStrong" value="Save draft" color="$primary-ink" />
        </row>
        <row role="button" h="44" radius="$r-sm" fill="$primary" p="0 18" gap="8" align="middle-center">
          <text text-style="BodyStrong" value="Return grade &amp; next" color="$surface" />
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ea148afd-aa04-4678-99d8-cd80a29ddc31/arrow-right-white.svg" w="17" h="17" />
        </row>
      </row>
    </row>
  </col>
</gui>
```