Home
DESIGN.mdStar on GitHub

Firebase

Make your app the best it can be with Firebase and generative AI — Google's platform to build, run, and grow apps and games that users love.

Cloud Firestore Authentication Cloud Functions App Hosting Crashlytics Firebase AI Logic
Colors
Primary — the flame
fb-amber#FFCA28Primary highlight
fb-yellow#FFC400Flame top
fb-orange#FF9100Flame mid, CTA hover
fb-orange-deep#F57C00Deep orange
fb-coral#FF8A65Soft coral accent
fb-red#DD2C00Flame base, danger
Secondary — Google Blue
g-blue#1A73E8Links, primary buttons
g-blue-bright#4285F4Focus, selected
g-blue-light#039BE5Info, highlight
Surfaces
bg#FFFFFFCards, panels
bg2#ECEFF1Page background
g-dark#202124Text, dark surface
border#CFD8DCBorders, dividers
Text & semantic
text2#5F6368Secondary text
success#188038Deployed, healthy
warning#F9AB00Quota, attention
danger#DD2C00Errors, delete
Typography — Google Sans (≈ DM Sans) · Roboto · Roboto Mono
display-2xl
DM Sans · 700
Firebase
52px700
display-xl
DM Sans · 600
Build apps users love
32px600
display-md
DM Sans · 500
Easy to integrate on iOS, Android, and the Web
22px500
text-lg
Roboto · 400
Integrate Firebase with Gemini and the latest AI from Google.
16px400
text-sm
Roboto · 400
Standard body text and console UI copy.
13px400
ui-mono
Roboto Mono · 400
users/uid_8f3a2b/displayName
12pxmono
Signature — Cloud Firestore
Collections
Documents
Fields
Components
Buttons
Field-type chips & status
string number boolean timestamp map
● Deployed ● Building ● Failed
Firebase products
Fs
Cloud Firestore
Flexible, scalable NoSQL cloud database to store and sync data.
Au
Authentication
Drop-in sign-in with email, phone, and social providers.
Fn
Cloud Functions
Run backend code in response to events, without servers.
Ah
App Hosting
Git-based hosting for modern full-stack web apps.
Cr
Crashlytics
Real-time crash reporting to track, prioritize, and fix stability issues.
Ai
Firebase AI Logic
Call Gemini and Imagen models directly from your app.
Input
Radius (Material)
4px
8px
12px
Guardrails
DO
Keep the flame a warm gradient — yellow #FFC400 → orange #FF9100 → red #DD2C00
Use Google Blue #1A73E8 for links and interactive elements
Sit inside Material: 4px base radius, Google grays, Roboto for UI
Use #202124 for text and dark surfaces — never pure black
Pair every Firestore field with its type chip
DON'T
Recolor the flame or flatten it to a single hue — it's a three-color mark
Use flame red #DD2C00 for links — links are Google Blue
Set display headings in Roboto Mono or the body font
Use pure black #000 — Google's neutral is #202124
Fabricate metrics — use real product names and field types