Theme and atmosphere
A warm precision utility: quiet enough to sit beside the page, structured enough to make a visual decision in one scan. Paper and surface layers keep the chrome calm, while ink and amber make state legible.
Compare what shipped.
Keep the overlay close, the controls readable, and the page itself in charge.
Color palette
The palette is intentionally small. Warm neutrals carry the interface, amber marks comparison and focus, and green/red stay semantic.
| Token | Value | Use |
|---|---|---|
--paper | #f3f1e9 | Canvas and quiet navigation |
--surface | #fbfaf5 | Fields, cards, and dialogs |
--amber | #e99b20 | Comparison, focus, and selection |
--line | #d8d5ca | Sections and low-emphasis borders |
Typography rules
The utility voice comes from a compact system sans, not a display face. Labels are small and uppercase; values remain plain, readable, and close to their controls.
Layout principles
The information architecture follows the user's review loop: choose a project, choose an image, record acceptance, compare, tune geometry, anchor to the page, and calibrate the viewport.
Depth and elevation
Default surfaces are flat and separated by line plus background step. A small hard mark belongs to the brand, while soft elevation is an exception for a transient menu or dialog.
Component showcase
Action hierarchy
Comparison mode
Page access notice
Click the toolbar icon while this page is active.
Image rail
Focused field
Anchor summary
top-left · document coordinates
Motion and interaction
Motion confirms a state change; it never becomes the product. Keep hover and focus responses short, and reserve continuous motion for an explicitly selected blink comparison mode.
| Interaction | Timing | Response |
|---|---|---|
| Field focus | 120ms ease | Amber border and soft two-pixel ring |
| Quiet control hover | 120ms ease | Paper tint and ink text |
| Mode selection | 120ms ease | Invert the segment to ink and white |
| Overlay blink | User controlled | Follow the selected frequency, never autoplay |
Do's and don'ts
Do
- Keep paper, surface, ink, and amber roles stable.
- Group controls by the review decision they support.
- Show a value beside every adjustable range.
- Pair semantic colors with a readable label.
- Keep page access user initiated and temporary.
Don't
- Don't add broad host permissions for convenience.
- Don't show raw browser injection errors.
- Don't cover the utility in cards or gradients.
- Don't use a display face in the panel.
- Don't measure an exact viewport with the panel open.
Responsive behavior
At the compact breakpoint, comparison modes wrap into a two-by-two grid and anchor, diff, and viewport rows stack. Outer padding reduces from 14px to 10px while the image rail stays horizontally scrollable.
Agent prompt guide
Build a compact visual-acceptance utility with a warm paper canvas (#f3f1e9), off-white surfaces (#fbfaf5), ink text (#20201c), muted labels (#737269), hairline rules (#d8d5ca), and one amber action signal (#e99b20). Use an Avenir Next/system UI sans at 13px body, 10px uppercase section labels, and 11px helper copy. Keep controls compact: 34px fields and primary buttons, 30px segmented controls, 5–10px radii, and almost no shadow. Organize the panel into project, image rail, acceptance, compare, geometry, DOM anchor, and design viewport sections. Active controls invert to ink; selected images use amber plus an amber-soft halo; passed and changes states retain readable labels. At 330px, stack anchor and width rows and wrap comparison modes. Avoid gradients, glass, large display type, broad host permissions, and color-only status.