Flip

Active Seed DNA · Frame

Frame

European precision. Unexpected blue.

lightboldelegantclean

Born From

Ace & Tate choosing #1032CF as the single color moment in an otherwise black-and-white fashion system. An editorial serif heading font with an ultra-light grotesque body — the font pairing that fashion magazines have been doing in print for decades.

Acme
ProductsSolutionsPricing
Aa
Instrument Serif · 400
const theme = designSeeds.get("name")

Why It Works

Electric blue #1032CF against white and black creates a single moment of color that reads as confidence, not desperation. Libre Baskerville headings give fashion editorial legitimacy to a DTC eyewear brand. Bricolage Grotesque at weight 200 creates the light-touch body text that fashion copy requires. Pill CTAs signal optical product DNA without being literal.

Best For

European fashion and eyewear brands. Editorial retail and luxury DTC. Design studio portfolios with fashion sensibility. Lifestyle brands with clean European aesthetic.

Skip This If

Your brand needs warm palette or earth tones. The fashion-monochromatic aesthetic conflicts with your product. Weight 200 body text is too light for your accessibility requirements.

Palette

Frame starts with white.

One blue to break the silence.

The electric blue arrives as a single moment in a system that would otherwise be entirely black and white. This is the color strategy of fashion brands that have the confidence to limit themselves: you will remember one color from this system because we gave you only one color to remember. #1032CF is saturated and cool and European in the specific way that makes it distinct from the tech blues and the navy blues in the rest of this catalog.

background#FFFFFF
surface#000000
surface hover#111111
text#000000
muted#555555
accent#1032CF
accent soft#cfd6f5
border#141414
Chart Palette
Status
Success
Warning
Error
Contrast
Text 21.0:1AAA
Accent 8.8:1AAA

The black surfaces and the white canvas create the monochromatic container for that single blue moment. The accentSoft is the lavender ghost of the blue — the only way the accent color appears outside of CTAs and active states. The border at #141414 is near-black rather than pure black, creating a hairline border that reads as a hem rather than a line.

One blue. Everything else is black and white.

The fashion editorial color strategy.

Frame's electric blue #1032CF arrives as the single color moment in a monochromatic system. Libre Baskerville headings and ultra-light Bricolage Grotesque body create the fashion publication voice.

app.example.com/dashboard
Total Revenue
$84,254
+12.4%
Active Users
2,847
+8.1%
Conversion
3.24%
-0.3%
Avg. Order
$127
+2.8%
Weekly Activity
Revenue by day
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Status
API Uptime
99.9%
Build Queue
3 pending
Error Rate
0.02%
Latency
142ms
Typography

Instrument Serif at 400.

Paired with Space Grotesk.

Libre Baskerville carries the weight of editorial serif tradition — newspapers, magazines, literary criticism — without the historical baggage of older text faces. It reads as contemporary while communicating that this brand has considered its typographic choices against a longer history than this season's design trends. At weight 400, the headed sections have the presence of a fashion editorial without the stiffness of a formal institution.

Instrument Serif
paired with
Space Grotesk
mono: IBM Plex Mono
Display49px
Heading 138px
Heading 230px
Heading 323px
Body14px
Caption11px
Weight: 400/200Heading spacing: normalBody spacing: normalHeading LH: 1.23Body LH: 1.71Base: 14pxScale: 1.284Para spacing: 16px

Bricolage Grotesque at weight 200 is the ultra-light body text that fashion copy requires. The compressed stroke width creates visual space between paragraphs and between the body text and the editorial imagery that frames it. This is not about readability at conventional standards — it is about the specific reading register that fashion editorial creates, where the text supports the image rather than competing with it.

Editorial serif. Ultra-light grotesque. Pills.

European fashion at 768px.

Frame's pill shapes and fashion-editorial typography compress to tablet as a European fashion DTC interface. The single blue accent holds its intensity at every viewport.

NEW RELEASE

Build something
people remember.

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

Shape

Pill radius. 1px borders.

Frame's physical language.

Pills everywhere is the optical product choice. Eyewear frames are characterized by smooth curves and rounded edges. The pill radius across all elements creates visual consistency with the product category. The 2px sharp option reserved only for inputs creates a contrast that reads as measurement precision — the instruments that measure for frames are sharp, the frames themselves are curved.

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

The single color that says everything.

Electric blue at 375px.

Frame's monochromatic black-and-white system with one electric blue accent creates a mobile fashion interface that communicates editorial confidence in a phone-width column.

Design faster.
Ship smarter.

Production-ready tokens for every project.

No credit card required
2,847 users
Atmosphere

Smooth and comfortable.

Frame's invisible layer.

The textured surface noise on dark sections adds a tactile quality that reads as high-quality material. It is the CSS equivalent of linen or matte acetate — the material surfaces that optical frames are made from. The spring easing creates motion that overshoots and recovers, the same kinetic quality as a frame that flexes and returns. Duotone icons read as precision illustration, the kind of technical drawing that would appear in an optician's catalog.

Speed: smoothEasing: ease-in-outEasing In: cubic-bezier(0.34, 1.56, 0.64, 1)Easing Out: cubic-bezier(0.36, 0, 0.66, -0.56)Blur: 0pxNoise: texturedOpacity: 1
Home
Settings
User
Search
Bell
Mail
Star
Heart
Icons: duotone / 16px
Density: comfortableGrid: 12 cols / 1.5rem gapContainer: 960pxSection: 24px / Content: 24pxSpace unit: 8px

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%