Design System Catalog

White

White. Use as a neutral background when Cream is not appropriate. White text is established on Night blue and Forest green; avoid White text on Emerald, Sky blue, Sunny yellow, Cream, and Electric orange for important copy.

Cream

Cream. The default spacious light background. Cream text is established on Night blue and Forest green.

Night Blue

Night blue. The default HumanEyes text color and primary strong dark background. It is established as readable on Cream, Sky blue, Sunny yellow, Emerald, and Electric orange. At 80% opacity it is established for secondary text.

Emerald

Emerald. The primary fresh accent for key brand moments, positive emphasis, icons, and anchors. At 30% opacity it forms a soft content surface.

Sky Blue

Sky blue. A calm color for sections, explanation blocks, diagrams, and supportive panels. At 40% or 50% opacity it forms a soft content surface.

Sunny Yellow

Sunny yellow. A warm optimistic background for insights, prompts, notes, and inviting emphasis. At 30% or 60% opacity it forms a soft content surface.

Electric Orange

Electric orange. A deliberately scarce energetic accent for calls to action, alerts, key moments, highlights, and directional cues. Avoid large-area use, White important copy, and normal-size Forest green text on it.

Forest Green

Forest green. A deep grounding color for dark sections, expert tone, premium contrast, and warmth. It is established as readable on Cream, Sky blue, Sunny yellow, and Emerald. Avoid normal-size Forest green text on Electric orange.

Black

Black. A neutral normalized source color for recolorable imported scribbles. Do not use it as default HumanEyes text; prefer Night blue.

Default

Default spacious light background.

Neutral

Neutral alternative when Cream is inappropriate.

Primary

Default HumanEyes text.

Secondary Dark

Secondary dark text where its established contrast relationships permit.

Primary

Primary fresh accent.

Energetic

Scarce, strong energetic accent.

Contrast Primary

Primary strong dark surface.

Contrast Secondary

Grounded alternative dark surface.

Soft Calm

Calm supportive surface foundation; use established opacity guidance where applicable.

Soft Warm

Warm supportive surface foundation; use established opacity guidance where applicable.

Brand

Use the HumanEyes face when available, falling back to Arial and then the generic sans-serif family.

Regular

Default HumanEyes font weight for body copy, labels, metadata, and general interface text.

Bold

HumanEyes strong font weight for headings and deliberate emphasis.

Hero

Hero text size for A4 document layouts.

Title

Page or primary title size for A4 document layouts.

Subtitle

Subtitle size for A4 document layouts.

Section Title

Section title size for A4 document layouts.

Card Title

Card title size for A4 document layouts.

Body

Body copy size for A4 document layouts.

Meta

Metadata size for A4 document layouts.

Font Size

Font Weight

Font Size

Font Weight

Font Size

Font Weight

Font Size

Font Weight

Unit

The canonical 1U grid unit.

Connected Elements

1U, strongly connected. Use when elements should read as one component, for example an icon and card title, card title and body, image and caption, label and associated text, number and short explanation, title and badge or status, elements inside a compact component, or elements inside a button, tag, or navigation item.

Same Content Cluster

2U, same content cluster. Use between distinct functions that clearly belong to the same topic, for example hero and page title, page title and introduction or subtitle, section title and body text, adjacent body paragraphs, cards within one card group, items in a list or step sequence, internal blocks within a card, title and supporting visual, or parts of one content story. This is the default within a section when uncertain.

New Sub Block

3U, new sub-block. Use when a different kind of content begins inside the same larger section, for example metadata and hero or page title, page title and body without an introduction, introduction and first content block, section title and card, image, or diagram, body and card, callout, or image, image and next content block, image and adjacent text column, separate non-grouped cards, default padding in a spacious card, or explanation and example.

New Section

4U, new section. Use for a new content section, for example body text and a new section title, card and next section, image or diagram and next section, card groups with different subjects, introduction block and main content, larger content zones, problem statement and recommendations, or observations and conclusions. This is the default between sections when uncertain.

Large Section Jump

6U, major section break. Reserve for clear transitions such as header or hero and main content, major chapters, a clear subject change, space around an important statement, main content and a closing call to action, analysis and recommendations, or explanation and conclusion.

New Page Zone

8U, new page zone. Use exceptionally when two parts should feel almost like separate pages or chapters, for example strongly separated analysis and recommendations, content and conclusion, independent page zones, deliberately generous whitespace, main story and closing section, or an intentionally isolated element.

Title Meta Gap

The established half-U gap between title and metadata. This is an intentional exception to the whole-U grid.