DOCSFLOW DESIGN SYSTEM

Make the template yours, without breaking the system.

A practical reference for adapting DocsFlow’s visual language quickly and consistently.

01 / COLOR PALETTE

Shared roles, in both themes.

Each role below is tied to the shared theme system. Change a role once, and the reference stays true everywhere.

DARK / SHARED ROLES

Paper

Surface

Ink

Muted Text

Border

Accent

Dark Brand Surface

Navy

LIGHT / SHARED ROLES

Paper

Surface

Ink

Muted Text

Border

Accent

Dark Brand Surface

Navy

02 / TYPOGRAPHY SCALE

One family. Clear hierarchy.

DISPLAY / 64PX / 600

Design with conviction.

H2 / 40PX / 600

Build for the long run.

H3 / 22PX / 600

A helpful, decisive subheading.

BODY / 16PX / 400

Use body copy to explain the decision, not to repeat the headline. Keep it spacious and direct.

SMALL / 14PX / 500

CAPTION / 12PX / 600 / TRACKED

03 / BUTTONS + LABELS

Small patterns, consistent signal.

BUTTONS

BADGES + LABELS

LIVE

GUIDE

NEW

04 / COMPONENTS

A shared vocabulary for every page.

SAMPLE CARD

Thoughtful defaults.

Keep the surface, rhythm, and hierarchy working together.

CONFIG.TS

theme: “shared”
mode: “adaptive”
voice: “editorial”

How do I change a shared role?

Create a free website with Framer, the website builder loved by startups, designers and agencies.