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

# T1 Energy · Design System

> American energy manufacturing, framed with quiet precision

**Theme:** light · **Industry:** other · **Source:** https://t1energy.com/ · **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._

T1 Energy presents its solar manufacturing and supply-chain story through a spacious, restrained homepage. Full-bleed industrial imagery, finely set typography, and carefully placed dark sections balance institutional clarity with product detail.

## North star

Let industrial imagery and generous white space carry the story, using typography and contrast to keep every section precise and readable.

## Overview

The visual strategy is built around a white canvas, with deep near-black media and footer areas providing strong contrast rather than a busy brand palette. Warm charcoal text keeps long-form mission and company copy softer than pure black; a pale warm-gray band distinguishes the technology showcase. Hairlines define outlined actions, while muted gray appears in compact filled controls. T1 Sans carries the page in light, generously scaled headings and restrained body copy; T1 Sans Mono adds a technical, uppercase label language for section markers and captions. The layout alternates spacious single-column statements with two-column image-and-copy compositions, rounded facility imagery, and a four-column news strip. Large media frames give manufacturing photography room to lead, while product imagery and performance figures remain clean and isolated. Whitespace, rather than shadows or decorative effects, creates hierarchy; the black footer closes the page with a compact, numbered link directory.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and section backgrounds; also used for navigation and text over dark hero and footer areas. |
| Warm Ink | `#322d2a` | `--color-warm-ink` | brand | Primary heading and body text, article links, and text inside light outlined actions. |
| Soft Pewter | `#bfb8b5` | `--color-soft-pewter` | semantic | Thin borders around light-background buttons and restrained interface outlines. |
| Night Charcoal | `#0f0e12` | `--color-night-charcoal` | surface | Inverse card surfaces and the full-width footer; supports white footer navigation. |
| Linen Mist | `#f0efe9` | `--color-linen-mist` | surface | Pale warm-gray technology section band, separating the product showcase from white content. |
| Smoked Umber | `#625b58` | `--color-smoked-umber` | neutral | Secondary text tone for supporting copy and quieter content details. |
| Industrial Gray | `#8b8b8b` | `--color-industrial-gray` | accent | Muted filled controls and announcement treatments; a utility color, not a dominant brand field. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#0f0e12` (Night Charcoal) · `--color-surface-2` → `#f0efe9` (Linen Mist) · `--color-text` → `#322d2a` (Warm Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#bfb8b5` (Soft Pewter)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#322d2a` | `#ffffff` | 13.6:1 | AAA |
| `#322d2a` | `#0f0e12` | 1.41:1 | fail |
| `#322d2a` | `#f0efe9` | 11.8:1 | AAA |
| `#ffffff` | `#0f0e12` | 19.23:1 | AAA |
| `#ffffff` | `#f0efe9` | 1.15:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| T1 Sans Mono | `--font-mono` | webfont | 400 | Technical section labels, captions, and compact coded-style metadata. | IBM Plex Mono |
| T1 Sans | `--font-body` | webfont | 300, 400 | Light display and headings, body copy, and navigation. | Inter |

- **T1 Sans:** Use light weights for headings and regular for body and nav; sentence case, with restrained positive tracking in small text.
- **T1 Sans Mono:** Regular weight, uppercase transformation, and slight positive tracking create a precise technical label style.

### Type scale — Perfect Fifth (ratio ≈ 1.47, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 300 | 1 | 0 | — | T1 Sans | Oversized light display statements where prominent headline scale is needed. |
| h1 | 52px | 300 | 1 | 0 | — | T1 Sans | Primary hero headline and major page-level statements. |
| h2 | 32px | 300 | 1.2 | 0 | — | T1 Sans | Section-level headings and prominent content titles. |
| h3 | 24px | 300 | 1.3 | 0 | — | T1 Sans | News titles and secondary feature headings. |
| h4 | 20px | 300 | 1.3 | 0 | — | T1 Sans | Compact supporting headings in feature and company blocks. |
| body | 14px | 400 | 1 | 0.01em | — | T1 Sans | Mission, manufacturing, supply-chain, and company descriptions. |
| caption | 12px | 400 | 1.3 | 0.01em | uppercase | T1 Sans Mono | Uppercase technical labels, metric descriptors, and section metadata. |
| nav | 14px | 400 | 1.3 | 0.01em | — | T1 Sans | Header navigation and standard interface links. |
| code | 12px | 400 | 1.3 | 0.01em | uppercase | T1 Sans Mono | Numbered footer navigation and compact technical identifiers. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 3, 4, 5, 8, 12, 16, 18, 22, 24, 36, 48, 60, 96, 120 px.
- Section rhythm 120px · element gap 8px · card padding — · max content width 1200px.

The page uses a spacious, predominantly white canvas and a measured maximum content width of 1200px. Content shifts between left-aligned single-column statements and two-column feature compositions; facility cards and product media provide larger visual anchors. The section rhythm is generous, with a measured 120px section gap and 8px element gap guiding a roomy rather than dense feel. News uses a four-column strip, and the footer organizes numbered links into four columns. Keep text edges deliberate and allow broad blank areas around key imagery and metrics.

## Shape & elevation

- Radius: button `50%` · media `80px` · nav `16px` · link `16px` · xs `12px` · sm `16px` · md `18px` · lg `80px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s ease` on interactive elements.

The interface reads as flat: measured shadows are absent, and hierarchy comes from canvas changes, media scale, and spacing. Light buttons use thin gray borders; dark cards and the footer sit directly on their surfaces. Rounded media corners soften large image blocks, while small controls remain visually restrained.

## Imagery

Industrial photography and video are the main visual material: the hero is full-bleed, with solar manufacturing imagery under white text, while facility and news images show real sites, panels, and production. Product imagery is isolated against a pale neutral field. Media is presented cleanly, often in strongly rounded frames; the imagery itself supplies most color, so avoid adding decorative illustration or competing graphic effects.

## Components

### Header navigation

A compact horizontal menu over the hero, using white 14px T1 Sans links against the dark media; navigation labels are concise.

### Outlined action

Light-background actions use Warm Ink text, a Soft Pewter border, and rounded corners; keep the styling quiet and avoid shadows.

### Hero announcement

A dark, compact overlay combines a small uppercase announcement label, short copy, and a thumbnail over hero media.

### Facility cards

Two adjacent site images carry short location labels and arrow affordances, with strongly rounded media corners.

### Technology showcase

A pale warm-gray band pairs a product image with a technical layer list and compact expand controls.

### Performance metrics

Large financial and production figures sit on white with small uppercase monospace descriptors beneath each value.

### News strip

Four image-led article links present a thumbnail, compact date, and restrained headline in a clean grid.

### Footer directory

A Night Charcoal panel groups numbered uppercase links into four columns, with white branding and compact legal details below.

### Measured component styles

- **Primary button** (“G1_Dallas”): background #8b8b8b · text #ffffff · radius 100px · padding 4px 4px 4px 22.4px · 400 14px T1 Sans
- **Secondary button** (“Learn More”): transparent background · text #322d2a · border 1px solid #bfb8b5 · radius 16px · padding 17.5px 22.4px · 400 14px T1 Sans
- **Link** (“08.27.2026 T1 Giga Arctic Approved for D”): transparent background · text #322d2a · radius 0px · padding 0px · 400 14px T1 Sans
- **Card**: background #0f0e12 · text #322d2a · radius 0px · padding 0px · 400 14px T1 Sans
- **Navigation item** (“Technology”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px T1 Sans

## Do

- Use Gallery White as the dominant content canvas.
- Let full-bleed industrial media anchor the hero.
- Keep large headings light and uncluttered.
- Use monospace uppercase for technical labels and metadata.
- Separate major stories with generous whitespace.
- Use rounded corners primarily on media and compact controls.

## Don't

- Do not add unmeasured colors to the interface palette.
- Do not crowd the page with dense card grids.
- Do not add gradients or decorative shadows.
- Do not use heavy heading weights or all-caps display copy.
- Do not place utility gray across large content surfaces.
- Do not let interface decoration compete with manufacturing imagery.

## Agent prompt

Build a new T1 Energy page with a restrained industrial-editorial feel. Use Gallery White (#ffffff) as the main canvas, Warm Ink (#322d2a) for readable text, and Night Charcoal (#0f0e12) only for inverse media cards or strong closing areas. Use Linen Mist (#f0efe9) sparingly for a distinct product or technology band; keep Soft Pewter (#bfb8b5) borders fine and Industrial Gray (#8b8b8b) limited to utility controls. Set display and heading copy in a light T1 Sans-like sans serif, with T1 Sans Mono-style uppercase labels. Favor spacious left-aligned sections, selective two-column layouts, image-led storytelling, and rounded photography. Keep buttons understated, avoid shadows and gradients, and make hierarchy come from scale, contrast, and whitespace.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video hero with overlaid header, headline, action, and announcement card. | Overlay navigation, Discover action, Announcement teaser | White over dark media, Large light headline, Thumbnail announcement card |
| 2 | feature-split | Small section marker at left; mission copy and action occupy the right side. | Mission overview, Learn More link | White space, Compact mono label, Outlined action |
| 3 | gallery | Two equal image-led facility cards in a side-by-side layout. | Location selection, Arrow affordance | Rounded photography, Short location labels, Compact controls |
| 4 | feature-split | Two-column feature with text on one side and product media on the other. | Cell and module switch | Technical section marker, Isolated product imagery, Pale media panel |
| 5 | feature-split | Section marker at left; supply-chain copy and action aligned in the right column. | Learn More link | Minimal text block, Uppercase mono label, Outlined action |
| 6 | product-showcase | Wide pale warm-gray band pairing a product illustration with a technical layer list. | Expandable layer rows | Pale section band, Product render, Plus and minus controls |
| 7 | stats | Two-column company introduction with an image and a vertical stack of three metrics. | Learn More link, Metric scanning | Large numeric type, Small mono descriptors, Rounded image |
| 8 | content-feed | Section introduction followed by four equal image-and-story columns. | Article links, Latest updates | Image-led cards, Compact dates, Editorial headlines |
| 9 | footer | Full-width dark footer with four compact link columns and a lower brand/legal area. | Numbered site directory, Social links, Legal links | Night Charcoal surface, White mono text, Large brand mark |

## Source CSS custom properties (selected)

```css
--radius-large: 4rem;
--radius-large-inside: 4rem;
```

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