# Code role design examples [Open the live Fudge conversation](https://design.withfudge.com/share/designs-with-typography.role.code) Last updated: 2026-08-05 Explore website designs that use **Code role**. ## Captured pages [![Brave Search API | Brave](https://pin.fontofweb.com/10705?format=jpg)](https://design.withfudge.com/share/pin-10705) [Brave Search API | Brave](https://design.withfudge.com/share/pin-10705) [![Firehose: Monitor the Web in Real Time for What Matters](https://pin.fontofweb.com/10673?format=jpg)](https://design.withfudge.com/share/pin-10673) [Firehose: Monitor the Web in Real Time for What Matters](https://design.withfudge.com/share/pin-10673) [![Dia Browser | Latest Release Notes](https://pin.fontofweb.com/10608?format=jpg)](https://design.withfudge.com/share/pin-10608) [Dia Browser | Latest Release Notes](https://design.withfudge.com/share/pin-10608) [![Dia Browser | Latest Release Notes](https://pin.fontofweb.com/10607?format=jpg)](https://design.withfudge.com/share/pin-10607) [Dia Browser | Latest Release Notes](https://design.withfudge.com/share/pin-10607) [![Become a Real AI Hero](https://pin.fontofweb.com/10600?format=jpg)](https://design.withfudge.com/share/pin-10600) [Become a Real AI Hero](https://design.withfudge.com/share/pin-10600) [![Become a Real AI Hero](https://pin.fontofweb.com/10599?format=jpg)](https://design.withfudge.com/share/pin-10599) [Become a Real AI Hero](https://design.withfudge.com/share/pin-10599) [![Parallel](https://pin.fontofweb.com/10594?format=jpg)](https://design.withfudge.com/share/pin-10594) [Parallel](https://design.withfudge.com/share/pin-10594) [![Parallel](https://pin.fontofweb.com/10593?format=jpg)](https://design.withfudge.com/share/pin-10593) [Parallel](https://design.withfudge.com/share/pin-10593) [![Parallel](https://pin.fontofweb.com/10592?format=jpg)](https://design.withfudge.com/share/pin-10592) [Parallel](https://design.withfudge.com/share/pin-10592) [![Parallel](https://pin.fontofweb.com/10591?format=jpg)](https://design.withfudge.com/share/pin-10591) [Parallel](https://design.withfudge.com/share/pin-10591) [![Parallel](https://pin.fontofweb.com/10590?format=jpg)](https://design.withfudge.com/share/pin-10590) [Parallel](https://design.withfudge.com/share/pin-10590) [![Parallel](https://pin.fontofweb.com/10589?format=jpg)](https://design.withfudge.com/share/pin-10589) [Parallel](https://design.withfudge.com/share/pin-10589) ## Related design patterns - [Primary text color](/share/designs-with-color.role.text_primary) - [Secondary text color](/share/designs-with-color.role.text_secondary) - [Technology and software](/share/designs-with-industry.technology_software) - [Accent color](/share/designs-with-color.role.accent) - [Moderate density](/share/designs-with-density.moderate) - [Solid background](/share/designs-with-visual.background.solid) ## Related website guides - [ai-sdk.dev design guide](/share/ai-sdk.dev-design) - [ampcode.com design guide](/share/ampcode.com-design) - [arena.ai design guide](/share/arena.ai-design) - [assistant-ui.com design guide](/share/assistant-ui.com-design) - [brave.com design guide](/share/brave.com-design) - [cal.com design guide](/share/cal.com-design) - [catala-lang.org design guide](/share/catala-lang.org-design) - [chatgpt.com design guide](/share/chatgpt.com-design) - [claude.com design guide](/share/claude.com-design) - [cmux.com design guide](/share/cmux.com-design) - [codepen.io design guide](/share/codepen.io-design) - [continue.dev design guide](/share/continue.dev-design) - [dashboard.exa.ai design guide](/share/dashboard.exa.ai-design) - [dosu.dev design guide](/share/dosu.dev-design) - [exa.ai design guide](/share/exa.ai-design) - [firehose.com design guide](/share/firehose.com-design) - [gemini.google.com design guide](/share/gemini.google.com-design) - [getdesign.md design guide](/share/getdesign.md-design) - [getmesa.dev design guide](/share/getmesa.dev-design) - [grokipedia.com design guide](/share/grokipedia.com-design) - [hypen.space design guide](/share/hypen.space-design) - [insforge.dev design guide](/share/insforge.dev-design) - [jsfiddle.net design guide](/share/jsfiddle.net-design) - [lit.dev design guide](/share/lit.dev-design) - [liveblocks.io design guide](/share/liveblocks.io-design) - [meodai.github.io design guide](/share/meodai.github.io-design) - [mojolang.org design guide](/share/mojolang.org-design) - [neuform.ai design guide](/share/neuform.ai-design) - [new.email design guide](/share/new.email-design) - [notion.com design guide](/share/notion.com-design) - [ollama.com design guide](/share/ollama.com-design) - [openai.com design guide](/share/openai.com-design) - [openknowledge.ai design guide](/share/openknowledge.ai-design) - [opper.ai design guide](/share/opper.ai-design) - [photon.codes design guide](/share/photon.codes-design) - [plexui.com design guide](/share/plexui.com-design) - [primeintellect.ai design guide](/share/primeintellect.ai-design) - [rerun.io design guide](/share/rerun.io-design) - [styles.refero.design design guide](/share/styles.refero.design-design) - [temporal.io design guide](/share/temporal.io-design) - [together.ai design guide](/share/together.ai-design) - [workers.cloudflare.com design guide](/share/workers.cloudflare.com-design) - [afterquery.com design guide](/share/afterquery.com-design) - [aihero.dev design guide](/share/aihero.dev-design) - [diabrowser.com design guide](/share/diabrowser.com-design) - [zcode.z.ai design guide](/share/zcode.z.ai-design)