# How firebase.studio is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/firebase.studio-design)

Last updated: 2026-08-10

## Captured pages

[![Footer section with Firebase Studio logo, four-column link grid, and gradient border on black canvas](https://pin.fontofweb.com/2252?format=jpg)](https://design.withfudge.com/share/pin-2252)

[Footer section with Firebase Studio logo, four-column link grid, and gradient border on black canvas](https://design.withfudge.com/share/pin-2252)

[![Hero banner with orange-red gradient background, white display headline, and white pill button](https://pin.fontofweb.com/2251?format=jpg)](https://design.withfudge.com/share/pin-2251)

[Hero banner with orange-red gradient background, white display headline, and white pill button](https://design.withfudge.com/share/pin-2251)

[![Feature section with dark canvas, three UI mockup cards, orange pill button, and gradient glow at bottom](https://pin.fontofweb.com/2250?format=jpg)](https://design.withfudge.com/share/pin-2250)

[Feature section with dark canvas, three UI mockup cards, orange pill button, and gradient glow at bottom](https://design.withfudge.com/share/pin-2250)

[![Platform showcase with Android and Web tabs, device mockup, and right-aligned text content on dark surface](https://pin.fontofweb.com/2249?format=jpg)](https://design.withfudge.com/share/pin-2249)

[Platform showcase with Android and Web tabs, device mockup, and right-aligned text content on dark surface](https://design.withfudge.com/share/pin-2249)

## Overview

Firebase Studio presents a developer-focused landing experience built on a near-black canvas with high-contrast white typography and vibrant warm gradients. The visual system prioritizes clarity and technical credibility: generous whitespace, floating UI mockups that demonstrate platform capabilities, and restrained use of color reserved for calls-to-action and atmospheric effects. The design moves between two dominant modes—immersive gradient hero sections that fill the viewport with orange-red warmth, and deep black feature sections where product screenshots and code-like interfaces appear to hover in space. This contrast creates rhythm across the page while maintaining a cohesive dark-mode identity. The overall impression is of a sophisticated, Google-aligned developer tool that balances marketing energy with engineering substance.

## Colors

The color system operates on a dark-first principle with a vibrant warm accent palette and careful typographic contrast hierarchy.

| token | value | use |
|---|---|---|
| canvas | `#000000` | Primary page background, deepest surface layer |
| surface | `#1a1a1a` | Elevated cards, mockup containers, tab panels |
| ink | `#ffffff` | Primary headings, body text on dark, button text on dark buttons |
| muted-ink | `#a0a0a0` | Secondary body text, footer links, descriptive copy |
| action | `#ff9500` | Primary CTA buttons, active states, key highlights |
| action-hover | `#ffb84d` | Lighter orange for hover states on action elements |
| gradient-start | `#ff3b30` | Warm red gradient origin for hero and atmospheric effects |
| gradient-mid | `#ff9500` | Central orange gradient value, bridges red to yellow |
| gradient-end | `#ffcc00` | Yellow gradient terminus for warm atmospheric glows |
| success | `#34c759` | Positive status indicators, deployment confirmations |
| border-subtle | `#333333` | Card outlines, divider lines, container boundaries |

The interface employs two distinct background modes. The primary mode is pure black canvas with white and gray typography, used for feature sections, platform showcases, and the footer. The secondary mode is a full-bleed warm gradient spanning from deep red through orange to golden yellow, reserved for the hero banner and atmospheric glow effects at section boundaries. This gradient functions as both background and brand signature, creating visual heat against the cool darkness of the surrounding content. White serves as the dominant text color with two tiers: full white for headlines and primary actions, and medium gray for supporting descriptions and footer navigation. The orange action color appears exclusively on interactive elements, creating a clear hierarchy where color signals clickability.

## Typography

The type system pairs a clean geometric sans-serif for all marketing and interface text with a monospace face for technical labels and status indicators. Google Sans provides the primary voice with weights ranging from regular body text to bold display headlines. Jet Brains Mono appears in uppercase labels for section categorization and technical metadata, lending an engineering authenticity to the developer-facing content.

| token | family | size | weight | leading | tracking | use |
|---|---|---:|---:|---:|---:|---|
| hero-display | Google Sans | 4rem | 700 | 1.1 | -0.02em | Hero banner headline |
| section-display | Google Sans | 3rem | 700 | 1.15 | -0.01em | Feature section headlines |
| body-large | Google Sans | 1.25rem | 400 | 1.5 | 0 | Hero descriptions, introductory paragraphs |
| body | Google Sans | 1rem | 400 | 1.6 | 0 | Standard paragraphs, feature descriptions |
| label | Jet Brains Mono | 0.75rem | 400 | 1.4 | 0.05em | Section category tags, status labels |
| navigation | Google Sans | 0.875rem | 500 | 1.4 | 0 | Header links, footer category headers |
| button | Google Sans | 0.875rem | 600 | 1 | 0 | CTA button text |

Display sizes use tight negative tracking for a modern, compact headline presence. The hero display at 4rem commands attention against gradient backgrounds without feeling oversized. Body text maintains generous line height for readability on dark backgrounds. The label token uses uppercase transformation and positive tracking for technical categorization, creating clear visual separation from marketing prose. Jet Brains Mono is attributed to designers Philipp Nurullin and Konstantin Bulenkov, vendor Jet Brains. Google Sans is attributed to vendor Google Inc. Verify licensing for these families before production use.

## Layout

The page structure follows a centered single-column rhythm with full-bleed atmospheric sections. Content maxes out at approximately 75rem with consistent side gutters. Sections stack vertically with substantial breathing room between them.

The hero section occupies full viewport width and height with centered content: a large display headline, supporting paragraph constrained to readable measure, and a single prominent call-to-action. Below this, feature sections alternate between dark canvas with floating mockups and gradient-washed transition zones. The deployment and monitoring section demonstrates a three-column card layout where UI mockups appear as elevated surfaces with subtle borders, connected by faint horizontal lines suggesting workflow progression.

The platform optimization section introduces an asymmetrical two-column composition: a large device mockup with platform tabs occupies the left portion, while right-aligned text content with a section label and call-to-action balances the visual weight. This breaks the centered rhythm deliberately to showcase product interface depth.

Footer content returns to a structured grid—four columns of navigation links beneath the Firebase Studio lockup, with legal links and attribution separated by a subtle horizontal rule. The footer sits within a rounded container that echoes the card treatment of feature mockups, creating visual closure at the page base.

Vertical spacing between major sections measures approximately 6rem, with internal component spacing derived from a 0.25rem base unit. Card padding and internal gutters use 1.5rem as a standard comfortable measure.

## Visual language

The visual identity balances Google's material warmth with developer-tool precision. Rounded corners appear throughout—cards, buttons, and containers share a soft 1rem to 1.5rem radius that prevents the dark interface from feeling harsh. Buttons use full pill shapes with 9999px radius, creating friendly, approachable targets against technical content.

Gradient effects serve as the primary brand expression beyond solid color. The hero gradient flows diagonally from deep red through orange to yellow, creating energy and movement. A secondary gradient application appears at section boundaries where warm colors blur and fade into the black canvas, producing an atmospheric glow that suggests heat and activity beneath the surface.

UI mockups within feature cards employ a nested depth strategy: dark gray surfaces with slightly lighter content areas, thin border outlines, and occasional accent colors like blue for interactive elements within the mockup itself. These nested interfaces create visual interest without competing with the page's primary content hierarchy.

The status and label system uses small uppercase monospace text in rounded pill containers, giving technical metadata the appearance of tags or badges. Success states employ a bright green that stands out against dark surfaces without clashing with the warm orange accent palette.

Shadows are minimal and atmospheric rather than structural—glow effects emanate from gradient zones rather than casting directional shadows from cards. This maintains the flat, modern aesthetic while adding dimensional depth through color rather than geometry.

## Components

### Primary action button

- **Anatomy**: Text label centered within a fully rounded pill container
- **Surface**: Solid orange background (`{colors.action}`) with black text, or solid white background with black text for secondary variant
- **Typography**: `{typography.button}` — 0.875rem, weight 600
- **Shape**: Full pill with `{rounded.button}`
- **Spacing**: 0.875rem vertical padding, 2rem horizontal padding
- **Composition**: Centered within its container, often appearing singly below descriptive text
- **Variants**: Orange primary on dark sections; white secondary on gradient hero sections

### Feature card

- **Anatomy**: Rounded rectangular container holding UI mockup imagery, sometimes with status labels or internal interface elements
- **Surface**: `{colors.surface}` background with `{colors.border-subtle}` 1px border
- **Shape**: `{rounded.card}` corners
- **Spacing**: Internal padding approximately 1.5rem, cards spaced with gap between siblings
- **Composition**: Arranged horizontally in groups of three for workflow demonstration, connected by faint horizontal lines suggesting sequence

### Section label pill

- **Anatomy**: Uppercase text within a rounded pill container
- **Surface**: `{colors.surface}` background, `{colors.muted-ink}` text
- **Typography**: `{typography.label}` — Jet Brains Mono, 0.75rem, tracked
- **Shape**: `{rounded.label-pill}`
- **Spacing**: 0.5rem vertical, 1rem horizontal padding
- **Composition**: Centered above section headlines as category indicator

### Platform tab switcher

- **Anatomy**: Horizontal tab bar with icon, label, and close control; active tab shows underline accent
- **Surface**: `{colors.surface}` background, active tab with subtle top border accent
- **Typography**: `{typography.navigation}` for tab labels
- **Shape**: Rectangular tabs with no radius, contained within rounded parent
- **Composition**: Positioned above device mockup content, allowing platform switching

### Footer navigation grid

- **Anatomy**: Four-column grid of categorized link lists beneath brand lockup
- **Surface**: Transparent on black canvas
- **Typography**: Category headers use `{typography.navigation}` in white; links use same size in `{colors.muted-ink}`
- **Spacing**: Generous vertical padding, column gaps approximately 1.5rem
- **Composition**: Left-aligned category headers with stacked link lists below

### Device mockup frame

- **Anatomy**: Rounded rectangle suggesting phone or tablet bezel, containing screenshot or interface preview
- **Surface**: Dark gray frame with subtle highlight at top edge suggesting screen reflection
- **Shape**: `{rounded.panel}` corners on outer container
- **Composition**: Positioned left of text content in asymmetric layouts, scaled to dominate visual field without overwhelming

## Responsive behavior

The layout should maintain its centered single-column structure on narrower viewports, with feature card grids collapsing from three columns to a single stacked column. The hero headline should scale down proportionally, likely to `{typography.section-display}` size on tablet and a custom intermediate size on mobile. Platform mockup sections should reverse to stack vertically with the device image above text content.

The gradient hero section should remain full-bleed at all widths, with text padding increasing to maintain readable line lengths. Footer navigation should collapse from four columns to two, then to a single stacked list on the narrowest screens. Button touch targets should maintain minimum 44px height regardless of scaling.

## Practical implementation guidance

### Preserve
- The stark contrast between pure black canvas and white typography—this is the system's foundational character
- The warm gradient as a full-bleed atmospheric element rather than a contained decorative accent
- Jet Brains Mono for technical labels and status indicators; this engineering voice distinguishes the brand
- The rounded pill shape for all primary actions; it softens the technical content
- Nested UI mockups with subtle borders to demonstrate product depth without overwhelming

### Avoid
- Introducing additional accent colors beyond the orange-red-yellow gradient family and green success states
- Using the gradient as a text background without sufficient contrast protection
- Sharp rectangular buttons that contradict the system's rounded vocabulary
- Light mode as a default—the dark canvas is integral to the brand identity
- Crowding feature cards without the connecting visual elements that suggest workflow

### Recommended build order
1. Establish the black canvas and white typography hierarchy with Google Sans
2. Implement the gradient hero section with centered content and pill button
3. Build the feature card component with surface color, border, and rounded corners
4. Add the section label pill with Jet Brains Mono uppercase styling
5. Create the three-card workflow layout with connecting elements
6. Implement the asymmetric platform showcase with tab switcher
7. Construct the footer grid and final gradient border treatment

### Accessibility
- Ensure white text on gradient backgrounds maintains WCAG AA contrast; the orange mid-tones may require text-shadow or positioned dark scrims
- Provide focus indicators that are visible against both black and gradient surfaces
- Respect reduced-motion preferences for any gradient animations or parallax effects
- Use semantic heading hierarchy with a single h1 in the hero section
- Ensure interactive mockup elements within cards are not focusable if decorative

## Scope note

This guide covers the Firebase Studio marketing landing page visible in the supplied imagery, including the hero banner, feature sections with deployment mockups, platform showcase with device preview, and footer navigation. Measurements are practical adaptation targets. Unseen interior pages, dashboard interfaces, documentation, mobile-specific layouts, motion behavior, and form interactions are not represented. Hover, focus, loading, and error states should be designed to complement the established visual system.

## More website design guides

[Browse website design guides by pattern and website](/design-guides).