FP28 | Studio Okafor | FIT=A | Professional | Minimal & calm
TECHNIQUES: scroll pin hover touch focus rotate card shop back gallery filter collection music reveal motion contact font hero gsap lenis
BORN_HOOD_ADVICE: Focus-aware floating gallery previews and mobile tap behavior.
DESIGN_SIGNATURE: 's colors] The design Idea: an architect's drawing set, monochrome, quiet and exact, where buildings are the only pictures. Fonts: Geist for headlines, set light and very tight, and Geist Mono for every label, number and caption. Colours: white #FFFFFF and concrete #E9E8E5 grounds, graphite #1A1A1A for type and dark sections, pencil #5E5D59 for secondary text, and oxide #8A4B2A only for tiny marks and measuring lines. Photos are black and white with a faint cool tint. In order: a hero with a three-word headline and a footnote beside a large photo framed by dimension lines, over a faint twelve-column grid and a drawing title block with a scale bar; the project index as a ruled table of job number, project, type, place, year and status; one featured project; the studio, with a giant '1:50', four counting figures, a section where the noon sun moves from December to June, and four rules; a large quote over awards and press ledgers; the team as title-block cells with big initials; a form beside a drawn location plan; a dark footer. Each section opens with a numbered sheet header whose rule draws across. Motion: on load the grid lines drop in and the photo wipes up behind a thin rust line. Signature: hovering a row floats a preview with guide lines, and while scrolling the middle row gets it; on phones rows open. The featured project holds still while four photos wipe across each other along a rising level, a grid line and the sun's angle, each edge labelled with its live measurement.
HTML_SURFACE: headings=Concrete, timber, daylight.1; Index of works; Hollow Lane Chapel; We start every building in pencil, on one sheet.; Fourteen people, one long table.; Send us the site and a sentence. | ids=menu, main, top, index, p156, p152, p149, p147, p143, p139, p136, p131, p128, p117, work, studio, press, people, contact, nl | functions=
ORIGINAL_PROMPT: prompt/studio-okafor.md (SHA256 79f25883492e45ea46d68f6176fcecd2daec4066a7be3fec35d0e5f5ef0f3f04)
EXAMPLE_SOURCE: example/studio-okafor.html (SHA256 469019de2ad9e074debdeae08ec6cb4cd0171c842d098f2d2c89326c68c08c83)
FULL_RUNNABLE_OFFLINE_EXAMPLE: C:\Users\usapr\Documents\Reference Libraries\Futurepedia Claude Website Library\offline_examples\studio-okafor\index.html
DO_NOT_COPY: Demo facts/images/prices/logos; use only proven techniques respecting current BORN HOOD constraints.
