[Docs] Website Redesign

[polyzos]

Since Apache Fluss was open-sourced, we have run multiple discussions around improving our website. However, back in the day, we had no professional website designer to help with is and we did the best possible with the tools and capacity we had at our disposal.

We now have AI tools to help with these tasks, so with the ASF graduation approaching and the Fluss 1.0, it is a good time to run a website redesign.

I used the initial guidelines and added extra prompts to plan a website redesign.

If it's acceptable and the community likes it, we can proceed with AI tools helping out with our website and break this into phases:

1. Create the new website
2. Iterate to update visuals and diagrams using AI tools
3. Fix small issues.

Act as a senior web designer, brand strategist, UX architect, and front-end design consultant.

I want a complete redesign proposal for the Apache Fluss website to make it feel modern, polished, trustworthy, and “2026-ready,” while keeping a similar blue-based color palette to the current site.

Before proposing the redesign, first perform a thorough critique of the current Apache Fluss website. Analyze it as if you were doing a professional design audit.

Website to review:
[PASTE APACHE FLUSS WEBSITE URL HERE]

Your response should include:

1. Current Website Design Audit
Analyze the current website in detail, including:
- First impression and visual quality
- Brand positioning and perceived maturity
- Homepage structure and information hierarchy
- Navigation and IA
- Hero section effectiveness
- Messaging clarity
- Visual design system
- Color palette
- Typography
- Spacing and layout
- Use of icons, diagrams, illustrations, and screenshots
- Calls to action
- Developer experience
- Documentation discoverability
- Community / open-source trust signals
- Performance perception
- Accessibility issues
- Mobile responsiveness
- SEO and content structure
- What feels outdated, generic, unclear, or underdeveloped
- What should be preserved

2. Redesign Goals
Define the redesign objectives, such as:
- Make Apache Fluss look like a serious next-generation open-source infrastructure project
- Communicate real-time streaming storage clearly
- Appeal to data engineers, platform engineers, Flink users, lakehouse users, and open-source contributors
- Improve trust, clarity, and conversion to docs/GitHub/community
- Preserve the blue identity while making it more modern and premium

3. Target Audience
Describe the primary audiences:
- Data engineers
- Streaming platform engineers
- Flink users
- Real-time analytics teams
- Lakehouse architects
- Open-source contributors
- Technical decision-makers

Explain what each audience needs to understand quickly.

4. Brand and Visual Direction
Create a modern visual direction using a blue palette similar to the current site, but more refined.

Include:
- Suggested color palette with hex codes
- Primary blue, secondary blue, accent colors, neutral backgrounds, text colors
- Typography recommendations
- Spacing system
- Border radius and shadows
- Icon/illustration style
- Diagram style
- Animation/motion principles
- Overall mood: modern, technical, fast, reliable, open-source, cloud-native

5. Homepage Redesign
Provide a complete homepage structure with sections in order.

For each section, include:
- Purpose
- Suggested headline
- Suggested body copy
- Suggested CTAs
- Visual treatment
- Notes for implementation

The homepage should include sections such as:
- Hero section
- Logos/community trust area
- What is Apache Fluss?
- Core value proposition
- Architecture overview
- Key capabilities
- Use cases
- Why Fluss vs Kafka/lakehouse/message queues
- Apache Flink integration
- Real-time analytics/lakehouse positioning
- Developer quick start
- Community section
- GitHub/docs CTA
- Footer

6. Messaging and Copywriting
Rewrite the main homepage messaging.

Include:
- 5 alternative hero headlines
- 5 alternative subheadlines
- Primary CTA labels
- Secondary CTA labels
- Short product description
- One-line positioning statement
- SEO-friendly meta title
- SEO-friendly meta description

Make the messaging clear, technical, and credible. Avoid hype.

7. UX and Information Architecture
Recommend a new navigation structure.

Include:
- Top nav
- Docs nav
- Community links
- GitHub CTA
- Use case pages
- Blog/resources
- Architecture/design pages
- Comparison pages if useful

8. Design System Recommendations
Define reusable components:
- Header
- Hero
- CTA buttons
- Cards
- Feature blocks
- Architecture diagrams
- Code snippets
- Comparison tables
- Testimonials/community quotes
- Blog cards
- Footer
- Alert banners
- Documentation links

For each, explain how it should look and behave.

9. Visual Assets Needed
List the assets that should be created:
- New architecture diagram
- Fluss + Flink integration diagram
- Lakehouse freshness diagram
- Icons for capabilities
- Use case illustrations
- GitHub/community stats block
- Possibly product screenshots or terminal/code examples

10. Accessibility and Performance
Provide specific guidance for:
- WCAG-friendly contrast
- Font sizing
- Keyboard navigation
- Motion accessibility
- Responsive design
- Image optimization
- Static-site performance
- SEO structure

11. Implementation Guidance
Assume the site may be implemented with a modern static site framework such as Docusaurus, Astro, Next.js, or VitePress.

Recommend:
- Best framework choice
- Page structure
- Component hierarchy
- CSS/design-token approach
- Animation approach
- Documentation integration
- GitHub/community integration

12. Final Deliverables
Produce:
- A full redesign concept
- Homepage wireframe in text form
- Suggested copy for each homepage section
- Design tokens
- Component list
- Content strategy
- Prioritized redesign roadmap

Be specific and practical. The output should be detailed enough that a designer, developer, or AI coding agent could use it to start creating the redesigned Apache Fluss website.

[polyzos]

Color Palette

• #102856
• #194670
• #12325C
• #0A1745
• #266D95
• #1C5078

[michaelkoepf]

AMAZING JOB @polyzos 🥰🚀 looking forward to getting this merged

i left my comments. can't say much on the implementation part as i'm not really familiar with frontend.

additional question: are there already plans to redesign existing figures in the docs?

[Copilot]

Pull request overview

This PR implements a major Docusaurus website redesign for Apache Fluss, introducing a new marketing-style homepage, a refreshed design-token system, updated Prism code themes, and various docs/config polish changes to support a more modern “2026-ready” visual identity.

Changes:

• Rebuild the homepage (index.tsx + CSS modules) with a new hero, architecture diagram, comparison matrix, and community section.
• Introduce a large set of global design tokens and site-wide visual restyling in custom.css, plus new Prism light/dark themes.
• Update Docusaurus config metadata/footer and replace the docs intro page with a richer MDX version.

Reviewed changes

Copilot reviewed 15 out of 16 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
website/src/utils/prismLight.ts	Retunes the light Prism theme to match the new Fluss palette.
website/src/utils/prismDark.ts	Adds a custom dark Prism theme for dark code surfaces.
website/src/theme/ColorModeToggle/index.js	Re-exports the default toggle component to preserve the theme alias behavior.
website/src/pages/index.tsx	New homepage layout, hero code panel, architecture SVG, and new sections.
website/src/pages/index.module.css	New homepage-specific styling for hero/sections/components.
website/src/css/custom.css	Introduces redesign tokens and extensive site-wide theming/styling changes.
website/src/components/HomepageIntroduce/index.tsx	Removes the old homepage “Introduce” component.
website/src/components/HomepageFeatures/index.tsx	Reworks homepage features into “Six capability pillars” cards.
website/src/components/HomepageFeatures/styles.module.css	New styling for the redesigned feature/pillar section.
website/package.json	Swaps font packages and adds React type packages.
website/learn/talks.md	Minor copy edits/punctuation polish.
website/docusaurus.config.ts	Updates site metadata, footer links, Prism theme, and PWA config.
website/docs/intro.mdx	Replaces the docs intro content with an expanded MDX introduction.
website/docs/intro.md	Removes the previous markdown intro page.
website/community/how-to-release/verifying-a-fluss-release.md	Minor copy edits/punctuation polish.
website/community/how-to-release/creating-a-fluss-release.mdx	Minor copy edits/punctuation polish.

Comments suppressed due to low confidence (1)

website/docusaurus.config.ts:135

• The main docs plugin no longer sets editUrl, which will remove the "Edit this page" link for /docs/** pages (while the CSS still includes extensive styling for .theme-edit-this-page). If this wasn't intentional, re-add editUrl for the docs preset to keep contribution links available across the primary documentation set.

      {
        docs: {
            sidebarPath: './sidebars.ts',
            remarkPlugins: [versionReplace],
            lastVersion: latestVersion,
            versions: versionsMap
        },

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[polyzos]

@michaelkoepf @wuchong @MehulBatra @fresh-borzoni I'm quite happy with the current result, so please let me know your thoughts.. i also tested everything and it LGTM