Design Notes

Summary paragraph, then a numbered ledger.

HANDLE
design-notes
LIVES IN
src/components/Editorial.jsx (DesignNotes)
USED ON
Chapters without a case study
PROPS
project.summary · project.notes
EXAMPLE
LIVE

As it renders.

404 surfaces for two lending brands. Each pair carries a distinct visual metaphor (a rocket lifting through clouds for Blue Trust Loans, a UFO beam-me-home for MaxLend) and ships in both static and animated variants for desktop and mobile.

DESIGN NOTES
  • 01BriefMake a moment of failure feel like a small gift
  • 02ConstraintsMust work with no JS · animation as progressive enhancement
  • 03ReachBoth 404 routes ship as default in production
CODE
COPY AND PASTE

How it is called.

JSX
import { DesignNotes } from '../components/Editorial.jsx'

<DesignNotes summary={project.summary} notes={project.notes} />
{/* notes: [[label, note], …] from projects.js */}
RULES

What must stay true.

Summary paragraph, then a numbered ledger.