Mockups · not implemented

Quackback, with a lighter touch

Same product: gold duck, Feedback, Support, Changelog, Help Center, Status. Current page structures, with illustrative data and local preview interactions. The change is surface — neutral charcoal, hairline separators, familiar pill actions, solid Heroicons, and quiet hierarchy instead of cards and shadows.

Brand gold kept, used sparingly No X marks or social compose Dark first · light sibling HTML mockups only · illustrative data

Locked for this pass

What the references change — and what they don’t

Keep the restraint

  • Familiar charcoal field Background #0A0A0A, matching Quackback’s dark base. Supporting surfaces lift just one step; the main list stays flush.
  • Hairline structure Columns and rows divide with #262626. Supporting blocks (boards, roadmap peek) use a 12px outlined panel. Lists stay continuous.
  • Type as hierarchy 20px / 600 page titles. 15px / 600 list titles. 14px body. 13px metadata in #A1A1A1.
  • Familiar controls, restrained rounding Buttons, search, and compact segments. Not filter rows, not form fields, not module toggles.
  • Solid icons, quiet selection Solid Heroicons throughout, matching the current admin rail. Active: a subtle neutral background and a small gold rail mark.
  • Underline tabs Trending / New / Top and portal product nav use a short gold underline.

Keep as Quackback

  • Icon-only admin rail Do not grow it into X’s labeled 275px column. The 56px rail stays.
  • Gold, not sky blue — and not a fill color Ticks, voted chevrons, unread counts, focus rings, tab underlines, and primary buttons. Not selected rows, not chat bubbles, not empty-state discs.
  • Existing columns and entry points Feedback keeps filters | list. Support keeps views | threads | detail. New post stays a header pill that opens the existing dialog — no tweet composer on the feed.
  • Workspace themes still win Unbranded default only. Branding CSS variables continue to override.
  • Light mode stays White field, #0A0A0A text, #E5E5E5 borders, same geometry. Toggle it on the devices below.

Token system

Default dark palette

Mapped onto the existing tweakcn variables so branding and expandTheme keep working. Only the unbranded bases move.

background#0a0a0a · --background
foreground#FAFAFA · --foreground
muted-foreground#A1A1A1 · secondary text
border#262626 · --border / --input
hover / selected row#181818 · --accent, --muted
elevated#101010 · popover, search fill
primaryoklch(0.886 0.176 86) · existing gold
primary-foreground#0A0A0A · ink on gold
TokenToday (dark)ProposedWhy
--background / --sidebaroklch(0.145) zinc#0a0a0aKeep the current charcoal base; remove the raised frame around lists.
--card / --popoveroklch(0.17) lifted#0A0A0A / #101010Cards share the page. Popovers may lift one step.
--borderoklch(0.269)#262626Visible hairline on black without becoming a frame.
--muted-foregroundoklch(0.708)#A1A1A1Neutral secondary text stays legible without a blue-gray cast.
--radius0.625rem everywhere8px fields; 12px panels; pill buttons/searchPills are for controls, not every rectangle. 12px on a 40px field still reads as a capsule.
--shadow-*Pronounced dark shadowsNone on surfacesDepth from hairlines. Dialogs sit on a neutral black dim.
--ringNeutral grayGoldA restrained gold focus ring keeps keyboard position clear.

Shared primitives

Buttons, tabs, fields, panels

Update these first. Most screens inherit the system without a per-page restyle.

Search posts Planned 3

Outlined panel

Boards, billing, getting started. 12px radius, 1px border, no shadow.

Continuous row
Lists, inbox threads, changelog entries. Hairline only.

No second “Post” white pill. Primary is gold. Page titles are type only — no gold icon tile. Form fields are 8px, not capsules.

Admin

More of the product, one quiet system

The inset rounded stage around admin main goes away. Rail, filters, and list share one charcoal field. Rows are posts, not cards. Click filters, votes, and rows. Toggle light to see the sibling.

acme.quackback.app/admin/feedback

Page coverage and source references

Structure checked against the current repository. These are visual previews with illustrative data, not a functional replica. View navigation, theme toggles, votes, switches, and the board dialog work locally; search, publishing, and persistence are not connected.

AreaPreview coverageSource in apps/web/src
Feedback & SupportInbox, post detail, conversation, empty state, board dialogcomponents/admin/feedback · routes/admin/inbox.tsx
RoadmapRoadmap selector, status columns, post cardscomponents/admin/roadmap-admin.tsx · roadmap-sidebar.tsx
Help CenterArticles, status/category navigation, article detailcomponents/admin/help-center/help-center-list.tsx · help-center-filters.tsx
StatusOverview, incidents, maintenance, servicescomponents/admin/status/status-admin.tsx · status-overview-view.tsx
Analytics & UsersOverview metrics and activity, people and companiescomponents/admin/analytics/analytics-page.tsx · users/users-layout.tsx
Quinn AgentBasics, Knowledge, Guidanceroutes/admin/automation.agent.tsx
Public portalFeedback, Changelog, Help Center, Statusroutes/_portal/changelog.index.tsx · hc.tsx · status.index.tsx

Public portal · /

Feed, not a dashboard of cards

Header: logo, workspace name, underline product nav, gold New post, avatar. Search lives above the boards panel. Use the product navigation to preview Changelog, Help Center, and Status. No inline composer. New post stays the existing dialog.

acme.quackback.app/

Voted chevron is gold, no mute box. Status is a dot + label. Boards panel footer keeps Powered by when the plan requires it.

Admin · /admin/settings/general

Settings as a form, not a stack of cards

Left nav stays. Sections are 12px outlined panels. Fields are 8px rectangles. Module rows are a label + switch, not feature tiles.

acme.quackback.app/admin/settings/general

Small screens

Collapse the rail, keep the list

Admin keeps today’s hamburger sheet plus the floating Filters pill — not a new four-icon dock. Portal: New post in the header; Boards opens the existing sheet.

/admin/feedback

Gold New post in the header. Filters stays the existing FAB. No second dock.

/

Boards is a header control, not a second column.

Critic rounds

What the first pass got wrong

  • Gold as a fill Selected rows had an 8% gold wash. Agent replies were gold bubbles. Empty state was a gold “?”. That makes gold a surface, not an accent. Rows are #181818. Replies are near-white pills. Empty uses a muted solid feedback icon.
  • X compose on the portal “What should we improve?” copied the tweet box. Quackback creates posts in a dialog from New post. The composer is gone.
  • Pills on everything Filter rows, settings fields, and module rows were capsules. The brief reserves pills for buttons, search, and compact segments. Fields are 12px. Filters are text rows. Modules are switches.
  • Invented mobile chrome A four-icon dock is not the admin app. Mobile admin is hamburger + Filters FAB, as today.
  • Crowded portal header Search moved to the right column, above Boards — X’s search slot, Quackback’s boards job.
  • Light mode was copy only Devices now toggle the white sibling so the geometry can be judged in both.
  • Status as a chip Notes said dot + label; the mock used outline pills. Status is a 6px dot and the status name.
  • Still out of scope No X logo, no verification, no Home label, no workflow-canvas restyle. Branding presets still override these defaults.
  • Round 3 · closer to Quackback Restored the current charcoal and gold, neutralized secondary text, softened headings to semibold, and embedded solid Heroicons. Quiet selected backgrounds and 12px supporting panels retain the minimal structure.

When you implement