Draftbit Brand Identity

A complete profile of Draftbit's visual system — colors, typography, components, and personality — extracted from https://draftbit.com. Built for designers, agents, and AI tools.

• Page: https://characterquilt.com/branding/draftbit
• Machine-readable JSON: https://characterquilt.com/branding/draftbit.json
• Per-page llms.txt: https://characterquilt.com/branding/draftbit/llms.txt

Quick Facts

Color Palette

• primary: #4F39F6
• secondary: #64748B
• accent: #4F39F6
• background: #F8FAFC
• textPrimary: #0F172A
• link: #0F172A

Typography

• primary: DM Sans — https://fonts.google.com/specimen/DM+Sans
• heading: DM Sans — https://fonts.google.com/specimen/DM+Sans

Visual Assets

• Logo: https://draftbit.com/draftbit-logo-text.svg
• Favicon: https://draftbit.com/favicon.ico?v=20260310
• Social card (og:image): https://draftbit.com/og-image.jpg

UI Components

• input: background=transparent, textColor=#0F172A, borderColor=null, borderRadius=0px, shadow=rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px
• buttonPrimary: background=#4F39F6, textColor=#FAFAFA, borderRadius=6px, shadow=none
• buttonSecondary: background=#F8FAFC, textColor=#0F172A, borderColor=#CBD5E1, borderRadius=6px, shadow=rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 3px 0px

Brand Personality

Tone: modern · Energy: high · Audience: developers and tech-savvy entrepreneurs

Draftbit Brand in the Wild

Real-world brand assets — ads, campaigns, marketing materials.

• Supabase
  • Image: https://files.readme.io/2b1332a-connect-supabase-to-draftbit-opengraph.png
  • Source: https://docs.draftbit.com/docs/supabase
• Blog — App Development, AI, and Product Strategy | Draftbit
  • Image: https://img.draftbit.com/blog/why-mobile-app-startup-founders-should-consider-no-code-development-tools/67cece42a5ffe5a9df3c1500_why-mobile-app-startup-founders-should-consider-no-code-development-tools-and-services.png
  • Source: https://draftbit.com/blog/
• 11 Best No-Code and Low-Code Back-Ends for 2021 | Draftbit
  • Image: https://img.draftbit.com/blog/11-best-no-code-and-low-code-backends-for-2021/67cece42a5ffe5a9df3c1293_11-best-no-code-low-code-back-ends-for-2021-draftbit.png
  • Source: https://draftbit.com/blog/11-best-no-code-and-low-code-backends-for-2021/
• Blog — App Development, AI, and Product Strategy | Draftbit
  • Image: https://img.draftbit.com/blog/a-beginners-comparison-of-react-native-and-flutter-why-you-should-choose-react-native/67cece42a5ffe5a9df3c1521_a-beginners-comparison-of-react-native-and-flutter-why-you-should-choose-react-native.png
  • Source: https://draftbit.com/blog/
• Navigating the Rough Seas to Find Product-Market Fit for Your App
  • Image: https://cdn.prod.website-files.com/67cece42a5ffe5a9df3c0b74/67cece42a5ffe5a9df3c12a7_how-to-create-a-native-mobile-app-for-your-supabase-back-end-draftbit.png
  • Source: https://draftbit.com/blog/navigating-the-rough-seas-to-find-product-market-fit-for-your-app
• Blog — App Development, AI, and Product Strategy | Draftbit
  • Image: https://img.draftbit.com/blog/unleashing-the-power-of-low-code-app-builders-for-internal-processes/67cece42a5ffe5a9df3c1519_Unleashing-the-Power-of-Low-Code-App-Builders-for-Internal-Processes.jpg
  • Source: https://draftbit.com/blog/

Working with these fonts

Not found on Google Fonts? CharacterQuilt.com suggests this flow that can help.