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

# Grilli Type — GT America Intl · Design System

> A bold type specimen on a white canvas

**Theme:** light · **Industry:** design · **Source:** https://www.gt-america.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._

A long-form specimen page introduces GT America Intl through oversized type, dense font demonstrations, and a striking opening collage of colorful packaging. A vivid blue section later creates a strong contrast for multilingual coverage and interactive testing.

## North star

Let oversized GT America typography and specimen artwork carry the page, keeping the surrounding interface flat, spacious, and strictly blue, white, and orange-red.

## Overview

The page is built around an unusually strict palette: pure white (#ffffff) dominates the opening and specimen sections, while saturated blue (#0000ff) supplies the navigation, text, outlines, and a large uninterrupted global-language section. Orange-red (#ff3500) is a selective typographic accent, especially visible in specimen glyphs; the much broader red, blue, and pastel range in the opening collage belongs to the packaging artwork, not the interface palette. GT America Intl is the expressive core: regular-weight display lettering moves from oversized editorial headlines to repeated alphabet samples, while its Mono cut handles compact uppercase labels and navigation. The opening collage is large, edge-spanning, and deliberately busy, contrasted with generous white space around the headline and between specimen sections. Most content stays left-aligned within a spacious page, with examples arranged in columns and grids. The visual language is flat and sharp: square corners, thin blue rules, no shadows, and restrained interface chrome.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Electric Blue | `#0000ff` | `--color-electric-blue` | brand | Primary text, navigation, specimen outlines, and the full-width multilingual content section. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Main canvas behind the opening collage, type demonstrations, and editorial content. |
| Signal Orange | `#ff3500` | `--color-signal-orange` | accent | Selective specimen-letter accent; use for glyphs rather than broad interface fills. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Paper White) · `--color-text` → `#0000ff` (Electric Blue) · `--color-text-muted` → `#ffffff` (Paper White) · `--color-border` → `#0000ff` (Electric Blue) · `--color-accent` → `#0000ff` (Electric Blue) · `--color-accent-2` → `#ff3500` (Signal Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0000ff` | `#ffffff` | 8.59:1 | AAA |
| `#0000ff` | `#ffffff` | 8.59:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GT America Intl | `--font-body` | webfont | 400 | Display headlines, section titles, body copy, specimen text, and navigation. | Inter |
| GT America Intl Mono | `--font-mono` | webfont | 400 | Uppercase specimen labels, eyebrow text, and technical-style captions. | IBM Plex Mono |
| GT America Thai Looped | `--font-gt-america-thai-looped` | webfont | 400 | Thai script demonstrations and language-specific specimen content. | Noto Sans Thai |

- **GT America Intl:** Regular weight throughout; large display and headline settings contrast with compact, restrained navigation.
- **GT America Intl Mono:** Regular weight; compact uppercase labels use visibly increased tracking.
- **GT America Thai Looped:** Use for looped Thai examples; preserve the page’s regular-weight specimen treatment.

### Type scale — Augmented Fourth (ratio ≈ 1.449, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 115px | 400 | 1 | 0 | — | GT America Intl | Oversized introductory display lettering and prominent specimen typography. |
| h1 | 101px | 400 | 0.95 | 0 | — | GT America Intl | Main GT America Intl title and primary page heading. |
| h2 | 65px | 400 | normal | 0 | — | GT America Intl | Major section headings such as Style Overview and Variable Fonts. |
| h3 | 36px | 400 | 1.11 | 0 | — | GT America Intl | Subsection headings and script-family titles. |
| h4 | 32.5px | 400 | 1 | 0 | — | GT America Intl Italic | Italic editorial emphasis within explanatory content. |
| body | 18px | 400 | 1.35 | 0 | — | GT America Intl | Typeface description and supporting editorial paragraphs. |
| caption | 12px | 400 | 1.17 | 0.06em | uppercase | GT America Intl Mono | Compact uppercase specimen and metadata labels. |
| button | 12px | 400 | 1.17 | 0.03em | — | GT America Intl | Small text-only controls and trial or purchase actions. |
| nav | 12px | 400 | 1.17 | 0.03em | — | GT America Intl | Compact top navigation and section-jump labels. |
| eyebrow | 12px | 400 | 1.17 | 0.06em | uppercase | GT America Intl Mono | Tracked uppercase labels introducing specimen groupings. |
| code | 18px | 400 | 1.35 | 0 | — | GT America Intl Mono | Monospaced technical or variable-font specimen text. |

OpenType features in use: `"kern", "ss03"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 3, 6, 12, 18, 24, 48, 60, 96 px.
- Section rhythm 96px · element gap 24px · card padding 1px · max content width 1416px.

A spacious, single-page editorial flow uses a measured 1416px maximum content width and a 4px-based spacing system, with a 96px section rhythm and 24px element gaps. Most sections are left-aligned, while type specimens shift into two-, three-, and four-column arrangements. The white specimen sequence gives way to one sustained, full-width blue section with split content and an interactive tester. Density comes from repeated glyphs and multilingual examples, not interface chrome.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is flat, with no measured shadows and square-cornered controls. Blue hairline outlines define specimen cards and badges, while spacing and background changes establish hierarchy. The hero collage gains depth through overlapping printed artwork, not interface shadows or raised cards.

## Imagery

The hero uses an edge-spanning collage of colorful illustrated food packages, with overlapping boxes and labels creating a deliberately busy contrast against the white canvas. Treat that palette as artwork, not as additional UI colors. Lower sections rely primarily on type specimens and script samples rather than photography; keep samples crisp, large, and framed by open space.

## Components

### Text navigation

Small blue GT America Intl and Type Tester labels sit at opposite edges of the top area; navigation remains text-only and unboxed.

### Specimen card

Glyph samples such as “Aa” use orange-red text inside a square blue outline, with no shadow or rounded corners.

### Outlined specimen badge

Compact uppercase labels, including width names, use GT America Intl Mono with a thin square blue border.

### Font controls

Text-first script and axis selectors use compact blue labels; selected controls sit among dense specimen information without heavy button fills.

### Multilingual feature band

A full-width electric-blue section switches the background and foreground contrast for script availability, partner details, and testing.

### Type tester

An interactive specimen area combines script selection, variable-font controls, and editable example text in a restrained, flat layout.

### Measured component styles

- **Primary button** (“Concept”): transparent background · text #0000ff · radius 0px · padding 0px 0px 0px 12px · 400 12px GT America Intl
- **Input** (“Latin Cyrillic Greek Vietnamese Arabic D”): transparent background · text #0000ff · radius 0px · padding 0px 0px 0px 12px · 400 12px GT America Intl
- **Card** (“Aa”): transparent background · text #ff3500 · border 1px solid #0000ff · radius 0px · padding 1px · 400 64.8px GT America Intl
- **Badge** (“COMPRESSED”): transparent background · text #0000ff · border 1px solid #0000ff · radius 0px · padding 1px · 400 12px GT America Intl Mono · uppercase
- **Navigation item** (“GT America Intl ↓ Type Tester”): transparent background · text #0000ff · radius 0px · padding 0px · 400 12px GT America Intl

## Do

- Use #ffffff as the main specimen canvas.
- Reserve #0000ff for interface text, rules, and the global section.
- Use #ff3500 sparingly for glyph-level emphasis.
- Set specimen text in the measured GT America families when available.
- Keep navigation small, text-only, and blue.
- Use open spacing to separate large type demonstrations.

## Don't

- Do not promote collage colors into the interface palette.
- Do not add shadows, gradients, or rounded cards.
- Do not make the page feel like a conventional ecommerce product grid.
- Do not replace oversized specimens with small decorative thumbnails.
- Do not crowd the editorial sections with persistent controls.
- Do not apply orange-red broadly to backgrounds or navigation.

## Agent prompt

Build a new long-form type specimen page in this visual language. Use Paper White (#ffffff) as the primary canvas and Electric Blue (#0000ff) for navigation, body text, rules, and any full-width feature band. Reserve Signal Orange (#ff3500) for occasional specimen glyphs. Lead with a striking, edge-spanning piece of illustrative artwork, then give the oversized title ample white space. Use GT America Intl for display, headings, body, and specimen samples; use its Mono cut for tracked uppercase labels. Keep layouts mostly left-aligned, moving into columns for alphabets, scripts, and font features. Favor square outlines, flat controls, and no shadows or gradients. Create generous gaps between editorial sections, then use a sustained blue band for multilingual details and an interactive tester. Treat colors inside artwork as illustration only.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Single-column white opening area with a brief loading message. | Loading state | White canvas |
| 2 | hero | White, left-aligned editorial introduction with oversized title and hero collage. | Page introduction, Type tester jump | Oversized headline, Illustrated collage, Text navigation |
| 3 | product-showcase | Single-column overview followed by a dense grid of widths, weights, and letter samples. | Compare font styles | Outlined glyph cards, Uppercase labels, Repeated alphabets |
| 4 | feature-grid | White, left-aligned section with multiple axis demonstrations. | Inspect variable axes | Axis labels, Large specimens |
| 5 | feature-split | Editorial paragraph on the white canvas beneath a supporting heading. | Read type history | Body text, Editorial heading |
| 6 | gallery | Two-column specimen gallery on white. | Browse script samples | Specimen labels, Large text samples |
| 7 | gallery | Three-column gallery of script-specific samples. | Browse language coverage | Script captions, Glyph samples |
| 8 | gallery | Single-column Latin specimen display on white. | View type example | Variable-font labels, Large sample phrase |
| 9 | gallery | Two-column white gallery for multiple writing systems. | Compare script samples | Language labels, Large script examples |
| 10 | gallery | Four-column specimen gallery with varied scripts and widths. | Browse the specimen set | Script labels, Repeated font samples |
| 11 | other | Full-width solid electric-blue transition band. | Visual section transition | Blue background |
| 12 | feature-split | Blue-background editorial section with left-aligned heading and copy. | Learn about script expansion | High-contrast type, Blue section band |
| 13 | feature-grid | Blue, two-column content area with headings and script lists. | Browse available scripts | Script lists, Section headings |
| 14 | feature-grid | Two-column blue section with compact language and font details. | Compare script support | Column headings, Compact lists |
| 15 | feature-grid | Two-column blue section for regional support information. | Review support options | Editorial copy, Service details |
| 16 | product-detail | Full-width blue tester with script controls, variable axes, and text inputs. | Select script, Adjust font axes, Edit sample text | Compact controls, Interactive specimen, High-contrast text |

## Source CSS custom properties (selected)

```css
--italic-fonts: "GT America Intl Italic", "Comic Sans MS", cursive;
--mono-fonts: "GT America Intl Mono", "Comic Sans MS", cursive;
--mono-italic-fonts: "GT America Intl Mono Italic", "Comic Sans MS", cursive;
--thai-looped-fonts: "GT America Thai Looped", "GT America Intl", "Comic Sans MS", cursive;
--thai-loopless-fonts: "GT America Thai Loopless", "GT America Intl", "Comic Sans MS", cursive;
```

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