Templates

Scopecraft ​

Scopecraft is a design language for a proposal-builder SaaS, from discovery call to SOW. It comes from a concept by Nizam (https://x.com/nizamdesign/status/2106904954581692578). Light and neutral: near-black primary buttons, soft white cards on a pale gray page, tiny uppercase labels, and color only for status.

Colors ​

Ink
#111113
Text
#1b1c1f
Muted
#6b6f76
Page
#f4f4f5
Surface
#ffffff
Border
#e6e6e8
Blue
#2f6fdc
Blue soft
#e8f0fd
Success
#17803d
Success soft
#e6f5ec
Danger
#c62828
Danger soft
#fdeaea
Warning
#a05a00
Warning soft
#fdf1dc

Chart series: blue #2f6fdc for actual or delivered, gray #9a9ea5 dashed for quoted or planned, ink #111113 for emphasis bars.

Typography ​

Good afternoon, Nizam
Page title - Inter 600, 19 to 26 px
$147,800 6 open
KPI number - Inter 600 24 px, tabular digits, unit in muted 12 px
Open pipeline
Section label - 10 px, uppercase, 0.08em tracking, muted, 600
Body 13 px / 1.4. Secondary text is 12 px muted.

Rules ​

  1. One near-black primary button per view. Everything else is outlined.
  2. Color means status only: green up or approved, red down or blocked, amber needs attention, blue is AI or source information.
  3. Every card says what it is in a small uppercase label.
  4. Numbers use tabular digits and carry a delta chip when there is a comparison.
  5. Show the reason next to each decision: why it is asked, what it changes.

Pages ​

Components, and examples: Dashboard, Scope questions, Similar projects, Proposal.