Flip

Active Seed DNA · Cabana

Cabana

Retro poolside aesthetic with pixel fonts and pastels

lightretroplayful

Born From

Poolside magazines from the early 1970s where Playfair Display was the only acceptable headline choice. The tension between decorative serif headings and monospace body text as deliberate cultural collision. Dusty pink and faded teal as the exact palette of a sun-bleached poolside umbrella. Fast motion speed that matches the quick, breezy energy of warm-weather browsing.

Aa
Playfair Display · 400
const theme = designSeeds.get("name")
#F6D5D5
Background
#F9F0E9
Surface
#000000
Text
#6B7280
Muted
#2E898F
Accent
#DADADB
Soft
#000000
Border
#EFE6E0
Hover

Why It Works

Playfair Display headings with JetBrains Mono body is an unexpected serif-mono pairing that creates instant personality. #F6D5D5 dusty pink background with #F9F0E9 warm surface creates a sun-faded poolside palette. 4px radius is nearly square, reinforcing the retro pixel-grid aesthetic. Textured surface noise adds film-grain tactility that amplifies the vintage feel. #2E898F teal accent on pink is a complementary color pair that reads as intentionally retro, not accidental.

Best For

Retro-themed music streaming or playlist curation platforms. Vintage-inspired fashion ecommerce with editorial photography. Lifestyle brand landing pages that want to feel like a magazine spread from 1972. Event and festival ticketing sites where the aesthetic is the experience.

Skip This If

Your brand needs to feel current and forward-looking. The retro palette dates itself deliberately. You need fast scanning and utility. Playfair Display headings with mono body text slows reading speed significantly. Your product is B2B or enterprise. The poolside aesthetic is maximally consumer and maximally casual.

Palette

Cabana starts with white.

One teal to break the silence.

The pink background (#F6D5D5) is the entire personality. It's not a white page with pink accents. The page IS pink. Soft, dusty, sun-faded pink. The kind of color you see on the wall of a beachside bar that's been there since the 70s. The cream surface (#F9F0E9) layered on top creates a warm-on-warm combination that feels like golden hour.

background#F6D5D5
surface#F9F0E9
surface hover#efe6e0
text#000000
muted#6B7280
accent#2E898F
accent soft#dadadb
border#000000
Chart Palette
Status
Success
Warning
Error
Contrast
Text 15.4:1AAA
Accent 3.0:1AA Large

Teal accent (#2E898F) is the genius complement. It's the pool water against the pink tile. Cool and refreshing against all that warmth. Black text and borders keep everything grounded. Without that black, the palette would float away into cotton candy territory. The black says "this is designed, not accidental."

Summer vibes as a business strategy.

It's working.

Cabana makes every product page feel like you're browsing from a poolside lounger, and somehow that makes you trust it more.

www.example.com
NOW IN BETA

The fastest way to
ship great products.

Turn your ideas into polished interfaces without burning weeks on design decisions.

Typography

Playfair Display at 400.

Paired with Geist.

Playfair Display for headings is old-world elegance dropped into a poolside context. Those high-contrast serif strokes at regular weight with tight negative letter-spacing create headlines that feel like magazine covers from another era. The collision between that serif refinement and the context of a playful, pastel product is where all the personality lives.

Playfair Display
paired with
Geist
mono: IBM Plex Mono
Display49px
Heading 139px
Heading 231px
Heading 325px
Body16px
Caption13px
Weight: 400/400Heading spacing: -1pxBody spacing: normalHeading LH: 0.88Body LH: 0.94Base: 16pxScale: 1.25Para spacing: 4px

JetBrains Mono for body text is the unexpected move. Monospace body copy in a retro-playful system reads as "hand-coded." Like someone typed this out on a terminal next to the pool. The ultra-tight 0.94 line height and 4px paragraph spacing pack the text dense. It's not trying to be readable like a blog. It's trying to feel like a label. Like a manifesto on the back of a record sleeve.

Leisure content, read at leisure.

The aesthetic earns it.

Cabana's editorial experience has a vintage warmth that makes reading feel like a reward.

Merino Everyday Tee

4.8 (241)
$68$95

Responsibly sourced merino. Soft enough for all-day wear, structured enough for anywhere you go.

S
M
L
Shape

Crisp radius. 1px borders.

Cabana's physical language.

Four pixels everywhere. Nearly square. Tight, precise corners that feel like print design. Labels on bottles. Tags on clothing. This isn't a system that curves its way to friendliness. The sharp corners combined with the retro palette and monospace text create something that feels physical. Like a card you'd hold in your hand. Tangible design.

Card heading
Body text showing how the seed's typography feels inside a real component.
Tag
Hover to feel the interaction
XL Radius
4px
shadowLg
Radius:4px
Radius SM:2px
Radius XL:4px
Border:1px solid
Shadow:none
Hover:darken
Focus:outline
Active scale:1
Density:comfortable
Divider:line

Poolside, pocket-sized.

The vibe doesn't shrink.

Cabana keeps its retro personality intact on mobile, where the nostalgic aesthetic actually feels most at home.

DESIGN
Why less choice makes better products
Mia Chen4 min
ENGINEERING
Token architecture for teams that scale
Jake Torres6 min
STRATEGY
The compounding return of great defaults
Priya Nair3 min
Atmosphere

Fast and comfortable.

Cabana's invisible layer.

No shadows. No depth. Cabana is completely flat on purpose. This is poster design, not interface design. Elements sit on the pink canvas with no pretension about dimensionality. The textured surface noise adds a subtle grain, like looking at something through a vintage filter. Fast motion speed keeps interactions snappy. Nothing lingers. Click it, it responds, move on. Poolside pace.

Speed: fastEasing: ease, ease, ease, easeEasing In: cubic-bezier(0.4, 0, 0.2, 1)Easing Out: cubic-bezier(0.4, 0, 0.6, 1)Blur: 0pxNoise: texturedOpacity: 1
Home
Settings
User
Search
Bell
Mail
Star
Heart
Icons: outlined / 20px
Density: comfortableGrid: 3 cols / 12px gapContainer: 960pxSection: 32px / Content: 9pxSpace unit: 4px

Go build something beautiful.

111 design decisions that all agree with each other. Made for you to use in an instant.

Start Building

SAAS LANDING PAGE · 1440

S
Shipwreck.
PlatformSolutionsDocumentationPricing
Sign In
237 deploys today. Join the elite.

Stop deploying like it’s 2019.

Shipwreck turns your git push into a production deploy in 11 seconds. Zero config, infinite scale, and an interface that doesn’t look like a spreadsheet.

Trusted by teams at

StripeVercelLinearRetoolSupabaseGitHubStripeVercelLinearRetoolSupabaseGitHub
11s
Avg. Deploy Time.
99.99%
Uptime Guarantee.
0
YAML Files Touched.

Everything you need.

Push and pray.
We handle the "pray" part. Instant detection of your framework, automatic optimization, and edge deployment.
Env variables.
Secure secrets management that actually makes sense. Sync across environments without copying .env files ever again.
Logs.
Real-time streaming logs with zero latency. Filter, search, and debug faster than you can type 'console.log'.

From code to edge.

01

Connect Repository

Link your GitHub, GitLab, or Bitbucket in two clicks. We scan your tech stack instantly.

02

Automated Build

Our high-speed runners build your app in isolated containers. No cold starts, just speed.

03

Global Propagation

Your app is pushed to 300+ edge locations globally. Sub-10ms latency for every user.

$ git push origin main
Initializing shipwreck build pipeline...
Detecting Framework: Next.js 14
Installing dependencies... [1.2s]
Running production build... [4.5s]
✓ Build successful
Optimizing assets for Edge... [0.8s]
Deploying to 312 nodes...
🚀 Production live: https://shipwreck.sh/v1-final

Observe everything.

A dashboard built for developers who hate dashboards. No fluff, just the metrics that matter for your application health.

  • Automatic SSL Management
  • Preview Deployments on every PR
  • Infinite Scalability Engine
SHIPWRECK CONSOLE / ANALYTICS
Latency
8ms
Success Rate
100%
Traffic
12.4k/s
[12:44:01]GET/api/v1/user/auth - 200 OK (12ms)
[12:44:02]POST/api/webhooks/stripe - 202 Accepted
[12:44:05]GET/static/images/hero.webp - 304 Not Modified

Don't take our word for it. Take theirs.

“

Shipwreck is the first platform that actually stays out of my way. It feels like I’m writing code directly to the browser.

JD
Josh Doe
CTO at Hyperdrive
“

The speed is actually offensive. I push a commit and before I can switch tabs, the preview link is already in Slack.

SK
Sarah Klein
Lead Engineer at Void
“

We migrated 400 microservices in a weekend. Our dev team might actually like me now. Highly recommended.

ML
Marcus Lee
SVP Eng at BigCo

Pricing that scales.

Start for free, grow until you’re a unicorn.

Hobby

$0/mo
  • 3 Projects
  • Global Edge Network
  • SLA Guarantee
Most Popular

Team

$29/mo
  • Unlimited Projects
  • Priority Support
  • 99.9% SLA

Common questions.

Absolutely not. We run our own bare-metal orchestration layer built specifically for high-frequency deployments. While we leverage cloud partners for edge nodes, the core engine is pure Shipwreck engineering.

Your Friday deploys deserve better.

11-second deploys. Automatic rollbacks. Zero YAML. Start free, no credit card.

Shipwreck.

High-performance deployment infrastructure for teams that refuse to slow down. Built by developers, for developers.

Product
FeaturesChangelogStatus
Resources
DocumentationAPI ReferenceCommunity
Company
AboutSecurityCareers
© 2024 Shipwreck. Engineering Elegance.
TermsPrivacySecurity

SAAS LANDING PAGE · 768

S
Shipwreck.
PlatformSolutionsDocumentation
237 deploys today. Join the elite.

Stop deploying like it’s 2019.

Shipwreck turns your git push into a production deploy in 11 seconds. Zero config, infinite scale, and an interface that doesn’t look like a spreadsheet.

Trusted by teams at

StripeVercelLinearRetoolSupabaseGitHubStripeVercelLinearRetoolSupabaseGitHub
11s
Avg. Deploy Time.
99.99%
Uptime Guarantee.
0
YAML Files Touched.

Everything you need.

Push and pray.
We handle the "pray" part. Instant detection of your framework, automatic optimization, and edge deployment.
Env variables.
Secure secrets management that actually makes sense. Sync across environments without copying .env files ever again.
Logs.
Real-time streaming logs with zero latency. Filter, search, and debug faster than you can type 'console.log'.

From code to edge.

01

Connect Repository

Link your GitHub, GitLab, or Bitbucket in two clicks. We scan your tech stack instantly.

02

Automated Build

Our high-speed runners build your app in isolated containers. No cold starts, just speed.

03

Global Propagation

Your app is pushed to 300+ edge locations globally. Sub-10ms latency for every user.

$ git push origin main
Initializing shipwreck build pipeline...
Detecting Framework: Next.js 14
Installing dependencies... [1.2s]
Running production build... [4.5s]
✓ Build successful
Optimizing assets for Edge... [0.8s]
Deploying to 312 nodes...
🚀 Production live: https://shipwreck.sh/v1-final

Observe everything.

A dashboard built for developers who hate dashboards. No fluff, just the metrics that matter for your application health.

  • Automatic SSL Management
  • Preview Deployments on every PR
  • Infinite Scalability Engine
SHIPWRECK CONSOLE / ANALYTICS
Latency
8ms
Success Rate
100%
Traffic
12.4k/s
[12:44:01]GET/api/v1/user/auth - 200 OK (12ms)
[12:44:02]POST/api/webhooks/stripe - 202 Accepted
[12:44:05]GET/static/images/hero.webp - 304 Not Modified

Don't take our word for it. Take theirs.

“

Shipwreck is the first platform that actually stays out of my way. It feels like I’m writing code directly to the browser.

JD
Josh Doe
CTO at Hyperdrive
“

The speed is actually offensive. I push a commit and before I can switch tabs, the preview link is already in Slack.

SK
Sarah Klein
Lead Engineer at Void
“

We migrated 400 microservices in a weekend. Our dev team might actually like me now. Highly recommended.

ML
Marcus Lee
SVP Eng at BigCo

Pricing that scales.

Start for free, grow until you’re a unicorn.

Hobby

$0/mo
  • 3 Projects
  • Global Edge Network
  • SLA Guarantee
Most Popular

Team

$29/mo
  • Unlimited Projects
  • Priority Support
  • 99.9% SLA

Common questions.

Absolutely not. We run our own bare-metal orchestration layer built specifically for high-frequency deployments. While we leverage cloud partners for edge nodes, the core engine is pure Shipwreck engineering.

Your Friday deploys deserve better.

11-second deploys. Automatic rollbacks. Zero YAML. Start free, no credit card.

Shipwreck.

High-performance deployment infrastructure for teams that refuse to slow down. Built by developers, for developers.

Product
FeaturesChangelogStatus
Resources
DocumentationAPI ReferenceCommunity
Company
AboutSecurityCareers
© 2024 Shipwreck. Engineering Elegance.
TermsPrivacySecurity

SAAS LANDING PAGE · 375

S
237 deploys today. Join the elite.

Stop deploying like it’s 2019.

Shipwreck turns your git push into a production deploy in 11 seconds. Zero config, infinite scale, and an interface that doesn’t look like a spreadsheet.

Trusted by teams at

StripeVercelLinearRetoolSupabaseGitHubStripeVercelLinearRetoolSupabaseGitHub
11s
Avg. Deploy Time.
99.99%
Uptime Guarantee.
0
YAML Files Touched.

Everything you need.

Push and pray.
We handle the "pray" part. Instant detection of your framework, automatic optimization, and edge deployment.
Env variables.
Secure secrets management that actually makes sense. Sync across environments without copying .env files ever again.
Logs.
Real-time streaming logs with zero latency. Filter, search, and debug faster than you can type 'console.log'.

From code to edge.

01

Connect Repository

Link your GitHub, GitLab, or Bitbucket in two clicks. We scan your tech stack instantly.

02

Automated Build

Our high-speed runners build your app in isolated containers. No cold starts, just speed.

03

Global Propagation

Your app is pushed to 300+ edge locations globally. Sub-10ms latency for every user.

$ git push origin main
Initializing shipwreck build pipeline...
Detecting Framework: Next.js 14
Installing dependencies... [1.2s]
Running production build... [4.5s]
✓ Build successful
Optimizing assets for Edge... [0.8s]
Deploying to 312 nodes...
🚀 Production live: https://shipwreck.sh/v1-final

Observe everything.

A dashboard built for developers who hate dashboards. No fluff, just the metrics that matter for your application health.

  • Automatic SSL Management
  • Preview Deployments on every PR
  • Infinite Scalability Engine
SHIPWRECK CONSOLE / ANALYTICS
Latency
8ms
Success Rate
100%
Traffic
12.4k/s
[12:44:01]GET/api/v1/user/auth - 200 OK (12ms)
[12:44:02]POST/api/webhooks/stripe - 202 Accepted
[12:44:05]GET/static/images/hero.webp - 304 Not Modified

Don't take our word for it. Take theirs.

“

Shipwreck is the first platform that actually stays out of my way. It feels like I’m writing code directly to the browser.

JD
Josh Doe
CTO at Hyperdrive
“

The speed is actually offensive. I push a commit and before I can switch tabs, the preview link is already in Slack.

SK
Sarah Klein
Lead Engineer at Void
“

We migrated 400 microservices in a weekend. Our dev team might actually like me now. Highly recommended.

ML
Marcus Lee
SVP Eng at BigCo

Pricing that scales.

Start for free, grow until you’re a unicorn.

Hobby

$0/mo
  • 3 Projects
  • Global Edge Network
  • SLA Guarantee
Most Popular

Team

$29/mo
  • Unlimited Projects
  • Priority Support
  • 99.9% SLA

Common questions.

Absolutely not. We run our own bare-metal orchestration layer built specifically for high-frequency deployments. While we leverage cloud partners for edge nodes, the core engine is pure Shipwreck engineering.

Your Friday deploys deserve better.

11-second deploys. Automatic rollbacks. Zero YAML. Start free, no credit card.

Shipwreck.

High-performance deployment infrastructure for teams that refuse to slow down. Built by developers, for developers.

Product
FeaturesChangelogStatus
Resources
DocumentationAPI ReferenceCommunity
Company
AboutSecurityCareers
© 2024 Shipwreck. Engineering Elegance.
TermsPrivacySecurity
50%