Ghost
A publishing platform for serious writers built around Ghost's warm amber (#FF9400) accent on predominantly dark surfaces (#15171A canvas) and clean whites for the reading experience. The Ghost admin interface is elegant and restrained — near-black sidebar, white editor with generous margins, and amber used only on active states and brand moments. The product communicates that publishing should be beautiful and owned, not algorithmic. Typography uses a clean grotesque (Inter) for UI and leaves content typography to the publisher's theme. The admin surface is visually quiet so writers can focus on their words.
Color Tokens
version: alpha name: Ghost description: "A publishing platform for serious writers built around Ghost's warm amber (#FF9400) accent on predominantly dark surfaces (#15171A canvas) and clean whites for the reading experience. The Ghost admin interface is elegant and restrained — near-black sidebar, white editor with generous margins, and amber used only on active states and brand moments. The product communicates that publishing should be beautiful and owned, not algorithmic. Typography uses a clean grotesque (Inter) for UI and leaves content typography to the publisher's theme. The admin surface is visually quiet so writers can focus on their words."
colors: primary: "#FF9400" on-primary: "#ffffff" primary-hover: "#E88200" ink: "#15171A" ink-muted: "#738A94" canvas: "#ffffff" surface-1: "#F9FAFB" surface-2: "#F0F2F3" border: "#DDE1E5" admin-bg: "#15171A" admin-surface-1: "#1F2022" admin-surface-2: "#272A2D" admin-border: "#313539" admin-ink: "#CED4D9" admin-ink-muted: "#738A94"
typography: display: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 44px fontWeight: 700 lineHeight: 1.15 letterSpacing: -0.02em body: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0
spacing: base: 8px scale: [4, 8, 12, 16, 24, 32, 48, 64, 96]
radius: sm: 4px md: 8px lg: 12px pill: 9999px
shadows: card: "0 1px 3px rgba(0,0,0,0.12)" elevated: "0 4px 16px rgba(0,0,0,0.15)" admin-elevated: "0 8px 32px rgba(0,0,0,0.5)"
motion: duration-fast: 100ms duration-base: 200ms easing: cubic-bezier(0.4, 0, 0.2, 1)
1. Visual Theme & Atmosphere
Ghost is designed for writers who take their craft seriously. The admin interface reflects this: the editor is a wide, white, generous writing surface with the UI chrome receding to the periphery. The dark sidebar (#15171A) holds navigation without competing with content. Amber (#FF9400) appears on active states, publication logos, and the brand itself — warm and premium without being gaudy. The platform is anti-algorithm by philosophy, and the design communicates that.
2. Color System
Ghost runs comfortably in both contexts:
Admin (dark shell):
- Background: #15171A — deep, near-black with warm undertone
- Surface layers: #1F2022 / #272A2D — subtle elevation
- Ink: #CED4D9 — cool-light text that doesn't cause eye strain
- Amber: #FF9400 — active nav items, CTAs, publication logo accent
Editor/Reading (light):
- Canvas: white, generous margins
- Body ink: #15171A — same dark, warm text for coherence
- The reading surface is intentionally theme-agnostic
3. Typography
Inter for all admin and product UI. The choice is about invisibility — Inter is clean enough that it doesn't compete with the publication content. Display headings at 700 with tight tracking. The actual reading/editorial typography is determined by the Ghost theme — Casper (the default) uses a beautiful serif stack.
4. Components & Patterns
- Editor: Full-width Koenig block editor, slash-command palette for inserting cards
- Dark sidebar: Icon + label navigation, publication switcher at top, settings gear at bottom
- Post list: Table with title, status pill (Draft/Scheduled/Published), author, date
- Analytics: Minimal charts — member count, open rates — in clean white panels
- Portal signup: Ghost's member subscription modal, amber CTA, email field
5. Spacing & Layout
Admin sidebar: 240px fixed, dark. Content area: white, max editor width 740px (optimal reading width). Member dashboard: card grid with 16px gap. Marketing (Ghost.org): generous dark sections, 1200px max.
6. Motion & Interaction
Editor block insertion is smooth. Post publish sequence has a satisfying state change (Draft → Published) with amber highlight. Sidebar is collapsible with slide animation. Portal modal fades in with subtle scale.