Skip to content

Homepage: Improve visual contrast and reduce “flat” appearance#4781

Open
Yndira-E wants to merge 3 commits intomainfrom
yndira/homepage/adding-color
Open

Homepage: Improve visual contrast and reduce “flat” appearance#4781
Yndira-E wants to merge 3 commits intomainfrom
yndira/homepage/adding-color

Conversation

@Yndira-E
Copy link
Copy Markdown
Contributor

@Yndira-E Yndira-E commented Mar 27, 2026

Description

  • Introduced subtle colour variation in the hero to reduce the flat blue feel
  • Removed background grid to simplify the visual and reduce noise
  • Refined use of accent colours to create clearer hierarchy and more visual interest
  • Updated imagery tones to better align with the overall colour system
  • Adjusted the width of the FlowFuse Expert input to better align with the layout and surrounding elements

Overall goal:
Make the homepage feel less dull and more engaging, while staying within the existing brand system.

Related Issue(s)

#4722

Checklist

  • I have read the contribution guidelines
  • I have considered the performance impact of these changes
  • Suitable unit/system level tests have been added and they pass
  • Documentation has been updated
  • For blog PRs, an Art Request has been created (instructions)

@github-actions
Copy link
Copy Markdown
Contributor

Images automagically compressed by Calibre's image-actions

Compression reduced images by 71.2%, saving 4.7 MB.

Filename Before After Improvement Visual comparison
src/images/home/home-itot-middleware.png 6.0 MB 1.7 MB 71.5% View diff
src/images/home/home-scada.png 635.6 KB 200.9 KB 68.4% View diff

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 27, 2026

Deploy Preview for flowforge-website ready!

Name Link
🔨 Latest commit 7a2b86e
🔍 Latest deploy log https://app.netlify.com/projects/flowforge-website/deploys/69c6cd12ece95000085fa398
😎 Deploy Preview https://deploy-preview-4781--flowforge-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 85 (🔴 down 5 from production)
Accessibility: 81 (no change from production)
Best Practices: 100 (no change from production)
SEO: 91 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 27, 2026

Deploy Preview for flowforge-website ready!

Name Link
🔨 Latest commit a12499e
🔍 Latest deploy log https://app.netlify.com/projects/flowforge-website/deploys/69c6cd8a65b8c60008be8983
😎 Deploy Preview https://deploy-preview-4781--flowforge-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 89 (🔴 down 1 from production)
Accessibility: 81 (no change from production)
Best Practices: 100 (no change from production)
SEO: 91 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant