Design guide

A practical guide to making Gn8 clear and recognizable. Decide what matters, say it plainly, give it a useful visual order, then adapt the result to its medium.

01 / PRINCIPLES

Principles

Use these priorities when a brief, a visual idea, and the reader’s needs pull in different directions.

Purpose and shared identity

Gn8 should be recognizable across a website, an app, a slide, or a printed page. Recognition comes from keeping the mark, color roles, and information hierarchy purposeful, not from forcing every medium into one template.

Start by naming the reader’s task and the information they need. Keep the intent consistent; let navigation, controls, units, and page structure fit the destination.

Use these checks to turn the identity boundary into decisions a brief can test. A brief that only says "cross-medium" leaves the reader, task, and constraints unstated.

Separate identity facts from site rules

Use an approved logo file without changing its geometry, and keep the documented meaning of each shared color role. The website has a 1200px shell and a Dark default; these are site-specific, not rules for every Gn8 medium. DESIGN.md marks this boundary; LOGO.md owns the wordmark geometry.

Use the current Line or Solid artwork as supplied. For a printed guide, keep the mark intact and choose the page grid from the paper size instead of copying the website shell.

Name a reader and the decision they need to make

Write who is reading, what they need to understand or do, and which information lets them do it. A reader comparing values needs labels and units together. A reader changing a setting needs the current value and the effect of the choice.

For the existing Date format example, keep "Year / Month / Day" beside its label. If the page only explains the format, do not turn that explanation into a required form.

Record access conditions in the brief

Note the expected languages, text growth, input method, viewing distance, zoom, and output medium. These conditions can change reading order, labels, and what must stay visible. They are not a late decoration pass.

Check Japanese and English at a narrow viewport and enlarged text. Keep the value with its label, and do not hide an instruction behind hover or color alone.

Adapt controls and units to the destination

Preserve the task and the meaning of each value, not the original control styling or measurement. Web links navigate and buttons act; an app follows its host platform; a projected slide and a printed page use their own reading conditions. Label any unit change so readers do not mistake one measurement for another.

OpenSlide documents a 1920 × 1080 canvas for its slide theme. That is a package-specific value, not a size to copy into a web page, app, or handout.

Keep the facts; give each medium its own job

Each version repeats the same settings facts. The role changes to fit the reader task. These are static explanations, not Gn8 product screens.

Keep stable

Use the supplied mark and keep shared color roles meaningful. Do not redraw the logo or make one color role stand for another.

Adapt

Choose the page structure, unit, and control for the destination. Do not carry web coordinates or fake controls into a slide or print example.

Web

Language

Japanese

Date format

Year / Month / Day

Explain the terms in reading order. Link to detail only when it answers a likely next question.
App

Language

Japanese

Date format

Year / Month / Day

If the reader changes the setting, use a labeled platform-native choice and keep the selected value visible.
Slide

Language

Japanese

Date format

Year / Month / Day

State why the date order matters and show one labeled example. Do not draw a pretend selector.
Print

Language

Japanese

Date format

Year / Month / Day

Keep the label beside the example so the instruction still works on paper, without hover or motion.

The repeated values come from the explanatory settings example in the spacing guide. The medium roles are practical guidance, not claims about a Gn8 product.

Decision priorities

When choices compete, resolve them in this order. A decorative treatment never earns space at the expense of meaning or access.

Keep each claim beside its source and scope, and name the reading or action each visual choice supports.

Separate a documented fact from a recommendation

For a claim about Gn8, name the source and the part it supports. Label a practical preference as guidance, not identity canon. If the source records a measurement but not its origin, report the measurement and stop there.

LOGO.md records G and 8 at 360 units each and n at 240, a 3:2:3 width ratio. It says an exact golden-ratio construction is not established. Describe the measured ratio; do not turn it into a story.

Keep the decision beside its evidence

When a reader must choose or repeat a rule, put the conclusion first and the smallest evidence that can check it nearby. Keep the source, unit, and scope beside a measurement. Move supporting detail to notes or a handout only when the reader can still find it.

For a slide about the wordmark, state that G and 8 have equal width and show the measured widths. Keep the remaining construction values in the handout instead of shrinking them into the projected slide.

Give each term and color one meaning

Use the same name for the same role across themes and destinations. A theme may change the token value; it must not silently change what the token communicates. When a platform needs different wording, preserve the canonical term at the boundary.

DESIGN.md assigns accent to links and chart series. It keeps primary as a shared brand fill and gives filled buttons their own button-background and button-foreground roles. Do not use primary as a shortcut for an action.

Use hierarchy to explain, not to decorate

Let order, size, and grouping show which fact leads and which one supports it. Add a rule, highlight, or artwork only when it identifies a relationship or helps readers find information. If removing it changes no meaning, remove it.

DESIGN.md reserves the yellow secondary fill as a highlight, not a warning. A yellow mark by itself cannot say whether a value is urgent; write the status and use its documented role.

Check access and feedback before visual polish

Use native semantics for each destination: links navigate, buttons act, and app controls follow the platform. Check reading order, visible labels, keyboard access, focus, zoom, and cues beyond color before adding decoration. If an interaction is needed, make a reversible choice show its result directly and offer a way back. For an irreversible action, state the consequence before confirmation. A static page or print diagram needs no pretend control.

In a hypothetical settings flow, a reversible date-format choice updates the displayed value and offers Undo. A deletion names its target and effect before confirmation. A static slide explains the same rule as text and a labeled example, not a switch.

Purpose → information → form

A real token distinction shows how to choose a visual form from the reader task, not from decoration.

Purpose

Help readers tell a navigation link from a filled action.

Information

DESIGN.md assigns accent to links and chart series. A filled action uses button-background with button-foreground. Primary is a shared brand fill, not the button fill.

Form

Name each role beside its token. The swatch supports the label; it does not carry meaning by itself. These are static token examples, not controls.

accent: Links and chart series
primary: Shared brand fill, not a filled-button role
button-background: Filled-button surface, paired with button-foreground

These role names and distinctions are documented in DESIGN.md and design-token.ts. The purpose-to-form mapping is practical guidance.

Move detail, not evidence

The same wordmark facts appear in both examples. The second gives the main claim room on the slide and keeps construction detail in the handout.

Dense slide

G and 8 are equally wide; n is narrower.

Letter widths: G 360 / n 240 / 8 360
Letter gaps: 32 each
ViewBox: 1024 × 512
Nominal stem: 96
n counter: 48
n top: y = 192
x-height: 320

Source: LOGO.md, "Wordmark geometry." The slide and handout arrangement is a practical guideline, not a measured learning result.

The claim, measurements, construction details, and source share one block. Each fact is present, but none leads.

Claim, evidence, and handout

Slide

G and 8 are equally wide; n is narrower.

Letter widths: G 360 / n 240 / 8 360
Letter gaps: 32 each

Handout or notes

ViewBox: 1024 × 512
Nominal stem: 96
n counter: 48
n top: y = 192
x-height: 320

The slide keeps the claim and width evidence. The handout keeps the same remaining measurements. No fact or value is removed or changed.

Source: LOGO.md, "Wordmark geometry." The slide and handout arrangement is a practical guideline, not a measured learning result.

02 / WRITING

Writing

This section owns what the words say. The visual-design section covers where and how those words appear.

Voice and tone

Write directly, calmly, and with enough detail to be useful. Name the subject and the action; avoid slogans, vague praise, and claims that promise more than the product can show.

Let the situation set the tone. A welcome can be warm; a payment or privacy notice should be exact; an error should be calm and specific. Friendly copy does not need jokes or exclamation marks.

Leave readers with the information they need to choose, then shape the wording around their vocabulary, language, and the stakes.

Keep the details that change a decision

Each sentence should carry information that affects a choice or its outcome. A slogan or adjective does not explain scope or what will change. Keep the facts readers need to decide, including whether an action can be undone.

If a setting applies to one schedule only, say so. If the resulting date display also affects the choice, add “This schedule’s dates appear in the selected format.”

Adjust tone to the situation

A welcome can invite a choice. A failure message should state what happened and what to do next. For an irreversible action such as deletion, avoid jokes and friendly persuasion. Explain the result before the action.

Warmth can belong in a welcome. A failure or irreversible action does not need to be brightened with playful wording.

Use words readers know for the object

Name what readers actually control, not an internal setting or code name. Briefly explain an unfamiliar technical term on first use, then keep the same reader-facing name.

For a date-display choice, say “date format,” not “locale.” If needed, explain that the term describes how dates appear on screen.

Localize the meaning, not the sentence structure

English and Japanese use different word order and levels of formality. Write a complete sentence in each language with the same action, subject, and scope. Do not assemble sentences from translated fragments around variables.

Japanese: “この予定の日付形式を選んでください。” English: “Choose a date format for this schedule.” Each is a natural full sentence with the same instruction.

Keep the voice clear while tone changes with the stakes Illustrative wording for the same date-format setting in a welcome, a failure, and an irreversible-action context. Match the copy to the product’s actual behavior.

Welcome readers to make a choice

Vague example

A date display made for you.

Sounds reassuring, but does not name the choice.

Situation-specific example

Choose how dates appear in this schedule.

Names the choice and where it applies.

Explain that saving failed

Vague example

Save failed!

Names the outcome but gives no next step.

Situation-specific example

Could not save the date format. Check your connection, then save again.

Use this recovery step only when the connection is a confirmed cause.

Confirm a change that cannot be undone

Vague example

Reset?

Does not say what changes or whether it can be undone.

Situation-specific example

Reset this schedule’s date format to its default. You cannot undo this change.

State this only when the reset is genuinely irreversible.

The voice stays clear and calm; only the tone changes with the context. If you cannot confirm a cause or whether an action can be undone, do not state it as fact. Give the next step the product can support.

Terminology and labels

Choose one term for a concept and keep it consistent in navigation, headings, help, and support material. Explain an unfamiliar technical term at first use; keep the interface wording simpler than the internal implementation name.

Choose verbs for their actual result. For example, “remove” can mean detaching an item while “delete” means erasing it. Use that distinction only when the product behaves that way.

Terms help readers find the same information and action again. Choose one name for each concept and carry it through navigation, headings, actions, and completion messages.

Choose the object readers recognize, not an internal name

Base a term on what readers work with. A data type or a team abbreviation does not necessarily match the word readers know.

If readers create and save a report, call it a “report” in the interface even if its internal type is called a “record.”

Keep the noun consistent from navigation to completion

When the same object changes from “report” to “file” to “document,” readers may expect a different object. Keep a shared glossary with the name, definition, usage, and translation.

If the page is called “Reports,” use “report” in its save action and completion message instead of switching nouns.

Use “remove” and “delete” only for their actual outcomes

“Remove from list” fits when the item remains available elsewhere. “Delete” fits when the item itself is erased. Check actual behavior, recoverability, and scope before choosing the label.

If the saved report only leaves the current list, say “Remove from list.” If the report itself is erased, say “Delete report” and explain what is erased and whether it can be restored before confirmation.

Use an active verb and name the action’s scope

A label such as “Update” or “Go” does not name the result on its own. Even a short label should tell readers what changes when they see it outside its immediate context.

For a report-title change, use “Change report title” instead of “Update.”

Set separate, consistent wording rules for English and Japanese

Choose a capitalization policy for English labels, such as sentence case, and apply it to each element type. Japanese does not use English capitalization; write a natural word order with the particles readers need.

Use “Save report” in English and “報告書を保存” in Japanese. Do not copy a developer identifier or awkward transliteration into the interface.

Keep one report named as a report through a save flow An illustrative vocabulary trail for the same task, saving a report, from navigation through the result. These are examples, not Gn8 product labels.

Navigation

Names shift along the flow

Reports

The object to save is a report.

Names stay consistent

Reports

Name the object at the start.

Page heading

Names shift along the flow

Documents

This sounds like a different kind of content.

Names stay consistent

Report details

Readers can tell these are details for the report.

Save action

Names shift along the flow

Save item

“Item” does not identify what will be saved.

Names stay consistent

Save report

The noun and verb name the object and action.

Completion message

Names shift along the flow

Document saved

The object no longer matches the heading or action.

Names stay consistent

Report saved

Confirm completion with the same name.

Also record whether an action removes an item from a list or erases the item itself. Do not blur “remove” and “delete” to make the wording sound varied.

Claims, facts, and sources

Separate a verified fact from an interpretation, recommendation, or example. For a figure or statement that can change, give readers a nearby source and an “as of” date or version. Describe what the source supports, not what you wish it proved.

If a claim cannot be checked, narrow it or remove it. Mark a fictional scenario as an example, and never use private or unapproved information as public proof.

Before publishing a claim, make it possible to trace who checked what, when, and under which conditions. Do not invent a number or source to make the statement sound convincing. State only what the evidence supports.

Include the measured task and conditions

A result cannot be compared on its own. Name the task, the data or population in scope, the unit, method, and comparator close enough for readers to judge the claim.

For processing time, identify the data count or size, environment, method, and comparison conditions. Do not guess details that the source does not provide.

Separate estimates from measurements, with an owner and date

Tie a measured result to its source, date, and version. Label an estimate as an estimate and name who made it, the inputs used, and when. Do not present an estimate as an observed result.

For an estimate, write “[person or team] estimated this on [date] from [inputs]. This is not a measured result.”

Limit the conclusion to what the source supports

A single test does not show that every reader or environment will get the same result. Do not generalize beyond the source’s population or period, or claim causation from correlation alone. State the range or uncertainty when it changes how readers should interpret the result.

Report a time measured on one device as a result for that device and those conditions. Do not turn it into “always faster.”

Make the source readable and keep private data out

“Research shows” is not a source readers can check. Give the document title, publisher, date, and a descriptive link near the claim. Do not publish customer data without approval or records that identify a person.

Name a link “Performance report” and use an approved public summary. Do not link personal logs or private feedback.

Attach scope and source to a measurement claim A fill-in template for describing data-export time. It is not a Gn8 feature, a measurement, or a real source.

Describe the time required to export data

No traceable evidence

Exports are the fastest.

There is no source, scope, or comparator for the superlative. Withdraw the comparison.

Source-bearing wording template

[Approved public report title and link] reports the measured time as [elapsed time and unit] for exporting [record count and data size] on version [number], using [method] on [date].

When completed with verified data, this reports one measured task and its conditions. It does not compare alternatives or establish “fastest.”

This is a fill-in template, not a measurement or evidence. The unsupported “fastest” comparison has been withdrawn, not proven by this template. If you cannot replace the brackets with verified, approved material, do not publish the claim. If you use an estimate, name its owner, inputs, and date, and label it as not measured.

Actions, status, and recovery

An action label tells readers what will happen. Help text answers a likely question before a mistake; an error names what failed and how to recover. Keep the action name consistent from its label through its result.

Distinguish work in progress from success. An empty state names what is missing and offers a useful next step. Keep the field label visible after someone enters a value; a placeholder is only an example.

Copy tells readers what state an action has reached. After a failure, state what failed, what happened to the result or input, and what they can do next, but only when those details are known.

State the failure and next step together

Connect the state, known cause, effect on data, and next action. If the cause is unknown, do not guess. Offer only a check or recovery step the reader can actually take.

Do not stop at “Unable to save.” Name a missing field, whether input remains, and the save action to use after correcting it.

Keep pending separate from completed

A success message shown before the work finishes may lead readers to leave or repeat the action. Confirm completion only after the operation succeeds.

“Saving report…” means work is pending. “Report saved” means the operation finished successfully. Do not promise a result while it is unknown.

Preserve input and describe safe retry conditions

When the design can retain input after failure, readers avoid re-entering it. Say that values remain only when confirmed. If a retry could create a duplicate, ask readers to check the action’s status instead of sending it again.

When a required field is missing, input is retained, and another save is safe, name the missing field and tell readers to fill it in and save again.

Distinguish an empty collection from no filter matches

No items yet and no items matching a search have different causes and next steps. Name what is empty and how readers can continue.

For a new collection: “No reports yet. Create a report.” After filtering: “No reports match this filter. Clear it to see all reports.”

Keep field labels visible and explain irreversible outcomes

Keep a field’s label visible after entry; helper text can explain its format or requirement. For an irreversible action, name the object in the action and neutrally explain what will be erased and whether it can be restored before confirmation.

Use “Delete report,” not “Delete.” State that the report will be permanently erased only if that is true, and say whether recovery is possible.

Show the next step while keeping retained input in view A static example of a failed save because a required summary is empty. Use the retained-input wording only if the form really keeps the entered value. This is not a Gn8 feature.

After saving without a required summary

Cause and recovery are unclear

Something went wrong. Try again.

The missing requirement and retained input are not explained.

Failure, retained input, next step

Unable to save this report. The name you entered is still in the form. Add a summary, then select “Save report” again.

Names the missing field and returns to the same save action. Use only when input remains.

Example of input retained after failure

Report name: [entered name]
Summary: Empty; Enter a summary.

A static example, not an interactive form field.

Ready
Save report
Pending
Saving report…
After success is confirmed
Report saved.

Static copy example. Rewrite it if the actual interface does not retain input or if another save attempt is unsafe.

03 / VISUAL DESIGN

Visual design

Use visual choices to make the content easier to scan, understand, and use. The specimens below show relationships, not additional brand standards.

Information hierarchy

Give each piece one subject or conclusion. Establish a visible order from title to explanation, evidence, and next step; make headings name the content that follows.

Use size, weight, position, and spacing together. A small context label can orient readers, but it should not compete with the subject. Put evidence beside the statement it supports.

Visual weight is not equal emphasis. Decide what a reader needs first, then make size, position, and grouping follow that order.

Give the decision the strongest cue

When. When one idea or action matters more than the surrounding detail.

Why. If every line competes at the same volume, readers have to discover the priority for themselves.

Example. Let “Choose the reading order” lead; keep its context label quieter.

Keep visual order and reading order together

When. When a title, explanation, evidence, and next step form one sequence.

Why. A scan should predict the order a careful reader or assistive technology follows.

Example. Place the title, lead, evidence, and next step in that same top-to-bottom order in the document.

Group details with what they explain

When. When a caption, source, value, or note belongs to one nearby item.

Why. Proximity removes the guess about which item owns the detail.

Example. Keep a chart caption and its source beside that chart, not between the next chart and its title.

Recheck hierarchy after translation or reflow

When. When a label wraps, the viewport narrows, or text is enlarged.

Why. A heading that wraps into supporting text can reverse the order the layout was meant to show.

Example. Let the Japanese heading wrap before its evidence; do not shrink it until the label becomes hard to read.

One short document, two reading paths The wording stays the same. The second version makes its title, reason, evidence, and next step easier to find in order.

Before

GUIDE / EXAMPLE

The sequence should remain clear at a glance.

Then read the supporting detail.

Choose the reading order

Start with the decision the page supports.

Same words, equal emphasis, and no clear first stop.

After

GUIDE / EXAMPLE

Choose the reading order

Start with the decision the page supports.

The sequence should remain clear at a glance.

Then read the supporting detail.

Same words, with a clear lead and evidence kept together.

Logo identity

Use the supplied Gn8 artwork. Keep its proportions and choose a variant that remains visible on its background. The documented G:n:8 wordmark width ratio is 3:2:3.

No shared minimum display size or clear-space measurement is specified. Check the mark at its intended size and viewing distance instead of inventing a number.

For app icons, the logo gallery includes rounded and square tiles in normal and inset versions, each in three colors and SVG, PNG, or ICO format.

Canonical filled wordmark, shown as supplied.

Available families: Filled wordmark: gn8-logo.svg
Line wordmark: gn8-logo-line.svg
Unified symbol: gn8-logo-symbol-unified.svg
Bold symbol: gn8-logo-symbol-bold.svg

Canonical downloads

Open the logo and icon gallery

Choose a supplied file for the job, then preserve its own geometry. A wordmark is not a square symbol, and a Line comparison is not measured like a Solid comparison.

Keep each source aspect ratio intact

When. When fitting the mark into a header, document, slide, or profile slot.

Why. Changing width and height independently changes the designed letter widths and counter shapes.

Example. Use the 2:1 wordmark viewBox as a wordmark; give the square symbol its own square slot.

Compare Line by visible stroke width

When. When pairing the canonical line wordmark with the unified symbol.

Why. Their viewBoxes differ, so equal CSS width would not produce equal visible line weight.

Example. At the approved specimen sizes, the wordmark is 160 × 80 and the symbol 78.125 × 78.125; each visible stroke is 5px.

Compare Solid by board scale, not by visible height

When. When pairing the filled wordmark with the Bold symbol.

Why. The square symbol is taller even though both artworks use the same artboard scale.

Example. At 160 × 80 and 160 × 160, both use 160 / 1024 scale; the 96-unit stem appears 15px wide.

Choose ink for the actual background

When. When the supplied file will sit on a light or dark surface.

Why. An external SVG image does not inherit the page’s currentColor. Its fixed-color variant must already suit the surface.

Example. Use the black artwork on a light specimen and the white artwork on a dark specimen; check legibility at the intended use size.

Canonical files, compared on their own terms Line is matched by visible stroke. Solid is matched by artboard scale. Wordmarks and symbols keep their native proportions.

Line · same visible stroke width

Wordmark · 160 × 80 · 5px visible stroke

Symbol · 78.125 × 78.125 · 5px visible stroke

Solid · same artboard scale

Wordmark · 160 × 80 · 160 / 1024 scale

Symbol · 160 × 160 · 15px stem at the same scale

Black artwork on a light background

White artwork on a dark background

Color roles

Choose a semantic role before choosing a color. Primary purple, secondary yellow, tertiary blue-green, and the primary-button pairing are shared values. Background, prose, supporting text, borders, and link accents use the selected palette’s values.

Judge foreground and background together. Muted text still carries meaning and must remain legible; faint is for removable decoration. Use border for quiet separation and border-strong when a control needs a clear boundary.

Color never carries status or category by itself. Pair it with words, a symbol, or a change in form. Secondary yellow is a highlight, not a warning signal.

Browser swatches show how the current website renders semantic roles. Check each pairing in its destination medium.

Shared color roles

background
Page background

The main canvas behind the page.
surface
Surface

A distinct reading or content surface.
surface-raised
Raised surface

A control or region separated from its parent.
foreground
Foreground

Interface text and headings.
prose
Prose

Long-form reading text.
muted
Muted

Meaningful supporting text, including metadata and table labels.
faint
Faint

Removable decoration only, never the sole carrier of meaning.
border
Border

Quiet dividers between related content.
border-strong
Strong border

A visible boundary for a control or region.
accent
Accent

Readable link text and chart series lines, not a primary-button fill.
primary
Primary brand color

Brand-color specimens and the limited chart underfill defined by the token rationale.
button-background
Button background

The filled primary action, paired with button-foreground.
button-foreground
Button foreground

Text and icons on button-background.
on-color
On-color

Dark text on bright primary, secondary, or tertiary color samples.
info-foreground
Information foreground

Information-state text and fine progress marks, not a large teal fill.

Bright brand sample / on-color

primary+on-color

Primary action pairing

button-background+button-foreground

Use button-background with button-foreground for the primary action. Use on-color for text on a bright brand-color sample.

Inspect color roles and pair checks

Choose the semantic job first. Gn8’s brand swatch, filled action, link ink, information text, and meaningful metadata are separate roles, even when two of them share a hue.

Keep brand color separate from the filled action

When. When showing a brand sample beside an action that should lead.

Why. The brighter primary swatch is not the button background; borrowing it changes the button’s tested text pairing.

Example. Use primary with on-color on a bright color sample. Use button-background with button-foreground for the filled primary action.

Use accent and info colors for fine, readable marks

When. When drawing a link, chart series, information label, or thin progress mark.

Why. A text or hairline role needs the appearance-specific foreground value, not the brighter color used for a broad sample.

Example. Use accent for link text and info-foreground for an information label; use tertiary for a blue-green color field.

Keep meaningful supporting text readable

When. When a timestamp, field label, source, or help sentence is smaller than the main content.

Why. Muted still carries information. Faint is only for decoration that can disappear without changing meaning.

Example. Keep “Source” in muted; reserve faint for a non-semantic divider that adds no information.

Check the exact foreground and background pair

When. When text, an icon, or a control outline is placed on a colored surface.

Why. A token name or a color that looks dark is not a contrast result for another size, opacity, or background.

Example. The documented button pair is button-background with button-foreground, approximately 4.53:1 in registered sRGB HEX values; that figure does not certify other pairs.

One hue does not mean one job Static role specimens use canonical tokens. They are not controls, and the swatches do not certify every foreground/background combination.

Sample text · on-color

Save changes Filled action · button-background Action label · button-foreground

Link or chart line · accent

Information · review the note · Information text · info-foreground

Meaningful metadata · muted

Attention Attention state · label plus neutral status-attention

Removable decoration · faint only

Gn8 palettes

Gn8 provides Gn8 Light, Gn8 Dark, Gn8 Classic Light, and Gn8 Classic Dark. Light and Dark use warm and blue-neutral surfaces; Classic Light and Classic Dark keep the surfaces achromatic. Choose for the viewing conditions, then check every foreground against its actual background.

Brand colors stay shared across all four palettes: primary purple, secondary yellow, and tertiary blue-green. Their canonical OKLCH values are primary oklch(64% 0.16 320), secondary oklch(80% 0.24 96), and tertiary oklch(72% 0.16 200). Appearance-sensitive roles use the selected palette.

The primary-button pairing is separate from the bright brand samples. A product can use the shared palette without offering every palette as a user-facing mode.

Warm and blue-neutral palettes: Gn8 Light and Gn8 Dark
Achromatic Classic palettes: Gn8 Classic Light and Gn8 Classic Dark
Shared brand values: Primary purple, secondary yellow, tertiary blue-green, and a separate primary-button pairing

Compare the Gn8 palette variants

Compare a palette with content in place, not as four unrelated color charts. Keep the example and its meaning fixed so the surface and foreground changes are the evidence.

Compare the reading surface before choosing a theme

When. When the page will be read for more than a glance.

Why. Gn8 Light, Gn8 Dark, and the two Classic palettes differ in background, surface, and raised-surface relationships.

Example. Check the same label and explanatory sentence on each named palette, not just the empty background swatch.

Separate shared brand values from theme-sensitive roles

When. When an accent or action appears over different light and dark surfaces.

Why. Primary, secondary, and tertiary stay shared; foreground, muted, accent, focus, and information text vary by theme.

Example. The same Language sample keeps the same words while its background and readable text roles follow each palette.

Do not turn a comparison into a required selector

When. When publishing token examples or choosing a project theme.

Why. A design system can provide four palettes without making every product expose four modes to its readers.

Example. Treat this figure as a fixed reference. A product offers only the appearance modes it supports.

Retain meaning without hue

When. When status, selection, or category uses one of the color roles.

Why. Grayscale and color-vision differences can remove hue distinctions while leaving labels, shapes, and reading order intact.

Example. Show “Information” in text next to its marker; do not ask the reader to identify the state from teal alone.

The same language setting in four token palettes Static comparison only. The language label, value, explanatory sentence, and information state are unchanged in every panel.

Gn8 Light

Language

Japanese

Menu labels use the chosen language.

Information Selected

Gn8 Dark

Language

Japanese

Menu labels use the chosen language.

Information Selected

Gn8 Classic Light

Language

Japanese

Menu labels use the chosen language.

Information Selected

Gn8 Classic Dark

Language

Japanese

Menu labels use the chosen language.

Information Selected

Type roles and scale

Build a small, related scale for titles, section headings, body copy, captions, and technical labels. Use size, weight, and proportion to show which text leads; keep supporting labels subordinate. Give the same kind of information the same visual role.

Choose type families and sizes for the language, task, and viewing distance. About 60–75 characters per line is a useful starting measure for long English prose, not a fixed rule. Let Japanese wrap at natural phrase boundaries and keep code distinct from prose.

Keep roles recognizable across media without requiring one font file or one pixel size. Review screen text on its device and projected or printed text at its actual reading distance.

A type role names what text does. Keep that role recognizable, then choose a family, size, weight, and leading that suit the language and the place it will be read.

Assign roles before tuning individual words

When. When a page has a title, section heading, body, technical label, or code.

Why. A small, consistent scale lets readers learn which text carries the subject and which text supports it.

Example. Keep section headings on the h2 role and metadata on utility; do not enlarge one label just to fill a row.

Use size, weight, and line height as one choice

When. When a role must stand apart without making a long block harder to read.

Why. Large display text can use tighter leading, while multi-line body copy needs room for its language to shape the line.

Example. The Gn8 web body role is 16px / 24px at weight 500; use the destination medium’s own values elsewhere.

Test the language and reading distance

When. When English, Japanese, projection, print, or a narrow viewport changes the line length.

Why. The same pixel size can feel different across scripts, typefaces, and viewing conditions.

Example. Let the English and Japanese setting label wrap naturally, then inspect projected or printed type from its actual audience distance.

Keep a role consistent, not a font universal

When. When the same information appears on a website, native screen, slide, or page.

Why. Shared meaning survives across media even when the available font, point size, and line length change.

Example. The website uses system-ui for sans roles and IBM Plex Mono for utility/code; those families are not a cross-medium mandate.

A semantic type scale, rendered from the web tokens Labels show the role, size, line height, and weight. The long setting name is sample copy; it is allowed to wrap.

Display · homepage hero · 88px / 96px · 700

Page title · 32px / 40px · 600

Choose the language used for menus, dates, and help.

Section heading · 24px / 32px · 600

メニュー、日付、ヘルプに使う言語を選びます。

Body text · 16px / 24px · 500

Keep the field label with its explanation. Let each language wrap at a natural phrase boundary.

Technical label · 12px / 16px · 500

GUIDE · LABEL

Code · 12px / 16px · 400

lang="ja"

Spacing and composition

Space expresses relationships. Nearby elements read as one group; separated elements read as different groups. Decide what belongs together before choosing gaps and alignment.

Keep related information close

A label, its value, and its explanation support one decision. Keep their gaps smaller than the gap to the next decision. Equal spacing forces readers to infer which explanation belongs to which item.

Group each setting with its current value, then leave a larger gap between Language and Date format.

Align information with the same role

Give related labels and values consistent starting edges. Readers can return their eyes to the same position. Do not mix centered and left-aligned text or shift positions according to sentence length without a reason.

Align the label and value columns in a settings list. When the width is too narrow, put the value below its label instead of squeezing both columns.

Separate the container from its contents

The page container and the text, figures, and tables inside it are separate decisions. This Gn8 website retains a 1200px outer maximum; the guide uses the available space inside it. Removing the outer limit to widen prose breaks the shared alignment and page gutters. This is a web implementation example, not a 1200px requirement for every medium.

Keep the outer container centered on wide screens and align the edges of prose, illustrations, and notes. Preserve a figure’s internal padding independently of the page gutters.

Change the composition before shrinking content

Replace horizontal arrangements with vertical ones before reducing text size. Keep the same elements and reading order. Do not cut meaningful sentences or remove explanations to make a row fit. Comparison figures stack Before, then After on narrow screens.

Review both English and Japanese, long values, and enlarged text. When a table needs to preserve relationships between columns, scroll only the table region horizontally.

Group with space before adding rules

Adding a frame or side stripe to every block gives every detail the same visual weight. Establish groups with space first; add necessary boundaries to tables or controls where space alone does not explain them.

Distinguish notes with a short label, text, and a surface, without a colored side stripe. Table rules and focus outlines serve information or operation and are separate decisions.

Choose gaps by relationship, not by habit

This website uses an 8px base lattice. A short, named set reduces small differences caused by choosing a new number for every gap, and lets teams reuse the same rhythm. It does not require every gap to be 8px.

Try 8px between elements in one group, 16px for a little more room inside a group, 24px for this site’s page gutter, 32px between groups, and 48px, 64px, or 96px for larger section breaks. Start with the relationship.

Check relationships and alignment, then record exceptions

First decide what belongs together and what should be separate. Check that information with the same role shares a starting edge. If the relationship is still unclear in the rendered layout, adjust the role-based gap. When a deliberate exception is needed, record its target and reason so the intent carries to the next screen.

Review each label, value, and explanation as one setting, then check its distance from the next setting. Align the label and value starts. Do not erase a useful distinction just to make the numbers match.

Do not round geometry or medium-specific dimensions

A 1px stroke, a measured 2px focus outline, platform-defined control geometry, and optical type fitting are separate from spacing tokens. Print and native screens use the units and specifications of their target medium. The website’s 8px lattice does not transfer unchanged to every medium.

LOGO.md uses an 8px base with 4px and 2px refinements. Keep its documented 360px, 240px, 96px, 48px, and 32px dimensions and geometry as specified. Do not round every coordinate to an 8px multiple.

Choose role-based gaps from an 8px lattice Each grid step is 8 CSS px, and the bars show the example values at their actual lengths. The roles explain how to choose; they are not fixed dimensions for every element or medium.

Base unit One diagram cell is 8 CSS px. Limiting the choices reduces ad-hoc differences and makes the same rhythm easy to reuse.

8px Adjacent elements in one group
16px A little more room within a group
24px This site’s page gutter
32px Between groups
48px A section transition
64px Between larger sections
96px Around a broad grouping

Current website spacing tokens from design-token.ts 0px · 8px · 16px · 24px · 32px · 48px · 64px · 96px · 128px · 144px

Spacing changes how the same content reads Illustrative comparison. Both sides contain the same settings. These are static diagrams, not interactive screens.

Before

Language Japanese The language displayed on screen. Date format Year / Month / Day Used in lists and reports.

Uneven gaps of 13px, 7px, 23px, 11px, and 19px obscure which explanation belongs to each setting. The content is unchanged after the revision.

After

Language Japanese The language displayed on screen.

Between decisions

Date format Year / Month / Day Used in lists and reports.

Within one decision

Use 8px within each group and 32px between groups. Choose the gap by its role. The content is unchanged from Before.

Align the starting edges of comparable information Illustrative comparison. Both sides contain the same settings. These are static diagrams, not interactive screens.

Before

Language: Japanese
Date format: Year / Month / Day

Shifting positions make readers move their eyes whenever they compare values.

After

Language: Japanese
Date format: Year / Month / Day

Align labels and values in columns; stack them when the width is insufficient.

Keep the outer limit; fill the content area This diagram shows relationships. This page has a 1200px outer maximum and a 24px page gutter, without an additional narrow content cap.

24px page gutter

Shared website container

Available space for text, figures, and notes

24px page gutter

Shape and surface

Use alignment, proportion, boundaries, and repeated forms to show which elements belong together and which carry more weight. A shape should help readers understand content, recognize a control, or identify a category.

Repeat a shape when it carries the same meaning. Use a different outline or proportion only when it makes a real distinction. Gn8 has no shared corner radius for every medium; keep the logo’s documented geometry intact.

A website panel, native control, slide frame, and printed page each have their own form. Choose a surface or outline for its role, then check the full composition at its intended size.

A frame, a content surface, and a structural line do different work. Pick the smallest shape that explains the relationship, then leave the rest of the page quiet.

Use space to group before adding a surface

When. When related text can read as one group without a filled panel.

Why. A background behind every sentence makes unrelated and related content look equally boxed.

Example. Keep a heading and its explanation close; give the next independent group more space before drawing another boundary.

Let the frame define composition, not emphasis

When. When a page or slide needs an outer working area.

Why. The page boundary and the card inside it are separate decisions. Repeating both around every item adds noise.

Example. Keep the shared website shell intact; use a local frame only when the content itself needs a visible edge.

Reserve structural lines for a boundary with meaning

When. When a table row, field outline, or focus state needs a visible edge.

Why. A line should clarify structure or state, not decorate the side of a paragraph.

Example. Use the strong border around a control and the regular border for a real divider; do not add an accent rail to a note.

Keep website and native geometry distinct

When. When carrying a shape into a different product or medium.

Why. Gn8’s website radius is zero. That value does not define how an operating-system control, slide frame, or print layout must look.

Example. Keep the supplied logo geometry unchanged, and let a native control retain its platform shape.

Frame, surface, and boundary each have one job The diagram is nested because the concepts are nested. The border around the control is structural; no decorative side rail is used.

Page frame · sets the composition edge

Content surface · groups related reading

Date format

Year / month / day

Control boundary · marks a place to choose Choose a date format

Structural line · separates two table rows

Date format

Language

Accessible visual information

Keep reading order clear and place labels and sources beside the material they explain. Give meaningful images and data graphics a text alternative; on slides, explain important visual details aloud and provide notes or a reading copy when needed.

Do not rely on color alone. Pair status, category, and other visual distinctions with text, a symbol, or a distinct form. Check type size and contrast on the screen, paper, or projection people will actually use.

When the medium has controls, make their names, focus, and states perceivable through its accessibility features. The implementation reference gives the website-specific checks.

Visual review

Make the reading order understandable without decoration.
Pair color-coded meaning with a label, symbol, or distinct form.
Describe informative images and data in a form readers can access without the visual.
Check body text, labels, and sources at the intended display size and distance.

A visual example can make meaning easier to find, but it cannot stand in for semantic markup, keyboard behavior, or a full accessibility review.

Put the meaning in text, not only in a hue

When. When a status, category, selection, or series uses color.

Why. A grayscale print or a different color-vision experience may remove the hue distinction.

Example. Pair the marker with “Information” or “Review required”; do not make the colored dot carry the whole status.

Preserve a coherent reading sequence

When. When a diagram or layout has a title, explanation, and evidence.

Why. The order should survive without decorative positioning and should match the document structure.

Example. Name the graphic, summarize its conclusion, then keep labels and source beside the data they explain.

Measure the actual text pair

When. When choosing foreground, background, size, or opacity for readable content.

Why. A token pair shown on a figure is not proof that every state, size, overlay, or final render passes.

Example. Check foreground on background at the intended size, then repeat for muted text, focus, and any surface behind the label.

Add nonvisual access for informative graphics

When. When a chart, image, or diagram conveys information that the paragraph does not.

Why. A color and shape can help sighted readers but still leave the underlying data inaccessible.

Example. Give the figure a concise description and provide its values or conclusion as selectable text.

Keep the state when color is unavailable The status is Information on both sides. The first cue is intentionally incomplete; the second leaves a word and symbol after hue is removed.

Before · Color only

Color only · Information

After · Color, symbol, and words

Information

Color, symbol, and words · Information

Name the pair before measuring it

foreground on background · Light theme

Information · Color, symbol, and words

Measure this rendered pair at its actual text size. No pass/fail ratio is claimed here.

Interactive control appearance

In an interactive medium, make navigation, selection, and actions visually distinct. Let the product’s platform conventions shape controls; a shared color role does not make a web button, native switch, and slide link interchangeable.

Show the state a control is in. Hover can add a cue but cannot be the only one. Keyboard or platform focus must remain visible; pending, disabled, selected, invalid, and completed states need more than a faint color change.

Use a link when the destination changes and a button when an action occurs. Copy that names the action, field, or recovery step belongs to the writing guidance.

Before drawing a control, decide what it does and how a person can reach it. The visible shape is only part of the target; the state label and keyboard path matter too.

Make destination and action look different

When. When the same area contains navigation and an operation.

Why. A link changes location; a button performs an action. Their names and platform behavior should match that distinction.

Example. Use a link to open language guidance and a button to save a language choice.

Keep the hit target larger than its drawing when needed

When. When a small icon, checkbox, or compact label is the visible part of a target.

Why. A visible outline does not show the whole clickable or tappable area. The added target must not overlap its neighbors.

Example. Give a compact icon a comfortable target area while keeping its visible glyph small and aligned.

Show focus and selection without relying on hover

When. When a person moves by keyboard or chooses one option.

Why. Focus must remain visible without being clipped; the selected value needs a label or shape as well as its color.

Example. Keep the focus outline outside the visible control boundary and label the selected option “Japanese · Selected”.

Give pending, disabled, and error states useful text

When. When an action is waiting, unavailable, or needs correction.

Why. A spinner, faint label, or red edge alone does not say what happened or what to do next.

Example. Keep “Saving language” visible, explain why Save is unavailable, and place the correction beside the field in error.

Six static state specimens The samples do not run. Focus is drawn as a specimen; it is not a keyboard stop.

Resting

Save language

Keyboard focus

Save language

Selected

Japanese · Selected

Pending

Saving language

Disabled

Save language Choose a language to enable this action.

Error and recovery

Choose a language before saving.

Visible shape versus target area. The whole outer area is the hit target. The smaller center is the visible icon.

Motion and its static counterpart

Use motion when direction, progress, or the result of an action is clearer over time than in a still view. A change in position or color should explain what happened, not delay access to the content.

Keep information available when motion is reduced or disabled. Do not make animation the only cue or a gate to a result. For a fixed or printed medium, express the sequence through order, labels, or separate frames.

If motion carries information, provide a static way to understand the same change.

Motion is useful when it explains a cause, direction, progress, or result. It becomes decoration when it keeps moving after the message is clear or delays the next action.

Animate a change the reader needs to understand

When. When an object moves to show where content went, or when a state changes over time.

Why. The movement connects the trigger to the result. If removing it loses no information, keep the content still.

Example. Reveal a newly opened panel from the control that opened it; skip a looping pulse on an unchanged label.

Choose easing by the shape of the change

When. When an element enters, settles, or travels between two meaningful positions.

Why. Ease-out spends more of the change near the start and settles into rest; ease-in-out eases at both ends. Easing describes acceleration, not elapsed time or completion percentage.

Example. Use the site’s ease-out curve for a reveal that settles. A measured progress value should advance from its actual value, not be eased to look finished.

Keep feedback timely and interruptible

When. When a person changes a choice, cancels, or starts a newer action before motion ends.

Why. A stale transition must not win after a newer choice. The interface should apply the latest state without locking the next action behind a flourish.

Example. The website theme controller skips an active view transition and guards updates by revision so the latest selected theme wins.

Keep the same information when motion is reduced

When. When the platform requests less motion, the output is static, or the page is printed.

Why. The final state, label, and order must remain available without animation.

Example. Replace a traveling reveal with the already-visible heading and state label; show a process as ordered frames in print.

Easing describes progress through time, not the duration The horizontal axis is elapsed time. The vertical axis is animation progress. The slope of each curve is its velocity; velocity is not a second axis. Both curves run from 0 to 100%, with different acceleration.

Gn8 ease-out · cubic-bezier(0.16, 1, 0.3, 1)
Gn8 ease-in-out · cubic-bezier(0.65, 0, 0.35, 1)
Constant-rate reference

Color change token: 160ms
Enter token: 240ms
Page reveal: 560ms · ease-out
Pointer theme exception: 480ms · ease-in

Same operation, visible without motion

Ready · Save language
Pending · Saving language
Complete · Language saved

Reduced-motion and print version: show these three labeled states in order, with no movement.

04 / APPLICATION

Application

Keep the purpose and semantic roles; choose units, layout, and behavior for the output people will use.

Web, native, slides, and print

Use the same reading priorities in every medium, then adapt the implementation. A flexible page, an operating-system control, a projected slide, and a bound document have different viewing conditions and different ways to interact.

Website: Use semantic structure and responsive content. Keep every interaction available to keyboard and assistive technology.
Native app: Translate Gn8 type and color roles into native text styles and controls. Let content scale and reflow with system settings.
Slides: Give each slide one conclusion and its supporting evidence. Keep speaker notes or a reading handout separate.
Print: Set a page grid for the format and binding. Proof tables, sources, and type in the actual output.

Native-app example

Consider a settings screen with grouped appearance choices. Translate Gn8 type and color roles into the target operating system instead of copying web component dimensions.

Scalable text and grouping

Keep each setting name with its short explanation, and let the system enlarge and reflow both.

Avoid Fix labels to web-sized pixels or remove useful help to make the view fit.

Prefer Use scalable text roles and content-sized groups so translated labels can wrap.

Spacing and alignment

Align names and controls to consistent edges. Let a row grow when text or accessibility settings need room.

Avoid Copy the website shell width or fix row heights so long labels are clipped.

Prefer Follow the OS layout guidance and adjust group spacing around the actual content.

Controls and state

Choose a native selection control that fits the setting and exposes its label, value, and selected state.

Avoid Draw a custom switch and show selection only with an accent color.

Prefer Use the platform control and retain its expected focus and assistive-technology behavior.

Gn8 OpenSlide example

The Gn8 OpenSlide theme uses a 1920 × 1080 canvas, M PLUS Rounded 1c, Gn8 Light by default, and all four Gn8 palettes. These values describe that implementation.

Lead with a conclusion

Write the title as the point its evidence supports, not as a topic label. Keep one main claim on each slide.

Avoid Put “Overview” above a paragraph the presenter must read aloud.

Prefer State the finding in one sentence, then show the supporting steps, data, or diagram.

Keep evidence readable

Use actual images or data with direct labels, units, and a visible source. Explain meaningful image details aloud.

Avoid Invent a metric or rely on an unlabeled colored mark to fill space.

Prefer Show a real image, chart, or short list with its source nearby; split dense material instead of shrinking it.

Design for the room

At the Gn8 OpenSlide baseline, a content title is 80px and body text is 44px on the 1920 × 1080 canvas. Review from the audience’s viewing distance.

Avoid Copy web type sizes or compress a reading document into a projected slide.

Prefer Keep the theme’s slide roles, rehearse at presentation size, and put supporting detail in notes or a handout.

Printed-document example

A printed guide or report has fixed pages and a physical reading distance. Set its grid for the format and binding, not for a browser window.

Set a page grid

Choose margins and columns for page size, binding, and reading order. Keep recurring titles, folios, and captions in predictable positions.

Avoid Place a website-width shell on the page and let body copy run to the trim edge.

Prefer Build the grid from the actual format, leave room for binding, and align recurring headings.

Keep tables readable

Keep column labels, units, captions, and sources with the data. Repeat column context when a table continues on another page.

Avoid Shrink a wide screen table until its labels are unreadable or separate values from their headings at a page break.

Prefer Simplify or split the table at a meaningful boundary and repeat the context needed on the next page.

Proof the output

Check type, logo, color roles, and contrast on the intended paper and printer. Consider what remains distinct in grayscale or a photocopy.

Avoid Assume screen colors will reproduce unchanged or invent CMYK values for the Gn8 palette.

Prefer Review a proof from the actual output workflow and keep labels or shapes as non-color cues.

Carry the same purpose and evidence into each destination, then change the reading geometry, units, and interaction pattern. The four sketches below keep one sourced claim and its two values unchanged.

Web uses the shared shell, not a fixed inner width

On this website, keep the 1200px maximum at the outside shell. Let prose, figures, and notes use the space available inside it. At narrow widths, stack label–value pairs before allowing a table region to scroll; reserve local scrolling for comparisons that need aligned columns. The shell and the content width solve different problems.

Example. In the report sketch, the claim stays above its facts and the source wraps below them at 320px. Do not loosen the site shell or shrink the source to preserve a desktop row.

Native settings follow the target operating system

When adapting an actual setting, group its name, explanation, and current value using the chosen platform’s conventions. Use scalable system text and let the row grow for enlarged text or longer translations. A real choice uses a native control with its label, value, state, and expected focus behavior. Website pixels and CSS controls do not define native dimensions.

Example. On an Apple platform, check Dynamic Type and VoiceOver or keyboard focus on the actual settings view. The static report sketch below is not a phone screen or compiled Swift example.

OpenSlide optimizes for the room, not the browser

The Gn8 OpenSlide theme uses a fixed 1920 × 1080 canvas, M PLUS Rounded 1c, and Gn8 Light by default. Its content-title and body defaults are 80px and 44px. Lead with one conclusion, label the evidence directly, and keep the on-slide source short. If the point or its evidence no longer reads at presentation size, split the slide or move supporting detail to notes instead of shrinking it.

Example. The sketch places the claim first, the two documented values together, and a one-line citation last. Keep a longer source path in speaker notes when the slide needs more room.

Print starts from the page and the physical proof

Build the grid around the final page size, binding, and reading order, not the 1200px web shell or the slide canvas. If a table continues, repeat its column context and keep units, captions, and source notes attached to the data. Gn8 screen colors and sRGB approximations do not predict ink on paper; use the printer’s accepted color workflow and inspect a physical proof at normal reading distance.

Example. If a longer table carries these values onto another page, repeat its column headings and keep the citation with the relevant rows. Keep the two facts in this sketch together.

One report, four reading paths These static editorial sketches are not application screenshots. Each repeats the same claim, values, and source; only their order and grouping change. The figures are actual OpenSlide specifications, not business-performance metrics.

Web article

Claim

OpenSlide 2.0.1 uses a fixed 1920 × 1080 canvas; body text defaults to 44px.

Canvas: 1920 × 1080
Body text: 44px

Source: Gn8 OpenSlide design guide, opening note and §3.

Keep the claim first; pair each label with its value. Let the source wrap inside the shared page shell.

Native reference group

Claim

OpenSlide 2.0.1 uses a fixed 1920 × 1080 canvas; body text defaults to 44px.

Canvas: 1920 × 1080
Body text: 44px

Source: Gn8 OpenSlide design guide, opening note and §3.

A static grouped reference, not a control. Real settings should use the platform’s scalable text and focus conventions.

Projected slide

Claim

OpenSlide 2.0.1 uses a fixed 1920 × 1080 canvas; body text defaults to 44px.

Canvas: 1920 × 1080
Body text: 44px

Source: Gn8 OpenSlide design guide, opening note and §3.

Give the claim the first read, group its evidence, and leave only a short citation on the slide.

Printed page

Claim

OpenSlide 2.0.1 uses a fixed 1920 × 1080 canvas; body text defaults to 44px.

Canvas: 1920 × 1080
Body text: 44px

Source: Gn8 OpenSlide design guide, opening note and §3.

Keep the claim, values, and citation together inside a page grid chosen for the actual paper and binding.

Website implementation reference

This appendix records current website behavior and values. These implementation details are useful when changing the site; they are not shared measurements for other media.

The live site offers Gn8 Light and Gn8 Dark, with Dark as the default. It stores the choice under localStorage key `theme-toggle` and does not follow the operating-system appearance. Gn8 Classic Light and Gn8 Classic Dark appear in palette previews and downloads, not in the live site switch.

Base.astro and src/layouts/theme.ts restore the website choice before paint and after Astro navigation. They set html[data-theme], .dark, and color-scheme. The header exposes a Light/Dark button.

The site serves canonical logo assets from /brand/. No-suffix SVGs use currentColor: inline SVG can inherit the surrounding color, and a CSS mask can use currentColor on its host. An external img does not inherit page currentColor, so use a fixed-color SVG for img. LOGO.md records the logo family names and geometry.

The live site uses system-ui, sans-serif for headings and prose, and IBM Plex Mono with system monospace fallbacks for technical labels and code. The type table below lists the current roles.

Website spacing tokens use CSS pixels. Technical pages use a 1200px maximum shell with 24px side insets; the homepage uses 24px gutters through 900px and 48px from 901px. The radius token is 0; rounded glass capsules in the fixed header are a local exception. Library comparison frames keep their own geometry.

src/company.ts is the source for public company facts. In markup, use an <a> for navigation and a <button> for an action. Keep field names visible and put help or errors beside the field. The technical-action style uses button-background and button-foreground with 16px vertical and 32px horizontal padding.

The website’s status-attention token resolves to muted in each appearance. It is not a dedicated success, warning, or error color.

Website type tokens

These sizes, weights, line heights, and families come from the current design-token.ts object. Display is the homepage hero role; the remaining roles serve the website interface and technical pages.

Current website measurements, not native-app points or slide and print sizes.

Scroll horizontally to read every column.

Role	Family	Weight	Size / line height
Display	`system-ui, sans-serif`	700	88px / 96px Mobile 48px / 56px
H1	`system-ui, sans-serif`	600	32px / 40px
H2	`system-ui, sans-serif`	600	24px / 32px
Body	`system-ui, sans-serif`	500	16px / 24px
Body strong	`system-ui, sans-serif`	500	16px / 24px
Utility	`'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace`	500	12px / 16px
Code	`'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace`	400	12px / 16px

Website CSS specimen. These custom-property names are web implementation details.

p {
  color: var(--gn8-color-prose);
  background: var(--gn8-color-background);
}

Open the website typography tokens

Website spacing tokens

The scale below is read from the current website token source and shown in CSS pixels. Use the destination medium’s own unit elsewhere.

Current website spacing values in CSS pixels.

Token Value

--gn8-space-0 0px
--gn8-space-1 8px
--gn8-space-2 16px
--gn8-space-3 24px
--gn8-space-4 32px
--gn8-space-5 48px
--gn8-space-6 64px
--gn8-space-7 96px
--gn8-space-8 128px
--gn8-space-9 144px

Review both locales at 320, 375, 414, and 768px, then at desktop widths. Let translated labels wrap; wide tables and code should scroll locally instead of making the page overflow.

Open the website spacing tokens

Website accessibility checks

Base.astro sets the page language, landmarks, and skip link. Keep a coherent h1 and section-heading order, use semantic links and buttons, and provide text alternatives for informative images.

The global stylesheet gives :focus-visible a 2px outline using the focus token. Check that it stays visible on every surface and is not clipped. Review the page with a keyboard, at 200% zoom, and at 320 CSS px wide.

For screen color pairs, WCAG 2.2 AA calls for 4.5:1 contrast for normal text, 3:1 for large text, and 3:1 for required non-text cues. Measure rendered foreground and background together. The token page checks selected pairs only; neither page claims whole-site conformance.

Wide tables and code blocks on this guide use named, focusable scroll regions. Focus a region and use the left and right arrow keys to reach every column or line.

Website review

Keep heading order, link purpose, and control names understandable without visual context.
Keep keyboard focus visible and in the same order as the content.
At 320px and 200% zoom, reflow content or provide a named local scroll area for necessary wide material.
Check rendered text and focus pairs on each surface. Do not rely on color alone for status.

The token page checks selected semantic color pairs, not every component, focus state, transparency, or page combination. Review the token page’s selected color-pair checks

Website motion values

The current color and entry tokens are shown below. Base.astro also sets a 560ms reveal duration for elements that opt into that pattern.

A supported pointer activation of the live theme switch uses a 480ms ease-in circular View Transition from the pointer position. Initial restoration, keyboard activation, unsupported browsers, and reduced-motion settings apply the theme immediately. The stylesheet also shortens CSS transitions under prefers-reduced-motion: reduce.

For new website motion, explain direction or state without delaying content or focus. Keep an immediate route when the browser cannot use the transition or the reader asks for reduced motion.

Color transition: 160ms
Entry transition: 240ms
Theme pointer reveal: 480ms, ease-in

Open the website motion tokens

Review the real output

Review both the source and the rendered result where people will use it. A correct sentence can still be hidden by a layout; a good-looking screen can still mislabel an action.

Name the task

Identify the audience, task, owner, medium, and output conditions. Decide which choices belong to Gn8 identity and which belong to the product.
Check the material

Use the canonical logo and palette. Confirm claims and changing facts against their source; label examples and recommendations accurately.
Build from roles

Keep color, type, spacing, and shape relationships consistent. Choose units, controls, and layout for the destination.
Proof at the point of use

Review a real device, a slide at presentation size, or a print proof at normal reading distance. Check both locales, hierarchy, contrast, and supported interactions.
Report what was checked

Verify links and downloads. Describe the review that actually happened; do not claim standards conformance without the required evaluation.

Give each statement a clear owner before layout begins. Review the source as well as the output: a translation can preserve wording while changing meaning, and a careful source can still be clipped or separated from its evidence.

Name who can confirm each claim

For changing facts or measurements, name the person responsible for the claim and the source owner who can confirm its current version. An editor may clarify wording and a designer may change hierarchy, but neither should silently extend what the source proves. If the source does not support a sentence, narrow the sentence or identify it as a recommendation.

Example. For the shared report, the OpenSlide design guide supports both the canvas dimension and default body size. A layout editor may move the citation, but cannot turn 44px into a minimum-size rule.

Keep examples inside the rule they teach

A specimen should exercise the stated rule without borrowing authority from it. Mark an actual project value as a specification, a proposed layout as a recommendation, and a neutral diagram as an illustration. When comparing media, keep the task, claim, units, and citation identical so the layout—not changed evidence—explains the difference.

Example. The four report layouts below repeat the same claim, 1920 × 1080 and 44px values, and source. They do not add a before/after result or a business metric.

Translate meaning before matching line breaks

Review Japanese and English as separate compositions. Preserve the claim, units, and source relationship, then allow the labels and sentence lengths to wrap naturally. Compare the rendered foreground and background where the text appears. Check focus only on real interactive elements; a static diagram must not imitate a control just to show a focus ring.

Example. At 320px, the Japanese claim may occupy a different number of lines than the English one. Keep both values and the citation visible instead of forcing the two versions into matching heights.

Repair the failing medium, not the source by reflex

When an output fails, identify whether the cause is the source, translation, layout, or destination behavior. Change the smallest layer that caused it. Then repeat the check that exposed the problem and confirm that the unchanged claim, values, and source still travel together.

Example. If a 320px web layout separates a label from its value, reflow that pair. Do not rewrite the OpenSlide specification to make the web row fit.

Detect, repair, verify the same report The report below is held constant across all four rows. Each repair changes only the presentation or interaction needed by that destination.

Claim

OpenSlide 2.0.1 uses a fixed 1920 × 1080 canvas; body text defaults to 44px.

Canvas: 1920 × 1080
Body text: 44px

Source: Gn8 OpenSlide design guide, opening note and §3.

These are actual theme-specification values, not business-performance metrics.

Web

Detect: At 320px, a fact value separates from its label or forces page-wide horizontal scrolling.
Repair: Stack each label and value, then let the citation wrap. Keep the shared 1200px outer shell unchanged.
Verify: Read both locales at 320px. Confirm there is no page overflow and both facts and the source remain present.

Native

Detect: Enlarged system text clips a value or splits it from the setting group.
Repair: Use the target OS’s scalable text and group layout. Add a native choice control only if the setting is actually editable.
Verify: Increase system text size and inspect the group. Where a real control exists, traverse its accessible and keyboard focus order.

OpenSlide

Detect: The claim stops stating a conclusion, or the citation crowds the evidence at presentation size.
Repair: Keep the two sourced facts with the claim, shorten the visible citation, and put the full reference in notes. Split rather than reduce type.
Verify: Review the 1920 × 1080 canvas and 1280 × 720 preview, then read it from the presentation position. Confirm the source is visible or in notes.

Print

Detect: A page break separates the fact labels or source, or the printed color differs from the screen swatch.
Repair: Repeat the column context and keep the citation with the facts. Agree the printer’s output settings from its own profile; do not derive ink from sRGB.
Verify: Inspect a physical proof on the intended stock at its actual size and normal reading distance. Check labels, values, citation, and non-color cues.

Canonical resources

Use the source of truth when changing an asset, token, or platform detail. Update that source first, then keep this guide’s implementation reference accurate.

Tokens: Website token values, previews, and downloads
Logo: Logo families and canonical assets
Palette: Four Gn8 palette variants
Design resource index: Design resource index

@libs/design/tokens/src/design-token.ts owns canonical palette values and website-token serializers. OpenSlide palette files are generated from this source.
@libs/design/brand-assets/assets/ holds canonical logo artwork. LOGO.md records logo family names and geometry.
@libs/design/gn8-openslide-theme/docs/design-guide.md documents the OpenSlide canvas, type, layout, and slide-content guidance.
This app (@apps/design/gn8) is one Web implementation example. Its DESIGN.md records the app-specific type, spacing, shape, theme, and motion decisions; its src/styles/global.css and src/layouts/Base.astro implement the app styles and shell. They are not rules for every Gn8 medium.
src/layouts/theme.ts in this app implements its live Light/Dark controller.

Choose the source asset and palette representation for the destination that will render them. A canonical source, generated web stylesheet, platform-specific native representation, and print proof are related outputs, not interchangeable originals.

Keep logo geometry in its canonical artwork

Start from the approved SVG family in `@gn8/brand-assets/assets/` and use LOGO.md for its geometry and comparison basis. On the website, an inline SVG or CSS mask can inherit `currentColor`; an external `<img>` cannot, so choose a fixed-color source for that use. If a native renderer or print vendor needs another format, confirm its supported vector or raster requirements before conversion.

Example. Use a canonical SVG for the website’s theme-aware inline treatment, but do not copy path data into a new component or recolor the artwork to approximate a palette role.

Select semantic color roles before color values

Choose what the color means before choosing a palette. In Gn8, `accent` is link and chart-series ink; `primary` is the shared brand color, not a button fill. Buttons use `button-background` and `button-foreground`. Yellow is a highlight, not a warning. OpenSlide’s `SlideTemplate` uses one of `light`, `dark`, `classic-light`, or `classic-dark`; the live website switch remains Light/Dark, defaulting to Dark. A printed color needs proof under the printer’s output conditions.

Example. A deck using the OpenSlide Light default does not inherit the website’s Dark default. Use the named theme role instead of copying a live page swatch.

Edit one source, then update its consumers

`design-token.ts` owns the canonical palette values and serializers. The brand-assets package owns the flat canonical artwork; OpenSlide palette files are generated from the token source. Treat generated CSS, palette files, and copied `public/brand/` assets as outputs. Native apps map semantic roles into their platform’s own styles; this component does not claim a compiled Swift implementation or a native export.

Example. After a token change, regenerate the affected output from its canonical source. Do not hand-edit one generated palette and leave its website or slide consumers on the old value.

Review each changed destination once

A source change does not prove that every rendering still works. Identify which consumers changed, compare their output to the approved source, and review the actual medium. Keep the source revision and the destinations checked clear to the next editor; do not claim a print result from an on-screen value.

Example. For a logo-source change, compare the affected website and slide renderings with the geometry in LOGO.md. If the asset is sent to print, check the vendor’s physical proof rather than treating the site preview as approval.

Trace one source to the relevant proof Each route names a canonical source, a destination-specific representation, and the proof that can actually validate it. This is not an export, deployment, or PDF pipeline.

Web

Source design-token.ts and the canonical SVG in `@gn8/brand-assets/assets/`.
Destination choice Use serialized website CSS and the copied `/brand/` asset. Choose inline or mask `currentColor` only where inherited color is intended; an external image needs a fixed-color SVG.
Review at use Check the actual light and dark website surfaces, including the SVG treatment and its visible contrast.

Native app

Source The same semantic palette roles and approved logo geometry.
Destination choice Map roles to the target OS’s color and scalable-text styles. Confirm that platform’s accepted vector format before making a raster copy.
Review at use Inspect the real device with enlarged system text. Check focus and accessible state on actual controls, not on a static logo or report.

OpenSlide

Source design-token.ts and the named Gn8 palette.
Destination choice Use the generated OpenSlide palette and `SlideTemplate` palette ID. Do not patch generated palette files by hand.
Review at use Review the 1920 × 1080 slide on the actual display path and at the audience’s viewing distance.

Print

Source The approved vector artwork and canonical palette intent.
Destination choice Agree on the artwork format and color handling the print vendor accepts. Screen sRGB values are not a CMYK recipe or a print guarantee.
Review at use Review the vendor’s physical proof on the intended stock, at actual size and normal reading distance.

Design guide

Principles

Purpose and shared identity

Separate identity facts from site rules

Name a reader and the decision they need to make

Record access conditions in the brief

Adapt controls and units to the destination

Keep the facts; give each medium its own job

Keep stable

Adapt

Web

App

Slide

Print

Decision priorities

Separate a documented fact from a recommendation

Keep the decision beside its evidence

Give each term and color one meaning

Use hierarchy to explain, not to decorate

Check access and feedback before visual polish

Purpose → information → form

Purpose

Information

Form

Move detail, not evidence

Dense slide

Claim, evidence, and handout

Slide

Handout or notes

Writing

Voice and tone

Welcome readers to make a choice

Explain that saving failed

Confirm a change that cannot be undone

Terminology and labels

Navigation

Page heading

Save action

Completion message

Claims, facts, and sources

Describe the time required to export data

Actions, status, and recovery

After saving without a required summary

Example of input retained after failure

Visual design

Information hierarchy

Before

After

Logo identity

Canonical downloads

Line · same visible stroke width

Solid · same artboard scale

Color roles

Shared color roles

Page background

Surface

Raised surface

Foreground

Prose

Muted

Faint

Border

Strong border

Accent

Primary brand color

Button background

Button foreground

On-color

Information foreground

Gn8 palettes

Gn8 Light

Gn8 Dark

Gn8 Classic Light

Gn8 Classic Dark

Type roles and scale

Spacing and composition

Before

After

Before

After