Werkstatt tonality · Locked in

Bill.Dock for Notion
Design System

All screens for the Bill.Dock Notion Connector, designed in the "Werkstatt" tonality (Stripe × Linear). Every screen uses DM Sans, the Bill.Dock palette (teal #247259, cream #FBF8F3, coral #F26B42), Lucide icons, and the locked-in Werkstatt DNA from DESIGN-BRIEF-PROMPT.md.

Core activation flow

4 screens

1. Landing Hero

Drop receipts in Notion. Bill.Dock handles the rest.

2. Pre-OAuth Permission

What Bill.Dock can and can't do.

3. OAuth Success

Your Notion Receipt Inbox is ready.

4. First-Receipt Onboarding

Watch your first import live.

Ongoing tool surface

2 screens

5. Connector Dashboard

Stats, recent imports, connection status.

6. Settings

Connection, sync, notifications, privacy.

Trust & recovery

2 screens

7. Error States

Token revoked, source missing, slow, unsupported, 5xx.

8. Data & Privacy (GDPR)

Export your data, delete your account.

Spec documents

3 docs

Notion Inbox Template

Exact spec of the Notion page Bill.Dock creates in the user's workspace — properties, default view, welcome callout.

Open spec

Marketplace Listing

Submission-ready content for the Notion Integration Gallery — name, description, screenshots, brand-compliant.

Open listing

Email Templates

7 transactional emails — welcome, token revoked, source missing, import failed, export ready, deletion confirmed, digest.

Open templates

Design tokens · Werkstatt DNA

Colors
#247259 Teal · primary
#F26B42 Coral · accent
#FBF8F3 Cream · bg
#1F2937 Ink · text
#6B7280 Muted
Typography · DM Sans
Aa · text-4xl semibold
Aa · text-base medium
Aa · text-sm regular
Aa · text-xs muted
Aa · micro caps
Components
Imported Importing
Bill.Dock for Notion · Design System v0.1 A Notion integration