Skip to content
pormts hubMain Website
Explore/Content
CONTENT · INTERMEDIATE

The editorial journal

Let great stories lead with a beautifully readable independent publication.

Concept preview · A visual starting point, not a generated website or a guaranteed output.

What's inside

4 pages
HomeTopicsArticleAbout
  • Full-text article search and topic filtering
  • Readable article layouts with generated table of contents
  • Related articles and browser-local reading bookmarks

Your website brief

Build a complete, responsive content website for [PROJECT NAME].

PROJECT BRIEF
Let great stories lead with a beautifully readable independent publication.
Audience: [TARGET AUDIENCE — describe their needs and primary goal].
Technology: Use the existing project stack. For a new project, use React, TypeScript, and Tailwind CSS.
Start by inspecting the existing project and reuse its routing, components, and conventions. State any assumptions. Ask only for missing decisions that block implementation.

PAGES & NAVIGATION
1. Home
2. Topics
3. Article
4. About
Give each page a real route, descriptive title, appropriate metadata, active navigation, and a useful not-found state.

VISUAL DIRECTION
Use newspaper-like black rules, warm white, orange accents, oversized serif titles, and a strong column grid.
Treat the preview as visual direction, not a screenshot to reproduce. Create consistent spacing, typography, color tokens, and reusable components. Adapt the layout from 360px mobile to large desktop without horizontal overflow.

REQUIRED FUNCTIONALITY
- Full-text article search and topic filtering
- Readable article layouts with generated table of contents
- Related articles and browser-local reading bookmarks
- Every visible control must work. Include loading, empty, validation, error, and success states where applicable.
- Use realistic seed content, clearly distinguish demo data, and avoid fabricated metrics or endorsements.

QUALITY & ACCESSIBILITY
- Use semantic landmarks, one clear page heading, associated form labels, visible focus, keyboard navigation, descriptive link text, and sufficient color contrast.
- Respect prefers-reduced-motion. Provide text alternatives for meaningful visuals.
- Validate inputs at trust boundaries. Keep secrets server-side. Never render untrusted HTML.
- Use an actual backend for shared data, authentication, or transactions when needed. If credentials are missing, document the setup and make the limitation visible instead of faking success.
- Optimize assets, reserve media dimensions, and keep dependencies and client bundles small.
- Handle unavailable browser storage and clipboard access gracefully.

ACCEPTANCE CHECKS
Run the production build and relevant lint/type checks. Verify all page routes, mobile and desktop layouts, keyboard flows, filtering, forms, and persistence. Test invalid inputs and empty/error states. Report what was verified and any remaining integration requirements.

DELIVERABLE
Implement working code, not just a proposal. Include a concise README with setup, environment variable names (no secrets), demo-data behavior, and deployment steps.