The Editorial Classic view is the third export view (alongside Classic and Editorial). It uses Classic's grid and card layout engine exactly as-is — the same row composition logic, the same card-as-atom model where each screenshot + its annotations = one card, the same annotation margin positioning (right, left, bottom).
What changes is purely visual: colors, typography, image framing, annotation note styling, and the addition of the Editorial view's title block and footer. No grid algorithm changes. No new layout logic.
Once validated, this view will replace both Classic and Editorial. The two existing views will be removed.
| Element | Classic | Editorial Classic |
|---|---|---|
| Title block | Simple text title | Cal Sans title + coral accent bar + superline metadata (from Editorial) |
| Footer | Simple footer | "COMPOSED WITH SNAPSPARROW" + Date (from Editorial) |
| Image frame | Screenshot bleeds to card edge | 12px padding, 4px radius, 1px #EBEBEB border on image |
| On-image badges | Current badge colors | Annotation ink palette colors (see §11) |
| Annotation number | Current style | Large zero-padded numeral (22px, wt 400, annotation ink color) |
| Annotation type label | Current style | Filled pill (white text on annotation ink color) |
| Annotation body text | Current style | #4A4A4A, 13px, line-height 1.55 |
| Annotation separators | Current style | Full-width colored rule at 12% opacity in outgoing annotation's ink color |
| Caption field | Not in current Classic | Italic line at bottom of card (see §8) |
| Manifest section | N/A | None — annotations live inline on cards only |
All of the following remain exactly as they are in the Classic view:
Grid/row composition logic. Card-as-atom model. Annotation margin positions (right, left, bottom) and the logic that determines which position to use. Card sizing and proportions. Image scaling behavior. Row ordering. Badge numbering. Badge positioning on images. The relationship between annotation count and card layout.
Do not modify any Classic grid or layout logic. This spec only affects rendering/styling within the existing card structure.
JPG export must fill with #F0F0ED, not transparency.
The title block is taken directly from the existing Editorial view implementation. Structure, top to bottom:
| Element | Font | Size | Weight | Color |
|---|---|---|---|---|
| Superline (doc type) | Hanken Grotesk | 11px | 600 | #8A8A8A |
| Superline (counts) | Hanken Grotesk | 11px | 500 | #ADADAD |
| Title | Cal Sans | 26px | 400 | #1A1A1A |
| Date | Hanken Grotesk | 13px | 400 | #ADADAD |
All sizes above are at screen scale. The title block sits above all cards, outside any card container.
The screenshot no longer bleeds to the card edge. Instead, it sits inside a padded frame within the card, creating a visible white mat around the image. This solves the white-screenshot-on-white-card boundary problem.
The 1px #EBEBEB border on the image itself ensures a defined edge even when the screenshot content
is white. The 12px padding ensures the card's white background is always visible as a mat between the image and
the card edge.
On-image annotation badges are positioned relative to the image frame area (inside the padding), not relative to the card edge.
Badges on the image use the annotation ink palette colors instead of the current Classic badge colors. Size and positioning logic remain unchanged from Classic.
The annotation notes in the margin area (right, left, or bottom of card) are restyled. The margin position logic — which side the annotations appear on, how many fit — remains unchanged from Classic.
Each annotation entry, top to bottom:
When annotations appear below a full-width image, they can be laid out side by side in columns if there are 2–3
annotations. Separated by a 1px vertical rule in #E8E8E6. Each annotation gets equal width.
Each card has an optional user-authored caption — a note about the overall screenshot (distinct from annotations, which point at specific elements). The caption appears at the very bottom of the card, below everything else.
The caption is always the last element inside the card. It is separated from the content above it (either the
image frame or the annotation area) by a subtle #F0F0ED hairline. It is visually quieter than
annotation text — smaller, italic, lighter color.
When annotations are in a side margin (left or right), the caption spans the full card width beneath both the image and the margin. It is not scoped to a column.
Caption spans full card width regardless of margin position. Annotation margin can be on the right (shown), left (zigzag), or bottom.
Date does not appear in the footer — it is in the title block.
These colors are used for on-image badges, annotation margin numbers, type pills, and separator rules.
| Type | Color | Hex |
|---|---|---|
| Callout | #263747 | |
| Callout Linked | #2E4A5A | |
| Region | #5B3A77 | |
| Arrow | #CA9C63 | |
| Strike | #B85647 | |
| Comparative A | #2C5461 | |
| Comparative B | #4D857E |
| Role | Hex |
|---|---|
| Export background (stone) | #F0F0ED |
| Card background | #FFFFFF |
| Card border | #E8E8E6 |
| Internal dividers | #F0F0ED |
| Image frame border | #EBEBEB |
| Brand accent (coral bar) | #D4726A |
| Primary text | #1A1A1A |
| Secondary text | #4A4A4A |
| Muted text | #8A8A8A |
| Light muted text | #ADADAD |
| Role | Font | Source |
|---|---|---|
| Export title only | Cal Sans | Google Fonts (single weight, 400) |
| Everything else | Hanken Grotesk | Google Fonts (variable, 200–900) |
| Element | Size | Weight | Style | Color |
|---|---|---|---|---|
| Title | 26px | 400 | Cal Sans | #1A1A1A |
| Superline (doc type) | 11px | 600 | Uppercase, 0.1em | #8A8A8A |
| Superline (counts) | 11px | 500 | Uppercase, 0.1em | #ADADAD |
| Date | 13px | 400 | Normal | #ADADAD |
| Annotation number | 22px | 400 | -0.03em tracking | Ink color |
| Annotation type pill | 9px | 700 | Uppercase, 0.07em | White on ink |
| Annotation body | 13px | 400 | lh 1.55 | #4A4A4A |
| Caption | 12px | 400 | Italic, lh 1.45 | #8A8A8A |
| Footer | 10px | 400 | Uppercase, 0.06em | #ADADAD |