Supabase

Difficulty:
Company
supabase

Effect Preview

Style Description

Open-source Firebase alternative. Dark teal theme

Tags

SupabaseBackend

Prompt Template

Base Template
Design a Supabase-inspired interface. - Dark-mode-native: near-black backgrounds (#0f0f0f, #171717) — never pure black; - Emerald green brand accent (#3ecf8e, #00c573) used sparingly as identity marker; - Circular font — geometric sans-serif with rounded terminals; - Source Code Pro for uppercase technical labels (1.2px letter-spacing); - HSL-based color token system with alpha channels for translucent layering. Colors: #3ecf8e, #00c573, #0f0f0f, #171717 with #3ecf8e accent. Typography: Circular.

Variant Prompts

📱 Mobile
Design a mobile app with Supabase aesthetics. Use Supabase color identity with #3ecf8e accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Supabase style. Use Supabase color identity with #3ecf8e accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Supabase design language. Use Supabase color identity with #3ecf8e accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Supabase visual identity. Use Supabase color identity with #3ecf8e accents. Compelling, conversion-focused.

Usage Examples

Supabase App

Web App
Build a web app with Supabase design language and #3ecf8e color system.

Supabase Dashboard

Dashboard
Create a dashboard using Supabase style with data visualization and Circular typography.

✅ Best For

  • Backend
  • Brand-consistent interfaces
  • Modern web applications

✅ Avoid For

  • Unrelated design aesthetics
  • Different brand guidelines