Brand OS/version alpha

Turn your website into an AI-readable Brand OS.

Build a reviewable system for voice, visual direction, content pillars, and generation rules. Every recommendation shows its source, confidence, and gaps before anything reaches your brand workspace.
Source-backed preview

Strategy with receipts.

Extracted evidence is not an assumption. Inferred direction is not a fact. Candidate palettes remain exploration, and missing proof stays missing until a source closes the gap.

Public http or https pages only. Private networks and redirect escapes are blocked.

Up to 12,000 characters. Guidance stays in the preview payload and never enters the auth URL or analytics.

idle

Waiting for a source

Explicit state
No source has been submitted. Nothing has been inferred or saved.Next: Add a public website URL to start from evidence.
State contract

No silent state changes.

The public preview names progress, partial evidence, recovery, conversion, and review outcomes. The live preview above uses the same state contract before authenticated review.
idle

Waiting for a source

Explicit state
No source has been submitted. Nothing has been inferred or saved.Next: Add a public website URL to start from evidence.
input-started

Source added

Explicit state
A source is present, but Genfeed has not read or interpreted it yet.Next: Review the source before starting the scan.
scanning

Scanning sources

In progress
Genfeed is reading public signals and recording where each claim came from.Next: Keep this page open while sources and confidence are checked.
partial

Partial preview

Explicit state
Some brand signals are sourced; others remain inferred or missing.Next: Review the gaps before treating recommendations as ready.
ready

Preview ready

Explicit state
The preview separates evidence, assumptions, candidates, and gaps.Next: Review the receipts, then decide what belongs in your Brand OS.
blocked

Blocked

Explicit state
The source requires authentication or prevents a trustworthy scan.Next: Add a public source or paste guidance to continue.
error

Scan error

Explicit state
The scan stopped before it could produce a trustworthy preview.Next: Keep the source URL and retry when the connection recovers.
conversion-prompted

Ready to save

Explicit state
The preview is complete. Saving it requires a Genfeed workspace.Next: Sign in when you are ready to save this reviewed preview.
saved

Saved draft

Explicit state
The preview is stored as a draft. Current brand values are unchanged.Next: Open the draft in Brand Kit review before applying any field.
accepted

Accepted

Explicit state
The owner accepted the reviewed evidence and promoted the draft.Next: Use this accepted system as the review baseline.
missing-evidence

Evidence missing

Explicit state
A required claim has no reliable source and cannot be presented as fact.Next: Add customer proof or mark the recommendation as an assumption.
Foundations

Depth without borders.

Five background tones create elevation from the deepest canvas to the most raised surface, with no heavy strokes, just tonal shift. Text resolves in three tiers over the top.
Background layers
bg-primary#0A0A0A
Main canvas, sidebar
bg-secondary#161616
Cards, panels
bg-tertiary#1F1F1F
Inputs, nested surfaces
bg-elevated#161616
Popovers, dropdowns — separated by hairline + shadow, not lightness
bg-hover#2A2A2A
Interactive hover states
Text hierarchy
text-primary#EDEDED
Primary content — 16.9:1
text-secondary#A1A1A1
Secondary labels — 7.7:1
text-muted#949494
Muted / metadata — 6.5:1
Accent, inverted for dark
accent#EDEDED
Primary CTA on dark
accent-foreground#0A0A0A
Text on accent
accent-hover#CCCCCC
CTA hover
Signal

Color that means something.

Status and domain colors map directly to state and workflow, never decoration. Four semantic tones, two domain tones.
Semantic status
Success#10B981
Completed, passing, published
Warning#F59E0B
Needs attention, awaiting approval
Danger#FF6166
Failed, errored, rejected
Info#52A8FF
Informational, neutral status
Domain
Agent#38BDF8
AI agent activity states
Done#C084FC
Completed workflows
Identifiers

Platform tokens.

Twenty-four brand colors used as identifiers only, on platform icons, connection badges, and analytics breakdowns. Never for layout chrome or primary actions.
Beehiiv#FCD34D
DEV Community#0A0A0A
Discord#5865F2
Facebook#1877F2
Fanvue#6C63FF
Ghost#15171A
Hacker News#FF6600
Instagram#E1306C
LinkedIn#0A66C2
Mastodon#6364FF
Medium#00AB6C
Notion#000000
Pinterest#E60023
Product Hunt#DA552F
Reddit#FF4500
Shopify#96BF48
Slack#4A154B
Snapchat#FFFC00
Substack#FF6719
Telegram#26A5E4
Threads#000000
TikTok#FE2C55
Twitch#9146FF
WhatsApp#25D366
WordPress#21759B
X (Twitter)#1DA1F2
YouTube#FF0000
Typography

A dense, deliberate scale.

System sans for the interface, mono for code and tokens. Body sits at 13px with −0.01em tracking; headings tighten to −0.03em.
Caption / chip11px
Label / table head12px
Body / button / table cell14px
Lede15px
Card title18px
Form

Four-step radius.

Corners map to purpose, matching the ShipCode and Linear language. Elevated surfaces use inset box-shadow for containment instead of a CSS border.
xs2px
Tag dots, inline chips
sm4px
Badges, tags
md6px
Buttons, inputs, tooltips
lg8px
Popovers, toasts, overlay panels
xl10px
Dialogs, command palette
The principle

Content is the accent.

Genfeed chrome is a neutral studio, the gallery wall, not the art. The product's output is inherently colorful, so the interface never competes with it. Color enters through exactly four doors; everything else is grayscale.
01

User content

Generated media is the primary color source. Rendered borderless and full-bleed wherever possible, so chrome recedes behind it.
02

Platform identifiers

Platform brand tokens, scoped to badges and icons only. Never layout chrome or primary actions.
03

Semantic status

Success, warning, danger, info. Applied to state, never decoration.
04

Categorical palettes

Workflow-node and tag colors, for identification and function. Never chrome.
Do
  • Use background layering for hierarchy; a hairline confirms the edge, it does not carry it.
  • Give every raised surface a hairline: shadow-border on cards, shadow-dropdown on overlays.
  • Move one step for hover, two for selected — never jump to an absolute color.
  • Use ghost buttons for toolbar and topbar actions.
  • Apply semantic status colors consistently across every surface.
  • Use −0.011em letter-spacing on body, −0.02em on headings.
Don't
  • Paint pure #FFF on pure #000; capped ends (#EDEDED on #0A0A0A) read better at UI sizes.
  • Mix hardcoded colors with token references.
  • Use the accent for status; it is for primary CTAs only.
  • Add a new semantic color without updating DESIGN.md.
  • Use large decorative gradients as core product surfaces.
  • Nest cards inside cards, or add glow / spotlight shadows to chrome.