OpenAI

Build the "OpenAI" kickstart — A white-paper field journal, with cinematic imagery and room for a good question.

## Design
Build a thoughtful editorial website for Daymark, a fictional independent field journal. Use white #FFFFFF for the entire canvas, pure black #000000 for type and the single filled action, #666666 for secondary text, #F1F1F1 for selected/hover surfaces, and #E0E0E0 for quiet borders. Darken the search-field border to #767676 so its boundary is clear. The entire interface is monochrome. A teal photograph inside the featured article is the only color; never carry teal into buttons, labels or focus. No shadows, decorative gradients, section background stripes or dashboard cards.

Use the font stack Inter, system-ui, sans-serif. Use Inter if it is available locally with its license, otherwise system-ui. Do not load a remote font or the inspiration's proprietary font. Set the desktop h1 at 48px/1.16, weight 500, tracking -0.03em; section headings at 28px/1.21; supporting article titles at 22px/1.26; featured article title at 32px/1.18. Reading copy is 17px/1.65, lead copy 18px/1.5, navigation and metadata 14px, small labels 13px. Keep weights between 400 and 600. Use a 4px spacing base, a 1200px content maximum and 32–64px section gaps. Leave space to separate sections instead of drawing a line under everything. All controls have pill corners and at least 44px targets; the featured photograph has a restrained 6px radius. Text and photos sit directly on the page, with no enclosing card plates.

At 1440×900, center the 1200px column with 120px gutters. A 72px navigation row holds an original four-stroke daylight mark and lowercase daymark wordmark on the left. Journal, About and Contact sit toward the right, followed by the one filled black Read the journal pill. Below, center a small uppercase label AN INDEPENDENT FIELD JOURNAL, then a two-line h1 Stay curious. / Look a little closer. Start the heading around y=145. Beneath it, one muted sentence reads Small observations. Better questions. A wider view. Then a 580px-wide search field with an original thin-stroke magnifier, an accessible label Search the journal and placeholder Find a note, an idea, a new perspective. Search should be a compact interaction inside this generous white hero, not a giant app panel. Beneath it, center four outlined pills: All notes, Field notes, Methods and Perspectives. The current selection uses the ash fill and aria-pressed; it never becomes a second black button.

Start the journal section around y=445. Its left-aligned label is From the journal, with a quiet live result count on the right. Use an asymmetric two-column layout with a 2:1 ratio and a 40px gap. The left feature has an approximately 773×280px photographic window showing a macro view of concentric ripples in clear deep teal water. A bright droplet sits slightly right of center. Use an original locally stored photograph; keep it unoverlaid, without captions baked into the bitmap. Under it: Field notes · September 24, 2026 · 6 min read in muted text; the title A small disturbance, a wider world; then the sentence A note on ripples, attention, and the things that travel further than we expect. A native Read this note disclosure opens the complete short essay beneath it. The right column contains two editorial text entries, each with its category, fixed date, read length, 22px title, a short description and its own Read this note disclosure. Give them generous separation and one pale horizontal divider. Their titles are In praise of the unhurried question and Making room for what we don't know. Add a quiet bottom note in this column: No rush. Every note stays here. Do not draw pretend app windows or charts.

After the articles, create an About section with the heading A place to pay attention, a short two-column introduction and three principles, Notice / Ask / Return, expressed as simple text rows. Finish with a small footer containing the daylight mark, a sample contact email, a Back to top anchor and the clear text Daymark is a fictional journal. Articles and dates are sample content. The image is an original generated illustration of water, not evidence of an experiment.

At 760px and below, use 20px gutters, a 36px h1 and a single article column. Wrap navigation and topic pills; the search field fits the available width with no clipped placeholder or page overflow at 360px. Images keep their aspect ratio without making their parents wider. Use semantic header, nav, main, section, article and footer elements, exactly one h1, a skip link and visible black focus rings with a 3px offset. Disclosures remain native and keyboard operable. All reading text is at least #666666 on white; do not use pale gray for live text. Keep content fully visible without animation and without JavaScript. A noscript note explains that search filters need JavaScript while articles remain readable. Honor reduced motion; no infinite animation.

## Tech stack
Use Next.js App Router, React and TypeScript with plain CSS custom properties. Preserve equivalent tools already installed in the host repository. Server-render the page content; put only query/topic state in a small client component. Store three original sample articles in a local typed array. Use native details/summary for reading each article. No API, database, authentication, analytics, AI model, paid service or persistent storage is needed. The search matches local text only.

Use system fonts or licensed self-hosted Inter. Keep all artwork local. If the source folder's original assets/ripples.webp is available, copy it into the new app's public directory. A pasted brief must also work without that file: create an original local SVG of concentric ripple lines on a deep teal field as a clear illustrative alternative, with no external asset requests. Never download the inspiration site's photography or logo. Do not bake UI text into images. Provide dev, build and start scripts, then use a production build and start server for the final screenshot. Include a README explaining where to change identity, article records, topics and the image.

Technology list:
- Next.js (App Router)
- React
- TypeScript
- CSS custom properties
Where the repo you are working in already has an equivalent in place, keep the repo's choice and say which one you kept.

## Everything else
Create a complete original site for Daymark. OpenAI is the gallery inspiration name only; never put its name, logo, product names, source URLs or claims of affiliation on the sample page. Daymark publishes fictional, contemplative editorial notes; it is not a chatbot, search service or research institution.

Navigation: the wordmark and Back to top target #top. Journal and Read the journal target #journal; About targets #about; Contact targets #contact. The footer contact is mailto:[email protected] and explicitly labeled Sample contact. There are no inert signup or purchase links.

The journal contains exactly three articles, initially all visible. Field notes: A small disturbance, a wider world, fixed display date September 24, 2026, 6 min read. Methods: In praise of the unhurried question, September 22, 2026, 4 min read, description A useful question leaves enough space for an unexpected answer. Perspectives: Making room for what we don't know, September 18, 2026, 5 min read, description An unfinished thought can be a place to begin, rather than a gap to fill. The reading-time labels are fictional editorial metadata, not calculated claims.

Write three original paragraphs of 50–70 words for each article. The water note reflects on watching a ripple, following its edges and the value of attention. The methods essay describes writing a question in a notebook, waiting before answering and returning with another observation. The perspectives essay explores uncertainty, revising an assumption and sharing unfinished ideas carefully. Use reflective language rather than scientific assertions or fabricated quotations. Render the full prose inside native details disclosures, each with summary Read this note and an accessible name that includes its article title. Disclosures operate independently and need no JavaScript.

Search is a real local filter, not an AI prompt. Match the trimmed case-insensitive query against each article's title, category, description and body. Filter on input without a network call. All notes clears the topic filter only; Field notes, Methods and Perspectives select their exact category. Query and topic combine with AND. Expose aria-pressed for the selected topic, announce the result count politely, and keep the text input focused while typing. Blank/whitespace query matches every article in the selected topic. When no articles match, show No notes found. Try another word or topic. plus a Reset filters button that clears both controls and restores all three records. A Clear search text button appears for a nonempty query and clears only the query. Without JavaScript, show every article and a readable notice; no content depends on hydration to appear.

About copy: Daymark is a small collection of field notes on attention, process, and possibility. We start with what is close at hand and see where a question leads. Principles: Notice — Begin with something ordinary. Ask — Give the question time to change. Return — Look again with a little more care. End with the sample/fictional notice and clear generated-image disclosure. Do not invent authors, customers, institution partners, statistics, newsletter delivery or subscriptions.

Deliver the complete working page with keyboard operation and narrow-screen layout. Use original copy and local artwork only. The preview must be a real screenshot of this page, not an image of a suggested design.

Build a rebrandable editorial field journal with local search and three expandable articles. Preserve this page structure:
1. Quiet wordmark navigation
2. Centered editorial heading and local journal search
3. Asymmetric featured field note and two supporting essays
4. About the journal and reading approach
5. Compact contact and fictional-journal footer

### Non-negotiables
- Responsive from 360px through desktop — no horizontal page overflow at any width. Deliberately scrollable regions stay within the viewport and remain keyboard and touch accessible.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.