Flip

Active Seed DNA · Folio

Folio

Warm parchment developer tool. The anti-SaaS-blue light theme.

lightwarmdeveloperminimal

Born From

Documentation that feels like reading printed on paper — warm, unhurried, comfortable. The radical restraint of Inter at 400 heading weight on parchment, where text belongs to the surface. Brown-black text on warm white creating a reading experience with the temperature of old books. Blue as the single cool note in an entirely warm composition — interactive contrast only.

⌕
Search...
⌘K
Design Tokens
Core primitives and variables
→
Color Palette
Brand and semantic colors
→
Typography Scale
Font sizes and weights
→
#F7F7F4
Background
#EFEFEC
Surface
#26251E
Text
#706F65
Muted
#2563EB
Accent
#F1F3F8
Soft
#CECEC9
Border
#E8E8E5
Hover

Why It Works

Warm parchment background creates paper-like reading experience. Deliberately light 400 weight heading feels part of the surface. Brown-black text on warm background is uniquely comfortable. Blue accent is the single cool note providing interactive contrast. Warm-tinted shadows match the overall parchment atmosphere.

Best For

Developer documentation with warm reading experience. Technical writing and tutorial platforms. API reference sites that prioritize readability. Framework getting-started guides with inline code.

Skip This If

You need bold impactful hero sections. Inter at 400 heading weight is the most understated in the catalog. Your brand is colorful and expressive. This warm parchment system rejects additional accent colors beyond blue. Your interface needs strong card elevation. These minimal shadows rely on surface color steps not depth.

Palette

Folio starts with white.

One blue to break the silence.

Warm parchment background (#F7F7F4). Surface (#EFEFEC) steps slightly darker. Hover (#E8E8E5) goes one step further. The borders (#CECEC9) continue the warm tint. Every neutral leans warm. The text (#26251E) is brown-black. The warm text on warm background creates a paper-like reading experience that cold blues can never match. The muted text (#706F65) is warm gray that recedes naturally.

background#F7F7F4
surface#EFEFEC
surface hover#E8E8E5
text#26251E
muted#706F65
accent#2563EB
accent soft#F1F3F8
border#CECEC9
Chart Palette
Status
Success
Warning
Error
Contrast
Text 14.3:1AAA
Accent 4.8:1AA

The accent is blue (#2563EB). Clean, standard blue. It's the one cool note in a warm composition. On interactive elements and links only. Against the warm parchment, it provides contrast without fighting the palette. The accent soft (#F1F3F8) is a cool-tinted hover state that stands out against the warm surfaces. The gradient from blue to purple (#7C3AED) is reserved for rare branded moments. Subtle surface noise gives every parchment surface a tactile, paper-like quality. Never break the warmth. The blue is the exception that proves the rule.

Docs that feel like they were written.

Not generated.

Folio gives your developer documentation or technical platform the warm parchment atmosphere that makes reading code and prose feel like the same comfortable experience.

docs.example.com/api
Introduction
Authentication
Endpoints
Webhooks
SDKs

List Seeds

GET
/v1/seeds
Parameters
stylestringFilter by visual style
limitintegerMax results (default 20)
// Example
GET /v1/seeds?style=minimal&limit=5
Typography

DM Sans at 400.

Paired with DM Sans.

Inter at weight 400 for headings. Deliberately light. On warm parchment, 400-weight headings read like text that belongs to the surface. It doesn't project. It rests. At -0.01em letter-spacing with 1.1 heading line height, those light headings are the most understated in the catalog. No aggression. No weight games. The heading feels like part of the page, not something placed on top of it.

DM Sans
mono: JetBrains Mono
Display49px
Heading 139px
Heading 231px
Heading 325px
Body16px
Caption13px
Weight: 400/400Heading spacing: -0.01emBody spacing: -0.01emHeading LH: 1.1Body LH: 1.6Base: 16pxScale: 1.25Para spacing: 1em

Body at weight 400 too. Same weight, same family. The hierarchy comes entirely from size. At 16px base size with comfortable density and 1.6 line height, the body is compact and readable for technical content. JetBrains Mono for code is critical here because documentation is half prose, half code. The monochrome icon style at 20px reinforces the understated precision.

Technical. Warm. Not an accident.

Someone chose this on purpose.

Folio's brown-black text on warm parchment gives every reference page and tutorial a paper-like quality that most dev tools refuse to attempt.

PRODUCT

The design system you build once and use forever

Marcus WebbApril 2, 2026

Most teams build three or four design systems before they get one that lasts. Not because the work was bad — because the context kept changing. What if the system was built to absorb change instead of resist it?

Token-first architecture gives you exactly that. The primitives stay stable while the semantics do all the work of staying current with your product.

“The best system is the one your team actually uses.”

That means ergonomics matter as much as coverage. A system nobody reaches for is a system that doesn't exist.

Shape

Soft radius. 1px borders.

Folio's physical language.

Eight-pixel rounding throughout. Four on small elements. Sixteen on modals. Shape language is conventional. The color system creates all the personality. Solid 1px borders with warm gray maintain gentle structure. Subtle dividers keep the comfortable density organized. Monochrome outlined icons at 20px stay understated. When your palette is this distinctive, your shapes should do nothing but contain content.

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

Code review on parchment.

As comfortable as a journal.

Folio holds its distinctive warmth at mobile scale, making documentation or code examples feel worth reading wherever you open them.

Search docs...
Getting Started
Install and configure
API Reference
All endpoints and params
Design Tokens
Color, type, spacing specs
Changelog
Recent updates and fixes
Atmosphere

Fast and comfortable.

Folio's invisible layer.

Parchment lift shadows. 1px 3px using the warm text color at 6% opacity. Barely visible. Borders do more depth work than shadows. The warm-tinted shadow shares the brown undertone of everything else. The large shadow at 25px 50px exists for elevated panels but this system rarely needs dramatic depth. Darken hover effects create subtle surface shifts. Fast motion speed means interactions are crisp and responsive. Outline focus style provides clean, accessible feedback. The surface noise gives every warm surface a paper-like texture. Weight 400 headings. Warm backgrounds. Minimal shadows. The atmosphere is the parchment itself.

Speed: fastEasing: cubic-bezier(0.4, 0, 0.2, 1)Easing In: cubic-bezier(0.4, 0, 1, 1)Easing Out: cubic-bezier(0, 0, 0.2, 1)Blur: 0pxNoise: subtleOpacity: 1
Home
Settings
User
Search
Bell
Mail
Star
Heart
Icons: monochrome / 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%