# Primary surface color design examples [Open the live Fudge conversation](https://design.withfudge.com/share/designs-with-color.role.surface) Last updated: 2026-09-15 Explore website designs that use **Primary surface color**. ## Captured pages [![s.page](https://pin.fontofweb.com/12171?format=jpg)](https://design.withfudge.com/share/pin-12171) [s.page](https://design.withfudge.com/share/pin-12171) [![E-commerce, Design & Engineering — Aino](https://pin.fontofweb.com/12144?format=jpg)](https://design.withfudge.com/share/pin-12144) [E-commerce, Design & Engineering — Aino](https://design.withfudge.com/share/pin-12144) [![Beyond Medals — Aino](https://pin.fontofweb.com/12143?format=jpg)](https://design.withfudge.com/share/pin-12143) [Beyond Medals — Aino](https://design.withfudge.com/share/pin-12143) [![Beyond Medals — Aino](https://pin.fontofweb.com/12142?format=jpg)](https://design.withfudge.com/share/pin-12142) [Beyond Medals — Aino](https://design.withfudge.com/share/pin-12142) [![Beyond Medals — Aino](https://pin.fontofweb.com/12141?format=jpg)](https://design.withfudge.com/share/pin-12141) [Beyond Medals — Aino](https://design.withfudge.com/share/pin-12141) [![Aino — Design & Technology Agency](https://pin.fontofweb.com/12138?format=jpg)](https://design.withfudge.com/share/pin-12138) [Aino — Design & Technology Agency](https://design.withfudge.com/share/pin-12138) [![Localization Guides - Lingo.dev](https://pin.fontofweb.com/12128?format=jpg)](https://design.withfudge.com/share/pin-12128) [Localization Guides - Lingo.dev](https://design.withfudge.com/share/pin-12128) [![Sign in - Lingo.dev](https://pin.fontofweb.com/12126?format=jpg)](https://design.withfudge.com/share/pin-12126) [Sign in - Lingo.dev](https://design.withfudge.com/share/pin-12126) [![The Localization Engineering Platform - Lingo.dev](https://pin.fontofweb.com/12125?format=jpg)](https://design.withfudge.com/share/pin-12125) [The Localization Engineering Platform - Lingo.dev](https://design.withfudge.com/share/pin-12125) [![Pricing - Lingo.dev](https://pin.fontofweb.com/12124?format=jpg)](https://design.withfudge.com/share/pin-12124) [Pricing - Lingo.dev](https://design.withfudge.com/share/pin-12124) [![Pricing - Lingo.dev](https://pin.fontofweb.com/12123?format=jpg)](https://design.withfudge.com/share/pin-12123) [Pricing - Lingo.dev](https://design.withfudge.com/share/pin-12123) [![SoSafe replaced their translation agencies – more languages, fewer complaints - Lingo.dev](https://pin.fontofweb.com/12122?format=jpg)](https://design.withfudge.com/share/pin-12122) [SoSafe replaced their translation agencies – more languages, fewer complaints - Lingo.dev](https://design.withfudge.com/share/pin-12122) ## Related design patterns - [Primary text color](/share/designs-with-color.role.text_primary) - [Sans serif](/share/designs-with-typography.generic.sans_serif) - [Canvas color](/share/designs-with-color.role.canvas) - [Solid background](/share/designs-with-visual.background.solid) - [Neutral hue](/share/designs-with-color.hue.neutral) - [Secondary text color](/share/designs-with-color.role.text_secondary) ## Related website guides - [aaa24.a24films.com design guide](/share/aaa24.a24films.com-design) - [ahrefs.com design guide](/share/ahrefs.com-design) - [aino.agency design guide](/share/aino.agency-design) - [app.brevo.com design guide](/share/app.brevo.com-design) - [app.standards.site design guide](/share/app.standards.site-design) - [artificialanalysis.ai design guide](/share/artificialanalysis.ai-design) - [athas.dev design guide](/share/athas.dev-design) - [blog.google design guide](/share/blog.google-design) - [brave.com design guide](/share/brave.com-design) - [cal.com design guide](/share/cal.com-design) - [chatgpt.com design guide](/share/chatgpt.com-design) - [claude.ai design guide](/share/claude.ai-design) - [consumer.huawei.com design guide](/share/consumer.huawei.com-design) - [dash.cloudflare.com design guide](/share/dash.cloudflare.com-design) - [exa.ai design guide](/share/exa.ai-design) - [fal.ai design guide](/share/fal.ai-design) - [faunarobotics.com design guide](/share/faunarobotics.com-design) - [firehose.com design guide](/share/firehose.com-design) - [framer.com design guide](/share/framer.com-design) - [gojiberry.ai design guide](/share/gojiberry.ai-design) - [grok.com design guide](/share/grok.com-design) - [gutgutgoose.com design guide](/share/gutgutgoose.com-design) - [halfbuilt.com.au design guide](/share/halfbuilt.com.au-design) - [hiremara.com design guide](/share/hiremara.com-design) - [ifttt.com design guide](/share/ifttt.com-design) - [joinhandshake.com design guide](/share/joinhandshake.com-design) - [kobbe.io design guide](/share/kobbe.io-design) - [kraa.io design guide](/share/kraa.io-design) - [onton.com design guide](/share/onton.com-design) - [openai.com design guide](/share/openai.com-design) - [oxide.computer design guide](/share/oxide.computer-design) - [posthog.com design guide](/share/posthog.com-design) - [ramen.haus design guide](/share/ramen.haus-design) - [replicate.com design guide](/share/replicate.com-design) - [standards.site design guide](/share/standards.site-design) - [tweek.so design guide](/share/tweek.so-design) - [wellgousa.com design guide](/share/wellgousa.com-design) - [wisprflow.ai design guide](/share/wisprflow.ai-design) - [afterquery.com design guide](/share/afterquery.com-design) - [aihero.dev design guide](/share/aihero.dev-design) - [anthropic.com design guide](/share/anthropic.com-design) - [apple.com design guide](/share/apple.com-design) - [are.na design guide](/share/are.na-design) - [avocasystems.com design guide](/share/avocasystems.com-design) - [braintrust.dev design guide](/share/braintrust.dev-design) - [clay.com design guide](/share/clay.com-design) - [designjoy.co design guide](/share/designjoy.co-design) - [diabrowser.com design guide](/share/diabrowser.com-design) - [fairphone.com design guide](/share/fairphone.com-design) - [ginkgo.bio design guide](/share/ginkgo.bio-design) - [mek.gallery design guide](/share/mek.gallery-design) - [microsoft.com design guide](/share/microsoft.com-design) - [minimax.io design guide](/share/minimax.io-design) - [nytimes.com design guide](/share/nytimes.com-design) - [pangram.com design guide](/share/pangram.com-design) - [pinterest.com design guide](/share/pinterest.com-design) - [stagehand.dev design guide](/share/stagehand.dev-design) - [warp.dev design guide](/share/warp.dev-design) - [x.ai design guide](/share/x.ai-design) - [zapier.com design guide](/share/zapier.com-design) - [zed.dev design guide](/share/zed.dev-design) - [ziggle.art design guide](/share/ziggle.art-design)