Folio Design System

A minimal, Apple-like design language centered on clarity, warmth, and beautiful typography. Folio uses Untitled Sans and Untitled Serif with a restrained brushwork built from near-black and warm beige tones, accented by soft pastel watercolor backgrounds.

Fonts Untitled Sans + Untitled Serif
Framework Tailwind CSS v4 + Next.js
Key Trait Glassmorphism & Watercolor
Primary Color #030302 (near-black)

Colors

Folio's brushwork is restrained and warm. The primary color is a near-black (#030302) with opacity-based variations. Backgrounds use warm beige and soft grays. Accents are muted, earthy tones.

Brand & Core

Black 900
#030302
Primary text, buttons
Black 700
rgba(3,3,2,0.75)
Secondary text
Black 600
rgba(3,3,2,0.65)
Tertiary text
Black 500
rgba(3,3,2,0.5)
Placeholder
Black 200
rgba(3,3,2,0.12)
Borders, dividers
Black 100
rgba(3,3,2,0.09)
Subtle borders
White
#ffffff
Backgrounds
Beige
#fcf9f7
Warm background
Gray 100
#f5f5f7
Card/section bg
Gray 50
#f7f7f7
Light bg

Accent Colors

Green
#3f8850
Success
Blue
#427e8a
Links, info
Purple
#4b68c3
Features
Pink
#a549ab
Decorative
Red
#bb433a
Destructive
Orange
#b25620
Warning
Yellow
#987e1b
Caution

Pastels (Decorative Watercolor)

Pastel Blue
#b8caf5
Pastel Peach
#ffdbc5
Pastel Cream
#fff3e7
Pastel Green
#9bd8a9
Pastel Sky
#9ed4ef
Pastel Yellow
#fde99b

Gradients

Glass Gradient -- glass effect for buttons and overlays
Navbar Gradient -- sticky nav glass effect
Watercolor Hero -- pastel decorative header
Hero Bottom Blur -- content fade-out at hero bottom

Typography

Folio uses Untitled Sans for body and UI, with Untitled Serif for display headings. The closest Google Font alternatives are Inter (sans) and Source Serif 4 (serif).

Font Families

TokenValueUsage
--font-sansUntitled Sans, Inter, system-uiBody, UI, navigation, buttons
--font-serifUntitled Serif, Source Serif 4, GeorgiaDisplay headings (H1, H2 marketing)
--font-monoSFMono-Regular, Menlo, MonacoCode blocks, technical values

Type Scale

H1 Hero -- font-serif
Your space for notes, tasks, and big ideas.
54px / 400 / -1.08px tracking / 1.1 line-height
H2 Section -- font-serif
Structure That Adapts to Your Thinking
36px / 400 / -1.08px tracking / 1.22 line-height
H3 Card Title -- font-serif
Why Choose Folio Plus
24px / 400 / -0.48px tracking / 1.33 line-height
H4 Label -- font-sans
Feature Category
16px / 500 / +0.16px tracking / 1.5 line-height
Body -- font-sans
Folio is built for one thing: to help you think better. With native apps for Mac, iPad, iPhone, and the web, your notes and documents are always within reach. Beautifully designed, blazingly fast.
16px / 400 / -0.32px tracking / 1.6 line-height
Small / Caption -- font-sans
Secondary information and metadata
13px / 400 / normal tracking / 1.5 line-height
Overline -- font-sans
Section Label
11px / 600 / 0.08em tracking / uppercase

Font Weights

TokenValueUsage
normal400Body text, nav links, serif headings
medium500Buttons, labels, active sidebar items
semibold600Section headings, overlines
bold700Hero titles, strong emphasis, pricing highlights
extrabold800Special emphasis

Letter Spacing

TokenValueUsage
--tracking-tightest-2pxHero titles (72px+)
--tracking-tight-1.08pxDisplay headings (36-54px)
--tracking-body-0.32pxBody text, nav links
--tracking-normal0Buttons, default
--tracking-wide+0.16pxLabels, H4
--tracking-wider0.05emTable headers
--tracking-widest0.1emOverlines, logo

Spacing

Based on a 4px (0.25rem) unit. Tailwind CSS spacing scale.

Scale

1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
20
80px
24
96px

Containers

TokenWidthUsage
md448px (28rem)Narrow content
lg512px (32rem)Form containers
xl576px (36rem)Single column
3xl768px (48rem)Prose / editor
4xl896px (56rem)Wide content
6xl1152px (72rem)Section max-width
7xl1280px (80rem)Page max-width

Borders & Shadows

Folio uses generous border radii (often fully rounded for buttons) and subtle shadows. The inset ring pattern is common for card borders.

Border Radii

0px
4px
6px
8px
10px
12px
16px
20px
24px
full (pill)

Shadows

sm (buttons)
card
elevated
glass
dropdown
modal
inset-ring
drop-2xl

Buttons

Folio buttons are always fully rounded (pill shape). The primary CTA uses the near-black background. Glass buttons use backdrop-filter for the signature glassmorphism effect.

Button Variants

VariantStylesUsage
Primarybg:#030302, color:#fff, h:36px, px:15.2px, font:13px/500Header CTA, key actions
Primary Largebg:#030302, color:#fff, h:48px, px:32px, font:16px/500Hero CTA, section actions
Glassbackdrop-blur:32px saturate(150%), glass gradient, h:48pxHero secondary CTA
Secondarybg:transparent, border:1px solid black-200, h:36pxSecondary actions
Ghostbg:transparent, no border, radius:8pxTertiary, nav items

Cards

Cards use subtle borders, generous radius, and minimal shadow. Hover states add elevation.

Template Card
radius:12px, border:1px black-100
Pricing Card
radius:16px, p:24px
$8.0
/month
Feature Card
radius:20px, bg:gray-100, p:32px

App UI: Document Editor

Folio's block-based editor with nested document cards, toggle blocks, code blocks, and inline formatting. The editor area is centered at 720px max-width.

Spaces
P
Personal
W
Work
D
Design
Favorites
*
Meeting Notes
*
Project Plan
Recent
#
Design System
#
Q1 Review
#
Product Roadmap
#
Brand Guidelines
Project Kickoff Notes
Welcome to the project kickoff document. This page contains all the key information for getting started with the new initiative.
Overview
The goal of this project is to redesign the core product experience with a focus on simplicity and performance.
📄 Technical Requirements
Performance benchmarks, API specifications, and infrastructure needs...
🎨 Design Brief
Visual direction, component library, and interaction patterns...
▼
Key Decisions
1. Adopt a component-based architecture
2. Use design tokens for theming
3. Ship dark mode in v1
JavaScript
const config = {
  theme: 'light',
  maxWidth: 720,
  fontFamily: 'Untitled Sans'
};
Type / for commands...

App UI: Inline Formatting Toolbar

Appears on text selection. Dark background with compact icon buttons. Blur shadow for depth.

PropertyValue
background#1a1a1a
border-radius10px
padding4px 6px
button size28px x 28px
button radius6px
gap2px
shadow0 4px 16px rgba(0,0,0,0.24)
text colorrgba(255,255,255,0.8)
active bgrgba(255,255,255,0.2)

App UI: Slash Command Menu

Triggered by typing "/". Floating menu with search, icon-labeled items, and keyboard navigation.

Basic Blocks
T
Text
Plain text block
H
Heading
Section heading
☑
To-Do
Task checkbox
•
Bullet List
Unordered list
Media
📷
Image
Upload or embed
</>
Code Block
Syntax highlighted
📄
Page Card
Nested document
PropertyValue
width300-320px
max-height400px
background#ffffff
border-radius12px
border1px solid rgba(0,0,0,0.08)
shadow0 8px 32px rgba(0,0,0,0.16)
item padding8px 12px
item radius8px
hover bg#f5f5f7
icon size32px x 32px

App UI: Sidebar

Document tree sidebar with spaces, favorites, and recent documents. Collapsible sections with subtle color-coded space icons.

PropertyValue
width240-260px
background#f5f5f7 (light) / #1a1a1a (dark)
border-right1px solid rgba(0,0,0,0.06)
padding16px 12px
item height32px
item padding6px 10px
item radius8px
active bgrgba(0,0,0,0.06)
font size14px
icon size18px, radius 4px
section label11px / 500 / uppercase / 0.05em

App UI: Share Panel

Modal-style share panel with toggle switches, link sharing, and permission controls.

PropertyValue
width400-420px
background#ffffff
border-radius16px
shadow0 16px 48px rgba(0,0,0,0.2)
padding24px
toggle size40px x 24px, radius 12px
toggle active#9bd8a9 (pastel green)
toggle inactivergba(3,3,2,0.12)

Dark Mode

Folio's dark mode uses a true dark brushwork with subtle white-opacity borders. Used in the footer and available as a full app theme.

Dark Brushwork

Background
#1a1a1a
Surface
#242424
Elevated
#2a2a2a
Border
white/10%
Text Primary
#ffffff
Text Secondary
white/70%
Text Tertiary
white/50%
Text Muted
white/40%

Dark Mode Editor

Spaces
P
Personal
W
Work
Recent
#
Design System
#
Q1 Review
#
Roadmap
Evening Notes
Dark mode reduces eye strain during late-night writing sessions.
Tomorrow's Tasks
📄 Sprint Planning
Review backlog, assign stories...
Remkindred to update the design tokens documentation.

Layout

Responsive layout using Tailwind's grid and flexbox utilities. Breakpoints follow Tailwind defaults. Section padding is generous with 96px vertical on desktop.

Breakpoints

NameWidthUsage
sm640pxLarge phones
md768pxTablets
lg1024pxSmall desktop / breakpoint-lg
xl1280pxDesktop
2xl1536pxLarge desktop

Common Patterns

Hero Section -- centered, max-w-7xl, py-24
Centered hero heading
Max-width constrains content width
3-Column Grid -- grid-cols-3, gap-16px
Column 1
Column 2
Column 3
App Layout -- sidebar 240px + flex-1 editor
Sidebar 240px
Editor flex-1 (max-w 720px centered)

Motion & Interaction

Folio uses subtle, purposeful animations. Transitions are fast (150-200ms) for UI feedback and slower (500ms) for emphasis. Glass effects and backdrop blur are signature traits.

Easing Functions

NameValueUsage
ease-defaultcubic-bezier(0.4, 0, 0.2, 1)General transitions (150ms)
ease-outcubic-bezier(0, 0, 0.2, 1)Glass button, emphasis (500ms)
ease-out-customcubic-bezier(0.215, 0.61, 0.355, 1)Special animations
ease-in-outcubic-bezier(0.4, 0, 0.2, 1)Pulse, loader

Interactive Demos

Hover over the boxes below to see Folio's transition patterns.

Shadow
0.3s ease
Scale
0.2s ease
Background
0.2s ease
Glass
blur(32px)

Effects

EffectCSSUsage
Backdrop blurbackdrop-filter: blur(32px) saturate(150%)Navbar, glass buttons
Background blurfilter: blur(30px)Decorative blobs
Grayscalefilter: grayscale(100%)Partner logos (removed on hover)
Brightnessfilter: brightness(110%)Image hover enhancement
Drop shadowfilter: drop-shadow(0 0 100px rgba(0,0,0,0.05))Floating product images

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.theme.extend,
  },
};

// Also reuse designSystem.tailwind.componentRecipes for common surfaces.
ScopePrimaryBody FontRadiusShadowBreakpoint
Design System————640px
ScopeRecipeClass PatternNotes
Design SystembuttonPrimaryinline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 text-xs font-semibold transition-colorsPrimary action button using exported brand, radius, and shadow tokens.
Design SystemsurfaceCardrounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6Default surface/card treatment for high-visibility content areas.
Design SysteminputFieldrounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 text-xs focus:outline-none focus:ring-2 focus:ring-focus-ringBase text input treatment aligned to the exported radius, border, and focus tokens.