Skip to content
DesignMunkDesignMunk Submit a site

Appwrite

appwrite.io
Build faster and scale bigger than ever.
Data & Infrastructure Developer Tools Tailwind Homepage aeonik
Share Visit site
appwrite.io DESKTOP · 1440
Appwrite

AI Breakdown

Design export

# Design brief: the Appwrite design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/10/11093009/appwrite-io-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/10/11093009/appwrite-io-featured-1440x900.webp
- On DesignMunk: https://designmunk.com/appwrite/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Appwrite: Calm Gray Interface Punctuated by Hot-Pink CTAs

## Overview

The system targets developers and teams evaluating backend infrastructure. Tone is technical, confident, and efficient—calm neutrals with one assertive accent. Layouts feel spacious at section level but compact inside components, mirroring a product console. Hierarchy leans on big display headlines, quiet body text, and crisp 1px rules.

## Page Structure

- Global header: slim top bar with logo left, product/docs/pricing links centered, GitHub metric and auth actions right; light divider separates it from content.
- Announcement strip: small inline banner above the hero with a brief update and subtle accent.
- Hero: oversized two-line display headline with a pink accent word/underscore; short paragraph; primary solid CTA and secondary ghost/text CTA centered.
- Product console showcase: wide bordered mockup card with toolbar, sidebar and a pink line chart; rounded 8px, airy margins.
- Frameworks and agents: section heading then a dense row of logo/badge links in a horizontally wrapping list.
- Product matrix: heading, then grouped lists for Build/Deploy/Protect/Scale; each product has a link to details; follows with short feature blurbs in stacked tiles.
- Agent workflow and partners: subheading with a small grid of agent badges and a compact list of additional options.
- AI Arena: data table comparing models across categories; quiet zebra rhythm with thin dividers; a link to full benchmarks.
- Social proof heading: statement of adoption followed by a subdued area (logos or brief note) with generous whitespace.
- Security section: multi-item list of assurances (DDoS, encryption, compliance), each with a small heading and paragraph; tight but legible.
- Network section: description plus a stat list (CDN, DDoS, latency) and an optional map/locations selector.
- Metrics band: grid of large numeric counters with labels.
- Closing CTA: two-button prompt to start or view pricing.
- Mega footer: five-plus columns—Quick starts, Products, Learn, Programs, About, Compare—then a legal/social bar.

## Colors

- Primary (#71717b): Neutral slate for body text, UI icons, and secondary labels.
- Secondary (#1c1c1c): Deep ink for headlines, strong labels, and emphasis text.
- Tertiary (#fd366e): Accent pink for primary CTAs, key highlights, chart strokes, and small tags.
- Neutral (#ffffff): Paper-white canvas for the light theme.
- Border (#e5e7eb): Subtle gray used for card outlines, table rules, inputs, and section dividers.
- Surface (#ffffff): Surface color, matching the neutral canvas for cards and modules.
- On-surface (#71717b): Default text on surfaces; pairs with the white canvas for comfortable contrast.

## Typography

- Aeonik Pro (custom): Used for headline-lg (76px/1.04) and headline-md (50px/1.2). Proprietary/self-hosted; if unavailable, substitute with free geometric/grotesk sans like Ubuntu, Oxygen, or Fira Sans.
- System UI (-apple-system): Used for headline-sm (33px), headline-xs (21px), and body-md (14px). This maps to the platform's UI sans (San Francisco/Segoe UI/Roboto) and requires no extra loading. Use it for navigation, paragraphs, tables, and fine UI labels.
- Weight: tokens specify 400 across levels; rely on size, color (secondary vs primary), and spacing for hierarchy rather than bolding.
- Letter-spacing: display sizes tighten at -0.022em; keep default tracking for system text to preserve readability at 14px.

## Layout

- Spacing scale: 8/16/28/40/80px. Use 80px for section separations, 40px for interior section paddings, 28px for component gaps within sections, 16px for card padding and inline groups, and 8px for icon gaps and micro-layout.
- Grid: center-aligned content column with generous outer margins; sections mix single-column stacks and simple multi-column rows. Lists (products, badges, stats) prefer auto-wrapping rows rather than fixed column counts to stay responsive.
- Rhythm: spacious above the fold; denser inside cards and tables to mirror a console feel.

## Elevation & Depth

- Shadows are largely absent; depth comes from 1px outlines using Border (#e5e7eb) and the measured small ring outline. Inner separators use a faint inset line. Hierarchy is communicated through whitespace, tonal contrast (secondary vs primary text), and the accent color rather than soft shadows.

## Shapes

- Corners default to 8px (rounded.sm) on cards and buttons—friendly but not pill-shaped. The link-style button is square (0px) to read as text. Keep radii consistent to maintain the console-like precision.

## Components

- Buttons
  - Primary: 40px height, 8px radius, #fd366e background with white text; horizontal padding 16px; use for the main action per section.
  - Secondary: Text-only style with #71717b; 40px height, 8px radius, 16px padding; may appear as ghost on white.
  - Link: Inline action, square corners (0px) with #09090b text; use adjacent to primary CTAs.
- Card: White surface with #71717b text, 16px padding, 8px radius, and a 1px #e5e7eb outline when separation is needed.

### Announcement Bar
A slim full-width strip above the hero using body-md (14px) system text. Keep background white, add a 1px bottom rule (#e5e7eb). Include a small pink (#fd366e) label when highlighting news.

### Dual-CTA Hero
Centered stack: headline-lg (76px Aeonik Pro) with a single word or mark in #fd366e; one paragraph of body-md (14px) below; a primary pink button and a secondary/link action side-by-side with 16px gap.

### Product Console Mockup
A wide card (8px radius) showcasing UI. Use a 1px border (#e5e7eb) and 40px outer spacing. Inside, favor thin rules and a pink chart stroke (#fd366e) to match the brand accent.

### Frameworks & Agents Badges
Row of small badges that wrap. Each badge lives in a minimal chip or text link; use body-md (14px) with 8px gaps and optional 1px separators.

### Product Matrix List
Stacked groups under category labels (Build/Deploy/Protect/Scale). Each item is a text link using body-md and a subtle arrow; maintain 16px vertical rhythm and section padding of 40px.

### AI Arena Table
Data table with header row in secondary text (#1c1c1c) and cells in primary (#71717b). Use 1px #e5e7eb grid lines, 16px cell padding, and body-md (14px) throughout. Provide a trailing link to full results.

### Security Feature Grid
Multi-item list of assurances; each block uses headline-xs (21px) title and a 14px paragraph. Keep 28px gaps and optional left accents or icons.

### Stats Counter Grid
Auto-wrapping row of counters: number in headline-md (50px Aeonik Pro, #1c1c1c) with label in body-md (#71717b). Use 28px vertical spacing inside each counter and 40px section padding.

## Do's and Don'ts

- Do reserve #fd366e for primary CTAs, highlights, and key chart strokes; too many pink elements weaken focus.
- Do set headlines in Aeonik Pro at 76px or 50px and body, tables, and navigation in system UI at 14px.
- Do use #e5e7eb 1px borders to separate cards, table rows, and sections instead of drop shadows.
- Do keep 8px corner radius on interactive and container elements; avoid mixing with larger radii.
- Don't increase body copy beyond the system 14px inside dense components; if you need emphasis, switch to secondary color (#1c1c1c) or add spacing.
- Don't place pink buttons on non-white backgrounds; maintain neutral surfaces for consistent contrast.

## Agent Prompt Guide

Quick color reference — Text: #71717b (primary), Headline: #1c1c1c (secondary), Background: #ffffff (surface), Border: #e5e7eb, Accent: #fd366e.

1) Build a centered hero with an oversized headline and two CTAs
- Background #ffffff; section padding 80px top/bottom.
- H1: Aeonik Pro, 76px, line-height 1.04, letter-spacing -0.022em, color #1c1c1c; highlight one word in #fd366e.
- Paragraph: system UI (-apple-system), 14px, line-height 1.5, color #71717b, max-width 70ch, margin-top 16px.
- Buttons: Primary 40px high, 8px radius, background #fd366e, text #ffffff, padding 8px 16px. Secondary as text/ghost with color #71717b, same height; 16px gap.

2) Create a row of product cards
- Three or more cards on wide screens; stack on mobile.
- Card: background #ffffff, 1px border #e5e7eb, radius 8px, padding 16px, text #71717b.
- Title: system UI 21px; description: system UI 14px. Add a link action using link style text color #09090b.

3) Render a benchmark table
- Full-width table with 1px #e5e7eb grid lines and 16px cell padding.
- Header cells: system UI 14px, color #1c1c1c; body cells: system UI 14px, color #71717b.
- Include a right-aligned "View full benchmark" link in #09090b below the table.

4) Add a stats band
- Background #ffffff; 40px vertical padding.
- Use an auto-wrapping row; each item has number: Aeonik Pro 50px, color #1c1c1c; label: system UI 14px, color #71717b. Maintain 28px gap between number and label and 16px item gaps.

## Similar Brands

- Supabase — similar console-first aesthetic with quiet grays and a single accent; Supabase skews greener and more code-led in illustration.
- Vercel — minimal black/white, strong type, and product mockups; Vercel leans darker with more dramatic contrast and motion.
- Netlify — developer-friendly grids and thin rules; uses blue/green accents instead of pink and a lighter type scale.
- PlanetScale — crisp borders and big numbers; typography is more serif-leaning for headlines, giving it a different voice.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #71717b;
  --color-secondary: #1c1c1c;
  --color-tertiary: #fd366e;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 76px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.04;
  --text-headline-lg-tracking: -0.022em;
  --text-headline-md-size: 50px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.022em;
  --text-headline-sm-size: 33px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.21;
  --text-headline-xs-size: 21px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 14px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-aeonik-pro: "Aeonik Pro";
  --font-apple-system: "-apple-system";

  /* Rounded */
  --radius-sm: 8px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 28px;
  --spacing-lg: 40px;
  --spacing-xl: 80px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 8px 16px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 16px;
  --button-secondary-height: 40px;
  --button-link-text-color: #09090b;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #71717b;
  --color-secondary: #1c1c1c;
  --color-tertiary: #fd366e;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: #ffffff;
  --color-on-surface: #71717b;
  --font-headline-lg: "Aeonik Pro";
  --font-headline-md: "Aeonik Pro";
  --font-headline-sm: "-apple-system";
  --font-headline-xs: "-apple-system";
  --font-body-md: "-apple-system";
  --text-headline-lg: 76px;
  --text-headline-md: 50px;
  --text-headline-sm: 33px;
  --text-headline-xs: 21px;
  --text-body-md: 14px;
  --tracking-headline-lg: -0.022em;
  --tracking-headline-md: -0.022em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 28px;
  --spacing-lg: 40px;
  --spacing-xl: 80px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.443,
                    0.443,
                    0.482
                ],
                "hex": "#71717b"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.11,
                    0.11,
                    0.11
                ],
                "hex": "#1c1c1c"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.992,
                    0.212,
                    0.431
                ],
                "hex": "#fd366e"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.443,
                    0.443,
                    0.482
                ],
                "hex": "#71717b"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 28,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 80,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Aeonik Pro",
                "fontSize": {
                    "value": 76,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.022,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Aeonik Pro",
                "fontSize": {
                    "value": 50,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.022,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "-apple-system",
                "fontSize": {
                    "value": 33,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "-apple-system",
                "fontSize": {
                    "value": 21,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "-apple-system",
                "fontSize": {
                    "value": 14,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Appwrite**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Data & Infrastructure →
zenhub.com
Zenhub Developer Tools
Zenhub
weaveos.com
Weave Pricing Analytics
Weave Pricing
weaveos.com
Weave Analytics
Weave
clears.ai
Clears AI
Clears