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

# Karl · Design System

> A bright, playful world built around motion

**Theme:** light · **Industry:** portfolio · **Source:** https://karlgonsalves.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._

Karl’s portfolio uses an uninterrupted yellow canvas, a vivid blue globe, and whimsical 3D architecture to create an immediately recognizable motion-design world. Compact dark navigation and heavy display typography provide a clear interface over the immersive illustration.

## North star

Keep the yellow world uninterrupted and let one oversized, playful 3D scene carry the visual drama.

## Overview

The page is built on a continuous #ffe100 yellow canvas, with no contrasting section bands to interrupt the long, single-page experience. A saturated #007fff blue sphere anchors the hero illustration and forms the strongest contrast with the yellow; its color belongs to the featured artwork as well as the measured accent palette. The small navigation uses dark #333333 lettering, while white is reserved for scattered illustration details and the tiny artwork credit rather than broad UI surfaces. Changa One supplies a chunky, playful voice across navigation and text, with display and heading roles sized for impact and body copy kept compact. The layout is intentionally sparse: a centered navigation sits near the top while a large, off-center 3D city curves around the sphere and extends down the page. Measured section spacing supports a relaxed scroll, but the uninterrupted background and oversized art make the page feel like one continuous scene. Keep interfaces flat and let the artwork supply depth.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Electric Marigold | `#ffe100` | `--color-electric-marigold` | brand | Continuous page canvas behind the navigation and full-height portfolio artwork. |
| Cloud White | `#ffffff` | `--color-cloud-white` | neutral | Small clouds and the discreet artwork credit; measured on text and links, not broad surfaces. |
| Orbit Blue | `#007fff` | `--color-orbit-blue` | accent | Large spherical element in the hero artwork; an illustration-led accent, not a general CTA fill. |
| Charcoal Ink | `#333333` | `--color-charcoal-ink` | neutral | Dark navigation and link lettering, providing crisp contrast against the yellow canvas. |

### Semantic aliases

`--color-canvas` → `#ffe100` (Electric Marigold) · `--color-text` → `#333333` (Charcoal Ink) · `--color-text-muted` → `#ffffff` (Cloud White) · `--color-accent` → `#ffe100` (Electric Marigold) · `--color-accent-2` → `#007fff` (Orbit Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#333333` | `#ffe100` | 9.64:1 | AAA |
| `#ffffff` | `#ffe100` | 1.31:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Changa One | `--font-body` | webfont | 400 | Display, navigation, and compact supporting copy across the page. | Bowlby One SC |

- **Changa One:** Single measured weight, 400; naturally chunky, informal letterforms. Use the measured sizes and tight line heights; no uppercase transform is specified.

### Type scale — Perfect Fifth (ratio ≈ 1.554, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 75px | 400 | 0.8 | 0 | — | Changa One | Oversized introductory or portfolio statement, if rendered. |
| h1 | 50px | 400 | 0.72 | 0 | — | Changa One | Primary identity or hero statement. |
| h2 | 32px | 400 | 1.25 | 0 | — | Changa One | Secondary statements and section-level headings. |
| body | 20px | 400 | 1 | 0 | — | Changa One | Short introductory and contact copy. |
| caption | 12px | 400 | 1.67 | 0 | — | Changa One | Small artwork credit and supporting labels. |
| link | 20px | 400 | 1 | 0 | — | Changa One | Top navigation and inline portfolio or contact links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 10, 20, 45 px.
- Section rhythm 45px · element gap — · card padding — · max content width —.

Treat the page as a single-column, full-viewport canvas rather than a conventional boxed site. A compact navigation row is centered near the top edge; the hero artwork occupies most of the first viewport and is deliberately off-center, with the blue sphere and curved city carrying the visual weight. The measured page continues through five vertically ordered sections on the same background, with a 45-unit section gap and comfortable overall density. Keep copy sparse and let the scene extend beyond the viewport; no max width, grid, card padding, or element gap is measured.

## Shape & elevation

- No box shadows measured: the page is flat.

The measured interface is flat: no shadows, gradients, border system, or rounded component radii are present. Create depth through the perspective, overlap, scale, and curved arrangement of the 3D artwork, not through UI card elevation. Keep navigation and any text directly on the canvas.

## Imagery

The defining visual is a bright, stylized 3D city arranged around a large blue globe, with clouds, tilted buildings, and a balloon-like detail. Use an expansive, playful composition that can crop at viewport edges and continue down the page. The illustration’s muted reds, creams, and grays are artwork colors, not additional brand UI colors. Avoid substituting generic stock photography.

## Components

### Top navigation

Centered horizontal links on the yellow canvas; measured link text uses Changa One at 20px, #333333, with 20px padding on each side and no border or radius.

### Hero scene

Oversized 3D city and bright blue sphere form the dominant visual, with the illustration allowed to crop beyond the viewport.

### Intro copy

Brief first-person motion-design introduction and work invitation, set directly over the uninterrupted canvas.

### Contact links

Concise invitation to get in touch by phone or email; retain the simple text-led treatment rather than introducing a measured button style.

### Artwork credit

Small white credit over the illustration; measured as Changa One at 12px with 10px vertical and 20px horizontal padding.

### Measured component styles

- **Link** (“HOME”): transparent background · text #333333 · radius 0px · padding 20px · 400 20px Changa One

## Do

- Use #ffe100 as a continuous page canvas.
- Set navigation and prominent copy in Changa One or a close free substitute.
- Keep navigation compact, centered, and dark against yellow.
- Make one vivid, oversized illustration the visual anchor.
- Use #007fff primarily as an artwork accent.
- Let the scene crop and continue through the long page.

## Don't

- Do not add alternating section backgrounds.
- Do not introduce card grids or rounded UI panels.
- Do not treat illustration colors as additional interface palette colors.
- Do not add shadows, gradients, or borders without evidence.
- Do not crowd the page with long explanatory copy.
- Do not replace the playful 3D scene with generic photography.

## Agent prompt

Build a new portfolio page in Karl’s playful motion-design style. Use Electric Marigold (#ffe100) as the uninterrupted canvas, with a compact centered navigation in Charcoal Ink (#333333) and chunky Changa One-style typography. Keep the page sparse and single-column; avoid cards, borders, shadows, and contrasting section bands. Make one oversized, perspective-rich 3D illustration the centerpiece, with Orbit Blue (#007fff) used as a dominant color inside the artwork rather than as an assumed button color. Reserve Cloud White (#ffffff) for small illustration details or restrained credits. Let the composition crop at the viewport edges and continue vertically, balancing the large scene with short, direct introductory and contact copy. Preserve high contrast and a lively, informal tone.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-height opening scene with a centered top navigation and a large off-center 3D city-and-globe illustration. | top-level navigation, portfolio introduction, contact invitation | continuous yellow canvas, dark text links, oversized 3D artwork, small white art credit |
| 2 | gallery | Single-column continuation of the oversized artwork on the same canvas. | vertical scrolling, visual-first exploration | uninterrupted yellow background, cropped 3D imagery |
| 3 | gallery | Long-form visual continuation with the same single-column canvas. | scroll-led viewing | continuous background, illustration-led composition |
| 4 | gallery | Open full-height page area, visually continuous with adjacent sections. | uninterrupted scroll | flat yellow canvas, no detected cards or controls |
| 5 | other | Final full-height area on the same unbroken canvas. | long-page ending | consistent background, minimal interface |

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