— a project of civic literacy —

§

SuperCitizen

Brand Guidelines, First Edition

MMXXVI

Contents

§

I. Preface

On the brand

What we are; what we are not.

SuperCitizen is a non-partisan civic education project. It teaches political literacy through dialogue with AI Souls — distinct ideological perspectives that steel-man their own commitments, so users build a real mental model of how the other side thinks. The brand is built to look and read like a scholarly enterprise: Federalist Papers, lecture hall, annotated reader. Not activist. Not partisan. Not cheerful in the way a learning app for children is cheerful.

Three principles govern every visual and verbal decision the brand makes.

Inquiry over advocacy. The brand asks rather than answers. Its visual register is the seminar, not the rally. We do not borrow the iconography of either party — no red, no blue, no flag, no eagle, no megaphone, no ballot box. The brand looks civic without looking political.

Earned authority. Authority in this brand is borrowed from the typographic, pedagogical, and editorial traditions that earned it: 18th-century pamphlet printing, the legal section mark, university press design, manuscript scholarship. The brand reads as serious because it adopts the visual conventions of serious work.

Calm before the news cycle. SuperCitizen is built to outlast any given moment in politics. The brand should feel stable on the day after an election as it did the day before. Restraint is the watchword. A brand that looks dated in five years was the wrong brand to begin with.

§

II. The Mark

Silcrow & lockups

A section of the civic record, set in a medallion.

The primary mark is the silcrow — § — set in our display serif as a standalone glyph. The silcrow is the typographic symbol of legal sections, used in statutes and academic citation since the medieval manuscript era. It civic-codes the brand without partisan-coding it: no flag, no eagle, no red, no blue. The Constitution is itself organized into sections; SuperCitizen is, at its core, an annotated reader of the documents that organize political life. The mark says exactly that.

Our cut is The Open: the silcrow at standard cap-height, scaled horizontally by 1.18, with no extension to its vertical bounds. The wider proportion reads as more generous, more frontispiece, less corporate. The mark stands alone — no enclosing circle, no badge, no roundel. The glyph is the mark.

a. Lockups

Three primary lockups exist. The stacked lockup is the default for covers, title pages, and any context where the mark has room to breathe. The horizontal lockup serves navigation bars, headers, and email signatures. The mark alone serves as the favicon, app icon, and any context below 64 pixels.

§
SuperCitizen
Civics, in dialogue.
Stacked · primary
§
SuperCitizen
Horizontal
§
Mark only
§
SuperCitizen
Civics, in dialogue.
Reversed · midnight folio

b. Scale & minimum size

The mark is approved at any size from 16 pixels upward. Below 22 pixels, the silcrow's internal counter-spaces compress and the glyph loses its character — keep the wordmark close at hand for these contexts. Reserve at least one cap-height of clear space on all sides; never crowd the mark with adjacent type or imagery.

§
96 px
§
56 px
§
32 px
§
22 px

c. Misuse

The mark is engineered. Its proportions, color, and placement are not subject to interpretation in the field. In particular:

§

Do not rotate or tilt the mark.

§

Do not alter the proportions further than the Open cut.

§

Do not render the mark in red, blue, or any partisan-coded color.

§

Do not place the mark on backgrounds with insufficient contrast.

§

III. Color

Six pigments

Manuscript ink, oxidized bronze, and the patina of public monuments.

The palette is anchored in 18th-century materials and the colors of civic places that have aged in public. Verdigris is the deliberate accent: the green of weathered copper roofs, capitol statuary, and oxidized bronze. It reads unmistakably civic without falling into the red-blue duopoly. Oxblood is reserved — used only for citations, errata, and the rare moment that asks for editorial weight. Iron gall is the deep blue-black of period manuscript ink, and it is the brand's primary text color in every context.

Vellum
#F4ECD8  ·  rgb(244 236 216)
Primary surface. Long-form reading, default background, the page.
Iron gall
#1B1E2A  ·  rgb(27 30 42)
Primary text. Headlines, body, the mark itself.
Verdigris
#3F6F65  ·  rgb(63 111 101)
Primary accent. Buttons, links, progress, the brand's civic color.
Oxblood
#5E2E2A  ·  rgb(94 46 42)
Reserved accent. Errata, pull-quotes, selected state. Below 5%.
Walnut
#6E5A3D  ·  rgb(110 90 61)
Tertiary. Italic ornament, dividers, secondary metadata.
Bone
#E8DCC4  ·  rgb(232 220 196)
Alternate surface. Cards, sidebars, tier-two blocks.

Pairing rules

  • Default product surface uses Vellum, Iron gall, and Verdigris. Oxblood and Walnut are editorial accents, not UI primaries.
  • Never pair Oxblood and Verdigris in opposing positions on the same surface — two adjacent buttons, one each, accidentally codes red/blue.
  • Dark mode (Midnight Folio) inverts to Iron gall background and Vellum text. Verdigris remains. Bone shifts to #2A2D38; Walnut shifts up to #9B8866 for legibility.
  • Verdigris is the only color permitted on interactive elements at scale. No exceptions.
§

IV. Typography

Three faces

A display serif, a reading serif, and a UI grotesque.

The brand uses three typefaces, each with a defined job. The display face is wedge-serifed, classical, carved. The body face is a reading serif designed for digital long-form. The UI face is a neutral grotesque — the deliberate counterweight to the editorial serifs, applied wherever the product is being a coaching app rather than an essay.

Display
Newsreader
(production: GT Sectra)
Headlines, lesson titles, the wordmark.
Civics, in dialogue.
Section heading
Newsreader
32 – 40 px
Section openings, chapter heads.
On steel-manning a position
Subhead
Source Serif 4 Semibold
22 px
Sub-sections, in-body emphasis.
A drill that surfaces the strongest opposing case.
Body
Source Serif 4 Regular
17 px / 1.6 lh
Long-form reading. Tabular numerals enabled.

Arrow's impossibility theorem (1951) proved no ranked voting system can satisfy four basic fairness criteria simultaneously. Subsequent work — Gibbard, Satterthwaite — extended the result.

Italic ornament
Source Serif 4 Italic
Walnut
Eyebrows, attributions, taglines.

— a non-partisan civic education project —

UI label
Inter Medium
13 – 14 px
+0.04 em tracking
Buttons, navigation, metadata.
BEGIN A LESSON
UI numeral
Inter Medium · tabular
Spaced-repetition stats, progress.
Day 03 of 12 · 87% retained
§

V. Voice & Tone

Five principles

How the brand sounds when it speaks. Each principle names a real failure mode it is designed to prevent.

Principle I.

Steel-man, never straw-man.

Every position — including ones the user disagrees with — appears in its strongest form, by people who actually hold it. The brand never makes an argument easier to defeat than its proponents would.

Do Conservatives argue that lower marginal tax rates expand the pool of capital available for productive investment, citing post-1980s recovery data and rates of new business formation.
Don't Conservatives want tax cuts for the rich.

Principle II.

Inquiry over advocacy.

We ask sharper questions; we do not supply better answers. The product never tells the user what to conclude on contested matters.

Do What evidence would change your mind on this position?
Don't The right answer here is that the policy is misguided.

Principle III.

Plain over precious.

Scholarly does not mean obscure. Use the simplest accurate word. Latin earns its keep or does not make the cut.

Do Ranked-choice voting lets you list candidates in order of preference.
Don't RCV operationalizes a Condorcet-adjacent preferential framework.

Principle IV.

Earned authority.

We cite. We show our reasoning. "Studies show" is a tell — we name the studies, the year, the dissenting view. The brand's authority is borrowed from the work it cites, not asserted.

Do Arrow's impossibility theorem (1951) proved that no ranked voting system can satisfy four basic fairness criteria simultaneously. Gibbard and Satterthwaite later extended the result.
Don't Experts agree that ranked voting has trade-offs.

Principle V.

Calm before the news cycle.

We do not chase outrage. We do not anchor to today's headline if it will be stale next week. We cultivate the long view, and let recent events earn their way into the curriculum.

Do Gerrymandering has shaped American elections since the 1812 Massachusetts redistricting that gave the practice its name.
Don't After yesterday's bombshell ruling, everything has changed.
§

VI. Applications

In practice

The system, brought down off the page.

— Landing hero —

— A non-partisan civic education project —

Civics, in dialogue.

Learn how the other side actually thinks. Spaced-repetition lessons on voting systems, the Constitution, and the issues of the day — in conversation with thinkers who steel-man their own beliefs.

No signup. No tracking. Bring your own API key.

— Lesson card —

The Libertarian Soul
DAY 03 / 12

Lesson XIV.

On the case for occupational licensing reform

A licensing requirement is a barrier to entry. The libertarian argument holds that, in many trades, this barrier protects incumbents more than it protects the public. What is the strongest version of the opposing case?

§

SuperCitizen
Brand Guidelines, First Edition
Set in Newsreader, Source Serif 4, and Inter.
Printed on Vellum & Iron gall.
MMXXVI.