[BK5102]

Stacked on #7 (which is stacked on #6 and #5). Merge #5, #6 and #7 first; GitHub will retarget this PR to main.

What changed and why

The site looked too simple. It needs to grab attention, and a visitor should know within seconds what DevilQuant is and how to join. This PR redesigns the whole site as "The Working Notebook": a dark graph-paper scratch pad with chalk ink, highlighter for actions, and red pen for marks. It was built with the impeccable and frontend-design skills; the direction was chosen on the decision page.

Homepage

• Hero:
  • "DevilQuant" set large.
  • "the first quantitative finance club at ASU" handwritten on a highlighter stroke.
  • The existing description sentence.
  • A pen-drawn tree from "you" to the two ways to join: Join the Discord (primary) and Sign up on Sun Devil Central.
• Desktop only: a red-pen margin note lists where members have landed.
• Placements: member placement logos, inked in chalk in a whole-square grid.
• Closing: "Your move." with one Join the Discord action.
• Motion: the tree draws itself and the highlighter swipes once on load. Reduced motion shows the final state.

Site-wide

• Navbar: monogram wordmark, a red-pen loop on the current page, and the highlighter "Join the Discord" button. A full-screen menu on phones and tablets (below 1024px).
• Other pages: About, Projects, Resources, 404, the footer and the redirect pages use the same tokens. Content and behavior are unchanged.
• About: the year picker is now a native <select>, and the 3D placements icon cloud is replaced by the logo grid (lighter on phones).

Under the hood

• Tokens: defined in src/index.css (@theme): pad, rule, chalk, pencil, highlighter, redpen. Lexend and Kalam are self-hosted via @fontsource, so there's no Google Fonts request.
• Logos:
  • Official wordmarks from Wikimedia Commons for Amazon, Capital One, General Dynamics, Microsoft and ServiceNow, because several old files were icon-only or unreadable at small sizes.
  • Wells Fargo has its red background box removed so it can be inked in one colour.
  • Sources are recorded in src/data/placements.js.
• Removed: the magicui background patterns, plus the now-unused motion, clsx and tailwind-merge dependencies.

Docs

• PRODUCT.md: product truth (audience, brand rules, approved claims).
• DESIGN.md + .impeccable/design.json: the design system, derived from the shipped build.
• .impeccable/surfaces/src-pages-home-jsx.md: the homepage direction contract and design plan.

How it was tested

• npm run lint, npm run check-links and npm run build all pass.
• Captured every page from the production build at 1440px and 390px: Home, About, Projects, Resources, 404, and the mobile menu. No horizontal overflow, and all images load.
• An independent design review (impeccable finish reviewer) ran over three rounds. It found 8 material issues, and all 8 were resolved before its final verdict, ship. The issues included unreadable logos, the motion hiding the primary button, a 404 eyebrow, and current-page marks.

Visual changes

Screenshots can't be attached through the API. To see the site:

• Run npm run dev, or
• download the dist artifact from this PR's CI run and serve it.

Follow-ups

• Design ideas from the review (not defects): red-pen correction marks; section dividers that stand out from the grid; an action at the end of Projects; handwritten notes on the About and Projects headings.
• Spacing: the Resources page and a few small gaps don't follow the 24px grid yet.
• Photos: Vaibhav's and Thomas's are still missing.

Claude Code notes (CLAUDE.md, PROMPT.md) were removed from the repo on 2026-10-02 and are kept local only; both names are gitignored.

[BK5102]

Performance results

Lighthouse, mobile preset (simulated slow 4G, 4x CPU), median of 3 runs, local Edge build served with gzip. Compared with main built the same way.

Build	Page	Score	FCP	LCP	TBT	CLS	Weight
main	Home	94	2.50 s	2.50 s	0 ms	0.001	3,377 KB
main	About	67	2.49 s	2.72 s	2,212 ms	0.014	2,202 KB
#8	Home	98	1.65 s	2.13 s	82 ms	0	197 KB
#8	About	96	1.63 s	2.56 s	100 ms	0	388 KB

CI (GitHub runner): Home 99 (FCP 1.52 s, LCP 2.04 s, TBT 9 ms, 196 KB), About 97 (FCP 1.51 s, LCP 2.56 s, TBT 9 ms, 387 KB), all budgets passing.

Verdict: fastest of the stack. About goes from 67 to 96 (blocking time 2.2 s to 0.1 s), and first paint is ~0.85 s earlier than main.

• 752068b preloads the Lexend font: FCP 1.93 to 1.65 s, About LCP 2.73 to 2.56 s.
• Budgets are tightened for this design: score >= 85, LCP <= 3.0 s, TBT <= 400 ms, CLS <= 0.05, weight <= 600 KB.
• Contact navigation from Home (4x CPU, ~1.6 Mbps): settles in ~1.3-1.9 s vs ~2.4-3.5 s on chore: clean up assets, fix fragile code, and clear lint errors #6.

Remaining opportunity: About's LCP element is a text block that still paints ~0.9 s after FCP.

[AlexanderPach]

I like the new design! I'll approve of it, but my suggestion is to try to match the colors to our design. However, you may feel free to make counter points of course!