---
name: "Answer Sheet"
description: "An OMR answer sheet brought indoors: the form is printed in dropout green, everything a person supplied is graphite."
meta:
  id: "theme-answer-sheet"
  model: "Claude Opus 5.5"
  author: "buddypia"
  createdAt: "2026-10-04T11:55:53.704Z"
  updatedAt: "2026-10-04T11:55:53.704Z"
  version: "1.0.0"
  isNew: true

colors:
  background: "#E5F5E7"
  foreground: "#24262A"
  card: "#DDEADF"
  card-foreground: "#24262A"
  popover: "#DDEADF"
  popover-foreground: "#24262A"
  primary: "#2A2E34"
  primary-foreground: "#F5FDF6"
  secondary: "#CFE1D2"
  secondary-foreground: "#24262A"
  muted: "#CFE1D2"
  muted-foreground: "#5D6066"
  accent: "#0B7643"
  accent-foreground: "#F5FDF6"
  destructive: "#5D0004"
  destructive-foreground: "#F5FDF6"
  border: "#BFCEC1"
  input: "#BFCEC1"
  ring: "#2A2E34"
  chart-1: "#2A446F"
  chart-2: "#61450A"
  chart-3: "#383665"
  chart-4: "#5D5316"
  chart-5: "#003B5A"
colorsDark:
  background: "#15181E"
  foreground: "#E0E7E1"
  card: "#1D2229"
  card-foreground: "#E0E7E1"
  popover: "#1D2229"
  popover-foreground: "#E0E7E1"
  primary: "#CDD1D8"
  primary-foreground: "#080D17"
  secondary: "#262D37"
  secondary-foreground: "#E0E7E1"
  muted: "#262D37"
  muted-foreground: "#8F9790"
  accent: "#6AC48C"
  accent-foreground: "#080D17"
  destructive: "#FFBFB6"
  destructive-foreground: "#080D17"
  border: "#343A43"
  input: "#343A43"
  ring: "#CDD1D8"
  chart-1: "#A3C3F6"
  chart-2: "#D2B27C"
  chart-3: "#C3C4FD"
  chart-4: "#BAB074"
  chart-5: "#A3D9FF"

typography:
  display-lg:
    fontFamily: "Sofia Sans Condensed, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.01em
  headline-md:
    fontFamily: "Sofia Sans Condensed, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.15
  body-md:
    fontFamily: "Public Sans, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: "Public Sans, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
  label-caps:
    fontFamily: "Sofia Sans Condensed, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.08em
  entry-mono:
    fontFamily: "Spline Sans Mono, monospace"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.06em

rounded:
  none: 0px
  sm: 0px
  md: 0px
  lg: 0px
  xl: 0px
  full: 9999px

spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 28px
  xl: 56px
  gutter: 20px
  margin: 32px
  row: 40px
  track: 18px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.none}"
    padding: 12px
  sheet:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.none}"
    padding: 28px
  answer-band:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.none}"
    padding: 16px
  oval:
    backgroundColor: "{colors.background}"
    textColor: "{colors.accent}"
    rounded: "{rounded.full}"
  oval-marked:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.full}"
  comb-field:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.entry-mono}"
    rounded: "{rounded.none}"

lookbook:
  tagline: "An OMR answer sheet brought indoors: the form is printed in dropout green, everything a person supplied is graphite."
  bestFor: "Exam and assessment platforms, survey and questionnaire tools, intake and screening forms, marking and moderation queues"
  avoidFor: "Brand marketing sites, lifestyle commerce, entertainment and media, anything where filling in a form is not the job"
  defaultMode: "light"
  surfaceStyle: "ruled"
  accentUse: "text"
  caseStyle: "labels-upper"
  borderWidth: "2px"
  radius: "0px"
  displayFont: "Sofia Sans Condensed"
  bodyFont: "Public Sans"
  monoFont: "Spline Sans Mono"
  motion:
    duration: "90ms"
    ease: "cubic-bezier(0.2, 0, 0, 1)"
    signature: "A mark lands in one step, the way pencil does. Nothing slides, fades or bounces; the only thing that moves is a timing bar filling as its row is completed."
  imageTreatment: "none"
---

# Answer Sheet

## Overview

Answer Sheet is an optical-mark answer sheet brought indoors. On the real form
two inks never mix: everything printed — rules, labels, instructions, the empty
ovals — is in a dropout colour the scanner is built not to see, and everything
the candidate supplied is graphite. This system keeps that rule as its whole
colour model. Green is the form. Graphite is a person. A glance tells you what
was asked and what was answered.

It is for assessment and survey operations: exam boards, school data offices,
census-style questionnaires, clinical intake and screening, and the marking and
moderation queues behind them. It would ruin brand marketing, lifestyle
commerce and entertainment — anywhere filling in a form is not the job, a page
of ruled rows and lettered ovals is just bureaucracy.

The signature move is the **timing track**: a column of short bars down the
left edge of every sheet, one per row, exactly as the scanner reads them. Here
a bar turns graphite when its row is complete, so the track is also the
progress indicator. Nobody has to learn it; it is already where their eye goes.

## Colors

Two inks on tinted stock, and the ink says who wrote it.

- **Ground (#E5F5E7):** the pale green stock of the form. Answer bands sit on a
  slightly deeper tint, #DDEADF, the shaded field a candidate writes inside.
- **Accent (#0B7643):** the dropout ink. Every label, instruction, rule caption
  and empty oval letter. It is set as text and clears 4.5:1 on both tints. It
  never fills a control and it is never used for anything a person typed.
- **Primary (#2A2E34):** graphite. Filled ovals, entered values, the primary
  button, completed timing bars. A primary fill means "a person put this here".
- **Destructive (#5D0004):** reserved for marks the scanner cannot read —
  double marks, erasures, blanks on a required row — and always paired with a
  written reason, never colour alone.
- **Dark mode** is the sheet read on a lightbox screen: the ground goes slate
  (#15181E), graphite becomes the brightest ink (#CDD1D8) and the form stays
  green (#6AC48C). The two-ink rule survives the inversion.

## Typography

Sofia Sans Condensed prints the form, Public Sans explains it, Spline Sans Mono
is what a person entered.

- **Display and section headings:** Sofia Sans Condensed, 700. Condensed so
  a section title and its instruction fit across one band, as they do on paper.
- **Labels:** Sofia Sans Condensed at 12px, uppercase, 0.08em tracking, in the
  dropout green, always above the field they label. This is the only uppercase
  text in the system; headings and buttons stay in sentence case.
- **Body and instructions:** Public Sans at 15px, 1.55. Never below 13px.
- **Oval letters:** Sofia Sans Condensed 700 at 11px — the one size below the
  floor, because it is the letter printed inside a 30 × 20px oval and the
  oval, not the letter, is what a person reads and hits.
- **Entries:** Spline Sans Mono at 15px, 0.06em tracking, in graphite —
  candidate numbers, centre codes, typed answers, scores. Never smaller than
  13px; a code someone reads back over the phone needs air.

## Layout

The unit is the **sheet**: a single column up to 760px wide with an 18px timing
track down its left edge and 32px margins. Inside it, the unit is the **row**:
40px tall, one question or one field, its number in mono at the left, its
choices or its entry rule to the right, every row aligned to a bar on the track.

Rows are grouped into numbered sections under a 2px rule with the section title
and its one-line instruction on the same baseline. Wider screens place a
second sheet or a summary column beside the first; they never widen the row.
Choices run horizontally in one line — A to E — and wrap to a second line only
below 360px.

Nothing floats. There are no modals over a sheet; a correction opens inline
under the row it corrects.

## Elevation & Depth

Ruled. Rule weight is the only hierarchy: 2px rules bound sections and the
sheet, 1px rules separate rows, and a deeper tint marks the band a person
writes inside. There are no shadows, no raised cards and no blur anywhere.

What would be elevation elsewhere is a change of ink here: the selected row is
not lifted, its timing bar and its oval turn graphite.

## Shapes

Zero radius on everything: sheets, bands, buttons, inputs, comb boxes, tags.

The one exception is the **oval** — a 30 × 20px horizontal ellipse with its
letter centred in it, 1.5px dropout outline when empty, solid graphite with the
letter knocked out when marked. It is the only curve in the system, which is
why a person can find every choice on a page at a glance. Never use the oval
for anything that is not a choice — a choice as marked, or as the scanner read
it, filled to the darkness it measured with the letter set beneath.

## Components

- **Timing track:** 18px column of 10 × 4px bars, one per row, dropout outline
  when the row is open, solid graphite when it is complete. Decorative to
  assistive tech; progress is also announced in text.
- **Choice row:** row number in mono, prompt in body, then ovals A–E. Built on
  native radio or checkbox inputs, so arrow keys, focus and announcement work;
  the oval is the visible box. Targets are at least 32px including padding.
- **Comb field:** one 26 × 36px box per character for codes and IDs only, mono
  graphite entry, label in dropout caps above. Free text uses a single
  baseline rule instead.
- **Section header:** 2px rule, section number and title in condensed display,
  instruction in dropout green on the same line.
- **Exception flag:** a destructive-ink square bracket around the row with the
  reason written in the row's last column — "two marks", "erased", "blank".
- **Buttons:** graphite fill, zero radius, 12px padding, sentence case; the
  secondary button is a 2px graphite outline. No dropout-ink buttons.

## Do's and Don'ts

- Do set every label, instruction and empty oval letter in the dropout green, and nothing else.
- Do set every value a person supplied in graphite, and in the mono face when it is a code or number.
- Do give every row a bar on the timing track and fill it when the row is complete.
- Don't round anything except the choice ovals, and don't use an oval for anything but a choice, as marked or as scanned.
- Don't fill a control with the dropout green; the form ink is never a button.
- Don't lift, shadow or blur any surface; change the ink or the rule weight instead.
- Don't mark an unreadable or missing answer with colour alone; write the reason in the row.