Flip

Active Seed DNA · Citrus

Citrus

Bold and unapologetic

lightboldplayful

Born From

Digital storefronts that treat yellow as a premium brand decision not a warning color. The belief that SaaS could be bold and sunny without losing commercial credibility. Plus Jakarta Sans at 800 weight where thickness becomes the statement. Warm cream backgrounds that keep electric yellow from tipping into garish territory.

Acme
ProductsSolutionsPricing
#FFFDF5
Background
#FFFFFF
Surface
#1A1A1A
Text
#666666
Muted
#AF9100
Accent
RGBA(255,214,10,0.15)
Soft
#F3D95A
Border
#FFF9E6
Hover

Why It Works

Electric yellow on cream proves SaaS can be bold. Jakarta Sans at 800 is thick and geometric and demanding. Yellow-tinted borders make even structure on-brand. Generous 16px radius creates friendly huggable containers. Warm cream background keeps yellow from being garish.

Best For

Digital product storefronts with bold pricing callouts. Creator economy platform landing pages. Payment link and checkout page builders. SaaS free-trial signup flows with progress bars.

Skip This If

Your product handles sensitive financial data. Electric yellow reads as playful not trustworthy for banking. You need WCAG AAA contrast on accent backgrounds. Yellow on white fails even basic contrast requirements. Your interface uses standard semantic colors. Yellow accent conflicts with warning states that also use yellow.

Palette

Citrus starts with white.

One gold to break the silence.

The background is warm cream (#FFFDF5) with a yellow undertone. Not pure white. That warmth is subtle but essential, because the electric yellow accent (#AF9100) lives against it. Pure white would make the yellow garish. The cream keeps everything in the same warm family. White surface cards pop cleanly against the warm background.

background#FFFDF5
surface#FFFFFF
surface hover#FFF9E6
text#1A1A1A
muted#666666
accent#AF9100
accent softrgba(255,214,10,0.15)
border#F3D95A
Chart Palette
Status
Success
Warning
Error
Contrast
Text 17.1:1AAA
Accent 3.0:1AA Large

The real personality is in the details. Borders are yellow-tinted (#F3D95A). Even the shadows glow warm with yellow at 10% opacity. In this system, even the structural elements are on-brand. The accent soft (yellow at 15% opacity) creates golden hover states. The gradient from electric yellow (#FFD60A) to warm orange (#FF9500) is a sunrise compressed into a CSS value. Black text on yellow backgrounds is a power move. This palette proves it.

Selling shouldn't look nervous.

This never does.

Citrus puts bold electric yellow against warm cream, creating a storefront or checkout experience that radiates confidence before anyone reads a price.

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

DM Sans at 800.

Paired with Geist.

Plus Jakarta Sans at weight 800 for headings. Extra-bold. Thick, geometric, and loud. At -0.03em heading tracking, those letters compress into something that demands attention. This isn't a font that asks permission. It fills space and holds it. The 1.1 heading line height keeps the massive type tight and impactful.

DM Sans
paired with
Geist
mono: Space Mono
Display49px
Heading 139px
Heading 231px
Heading 325px
Body16px
Caption13px
Weight: 800/400Heading spacing: -0.03emBody spacing: -0.02emHeading LH: 1.1Body LH: 1.6Base: 16pxScale: 1.25Para spacing: 1em

Body text drops to weight 400 with 1.6 line height and stays clean and readable. Jakarta Sans has this quality where the bold weight is a completely different personality from the regular weight. Heavy and geometric up top, clean and approachable in the body. Same family, two different energies. Space Mono for code adds structured contrast when you need technical credibility alongside the boldness.

Product pages feel like invitations.

Not catalogs.

Citrus's sunny palette and heavy type transform a product or pricing layout into something people actually want to browse.

NEW RELEASE

Build something
people remember.

Design tokens that give your product a point of view. Not just colors and fonts. Personality.

Shape

Rounded radius. 1px borders.

Citrus's physical language.

Sixteen-pixel rounding on containers. Ten on buttons and inputs. Twenty-four on large panels. Generously rounded throughout. This system wants to feel friendly, approachable, huggable. Pill-shaped CTAs work naturally here. The 1px solid borders with yellow tint are a feature, not just structure. Subtle dividers keep the comfortable density organized. Every rounded corner reinforces the personality: this product is fun, this product is approachable, this product smiles at you.

Card heading
Body text showing how the seed's typography feels inside a real component.
Tag
Hover to feel the interaction
XL Radius
24px
shadowLg
Radius:16px
Radius SM:10px
Radius XL:24px
Border:1px solid
Shadow:Sunny warmth
Hover:scale
Focus:ring
Active scale:0.95
Density:comfortable
Divider:subtle

Gold in your pocket.

Optimism fits any screen.

Citrus carries its full warmth to mobile, where the cream background and electric accent keep every tap feeling energetic.

Premium Collection

The Essential Kit

Everything you need, nothing you don't. Curated for people who care about details.

$49$7938% off
Atmosphere

Smooth and comfortable.

Citrus's invisible layer.

Yellow-tinted shadows. 4px 16px at yellow rgba with a secondary soft black layer. Cards feel like they're sitting in sunlight. No dark, heavy shadows. This is an optimistic system. Depth is created through color contrast (white cards on cream background) more than shadow weight. The bouncy easing curve (0.34, 1.56, 0.64, 1) gives the scale hover effect a springy, energetic feel. Active scale at 0.95 provides satisfying tactile feedback. Smooth motion means nothing happens too fast or too slow. The entire atmosphere says "click me, something good will happen."

Speed: smoothEasing: cubic-bezier(0.34, 1.56, 0.64, 1)Easing In: cubic-bezier(0.4, 0, 1, 1)Easing Out: cubic-bezier(0, 0, 0.2, 1)Blur: 0pxNoise: noneOpacity: 1
Home
Settings
User
Search
Bell
Mail
Star
Heart
Icons: filled / 20px
Density: comfortableGrid: 12 cols / 1.5rem gapContainer: 1200pxSection: 4rem / Content: 1.5remSpace 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%