---
title: "Giga design system"
variant: extended
source: https://giga.ai/
captured_at: 2026-10-12
theme: dark
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/giga-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Giga · Design System

> Quiet black canvas, vivid gradients, pixel-led storytelling.

**Theme:** dark · **Industry:** ai · **Source:** https://giga.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Giga pairs a near-black canvas with pixel-inspired headlines and restrained interface details. A vivid atmospheric hero gives way to spacious, product-led sections and understated customer logos.

## North star

Keep the page grounded in black and precise product typography, reserving saturated color for atmospheric imagery and clear actions.

## Overview

The page uses #000000 as its defining canvas, letting white and cool pale text carry navigation, headlines, and product explanations with sharp contrast. The opening hero is the visual exception: a broad, blurred spectrum of warm orange and red moving into blue and violet, presented as background artwork rather than a reusable UI palette. Pixel-style display lettering makes the hero and selected section headings feel distinctive, while Inter and Geist keep longer copy and interface labels clean. Layout is editorial and open, with left-aligned section introductions, generous separation between content blocks, and product UI or image panels placed beside explanatory copy. Customer logos sit quietly on the dark field. Cards use subtle charcoal fills, fine dark borders, and modest shadows; orange is reserved for conspicuous actions such as the demo CTA. The overall effect is cinematic but controlled: rich visual color in the hero, restrained monochrome structure below.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Black | `#000000` | `--color-canvas-black` | brand | Dominant page canvas and background for the long-form product sections. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Primary navigation, headings, links, and high-contrast interface text. |
| Cool Mist | `#e8edef` | `--color-cool-mist` | neutral | Pale heading and body copy, including text within dark product panels. |
| Soft Graphite | `#9fa2a4` | `--color-soft-graphite` | semantic | Muted supporting text against the black page canvas. |
| Quiet Silver | `#acb0b1` | `--color-quiet-silver` | semantic | Secondary muted copy, visually subordinate to white headings. |
| Charcoal Edge | `#1f1f21` | `--color-charcoal-edge` | surface | Dark card and button gradient tone, with restrained component outlines. |
| Near-Black Hairline | `#06080a` | `--color-near-black-hairline` | semantic | Subtle card borders and separators on dark surfaces. |
| Slate Charcoal | `#2e2e30` | `--color-slate-charcoal` | surface | Lighter end of charcoal card gradients and selected component surfaces. |
| Iron Gray | `#38383a` | `--color-iron-gray` | surface | Secondary card and button detail, including understated boundary treatments. |
| Blue-Black Panel | `#0d1114` | `--color-blue-black-panel` | surface | Inset product and form panel surface within dark sections. |
| Signal Orange | `#f7732b` | `--color-signal-orange` | accent | Warm gradient action color, notably the top navigation demo button. |
| Burnt Orange | `#dd520c` | `--color-burnt-orange` | accent | Deeper endpoint of orange action gradients and hero-adjacent accents. |
| Paper White | `#f2f2f2` | `--color-paper-white` | neutral | Light button and navigation foreground detail. |
| Panel Charcoal | `#272729` | `--color-panel-charcoal` | surface | Dark button and card surfaces against the black canvas. |
| Obsidian Tint | `#030405` | `--color-obsidian-tint` | surface | Near-black gradient and inset panel detail. |
| Muted Copper | `#bf9e8d` | `--color-muted-copper` | accent | Thin warm outline on the measured BUILD MY PAGE button; not a dominant site color. |

### Semantic aliases

`--color-canvas` → `#000000` (Canvas Black) · `--color-surface` → `#0d1114` (Blue-Black Panel) · `--color-surface-2` → `#272729` (Panel Charcoal) · `--color-text` → `#ffffff` (Clean White) · `--color-text-muted` → `#9fa2a4` (Soft Graphite) · `--color-text-subtle` → `#acb0b1` (Quiet Silver) · `--color-border` → `#06080a` (Near-Black Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#0d1114` | 18.96:1 | AAA |
| `#ffffff` | `#272729` | 14.91:1 | AAA |
| `#9fa2a4` | `#000000` | 8.18:1 | AAA |
| `#9fa2a4` | `#0d1114` | 7.39:1 | AAA |
| `#9fa2a4` | `#272729` | 5.81:1 | AA |
| `#acb0b1` | `#000000` | 9.6:1 | AAA |
| `#acb0b1` | `#0d1114` | 8.67:1 | AAA |
| `#acb0b1` | `#272729` | 6.82:1 | AA |

### Gradients

- `linear-gradient(rgba(232, 237, 239, 0.06), rgba(232, 237, 239, 0.06)), none`
- `linear-gradient(146.27deg, rgb(46, 46, 48) 4.55%, rgb(31, 31, 33) 95.45%)`
- `linear-gradient(162.07deg, rgb(20, 21, 23) 4.55%, rgb(3, 4, 5) 95.45%)`
- `linear-gradient(155.7deg, rgb(247, 115, 43) 13.97%, rgb(221, 82, 12) 87.5%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| inter | `--font-display` | webfont | 400 | Section headings and general interface typography | Inter |
| Geist | `--font-body` | webfont | 400 | Body copy, navigation, and links | Inter |
| geistSans | `--font-geistsans` | webfont | 400 | Captions and text within product cards | Inter |
| Geist Mono | `--font-mono` | webfont | 500, 400 | Code-style labels and uppercase microcopy | IBM Plex Mono |
| geistPixelLine | `--font-geistpixelline` | webfont | 400 | Pixel-style display and hero headings | Geist Mono |
| Geist Pixel Line | `--font-geist-pixel-line` | webfont | 400 | Oversized display heading | Geist Mono |

- **inter:** Measured heading family; regular weight, with slightly tightened tracking on larger headings.
- **Geist:** Regular sans-serif; clear, unembellished copy and interface labels.
- **geistSans:** Regular sans-serif for compact supporting text and card content.
- **Geist Mono:** Measured weights 400 and 500; uppercase action and code treatments.
- **geistPixelLine:** Pixel-line lettering; used for distinctive large headings, not long-form copy.
- **Geist Pixel Line:** Measured display face; preserve its pixel texture and airy, regular-weight appearance.

### Type scale — Augmented Fourth (ratio ≈ 1.395, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 0.89 | 0 | — | Geist Pixel Line | Oversized pixel-line hero or display statement. |
| h1 | 52.5px | 400 | 1.2 | 0 | — | geistPixelLine | Pixel-style primary page headline. |
| h2 | 34px | 400 | 1.16 | -0.02em | — | inter | Section titles, including the industry and process sections. |
| h3 | 31.5px | 400 | 1.12 | -0.017em | — | inter | Secondary feature headings within product storytelling. |
| body | 19px | 400 | 1.45 | 0 | — | Geist | Explanatory paragraphs and supporting product copy. |
| caption | 18px | 400 | 1.5 | 0 | — | geistSans | Compact card, panel, and supporting interface text. |
| button | 11px | 400 | 1.27 | 0 | uppercase | geistMono | Uppercase compact action labels. |
| nav | 14px | 400 | 1.71 | 0 | — | Geist | Top-level navigation and header links. |
| link | 16px | 400 | normal | 0 | — | Geist | Inline or standalone links in content. |
| code | 11px | 500 | 1.27 | 0 | uppercase | Geist Mono | Monospaced uppercase labels and code-like metadata. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 4, 8, 10, 12, 15, 16, 20, 24, 59, 86, 169 px.
- Section rhythm 86px · element gap 8px · card padding — · max content width —.

Use a dark, editorial page structure with a slim horizontal navigation above a full-width hero. Hero copy is split across the content area, with the pixel headline on the left and a short explanation on the right. Below, keep sections centered within a consistent content region, alternate concise text introductions with product panels or split layouts, and allow generous black space between major blocks. Customer marks form a quiet horizontal strip. The measured spacing system is comfortable; preserve its section rhythm rather than compressing content. Max width was not measured, so avoid assuming a fixed value.

## Shape & elevation

- Radius: button `8px` · card `4px` · nav `8px` · xs `4px` · sm `8px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.6) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.55) 0px 2px 14px 0px`
- Shadow `inset` (button): `rgba(0, 0, 0, 0.5) 4px 6px 5px 0px, rgba(0, 0, 0, 0.6) 2px 4px 2.5px 0px, rgba(255, 255, 255, 0.08) 1px 1px 0px 0px inset`
- Shadow `inset-2` (nav): `color(srgb 1 1 1 / 0.0705882) 0px -1px 0px 0px inset`
- Shadow `sm` (nav): `rgba(0, 0, 0, 0.45) 3.952px 5.928px 3.952px 0px, rgba(0, 0, 0, 0.5) 1.482px 1.976px 1px 0px`
- Shadow `inset-3` (nav): `rgba(255, 255, 255, 0.25) 1px 1px 0px 0px inset`
- Shadow `md-2` (other): `rgba(239, 90, 0, 0.18) 0px 0px 19px 2.7px`
- Motion: standard transition `0.15s cubic-bezier(0.16, 0.84, 0.32, 1)` on interactive elements.

Most sections sit flat on the black canvas. Product cards use restrained charcoal surfaces, fine dark borders, and a modest measured card shadow; buttons have stronger layered shadows and inset highlights that suggest tactile controls. Keep elevation localized to cards and actions rather than adding broad shadows to page sections.

## Imagery

The hero is dominated by soft-focus, vertically banded color artwork, blending warm yellow and orange into burgundy, violet, and blue. Treat this as atmospheric background imagery, not as a set of interface colors. Lower sections show product UI and narrow image panels beside copy, with customer logos rendered small and subdued. The page is not driven by decorative illustration or repeated photography.

## Components

### Top navigation

Dark horizontal header with white Giga mark, compact Geist links, sign-in text, and a prominent orange-gradient SEE A DEMO action.

### Hero

Full-width atmospheric gradient backdrop with a small uppercase mono eyebrow, pixel-style headline, and concise right-aligned supporting copy.

### Customer logo strip

A restrained row of customer marks on black, visually quieter than the surrounding product storytelling.

### Section introduction

Small uppercase mono category label, pixel-style or clean sans-serif heading, and a brief muted explanation.

### Product showcase panel

Dark, subtly bordered card combining explanatory copy, an inset form or product UI, and adjacent narrow image panels.

### Conversation UI

Dark support-chat example with compact messages and interface controls, presented as a product demonstration rather than a decorative card.

### Measured component styles

- **Primary button** (“BUILD MY PAGE”): transparent background · text #ffffff · border 1px solid #bf9e8d · radius 8px · padding 0px · 400 11px geistMono · uppercase · shadow rgba(0, 0, 0, 0.35) 8px 12px 18px 0px, rgba(0, 0, 0, 0.45) 4px 6px 8px 0px, rgba
- **Input**: transparent background · text #e8edef · radius 0px · padding 0px · 400 16px geistMono
- **Card** (“Fintech”): transparent background · text #e8edef · radius 4px · padding 0px · 400 16px geistSans · shadow rgba(0, 0, 0, 0.6) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.55) 0px 2px 14px 0px
- **Navigation item** (“SEE A DEMO SEE A DEMO Platform Solutions”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Geist

## Do

- Use #000000 as the dominant page canvas.
- Reserve pixel-line type for display statements and selected section headings.
- Keep supporting copy in clean sans-serif families.
- Use the measured orange gradient for standout demo actions.
- Separate major sections with generous black space.
- Keep card borders and shadows subtle and localized.

## Don't

- Do not extend the hero gradient across every section.
- Do not use hero artwork colors as a general UI palette.
- Do not replace pixel display lettering with a generic heavy sans headline.
- Do not brighten every card or add colorful section bands.
- Do not crowd the logo strip or product demonstrations.
- Do not add unsupported dimensions or spacing values.

## Agent prompt

Build a new Giga-style page on a #000000 Canvas Black foundation. Keep navigation, section copy, and customer marks quiet; use #ffffff Clean White and #e8edef Cool Mist for readable hierarchy, with #9fa2a4 Soft Graphite for secondary text. Give the hero a vivid, blurred warm-to-cool gradient atmosphere, but keep that artwork separate from the UI palette. Use pixel-line lettering for display statements and Geist/Inter-like sans-serif for body and navigation; use Geist Mono-like uppercase microcopy for actions and labels. Arrange content as spacious editorial sections with split copy and product UI panels. Use #0d1114 Blue-Black Panel and charcoal surfaces with fine borders and restrained shadows. Make #f7732b Signal Orange the selective demo-action accent, paired with #dd520c Burnt Orange where a gradient is needed.

## Source CSS custom properties (selected)

```css
--text: inter, interExt, "InterVariable", system-ui, sans-serif;
--key-radius: 8px;
--key-shadow: 4px 6px 5px rgb(0 0 0 / .5), 2px 4px 2.5px rgb(0 0 0 / .6);
--key-shadow-down: 1px 2px 2px rgb(0 0 0 / .5), 1px 1px 1px rgb(0 0 0 / .6);
--key-release: .15s cubic-bezier(.16,.84,.32,1);
--gh-text-body: 1.125rem;
--gh-text-action: 1rem;
--gh-text-meta: .875rem;
--gh-text-subheading: clamp(1.5rem, calc(1.9 * 14.4px), 1.75rem);
--gh-case-gap: 24px;
--gh-case-column-gap: clamp(24px, calc(4 * 14.4px), 56px);
--gh-case-heading-gap: 12px;
--gh-below-fold-bg: #000;
--gh-below-fold-lit-bg: #000;
--gh-industry-surface: #111c22;
--gh-industry-space: clamp(56px, calc(6 * 14.4px), 88px);
--gh-panel-gap: 4px;
--gh-panel-radius: 4px;
--gh-industry-rail-gap: clamp(24px, calc(4.1 * 14.4px), 59px);
--gh-recess-radius: 7px;
--gh-lip-shadow: 10px;
--gh-deck-duration: .68s;
--gh-deck-ease: cubic-bezier(.3, 0, .1, 1);
--gh-tile-secondary: rgb(232 237 239 / .62);
--gh-well-radius: 6px;
--gh-key-radius: 8px;
--gh-key-shadow: 4px 6px 5px rgb(0 0 0 / .5), 2px 4px 2.5px rgb(0 0 0 / .6);
--gh-key-shadow-down: 1px 2px 2px rgb(0 0 0 / .5), 1px 1px 1px rgb(0 0 0 / .6);
--gh-key-orange-shadow: 8px 12px 18px rgb(0 0 0 / .35), 4px 6px 8px rgb(0 0 0 / .45), 2px 4px 6px rgb(110 58 34 / .45);
--gh-key-orange-shadow-down: 1px 2px 3px rgb(0 0 0 / .45), 1px 1px 1px rgb(110 58 34 / .45);
--gh-key-release: .15s cubic-bezier(.16, .84, .32, 1);
--gh-panel-detail-gap: 24px;
--gh-panel-ease-duration: .62s;
--gh-industry-border: rgb(232 237 239 / .18);
--gh-customer-space: clamp(104px, 13svh, 128px);
--gh-loop-accent-rgb: 239, 90, 0;
--gh-loop-intro-gap: 40px;
--gh-card-intro-gap: 40px;
--gh-loop-tooltip-bg: rgb(14 16 18 / .92);
--gh-loop-pill-surface: rgb(0 0 0 / .62);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/giga-ai