CURATED · OPEN · FREE

Directus

An open-source headless CMS and backend-as-a-service that lets non-technical teams manage content while developers build.

01

Identity DNA

A universal remote control for your entire database infrastructure.

02

Color

High-contrast monochrome with subtle elevation through slightly lighter grays.

03

Typography

transitional-serif · humanist-sans · geometric-mono

• display56px · 400
• h148px · 400
• body16px · 400

Use serif for major headlines to add editorial weight. · Use sans-serif for all UI elements and body copy. · Reserve monospace for code snippets and technical UI elements.

04

Spacing

An 8px baseline grid creates consistent vertical rhythm across large sections.

05

Surfaces

1px solid rgba(255, 255, 255, 0.08)

0 4px 12px rgba(0, 0, 0, 0.3) · 0 8px 24px rgba(0, 0, 0, 0.4)

06

Layout

A full-width dark canvas with a sticky header and centered content columns.

07

Motion & Interaction

Subtle color transitions on interactive elements. · Smooth opacity fades for content reveals.

Buttons and links subtly change opacity or background brightness. · Immediate visual feedback via subtle scaling or color shifts.

08

Components

• button Primary buttons are white with black text and large pill radii; secondary buttons use transparent backgrounds with white text.
• card Dark gray cards with subtle 1px borders and 12-20px radii, used to group feature descriptions.
• chip Pill-shaped navigation elements with transparent backgrounds and thin borders, highlighting the active state.
• input Dark gray input fields with thin borders, featuring monospace typography for code entries.
• hero A classic left-aligned hero featuring a large serif headline, sans-serif subtext, a code snippet, and dual CTAs.

09

Voice & Don'ts

• Tone Confident, professional, and developer-friendly without being overly casual.
• Headlines Direct, punchy, and benefits-focused, often using a serif typeface for authority.
• CTAs Clear and action-oriented, such as 'Get Started Free' or 'See the Studio'.

• Don't use bright neon accents — screenshot shows a strictly monochrome palette.
• Don't use rounded square cards — screenshot shows elements with 12px to pill radii.
• Don't use heavy sans-serif headlines — screenshot shows a transitional serif for display.
• Don't use dense, small-text layouts — screenshot shows generous spacing and large, readable type.
• Don't use busy backgrounds or textures — screenshot shows a solid, near-black #090909 background.
• Don't use playful, bubbly icons — screenshot shows clean, minimal UI elements and technical icons.
• Avoid: Avoid overly marketing-heavy or buzzword-filled copy.
• Avoid: Avoid playful or whimsical illustrations.
• Avoid: Avoid overly complex or cluttered layouts.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko