Build a developer docs and knowledge-base site called "Lexicon Docs".
STYLE
- Bright white canvas, strict Swiss grid, near-black type (#111)
- One accent (blue #2563eb) for links and the primary CTA
- Helvetica-style grotesque for headings, comfortable sans for body, generous whitespace
LAYOUT
- Left sidebar (#fafafa): "Lexicon Docs"; sections - Getting started (Introduction, Quickstart), Payments (on; Accept a payment on, Refunds), Subscriptions; tall adds Customer portal
- Main: breadcrumb "Payments / Accept a payment"; h1 "Accept a payment"; one intro line; a dark code block with Node / Python / Ruby tabs (Python on) and three highlighted lines (import lexicon / session = lexicon.checkout.create( / amount=1999, currency="usd")
- Tall only: a blue-bordered note ("Test keys start with pk_test_. Never ship live keys to the client.") and a right "On this page" TOC (Overview on, Create a session, Handle redirects)
COMPONENTS
- Sidebar: wordmark, doc sections, active link
- Article: breadcrumb, h1, intro, dark code block with language tabs and highlighted lines
- Tall: blue-bordered note; right On-this-page TOC with active item
INTERACTION
- Code tabs swap the active language; the TOC active item follows scroll; the copy button sits inside the code block.
TECHNICAL
- React, Tailwind CSS, shadcn/ui; scroll-synced TOC