Vapor's Design Guide

A living style guide for Vapor's design system. Every component below is styled by the shared main.css that vapor.codes, blog.vapor.codes and docs.vapor.codes all load from this site.

---

Typography

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

A standard paragraph of body text with a text link, some bold and some italic emphasis to show the base typographic styles.

---

Buttons

---

Code blocks

Here's an example of a code block:

import Vapor

let app = try await Application.make(.detect())

app.get("hello") { req in
    "Hello, world!"
}

try await app.execute()

And a single-line code block (long enough to reach the right edge — the copy button must not overlap or hide the code):

let key = try MLDSA87PrivateKey(seedRepresentation: mldsa87PrivateKeySeedRepresentation)

And then we have some inline code: let vaporIsAwesome = true

---

Blockquote

“Hendrerit amet nibh dui ut in feugiat pellentesque. Sed consectetur blandit lectus arcu lacus libero diam. Nulla turpis etiam non et, adipiscing.”

---

Info block

Info and warning callouts reuse the blockquote styling. With paragraph content, the last child's bottom margin is collapsed so the spacing inside the box stays balanced.

Note: Post-quantum signatures are much larger than classical ones — an ML-DSA-87 signature is ~4.6 KB versus ~0.1 KB for ES512.

---

Lists

An ordered list:

1. Lectus id duis vitae porttitor enim gravida morbi.
2. Eu turpis posuere semper feugiat volutpat elit, ultrices suspendisse.
3. Suspendisse maecenas ac donec scelerisque diam sed est duis purus.

An unordered list:

• Lectus id duis vitae porttitor enim gravida morbi.
• Eu turpis posuere semper feugiat volutpat elit, ultrices suspendisse.
• Suspendisse maecenas ac donec scelerisque diam sed est duis purus.

---

Pagination

---

Blog post cards

---

Blog tag list