Ember Red
#fe2c02Saturated accent for highlight cards and feature panels — the single chromatic punctuation in an otherwise monochrome system, evokes urgency and warmth without aggression
Giga
giga.aiWebsite preview
The design language
Giga is a cinematic, dark-mode enterprise brand that reads like a luxury watch ad crossed with an AI lab. The canvas is near-black (#0f0d0d) and the type is whisper-thin — emilioDisplay at weight 300 sets a 48–66px headline that floats above full-bleed atmospheric photography with the confidence of a film title card. The interface is restrained and quiet: pill-shaped controls, glass-effect badges, monochrome logo strips, and a single ember-red accent (#fe2c02) that acts as punctuation rather than branding chrome. Every surface feels like it was pulled from a darkened showroom — matte blacks, hairline white-alpha borders, soft 16px card corners, and 9999px button radii that read as physical, not digital. Density is comfortable but the negative space is architectural, not empty: a section gap feels like turning a page in a coffee-table book.
Color palette
brand
neutral
Obsidian
#000000Deepest background, hero image overlay, footer canvas, shadow base — pure black creates cinematic depth behind atmospheric photography
Onyx
#0f0d0dPrimary page canvas (--bg), card surface, default button fill — the warm-tinted near-black that grounds the entire interface
Charcoal
#171615Raised surface, dark button background (--button-dark-bg), elevated cards — one step lighter than the canvas to signal depth without drawing attention
Graphite
#262828Stepped feature panels, image containers, secondary surface layer — visible in side-by-side comparison modules
Void
#050404Near-black used in box-shadow tints and image depth effects — effectively black but with a barely-warm undertone matching Onyx
Paper
#ffffffPrimary text, icons, light button text, filled button surface (--primary) — pure white on near-black achieves 19:1 contrast, the highest readable tier
Ash
#878686Secondary body text, descriptive copy, helper labels — sits at ~50% luminance, legible without competing with headlines
Smoke
#6f6e6eTertiary text, decorative fills, disabled states, muted metadata — low-contrast informational layer
Fog
#939292Mid-tone body text, inline labels, muted paragraph text — the readable middle gray for longer descriptions
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
66px · 300 · 1.2 · -1.98px trackingThe quick brown fox jumps
heading-lg
60px · 300 · 1.2 · -1.8px trackingThe quick brown fox jumps
heading
48px · 300 · 1.3 · -0.96px trackingThe quick brown fox jumps
text-44
44px · 400 · 1The quick brown fox jumps
heading-sm
30px · 400 · 1.33 · 0px trackingThe quick brown fox jumps
subheading
22px · 500 · 1.5 · 0px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · 0px trackingThe quick brown fox jumps
body-sm
14px · 500 · 1.43 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
gigaSansText
- Weights
- 400, 500
- Sizes
- 12px, 14px, 16px
- Line height
- 1.43-1.50
- Fallback
- Inter, Geist, or Söhne at weights 400/500.
Body text, buttons, navigation, links — the workhorse. Weight 400 for paragraphs, 500 for button labels and emphasis. 16px at 1.5 line-height is the readable default; 14px at 1.43 handles dense UI chrome.
Additional typeface
emilioDisplay
- Weights
- 300
- Sizes
- 48px, 60px, 66px
- Line height
- 1.20-1.30
- Letter spacing
- -0.0300em, -0.0200em
- Fallback
- Canela, Tiempos Headline, or PP Editorial New at weight 300. Fallback: Cormorant Garamond Light.
Display headlines — the signature voice. Ultra-light weight at 48-66px with tight -0.02em to -0.03em tracking creates a film-title-card feel. Most enterprise brands shout with 700-weight headlines; Giga whispers with 300, which is the entire personality in one choice.
Additional typeface
gigaSansDisplay
- Weights
- 400, 500
- Sizes
- 22px, 30px
- Line height
- 1.00-1.50
- Fallback
- Same as gigaSansText — Inter or Geist at 400/500.
Section subheadings, feature card titles, prominent UI labels — bridges the gap between whisper-thin display and body text. Weight 500 at 22px carries mid-importance statements.
Additional typeface
interText
- Weights
- 400
- Sizes
- 14px, 16px, 44px
- Line height
- 1.00-1.57
- Letter spacing
- -0.0300em
- Fallback
- Inter at weight 400.
Large numerical and functional headings — 44px with -0.03em tracking for stat callouts and mid-level headings. Acts as a contrast voice to the emilioDisplay serif displays.
Additional typeface
geistMono
- Weights
- 400, 500
- Sizes
- 11px, 12px, 14px
- Line height
- 1.20-2.18
- Letter spacing
- 0.0070em, 0.0090em
- Fallback
- Geist Mono, JetBrains Mono, or IBM Plex Mono.
Micro-labels, badges, tags, version markers, uppercase metadata — always uppercase with +0.007em to +0.009em tracking. The 11-12px range with 2.0+ line-height creates spacious technical annotations.
Additional typeface
interDisplay
- Weights
- 500
- Sizes
- 16px
- Line height
- 1.5
interDisplay — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1280px
- Section gap
- 80-120px
- Card padding
- 20px
- Element gap
- 20px
Border radius
cards
16pxchips
6pxinput
6pxbadges
9999pximages
12pxbuttons
9999pxSpacing scale
1px4px6px8px9px10px12px14px16px20px22px24px30px32px40px44px48px50px60px64px65px90px96px112px137pxGuidelines
Do
- Use weight 300 emilioDisplay at 48-66px for all primary headlines — the whisper-thin display is the brand's signature voice
- Apply 9999px border-radius to all buttons, badges, tags, and interactive pills — nothing rectangular should be clickable
- Set page background to #0f0d0d (Onyx) as default; use #000000 only for full-bleed photography containers and footer
- Use #ffffff for all primary text and icons on dark surfaces — the 19:1 contrast is the readable standard, don't step down from it
- Place uppercase 11-12px geistMono labels with +0.009em tracking above section titles as technical eyebrows
- Use Ember Red (#fe2c02) only on a single accent card per viewport — it is punctuation, not chrome
- Set body text at 16px gigaSansText weight 400 with 1.5 line-height for all paragraphs and descriptive copy
Don’t
- Don't use weight 600+ for headlines — the system whispers at 300, shouting breaks the entire atmosphere
- Don't add drop shadows to cards — depth comes from surface color stepping (#0f0d0d → #171615 → #262828), not elevation
- Don't use rectangular buttons or sharp corners on any interactive element — all controls are pills
- Don't apply the Ember Red accent to more than one element per section — overuse destroys its impact
- Don't use #000000 as page background — use #0f0d0d; pure black is reserved for photographic backdrops
- Don't use chromatic colors for text — white and grays only for typography; color is surface-only
- Don't mix serif and sans at the same hierarchy level — emilioDisplay is for display, gigaSansText for everything else, never both at body size
Components
Pill Button (Dark Fill)
Primary navigation and CTA surface9999px border-radius, 9px vertical / 20px horizontal padding, background #171615, text #ffffff, 1px border with rgba(255,255,255,0.1) subtle stroke. Font: gigaSansText 14px weight 500. Used for 'Sign in' and exploratory action buttons.
Pill Button (Light Fill)
High-emphasis CTA — the only solid-white button in the system9999px border-radius, 9px/20px padding, background #ffffff, text #000000, no border. Font: gigaSansText 14px weight 500. 'See a demo' uses this variant — white-on-dark creates maximum contrast and signals the single most important action per viewport.
Ghost Navigation Button
Minimal nav link styling9999px radius, 0px vertical / 12-22px horizontal padding, transparent background, white text. Font: gigaSansText 14px weight 400. Used for 'Product' and 'Company' nav items with dropdown chevrons.
Glass Badge Pill
Announcement chip floating over photography9999px radius, translucent dark fill (oklab black at ~20% opacity), 1px white-alpha border. Contains a small dot indicator + uppercase 11-12px geistMono text. Example: '● GIGA LAUNCHES SCOUT'. Functions as a notification/launch marker over hero imagery.
Translucent Card
Content card floating over dark/photographic backgrounds16px border-radius, 20px padding, background oklab(0 0 0 / 0.2) — nearly invisible on dark, visible over imagery. 1px hairline border at oklch(100% 0 0 / 0.05-0.08). No shadow — the glass effect comes from translucency alone. Used for video preview cards, feature overlays.
Solid Card
High-contrast content module on canvas16px border-radius, 20px padding, background #fe2c02 (Ember Red) or #0f0d0d. No shadow. The Ember Red variant appears once as a high-impact accent card — the only chromatic surface in the system.
Video Preview Card
Floating media player with metadata6px border-radius on the thumbnail image, 16px on the card container. Dark card background, small geistMono timestamp label, white body text description. Positioned bottom-left as a persistent engagement element over the hero.
Logo Strip
Social proof band — partner/customer logosFull-width band, single row of monochrome white logos at ~60% opacity, evenly spaced with ~80px gaps. Logos are grayscale (filter: grayscale(1), brightness(0.92)). No card containers, no borders — logos float directly on the dark canvas.
Atmospheric Hero Section
Full-bleed cinematic openingFull-viewport-height dark photography (mountain/landscape) with a subtle linear gradient overlay (black 1% → oklch(0.163 0.003 30) 100%) darkening the bottom. Centered text stack: glass badge → 48-66px emilioDisplay weight 300 headline → 16px body subtext → pill button. No card containers, no visible grid lines.
Stepped Feature Panel
Side-by-side comparison or feature showcase moduleBackground #262828 (Graphite) — visibly lighter than the Onyx canvas, creating a raised panel effect without shadows. 16px or 20px radius. Contains image+text pairs arranged in a 2-column grid with 20px gaps.
Uppercase Mono Label
Section eyebrow / category tag11-12px geistMono weight 400, uppercase, letter-spacing +0.007-0.009em, line-height 2.0+. White or Ash color. Appears above section titles as a technical-classification marker (e.g., 'CAPABILITIES', 'INTEGRATIONS').
Stat Callout
Large numerical proof point44px interText weight 400, white, line-height 1.0, letter-spacing -0.03em. Paired with 14px gigaSansText descriptor below. Used for percentage metrics like '90%'. The tight tracking on 44px numericals creates a condensed, authoritative display.
Surfaces & elevation
Level 0
Obsidian
#000000Deepest background — full-bleed photography backdrops, footer base, shadow sink
Level 1
Onyx
#0f0d0dPrimary page canvas — the warm-tinted near-black that everything sits on
Level 2
Charcoal
#171615Raised cards, dark button fills, elevated content blocks
Level 3
Graphite
#262828Stepped panels, comparison modules, image containers
Level 4
Glass Overlay
#00000033Translucent card surfaces over photography — the frosted-glass effect for badges and floating UI
The system deliberately avoids UI shadows. Depth is communicated through surface color stepping (Onyx #0f0d0d → Charcoal #171615 → Graphite #262828) and translucency (oklab black at 2-20% opacity) rather than box-shadow elevation. The only shadow present is on photographic image containers, where it creates a subtle frame around full-bleed media — not on UI components. Cards sit flat against the canvas, distinguished only by their lighter surface color or frosted-glass translucency. This is a design that trusts color over light to communicate hierarchy.
Atmospheric Image Container
rgba(0, 0, 0, 0.7) 0px 12px 32px -16px
Layout & imagery
Layout
Full-bleed sections with no visible max-width container on the hero — the atmospheric photography and centered headline stack use the full viewport. Below the hero, content shifts to a centered max-width layout (~1280px) with generous 80-120px section gaps. The hero pattern is: full-viewport dark photography + centered glass badge + 48-66px whisper-thin headline + 16px subtext + single pill button + floating video card in bottom-left + monochrome logo strip across the bottom. Section rhythm alternates between full-width dark bands and contained content blocks. The overall page model is cinematic-to-editorial: one dramatic opening shot, then measured product storytelling in a comfortable-density grid. Navigation is a minimal floating bar at the top with logo left, two dropdown links center-left, sign-in and white CTA pill right. No sidebar, no mega-menu — the nav is deliberately sparse to let the hero breathe.
Imagery
Full-bleed atmospheric photography dominates the hero — wide landscape shots of mountains, forests, and horizons captured at dusk or dawn with low contrast and desaturated color. Images receive a subtle linear gradient overlay (black to warm-dark-oklch) darkening the bottom 40% to maintain text legibility. No lifestyle photography, no product shots, no people — the brand speaks through landscape metaphor. Below the hero, imagery shifts to contained product screenshots and UI mockups with 6-12px corner radii, always on dark backgrounds. Icon style is minimal and line-based with 1px strokes. The partner logo strip uses grayscale filters (grayscale(1), brightness(0.92)) on white logos. The visual density is image-heavy at the top (hero) and text-dominant below, creating a cinematic opening that resolves into a clean enterprise product page.
Design notes
Agent Guide
**Quick Color Reference** - text: #ffffff - background: #0f0d0d - border: rgba(255,255,255,0.08) - accent: #fe2c02 - muted text: #878686 - primary action: #0f0d0d (filled action) **3-5 Example Component Prompts** 1. **Atmospheric Hero Section**: Full-viewport dark landscape photo (mountains at dusk) as background with linear-gradient(rgb(0,0,0) 1%, oklch(0.163 0.003 30) 100%) overlay darkening the bottom. Centered glass badge pill: 9999px radius, oklab(0 0 0 / 0.2) fill, 1px white-alpha border, 11px geistMono uppercase white text with a small dot prefix. Below: 60px emilioDisplay weight 300 headline, #ffffff, letter-spacing -1.8px, line-height 1.2. Subtext: 16px gigaSansText weight 400, #878686. White pill button: 9999px radius, #ffffff background, #000000 text, 14px gigaSansText weight 500, 9px/20px padding. 2. **Feature Section Card**: 16px radius, 20px padding, #171615 (Charcoal) background on #0f0d0d canvas. 30px gigaSansDisplay weight 400 heading in #ffffff. 16px gigaSansText weight 400 body in #878686. Dark pill button at bottom: 9999px radius, #171615 fill, #ffffff text, 1px rgba(255,255,255,0.1) border. 3. **Logo Trust Strip**: Full-width band on #0f0d0d canvas. 6 partner logos in a single row, white, each at ~60% opacity, filter: grayscale(1) brightness(0.92). Evenly spaced with ~80px gap, vertically centered. No card containers or borders. 4. **Stat Callout Block**: 44px interText weight 400, #ffffff, letter-spacing -1.32px, line-height 1.0 for the number. Below: 14px gigaSansText weight 400, #878686 for the descriptor. No card — sits directly on canvas with 20px element gap. 5. **Translucent Overlay Card**: 16px radius, 20px padding, background oklab(0 0 0 / 0.2), 1px border oklch(100% 0 0 / 0.05). Over a dark photograph. Contains: 12px geistMono uppercase label in #ffffff, 22px gigaSansDisplay weight 500 heading in #ffffff, 14px gigaSansText body in #878686.
Similar brands
Linear
Same dark-mode enterprise aesthetic with monochrome palette, pill-shaped controls, and whisper-thin display typography over full-bleed dark backgrounds
Vercel
Similar ultra-minimal dark canvas with hairline borders, restrained accent color usage, and generous negative space that lets large display type dominate
Arc Browser
Shared cinematic dark-mode treatment with atmospheric hero photography, glass-effect floating UI, and pill-shaped navigation controls
Nothing Phone
Same editorial-product hybrid — full-bleed landscape photography above the fold resolving into a clean monochrome product grid, with a single accent color for emphasis
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
