Brand OS/version alpha
The Genfeed Brand OS.
The living design system behind Genfeed: dark-first, information-dense, and aligned with the ShipCode and Linear visual language. Depth comes from layered background tones and inset-shadow containment; color enters only through the product's content. This page is the system itself, drawn from DESIGN.md.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#050607
Main canvas, sidebarbg-secondary#0c0d10
Cards, panelsbg-tertiary#131518
Inputs, nested surfacesbg-elevated#1a1c21
Popovers, dropdownsbg-hover#20232a
Interactive hover statesText hierarchy
text-primary#f4f4f5
Primary contenttext-secondary#b4b4bc
Secondary labelstext-muted#6b6b78
Muted / metadataAccent, inverted for dark
accent#fafafa
Primary CTA on darkaccent-foreground#050607
Text on accentaccent-hover#e4e4e7
CTA hoverSignal
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, publishedWarning#f59e0b
Needs attention, awaiting approvalDanger#ef4444
Failed, errored, rejectedInfo#3b82f6
Informational, neutral statusDomain
Agent#38bdf8
AI agent activity statesDone#a855f7
Completed workflowsIdentifiers
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
Discord#5865F2
Facebook#1877F2
Fanvue#6C63FF
Ghost#15171A
Instagram#E1306C
LinkedIn#0A66C2
Mastodon#6364FF
Medium#00AB6C
Notion#000000
Pinterest#E60023
Reddit#FF4500
Shopify#96BF48
Slack#4A154B
Snapchat#FFFC00
Substack#FF6719
Telegram#26A5E4
Threads#000000
TikTok#FE2C55
Twitch#9146FF
Twitter#1DA1F2
WhatsApp#25D366
WordPress#21759B
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.Badge / chip10px
Table head11px
Table cell12px
Body / button13px
Card title14px
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.sm2px
Badges, tags, inline chipsmd6px
Cards, buttons, inputs, tooltips, popoverslg8px
Toasts, overlay panelsxl10px
Dialogs, command paletteThe 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 instead of heavy borders.
- Use inset box-shadow borders on elevated surfaces: cards, dialogs, dropdowns.
- Reserve the border token for structural dividers: sidebar edges, header bottoms.
- Use ghost buttons for toolbar and topbar actions.
- Apply semantic status colors consistently across every surface.
- Use −0.01em letter-spacing on body, tighter on headings.
Don't
- Use a CSS border for card, dialog, or dropdown containment; use inset shadow.
- 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.