[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

[michaelkoepf]

i build the new website locally and noticed that margins might need a bit of fixing.

1. i'm using a 2560x1600 screen resolution. the figure in the architecture section touches the screen boundary on the left and is not centered. and the margins of the first 2 sections (overview, architecture) are different than the ones from the sections starting with "the system tax". maybe we can use a consistent margins? 🤔 i'd prefer the wider ones that are used by "the system tax" and the follow up sections.

2. margins around buttons seem to be inconsistent (especially between light/dark mode toggle and the search bar). and the search bar now has an additional box in it that wasn't there before 👀

old search bar for reference:

--

otherwise lgtm. thanks yannis!

[wuchong]

Thanks @polyzos. I appreciate the new design overall. After reviewing the updated website, I have a few suggestions for improvement. Please note that these are from a non-designer perspective, so take them as constructive feedback rather than definitive rules.

1. Kafka vs. Fluss comparison table: The current table on the homepage feels too detailed and dilutes key messages. I suggest moving this to a dedicated page, and just put an overview hint and link here, especially since we may add more comparisons in the future (e.g., Fluss vs. Redis, Fluss vs. Paimon).

2. Header badge content: The "Apache Software Foundation · Incubating · Apache 2.0" label is redundant since it already appears at the bottom of the homepage. For greater user impact, consider replacing it with "Production Ready," similar to CocoIndex (https://cocoindex.io/), which conveys more immediate value.

3. Sidebar capitalization consistency: The left sidebar and TOC sidebar use inconsistent casing (some titles are uppercase, others lowercase). I recommend standardizing all sidebar titles to lowercase for visual uniformity.

4. Banner alignment: Since docs and other pages use full-width layouts, consider aligning the banner to the left or right edge (as in previous versions) to maintain visual consistency across pages.

5. Key features section: The current version has significantly more text and smaller fonts, making it hard to scan. Keep this section concise so users can quickly grasp core benefits. Also, increase icon size to improve visual distinction between features.

6. Link color visibility: Current link colors are too dark and blend into the background. Consider using brighter shades like #24e2ff or #1148dc for better accessibility and visibility.

7. Mobile navigation: On mobile devices, the banner menu (Docs, Downloads, etc.) disappears. Please ensure these navigation items remain accessible on smaller screens, as shown in the previous design.

Previous:

8. Code block title in dark mode: The title bar of code blocks displays incorrectly in dark mode. Please adjust the styling for proper visibility.

9. Remove separator line: Consider removing the white line between the banner and body content to create a more seamless visual integration.

[wuchong]

I pushed a commit to fix some minor display problems:

1. update homepage selection font/background color to make it visible
2. update the tax section to make fluss card more elegant.
3. widen blog card
4. update navbar link hover color
5. widen the TOC card in talks/videos/downloads page.
6. fix link color on downloads/talks/videos page

[wuchong]

One more problem, the table header is not rendered properly in dark mode.

[polyzos]

@wuchong @michaelkoepf Thank you both for your feedback. Everything made sense, and I updated the website to address all your comments.

Please let me know if you can think of any blocking issues. I think everything is in good shape