MURPH CAPITAL / DESIGN.MD
SOURCE OF TRUTH · 2026
A rigorous editorial system for venture capital intelligence.
01 / EDITORIAL FIRST
Information hierarchy, sourcing, and readability outrank decoration.
02 / GREEN PRIMARY
Green carries links, actions, positive signals, and brand emphasis.
03 / FLAT STRUCTURE
Use ruled grids and rows, not floating cards or decorative shadows.
04 / REUSE FIRST
Existing presets, components, and CMS structures are the default.
Color variables
GREEN IS BRAND · ORANGE IS WARNING ONLY
50
100
200
300
400
500 / PRIMARY
600
700
900
FREQUENTLY USED SUPPORT TOKENS
BG
Page base
GRAY / 200
Hover surface
GRAY / 300
Primary divider
GRAY / 400
Disabled edge
GRAY / 600
Muted UI
TEXT / PRIMARY
Headlines and body
PRIMARY — headlines, body, strong labels
SECONDARY — supporting copy
MUTED — dates and metadata
DISABLED — unavailable states
INVERSE — dark surfaces
BRAND / ACTION
Links, arrows, active data, positive movement, CTA emphasis.
NEUTRAL / STRUCTURE
Warm background, near-black text, gray dividers and disabled states.
WARNING ONLY
Orange appears only for warnings or exceptional status—not branding.
INFO / ERROR
Blue and red remain semantic utilities. Never build page palettes around them.
Text styles
HEADER / HEADING 1
64 → 51 → 40
Latest VC/LP intelligence
HEADER / HEADING 2
48 → 40 → 32
Reports and benchmarks
HEADER / HEADING 4
CARD & ROW TITLES
Why fund construction still matters
PARAGRAPH / BODY L
EDITORIAL EXPLANATION
Use Inter Display for readable explanations, descriptions, principles, and longer interface copy.
LABEL / LABEL XXL
META, FILTERS, ACTIONS
MARKET · AUG 8, 2026 · READ MORE ↗
Layout & CMS patterns
1200PX
DESKTOP CANVAS
32PX
OUTER GUTTER
1136PX
WORKING WIDTH
1PX
STANDARD RULE
CONTENT GRID
Three columns, zero gap, ruled card edges. Cards may include evidence images, but typography remains the dominant hierarchy.
EVENTS LIST
A flat stack of full-width rows. Preserve title, location tag, date, and green detail action as aligned columns.
FUNDS LIST
Full-width rows with distributed data fields. Numeric and categorical information stays compact and scannable.
How we build
Pages are composed as editorial systems: a clear information model, repeated widths, deliberate rules, and reusable modules. Restraint is a feature.
01 / SPACING RHYTHM
Prefer a small repeatable set: 4 for inline details, 10–16 inside groups, 24–40 between modules, and 64–96 for section breathing room.
02 / WIDTH SYSTEM
Desktop is 1200 with 32px gutters and a 1136px working area. Keep headings, prose, grids, and list rows on shared edges.
03 / SECTION ANATOMY
Use one purpose per section, generous vertical padding, and a 1px closing rule. Avoid nested bands without a content reason.
04 / GRIDS & LISTS
Use zero-gap ruled grids for editorial cards. Use full-width stacked rows for events and funds. Structure comes from alignment, not card shadows.
05 / SURFACES
Warm ivory is the default. Gray/200 may mark hover or quiet groupings. Keep radii near zero; reserve pills for filters and tags.
06 / RESPONSIVE
Desktop grids become one-column reading sequences. Preserve content order and metadata; reduce gutters before reducing legibility.
INTERACTION — Clear targets, pointer affordance, visible active states, green actions, and restrained hover feedback.
MOTION — Fast and functional. Use subtle opacity, color, or position changes. Never make reading wait for animation.
ACCESSIBILITY — Maintain contrast, semantic hierarchy, keyboard focus, descriptive labels, and useful image alternatives.
Vibe & tone of voice
CALM · PRECISE · CURIOUS · EVIDENCE-LED
PERSONALITY
An informed analyst, not a hype machine. Confident enough to be concise; curious enough to show uncertainty; practical enough to explain why information matters.
HEADLINES
State the insight, tension, or change directly. Prefer “Why fund construction still matters” over vague promises such as “Unlock the future of venture.”
BODY COPY
Lead with the conclusion, then provide evidence and context. Use short paragraphs, concrete nouns, active verbs, and domain language the audience already understands.
UI & METADATA
Keep labels short and literal: Read report, View event, All funds, Location, Fund size. Metadata is compact, uppercase, and never conversational.
DO
Be specific. Cite numbers and dates. Name the audience. Explain the consequence. Distinguish observation from opinion. Edit until every sentence earns its place.
AVOID
Hype, breathless superlatives, generic startup language, fake urgency, excessive rhetorical questions, cute metaphors, filler intros, and claims without evidence.
AUTHORITATIVE, NOT ARROGANT
TECHNICAL, NOT OPAQUE
DIRECT, NOT ABRUPT
OPINIONATED, NOT DOGMATIC
Media & imagery
EVIDENCE BEFORE ATMOSPHERE
Images are editorial evidence, not decoration. Every visual should identify a person, place, event, company, document, or data point that materially supports the story.
01 / PURPOSE
Use photography for reporting, identity, context, and proof. If an image adds only mood, remove it.
02 / SELECTION
Prefer authentic event, founder, fund, market, and document imagery. Avoid generic laptops, handshakes, skylines, and staged startup scenes.
03 / TREATMENT
Keep color natural, contrast clear, and crops factual. Do not add cinematic grading, ornamental overlays, or decorative gradients.
04 / GEOMETRY
Use consistent editorial ratios: wide leads near 16:9, card images near 3:2 or 4:3, portraits near 4:5. Keep corners square.
05 / CAPTIONS
State who or what is shown, why it matters, and the source or credit. Captions use compact UI text and muted color.
06 / ACCESSIBILITY
Alternative text describes editorial meaning, not appearance alone. Decorative images should not enter the reading order.
Depth, shape & responsive system
LEVEL 0 / FLAT
Default. Transparent wrappers or warm ivory surfaces with no elevation effect.
LEVEL 1 / RULED
A 1px gray/300 rule separates rows, cards, sections, and inputs.
LEVEL 2 / SURFACE
Gray/200 indicates hover, selection context, or a quiet secondary region.
LEVEL 3 / OVERLAY
Only search, menus, and modals may use restrained elevation. Never shadow ordinary cards.
SQUARE — cards, inputs, sections, media
2PX — primary buttons and compact controls
FULL PILL — filters, tags, taxonomy only
NO SHADOW — unless content is truly overlaying
DESKTOP / 1200
32px gutters · 1136px working width · three-column content grids
Full navigation, wide data rows, complete metadata
TABLET / 810
32px gutters · reduced display scale · one or two columns by content
Compact navigation and preserved list-row hierarchy
PHONE / 390
12–24px gutters · single reading column · no horizontal overflow
Drawer navigation, stacked metadata, 44px minimum touch targets
Component taxonomy
ACTIONS
btn-m, text-btn, arrow-btn, load-more. Use literal labels and existing responsive variants.
DISCOVERY
Search, dropdowns, filter chips, location and fund-size filters. State must be visible and reversible.
EDITORIAL CARDS
Article, report, interview, podcast, and template cards. Preserve category, title, evidence, author, and date hierarchy.
DATA ROWS
Event and fund CMS items. Keep values aligned, labels compact, and the complete row clickable when appropriate.
SHARED SECTIONS
Header, content-hero, newsletter, sponsors, and footer. Reuse these systems; never redraw page-local substitutes.
UTILITIES
Location tag, date element, number block, links with icons, and social links. Compose rather than recreate.
Component usage
ARTICLE CARD / CMS GRID
FULL-WIDTH LIST ROWS / CMS
REUSE ORDER
1. Existing component instance
2. Existing component extended with controls
3. New canvas component
4. Inline element only when truly unique
SHARED CHROME
Header and footer are established responsive components. Page openings use content-hero. Newsletter calls use substack-form. Do not redraw these systems inline.
Do / don’t
DO
Use green for links, actions, active signals, and positive movement.
Build hierarchy through PP Mondwest, whitespace, alignment, and rules.
Reuse existing components, controls, presets, and CMS structures first.
Make claims specific, sourced, dated, and relevant to VC/LP readers.
Keep cards, rows, images, and headings on a consistent editorial grid.
DON’T
Don’t use orange, blue, or red as decorative brand accents.
Don’t add gradients, floating cards, soft shadows, or oversized SaaS headlines.
Don’t invent one-off buttons, cards, navigation, or newsletter sections.
Don’t use generic startup hype, fake urgency, or unsupported predictions.
Don’t use imagery as filler or crop away the subject’s editorial meaning.
Future-agent checklist
01 / AUDIT BEFORE BUILDING
Inspect relevant pages, active tokens, text presets, component controls, CMS collections, and breakpoint variants.
02 / COMPOSE EDITORIALLY
Begin with the information model. Use restrained page openings, ruled sections, strong headlines, and compact metadata.
03 / APPLY THE SYSTEM
Use green for brand actions. Use orange only for warning. Use PP Mondwest, Inter Display, and Source Code Pro through presets.
04 / VERIFY EVERY BREAKPOINT
Desktop uses three-column grids and wide rows. Tablet and phone simplify to reading sequences without losing metadata or rules.
QUALITY TEST