IvoryTasks.

← Back to homepage

The design system

Operations work, made calm and premium. Editorial, warm, low-key. This page is the visual reference. The written spec lives in design-system.md and the tokens in css/brand.css.

Color

Palette

Aa
Cream
#FAF8F3
Aa
White
#FFFFFF
Aa
Sand
#EDE4D3
Aa
Ink
#1A1A1A
Aa
Terracotta
#B4582F
Aa
Sage
#6B7257
Aa
Clay
#EBD3C5
Aa
Border
#E8E5DD

Terracotta is an accent, not a workhorse. Sand and sage exist to give social carousels slide variety. The site stays mostly cream, white, and ink.

Typography

Three families, one job each

Bricolage Grotesque, display 56

Systems that run your business.

Bricolage Grotesque, heading 36

Operations infrastructure for scale.

Bricolage Grotesque, title 22

Notion system design

Caveat, script accent

no more spreadsheet chaos

Inter, body 17

Inter carries the explaining. Clear, quiet, and readable. Bricolage Grotesque makes the statement, Inter does the talking, and Caveat adds the one human touch.

Motifs

The marks that make it ours

8-point starburst
You need a better system.
Highlight marker
Scale your legacy
Script accent

Components

Building blocks

Buttons

Pills

NotionAI automationGoogle Workspace

Card

Notion system design

Connected databases and workflows built around how your team actually works.

Inverted panel

You don't need a bigger team. You need a better system.

Social

From the same system

Carousels and posts use the exact tokens above. Templates live in social/. Rotate cream, sand, ink, and terracotta across slides for rhythm, keep one idea and one accent per slide, and keep the wordmark and handle on every frame.