CalmOS Page Redesign Plan

Overview

• Task name: CalmOS page redesign
• Created: 2026-06-15
• Owner: Codex main session
• Scope owner role: design / implementation planning, review, final quality control
• Background: The current site is useful as a Markdown document viewer, but it feels too close to raw documentation and does not work as a polished customer-facing website.
• Current state: Astro site with src/pages/index.astro, /docs/ document listing, Markdown content collections, and global CSS.
• Direction: Keep Markdown as source material, but stop presenting it as the main user experience. Build proper pages with structured sections, clearer hierarchy, and stronger conversion flow.

Goal / KPI

• Final goal: Turn CalmOS into a polished multi-page website that feels intentional, credible, and easy to understand for founder / executive prospects.
• Success conditions:
  • Home page no longer feels like a Markdown portal or internal document index.
  • Core pages exist as designed web pages, not raw Markdown renderings.
  • Navigation matches the customer journey: Home -> Method / Foundation / Monthly / Story / FAQ -> Diagnostic / Contact.
  • Visual design feels calm, premium, spacious, and business-ready.
  • Markdown docs can remain available as a secondary library, not the primary UX.
  • Local build passes and the site can be reviewed on localhost.

Deliverables

• Astro page implementation for key customer-facing pages.
• Updated global layout and navigation.
• Redesigned homepage.
• Supporting page templates / reusable section components if useful.
• Updated CSS for a more polished site experience.
• Local verification on desktop and mobile viewport.
• Red Team review notes before completion.

Scope

• Create or improve these user-facing routes:
  • /
  • /foundation/
  • /monthly/
  • /method/
  • /diagnostic/
  • /story/
  • /faq/
  • /contact/
• Keep /docs/ as a secondary resource area.
• Reuse existing copy and IA from docs/website/ where possible.
• Improve typography, spacing, section structure, CTA hierarchy, and page rhythm.
• Make the site feel like a real service site, not a generated documentation dump.

Non-Scope

• No backend contact form submission unless separately approved.
• No CMS migration.
• No external paid design system.
• No logo redesign beyond lightweight brand treatment.
• No production deployment unless separately requested.
• No broad rewrite of all Markdown source documents.

Requirements

• P0: Keep Astro and existing project structure.
• P0: Do not delete existing Markdown docs.
• P0: Make the primary site experience proper pages rather than raw Markdown.
• P0: Preserve CalmOS positioning: “経営者の頭に余白を。”
• P1: Use existing website copy and IA documents as source material.
• P1: Keep calm / natural / premium tone, avoiding cyber AI neon styling.
• P1: Make CTA flow clear, especially toward diagnostic / contact.
• P1: Verify with local build.
• P2: Add responsive refinements for mobile.
• P2: Add visual placeholders where images would improve the page. Each placeholder should clearly state what kind of image should be inserted there, such as founder portrait, calm workspace photo, system diagram, customer workflow image, or diagnostic report preview.
• P2: Add subtle visual assets / structured diagrams using CSS or semantic layouts.

Priority

• P0: Homepage redesign and global navigation.
• P0: Core route creation for the planned sitemap.
• P0: Replace document-index feel with designed page sections.
• P1: Foundation, Method, Diagnostic, and Contact pages.
• P1: FAQ and Story pages.
• P2: Monthly page if copy is sufficient.
• P2: Polish animations / micro-interactions only after layout is solid.

Task Breakdown

1. Audit current routes, content sources, and CSS.
2. Decide page architecture and reusable layout patterns.
3. Build homepage as the primary customer-facing entry.
4. Build key service pages from existing docs/website/ copy.
5. Update navigation and CTA paths.
6. Keep /docs/ as secondary library.
7. Run build and inspect local pages.
8. Perform Red Team review for design, clarity, conversion, and technical issues.
9. Apply final fixes.

Agent Assignment

• Main session: requirements control, architecture, review, final judgment.
• Execution Agent: implement Astro pages and CSS.
• Review Agent: inspect routes, copy flow, responsive behavior, and build output.
• Red Team Agent: look for weak positioning, confusing navigation, generic design, and broken UX.

Facts / Hypotheses / Opinions

Facts

• The project is an Astro site.
• The current homepage imports docs from Astro content collections and highlights Markdown documents.
• Existing website IA and page copy live under docs/website/.
• The current design direction says CalmOS should feel calm, natural, open, and spacious.

Hypotheses

• Prospects will understand the offer faster if the site uses dedicated pages instead of surfacing Markdown documents.
• /docs/ is still useful as a credibility and reference layer, but should not be the main CTA path.
• Existing copy is enough to build a strong first version without requesting new writing from the user.

Opinions

• The homepage should behave like a service website, not a knowledge base.
• The design should be quieter and more editorial than SaaS-dashboard-like.
• The strongest conversion flow is free diagnostic first, then Foundation / Monthly explanation.
• If images are needed, placeholders should explain the intended image content instead of silently leaving blank decorative blocks.

Risks

• Existing copy may still be draft-like and need tightening after visual implementation.
• Too many pages could dilute focus if every route has equal weight.
• Over-polishing visuals before fixing message hierarchy would waste time.
• Contact form behavior could be misleading if it looks functional but has no backend.
• A calm design can become bland if contrast and hierarchy are too weak.
• Image placeholders could feel unfinished if they are too generic, so each one must be specific enough to guide later asset creation or selection.

Open Questions

• Should /docs/ remain visible in global navigation or move to footer / resources?
• Should contact be a real form, mailto link, or placeholder inquiry page for now?
• Should the first CTA be “無料診断” or “30日プログラムを見る”?
• Is the intended buyer primarily solo founder, small business owner, or executive at a larger company?

Decision Log

Review Criteria

• Does the site immediately explain what CalmOS is and who it is for?
• Does it feel intentionally designed rather than Markdown-rendered?
• Is the CTA path obvious?
• Is the visual tone calm, premium, and credible?
• Are pages readable on mobile?
• Are routes working without broken links?
• Are claims and prices consistent with source docs?
• Is /docs/ still accessible without dominating the experience?
• Do image placeholders clearly say what image should go there and why?

Completion Criteria

• User approves this plan or requested modifications are incorporated.
• Implementation is completed after explicit approval.
• npm run build passes.
• Localhost review confirms the main pages render correctly.
• Red Team review finds no P0/P1 issues.

Implementation Log

Red Team Review

Findings

• P1: The contact form is not connected to a backend. It is intentionally marked as a placeholder and the button is disabled via type="button", but production use will need a real form provider.
• P2: npm run build reports an existing duplicate content id warning for plan/plan-calmos-proposal-pdf-20260615. This does not block the redesign build, but should be cleaned separately.
• P2: Image placeholders are clear, but the site will feel more finished once real photography or diagrams replace them.

Result

No P0 issue found in the page redesign implementation.