Skip to content
DesignMunkDesignMunk Submit a site

Craft

craft.do
Your space for notes, tasks, and big ideas.
Productivity Software Next.js Tailwind Homepage Untitled Serif Font
Share Visit site
craft.do DESKTOP · 1440
Craft

AI Breakdown

Design export

---
version: alpha
name: Craft
description: Your space for notes, tasks, and big ideas.
colors:
  primary: "#030302"
  secondary: "#1b55a5"
  tertiary: "#427e8a"
  neutral: "#fcf9f7"
  brand-pinkling: "#ed80f5"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: UntitledSerifFont
    fontSize: 58px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.04em
  headline-md:
    fontFamily: UntitledSerifFont
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.04
    letterSpacing: -0.03em
  headline-sm:
    fontFamily: UntitledSerifFont
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.22
    letterSpacing: -0.02em
  headline-xs:
    fontFamily: UntitledSansFont
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.01em
  body-md:
    fontFamily: UntitledSerifFont
    fontSize: 14px
    fontWeight: 400
    lineHeight: 2.86
    letterSpacing: -0.103em
rounded:
  sm: 24px
spacing:
  xs: 2px
  sm: 12px
  md: 20px
  lg: 24px
  xl: 60px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    rounded: "{rounded.sm}"
    padding: 16px 32px
    height: 56px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px 32px
    height: 56px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#ff4500"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 24px
---

# Craft: Big Serif Headlines on a Paper-Sky Hero

## Overview

Craft blends polished productivity with a tactile, paper-like feel. The interface is calm, spacious, and readable on a warm off-white surface. Typography leads with large, elegant serifs for headlines and a quiet sans for UI labels. Interactions highlight a single black, pill-shaped CTA to guide focus, while color is used sparingly for accents and illustrations.

## Colors

- **primary (#030302):** Deep ink for headlines, core text, and the primary CTA.
- **secondary (#1b55a5):** Confident blue for links, highlights, and illustrative accents.
- **tertiary (#427e8a):** Cool teal for secondary accents, chips, and charts.
- **neutral (#fcf9f7):** Warm off-white canvas for pages and large panels.
- **brand-pinkling (#ed80f5):** Playful accent for small badges or celebratory moments.
- **surface (#fcf9f7):** Default panel background; keeps modules cohesive against the canvas.
- **on-surface (#030302):** Text and icon color on light surfaces for consistent contrast.

## Typography

- UntitledSerifFont (self-hosted/custom): Used for display and body—headline-lg at 58px/400/-0.04em, headline-md at 56px, headline-sm at 36px, and body-md at 14px with generous line height for calm reading. Not freely available to agents. Substitutes: Source Serif 4, Lora, or Georgia.
- UntitledSansFont (self-hosted/custom): Used for small UI labels and eyebrow text (headline-xs at 16px/1.5/0.01em). Not freely available to agents. Substitutes: Inter, IBM Plex Sans, or Work Sans.
- InterFont (self-hosted here): Commonly available as a free Google Font; when the custom file isn't accessible, load Inter from Google Fonts or substitute IBM Plex Sans or Noto Sans.
- Pairing guidance: Keep headlines in the serif at the specified sizes and tracking; reserve the sans for navigation, chips, and small utility copy to preserve the editorial tone.

## Layout

- Spacing scale: xs 2px for hairline offsets; sm 12px for compact gaps; md 20px for component padding; lg 24px for container padding and button radius alignment; xl 60px for section spacing.
- Structure: single flow column that expands into 2–4 sub-grids for feature panels. Maintain xl (60px) between sections and md–lg inside cards.
- Content width and rhythm should prioritize generous whitespace; avoid introducing ad-hoc spacers—compose using sm, md, lg, and xl only.

## Elevation & Depth

- Depth comes from soft shadows: sm for small chips and floating elements; md for large mockups and sectional panels. Large shadow tiers are intentionally none.
- When shadows aren't appropriate, use the neutral surface and crisp ink borders (1px) sparingly; tonal contrast and whitespace carry hierarchy.

## Shapes

- Corner language is rounded.sm at 24px. Buttons, cards, and illustration frames use this pill-leaning radius for friendliness.
- Links and text buttons remain square (0px) to differentiate passive navigation from primary actions.

## Components

Buttons
- Primary: background #030302, text #ffffff, height 56px, padding 16px 32px, radius 24px. Use for main CTAs like "Try Craft Free".
- Secondary: text #030302, transparent background, height 56px, padding 16px 32px, radius 24px. Use for supportive actions beside the primary.
- Link: text #030302, radius 0px. Use in dense lists or inline actions.

Card
- Background #ff4500, text #030302, padding 24px, radius 24px. Reserve for highlights that need strong contrast against the neutral canvas.

Distinctive components
### Hero Paper-Sky
- Section padding: xl (60px). Headline uses headline-lg (58px) in the serif. Primary CTA uses the button-primary spec centered beneath. Background sits on surface (#fcf9f7) with md shadow on the product mockup.
### Product Mockup Panel
- A framed screenshot with md shadow for lift, 24px radius, and lg (24px) inner padding where captions apply. Use on-surface text.
### "How people use Craft" Carousel
- Card list with avatars and two-line descriptions. Use surface (#fcf9f7), on-surface text, sm (12px) gaps, and sm shadow on hover to signal interactivity.
### Integrations Grid (MCP/API)
- Uniform chips or buttons in a responsive grid. Use UntitledSansFont at 16px, sm (12px) gap, and radius 24px. Default text #030302; accent selections may use secondary (#1b55a5).
### Planning Widgets (Calendar/Tasks/Journal/Reminders)
- 2×2 grid of lightweight panels on surface with sm shadow. Headlines at 36px (headline-sm), body at 14px. Spacing md (20px) inside each module.
### Organization Patterns (Spaces, Folders & Tags, Collections)
- Three side-by-side blocks describing structure. Use headline-sm, md interior padding, and list items set in the serif body with clear sm gaps.
### Pricing Tiers
- Two columns: "Free" and "Plus." Use headline-sm for tier names, body-md for details, and a button-primary on the recommended plan. Maintain xl spacing above/below the section.
### Community CTA Strip
- Row of external links (Reddit, Slack, X, YouTube) styled as button-link with 16px type, sm gaps, and no shadows for a lightweight finish.

## Do's and Don'ts

- Do use the 24px radius across buttons and cards to maintain the friendly, pill language.
- Do keep section spacing at 60px and internal padding to 20–24px; mixing ad-hoc values breaks rhythm.
- Do reserve the primary #030302 for text and the main CTA; overusing it for fills reduces clarity.
- Don't introduce heavy borders; prefer sm/md shadows and tonal contrast on the neutral surface.
- Don't mix additional typefaces; substitute thoughtfully if the custom families aren't available.
- Don't stack multiple primary CTAs in a single viewport; one black pill per section is the rule of thumb.

## Agent Prompt Guide

Quick color reference
- Text: #030302
- Background: #fcf9f7
- Border: #030302 at 1px when needed
- Accent: #1b55a5 (secondary), #427e8a (tertiary), #ed80f5 (brand-pinkling)

1) Build the hero
- Canvas #fcf9f7 with 60px top/bottom padding.
- H1 set in UntitledSerifFont 58px, weight 400, letter-spacing -0.04em, line-height 1, color #030302.
- Center a primary button 56px tall with 16px 32px padding, radius 24px, background #030302, text #ffffff.
- Place a product mockup below with 24px radius and the md shadow value.

2) Integrations grid
- Section padding 60px. Grid of chips using UntitledSansFont 16px/1.5.
- Each chip: text color #030302, 12px vertical and 20px horizontal padding, radius 24px, no border, sm shadow on hover.
- Use #1b55a5 for selected chip background with #ffffff text.

3) Planning widgets panel
- 2×2 grid on #fcf9f7 with 24px gaps. Each widget panel: 24px radius, md shadow, 20px inner padding.
- Widget title in UntitledSerifFont 36px (headline-sm), body copy at 14px (body-md). Primary inline actions use the link button style (#030302, radius 0).

4) Pricing section
- Two cards side by side. Recommended plan uses the card spec: background #ff4500, text #030302, padding 24px, radius 24px, and a primary button at the bottom.
- Free tier stays on the surface with a secondary button (text #030302, transparent background) to keep hierarchy clear.

5) Community strip
- Horizontal list of button-link items at 16px, color #030302, 12px gaps, no shadows. Keep section spacing 60px above and below.

## Similar Brands

- Notion — similarly calm canvas and black CTAs; Notion skews grayscale while Craft introduces playful illustration and color accents.
- Bear — minimal note-taking brand with warm tones; Craft leans larger in serif display and uses stronger CTA pills.
- Evernote — productivity narrative with integrations; Craft is lighter, with friendlier radius and more editorial typography.
- Apple Notes marketing — clean off-white and large imagery; Craft uses a more expressive paper-cut hero and serif headlines.

More like this

Browse Productivity →
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 6 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 18 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 19 hours ago
quickpick.space
QuickPick Design Tools
QuickPick
Keep your entire creative world organized in one space.
Homepage · 22 hours ago