BRET MORGAN

Investor & Operator
Overview

Design System

A comprehensive style guide for BretMorgan.me — designed to feel like "True Ventures, but personal and operator-heavy." Text-forward, investor-legible, and built for credibility.

Design North Star:

If an investor screenshots your page and drops it in a deck, it should still look clean in grayscale.

Typography

Type System

Inter for UI and structure, Merriweather for editorial gravitas. Max 3 heading levels per page. Labels always smaller and lighter.

Hero H1 — Inter, 44px, Semi-bold

I invest in markets, hospitality, and tools for local economies.

Section H2 — Inter, 32px, Semi-bold

Writing that shapes how we think about building

Card Title H3 — Inter, 22px, Semi-bold

FRESH Markets

Body Text — Inter, 16px, Regular

I'm an investor and operator behind FRESH Markets, Surf Village, Marée, and Convene. I write and raise capital for projects that blend hospitality, real estate, and software. Most of my work happens at the intersection of physical places and the tools that support them.

Small Text — Inter, 14px, Regular

Secondary descriptive text for supporting information, captions, and metadata.

Meta Label — Inter, 12px, Medium, UPPERCASE

Investor & operator

Editorial Headline — Merriweather, 44px, Semi-bold

A Hacker's Guide to Growing Up

Pull Quote — Merriweather, 24px, Italic
"The best businesses are built where real people live, work, and gather."
Monospace — JetBrains Mono, 14px const investor = { focus: ['real estate', 'hospitality', 'software'] };
Colors

Color Palette

Less "fun gradient", more quiet VC. Backgrounds alternate between white and light gray. Gradients only in hero + footer. Everything else: solid neutrals with accent text.

Primary Colors

Primary Rose
#d3959b
Links, buttons, accents
Accent Sage
#bfe6ba
Section labels, chips

Candy Gradient

Our primary gradient used in hero sections, navbar header, and footer.

Start
#d3959b
Soft rose
End
#bfe6ba
Sage green
Candy
2-stop
Warm, approachable

Gradient Usage:

Soft Candy gradient (rose to sage) used sparingly — hero section, navbar header, and footer only. Rest of site uses solid neutrals and primary rose tones. Creates warm, approachable atmosphere while maintaining professionalism.

Neutral Scale

Neutral 50
#f9fafb
Page background
Neutral 100
#f1f3f4
Alternate sections
Neutral 200
#e5e7eb
Borders
Neutral 400
#9ca3af
Tertiary text
Neutral 600
#4b5563
Secondary text
Neutral 900
#111827
Primary text
Buttons

Button Styles

Cards

Project & Blog Cards

Portfolio-style cards with uniform visual weight. Subtle borders, light shadows, minimal hover states.

Project Cards

Hospitality

FRESH Markets

Farm-to-table market and restaurant concept in Asbury Park, NJ. Seasonal menu, local sourcing, community gathering space.

Active • 2022-Present • Founder
Real Estate

Marée

Boutique hotel investment opportunity in Spring Lake, NJ. Repositioning historic property for modern hospitality.

Active • 2024-Present • Investor
Software

DBL Systems

Technical consulting and software development for real estate, hospitality, and local business operators.

Active • 2015-Present • Founder
Blog

Writing Index Style

True Ventures-style blog list. Vertical rows, not card grid. No thumbnails. Text-forward agenda list.

What I Read in 2025
December 12, 2025 • Reading List • 8 min read

A look at the books I read this year, from physics and technology to music, biography and nature.

A Hacker's Guide to Growing Up
November 3, 2025 • Mindset • 12 min read

An origin story about chasing curiosity until it started to resemble purpose.

Finding Gratitude in an Ending
November 23, 2022 • Entrepreneurship • 5 min read

Reflecting on closing The Conflict venue and what I learned from running a music space for 6 years.

Badges

Category Badges

Real Estate Hospitality Product Capital Mindset Software
Forms

Form Elements

Newsletter Form

Simple: one line of copy + email field + button. Lives in footer and at bottom of blog index.

Spacing

Spacing System

Generous margins and line spacing throughout. Section padding alternates between 64px and 80px.

py-16 (64px) — Standard section padding
py-20 (80px) — Large section padding

Constraints

Layout

Grid System

2 Column Grid

Column 1
Column 2

3 Column Grid

Column 1
Column 2
Column 3
Hero

Hero Section Example

Text-only or minimal visual. Soft gradient background. Two buttons max. Left-aligned content.

Investor & operator
Bret Morgan

I invest in markets, hospitality, and tools for local economies.

I'm an investor and operator behind FRESH Markets, Surf Village, Marée, and Convene. I write and raise capital for projects that blend hospitality, real estate, and software.

View active investments Read my writing

Hero with Image

For pages that need a visual punch. The gradient + noise overlay normalizes any image quality, adds brand cohesion, and ensures text readability.

Featured Project

Building the future of local food systems.

FRESH Markets brings together farmers, chefs, and communities to create sustainable food ecosystems in underserved neighborhoods.

Learn more View all projects

Works with any image

Even a busy or imperfect photo gets the same polished treatment. The overlay tints the image with our Candy gradient colors.

Hospitality

Where community gathers.

Creating spaces that bring people together.

Explore
Content

Blog Post Content

Wide, calm layout. 65ch column. Big margins. Merriweather for headline. Inter for body. Pull quotes in serif.

A Hacker's Guide to Growing Up

November 3, 2025 • Mindset • 12 min read

My first introduction to coding was in fourth grade when my dad brought home a Coleco Adam home computer. I have no idea where it came from or why it ended up in our house but my brother and I were instantly hooked by our newfound access to classics like Donkey Kong, Zaxxon, and of course, my favorite, Dig Dug.

At the age of 8 or 9, I had no idea what software development or coding was, but thanks to this relic from another era, I started exploring. In the stack of cartridges that came with the computer was a funny little game where you guided a turtle across the screen.

"The best businesses are built where real people live, work, and gather."

Years later, I found out this digital terrapin was an implementation of SmartLogo, an educational language developed in the late 1960s to introduce kids to programming.

const skills = ['development', 'operations', 'investment'];
const focus = skills.map(s => `${s} in physical spaces`);

For countless kids like me, it was a gateway into the principles of computer science and software engineering. It wasn't long before I graduated to Apple BASIC on our brand-new, state-of-the-art Apple IIGS, and later, Turbo Pascal.

Status

Component Checklist

Core components to build before implementing full pages. Each component is shown with live examples below.

Component

Navbar

Primary navigation. Candy gradient background, logo left, nav links right. Mobile: hamburger menu.

Investor & Operator
Component

Footer

Site footer with gradient background. Logo, nav links, social links, newsletter signup, and copyright.

Investor & operator building at the intersection of hospitality, real estate, and software.

Explore

Writing Projects Invest

Connect

About Contact LinkedIn

Stay Updated

Essays on building, investing, and local economies.

© 2025 Bret Morgan. All rights reserved.

Privacy Terms
Component

Section Intro

Reusable section header with label, title, and description. Used to introduce page sections.

Featured Work

Projects I'm Building

Active investments and ventures in hospitality, real estate, and technology.

Component

Invest Card

Deal teaser card for investment opportunities. Shows key details at a glance.

Now Raising Real Estate

Marée Boutique Hotel

Historic property repositioning in Spring Lake, NJ. 12-unit boutique hotel with restaurant and event space.

Target Raise $2.5M
Min Investment $50K
Structure Equity
View Opportunity →
Closed Hospitality

FRESH Markets

Farm-to-table market and restaurant in Asbury Park. Seasonal menu, local sourcing.

Raised $1.2M
Status Operating
Component

Images

Consistent image treatments across the site. All images get a subtle brand-tinted overlay and noise texture for cohesion.

Featured Image

Large 16:9 ratio for hero/header images. Includes optional caption.

Food photography example

Fresh ingredients at the FRESH Markets farmer's market — Photo by Brooke Lark

Inline Image

4:3 ratio for use within blog post content. Smaller corners.

Restaurant interior

Image Gallery (3-up)

Square grid for project galleries, portfolios, or photo collections.

Gallery image 1
Gallery image 2
Gallery image 3

Image Gallery (2-up)

Larger 4:3 ratio for showcasing fewer, more impactful images.

Gallery image 1
Gallery image 2

Image Cards

For project showcases, team members, or any content that pairs image with text.

Project image
Project

FRESH Markets

Community-driven farmers markets in urban neighborhoods.

Project image
Project

Surf Village

Coastal hospitality meets sustainable development.

Project image
Project

Marée

Fine dining rooted in local ingredients.

Portrait Image

3:4 vertical ratio for headshots, author photos, or vertical compositions.

Portrait example

Image Treatment Details

  • • Saturation: 90% — slightly muted for elegance
  • • Contrast: 102% — subtle lift to prevent flatness
  • • Overlay: Candy gradient at 5-8% opacity
  • • Texture: Noise at 4% for analog feel
  • • Hover: Subtle 2% scale for interactivity
Component

CTA Block

Call-to-action section for driving conversions. Used at bottom of pages.

Interested in Working Together?

I'm always open to discussing new projects, investment opportunities, or just connecting with interesting people.

Get in Touch View Current Deals
Component

Author Card

Appears at the bottom of blog posts. Shows author info with links.

BM

Bret Morgan

Investor and operator building at the intersection of hospitality, real estate, and software. Based in New Jersey.

Twitter LinkedIn Email
Component

Breadcrumbs

Navigation breadcrumbs for deep pages.

Component

Pagination

For paginated lists like blog archives.

Dark Mode

Dark Mode Implementation

CSS custom properties enable seamless dark mode switching. Toggle button in header. Preference saved to localStorage. Grayscale-friendly in both modes.

Implementation Notes:

  • • Use .dark class on html element
  • • Toggle via JavaScript button
  • • Store preference in localStorage
  • • All colors use CSS custom properties
  • • Smooth transitions on mode switch