Zeabur

Zeabur

Zeabur is an AI-powered DevOps platform that automates deployments, infrastructure management, and AI model integration. It enables developers to deploy applications with natural language prompts, rent servers from major providers, manage domains and DNS, send emails, and use pre-built templates for AI chatbots, Discord bots, and more. With predictable pricing, transparent billing, and support for frameworks like GPT, Claude, and Gemini, Zeabur streamlines development workflows for modern builders.

4.0
18
Visits
Visit

Available Pages

Version History

Design Analysis

Zeabur Home design analysis

This design language is a dark infrastructure-console system for cloud deployment, AI tooling, and developer operations. It should feel technical, precise, and command-driven: large sparse heroes introduce the product, t...

Overview

This design language is a dark infrastructure-console system for cloud deployment, AI tooling, and developer operations. It should feel technical, precise, and command-driven: large sparse heroes introduce the product, then dense bordered grids carry templates, pricing, model lists, and feature comparisons. The visual center is a near-black shell, violet command color, compact mono controls, and strict card frames. The system should look engineered rather than decorative.

Colors

Use 18181B as the main page shell and 0A0A0A for deeper hero or feature fields. Use 1A1A1A for cards, inputs, pricing panels, and tables. Borders and frames should come from 322D3C, with lower-contrast dashed rails in 282332. Use 7D36EC as the only dominant accent. It belongs on primary CTAs, selected tabs, featured plan outlines, and command indicators. Use A469FF for active text and highlighted values, and B07CF3 for outline-button text. Use 22C55E only for success or deployed states.

Typography

Use a Geist-style sans family for the base system. Headlines are medium weight, compact, and technical rather than expressive. A hero headline can sit around 60px / 72px, page titles around 48px / 56px, and section headings around 30px / 40px. Use mono styling for CTAs, tabs, technical labels, pricing metadata, and command-like fragments. Default body copy is 16px / 24px; compact card titles and model names can be 16px / 24px; navigation and small filters use 14px / 20px.

Layout

Use a centered content column, usually 1160px to 1240px wide. Keep the global shell full-bleed and dark. Lead pages with one large, sparse hero area, then switch to structured product grids, comparison tables, or template directories. Build dense sections from strict grids: three-column process cards, four-column template cards, and table-like comparison matrices. Use visible frame lines, shared borders, and dashed rails to define sections. Keep card interiors compact, but keep vertical spacing between major sections generous.

Design.md

System Overview

Core identity and authoring metadata from the refto.one design model.

Dark DevOps Command Grid

A dark technical product system with purple command accents, grid-lined infrastructure surfaces, compact console controls, and diagrammatic product cards.

Technical, agentic, infrastructure-focused, and dark without becoming glossy or decorative.

Primary mode: darkcloud deployment and developer infrastructureui-rich

Theme

Fields outside the primary renderer remain visible here as structured fallback content.

Visual atmosphere
Summary
Technical, agentic, infrastructure-focused, and dark without becoming glossy or decorative.
Density
6
Variance
3
Motion
2
Signals
near-black canvas with faint purple grid and binary-map atmosphere · compact command controls with inset pressed shadows · bordered dark cards arranged in strict grids · purple used as the single action and status accent · diagrammatic product illustrations instead of photographic marketing imagery

Colors

Primitive palettes and resolved token colors for the active preview mode.

Palette colors
Void Canvas
#18181B
Terminal Black
#0A0A0A
Panel Graphite
#1A1A1A
Grid Border
#322D3C
Frame Dash
#282332
Primary Violet
#7D36EC
Active Violet
#A469FF
Soft Violet Text
#B07CF3
Pressed Violet
#5A24A8
White Signal
#FFFFFF
Body Gray
#A0A0A0
Muted Gray
#787878
Success Green
#22C55E
Alert Red
#EF4444
Usage rules
Keep the interface dark and infrastructure-like; never introduce light marketing surfaces as the dominant page mode.
Reserve violet for actions, active selections, highlighted plan columns, and small product signals.
Use borders, grid lines, and inset control shadows before drop shadows.
Let gray copy carry most non-critical information so white and violet stay meaningful.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

nav_height
68px
promo_bar_height
52px
content_max_width
1160px
wide_content_max_width
1240px
page_margin
clamp(24px, 6vw, 140px)
section_gap
96px
hero_min_height
min(100vh, 1100px)
card_padding
24px
compact_card_padding
20px
button_padding
7px 14px 10px
large_button_padding
9px 32px 12px
chip_padding
6px 16px
input_padding
12px 16px
grid_gap
16px

Token Radii

Corner radii tokens with a live surface sample.

sharp
0px
control
4px
card
4px
menu
6px
soft_panel
8px
pill
999px

Typography Families

Font families from the current design YAML, including fallback stacks and usage character.

Display
Geist Sans
geometric, compact, technical, and neutral
Body
Geist Sans
plain, readable, and product-native
Mono
IBM Plex Mono style
command-line, deployment-oriented, and suitable for controls or metadata

Typography Scale

Top-level typography scale rendered as live text specimens.

Hero display
60px/72px
Hero display
Page title
48px/56px
Page title
Section title
30px/40px
Section title
Product section title
24px/32px
Product section title
Card title
16px/24px
Card title
Body
16px/24px
Body
Control large
18px/28px
Control large
Control
15px/22px
Control
Caption
14px/20px
Caption
Micro
12px/—
Micro

Typography Line Heights

Top-level typography line-height values from the design YAML.

PropertyValue
hero_display72px
page_title56px
section_title40px
product_section_title32px
card_title24px
body24px
control_large28px
control22px
caption20px

Typography Weights

Top-level typography weights from the design YAML.

PropertyValue
display600
heading500
control500
body400

Typography Rules

Fields outside the primary renderer remain visible here as structured fallback content.

Rules
Use large, medium-weight headings with tight line height; avoid ultra-bold display type. · Use mono treatment for CTAs, technical labels, tabs, and command-like metadata. · Keep card headings compact at 16px so dense grids stay scan-friendly. · Do not rely on letter spacing for hierarchy.

Borders

Border tokens with resolved values.

Card
1px solid #322D3C
Subtle
1px solid #282332
Input
1px solid #3C3C3C
Accent
1px solid #7D36EC
Dashed frame
1px dashed rgba(40, 35, 50, 0.85)

Shadows

Shadow tokens with resolved values and shadow samples where applicable.

None
none
Primary inset
inset 0 -3px 0 #5A24A8
Outline inset
inset 0 -2px 0 #7D36EC
Active inset
inset 0 -1px 0 #5A24A8

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration fast
120ms
Duration base
180ms
Duration slow
300ms
Easing
cubic-bezier(.4, 0, .2, 1)

Borders

Resolved border token values.

PropertyValue
card1px solid #322D3C
subtle1px solid #282332
input1px solid #3C3C3C
accent1px solid #7D36EC
dashed_frame1px dashed rgba(40, 35, 50, 0.85)

Shadows

Resolved shadow token values.

PropertyValue
nonenone
primary_insetinset 0 -3px 0 #5A24A8
outline_insetinset 0 -2px 0 #7D36EC
active_insetinset 0 -1px 0 #5A24A8

Motion

Resolved motion token values.

PropertyValue
duration_fast120ms
duration_base180ms
duration_slow300ms
easingcubic-bezier(.4, 0, .2, 1)

Layout Principles

Use a dark global shell with centered content columns around 1160px to 1240px.
Lead with one large sparse hero before switching to dense product grids.
Use visible frame lines, shared borders, and table-like partitions as structure.
Keep card grids strict: three or four columns on desktop, single column on narrow screens.
Prefer compact card interiors with generous section spacing between groups.
Make the primary action purple and keep secondary actions outlined or text-only.
Use diagrammatic infrastructure visuals, code fragments, maps, and terminal-like panels.

Component Preview

Low-complexity component tokens rendered as design-system specimens.

Buttons primary
Base Attributes
Background
#7D36EC
Text
#FFFFFF
Border
0
Radius
{tokens.radii.control}->4px
Padding
{tokens.spacing.button_padding}->7px 14px 10px
Min height
40px
Shadow
{tokens.shadows.primary_inset}->inset 0 -3px 0 #5A24A8
Typography
control
Buttons primary large
Base Attributes
Background
#7D36EC
Text
#FFFFFF
Border
0
Radius
{tokens.radii.control}->4px
Padding
{tokens.spacing.large_button_padding}->9px 32px 12px
Min height
49px
Shadow
{tokens.shadows.primary_inset}->inset 0 -3px 0 #5A24A8
Typography
control_large
Buttons outline
Base Attributes
Background
transparent
Text
#B07CF3
Border
1px solid #7D36EC
Radius
{tokens.radii.control}->4px
Padding
7px 14px 10px
Min height
40px
Shadow
{tokens.shadows.outline_inset}->inset 0 -2px 0 #7D36EC
Typography
control
Buttons chip active
Base Attributes
Background
rgba(125, 54, 236, 0.08)
Text
#A469FF
Border
1px solid #7D36EC
Radius
{tokens.radii.control}->4px
Padding
{tokens.spacing.chip_padding}->6px 16px
Min height
34px
Typography
caption
Buttons chip inactive
Base Attributes
Background
#1A1A1A
Text
#787878
Border
1px solid #322D3C
Radius
{tokens.radii.control}->4px
Padding
{tokens.spacing.chip_padding}->6px 16px
Min height
34px
Typography
caption
Navigation promo bar
OverviewFeaturesDocs
Base Attributes
Background
#121016
Text
#FFFFFF
Border bottom
1px solid #322D3C
Height
{tokens.spacing.promo_bar_height}->52px
Accent background
rgba(125, 54, 236, 0.22)
Accent text
#A469FF
Navigation desktop nav
OverviewFeaturesDocs
Base Attributes
Background
#18181B
Text
rgba(255, 255, 255, 0.80)
Border bottom
1px solid #322D3C
Height
{tokens.spacing.nav_height}->68px
Active text
#FFFFFF
Item padding
24px 0
Typography
caption
Cards product panel
Feature Card
Component preview content
Base Attributes
Background
#1A1A1A
Text
#FFFFFF
Border
1px solid #322D3C
Radius
{tokens.radii.card}->4px
Padding
{tokens.spacing.card_padding}->24px
Shadow
none
Cards pricing plan
Feature Card
Component preview content
Base Attributes
Background
#1A1A1A
Text
#FFFFFF
Border
1px solid #322D3C
Radius
{tokens.radii.card}->4px
Padding
{tokens.spacing.card_padding}->24px
Min height
572px
Shadow
none
Featured border
1px solid #7D36EC
Cards template card
Feature Card
Component preview content
Base Attributes
Background
#1A1A1A
Text
#FFFFFF
Border
1px solid #322D3C
Radius
{tokens.radii.card}->4px
Padding
0
Min height
174px
Shadow
none
Cards model card
Feature Card
Component preview content
Base Attributes
Background
#1A1A1A
Text
#FFFFFF
Border
1px solid #322D3C
Radius
{tokens.radii.sharp}->0px
Padding
{tokens.spacing.compact_card_padding}->20px
Min height
146px
Shadow
none
Inputs command
Base Attributes
Background
#1A1A1A
Text
#FFFFFF
Border
1px solid #3C3C3C
Radius
{tokens.radii.control}->4px
Padding
{tokens.spacing.input_padding}->12px 16px
Min height
52px
Placeholder
#787878
Typography
caption
Tables comparison
Base Attributes
Background
#1A1A1A
Text
#A0A0A0
Border
1px solid #322D3C
Heading text
#FFFFFF
Row border
1px solid rgba(50, 45, 60, 0.72)

Iconography

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Summary
Small monochrome or purple utility icons, technical glyphs, deployment logos, and line-based diagrams.

Imagery

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Summary
Use dark maps, binary fields, node diagrams, terminal snippets, and infrastructure schematics instead of lifestyle imagery.

Responsive guidance

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

  • -
    Below 1024px, reduce hero display size and move four-column grids to two columns.
  • -
    Below 720px, collapse dense cards and comparison tables into single-column stacks with horizontal overflow only for feature matrices.
  • -
    Keep primary CTAs full width only when the surrounding control group is already stacked.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not replace the dark shell with white SaaS marketing sections.
  • -
    Do not add large rounded cards, glassmorphism, or soft gradient blobs.
  • -
    Do not use multiple bright accent colors for competing actions.
  • -
    Do not remove the technical grid, frame, or table structure from dense sections.
  • -
    Do not use heavy drop shadows; depth should come from borders, inset shadows, and contrast.
  • -
    Do not make every label a badge; reserve badge treatment for plan status, filters, and deployment signals.