Brand identity

Clarity through contrast, in black, grey and white. This guide defines the Aoyue Design symbol, colour, type, layout, texture and motion — the source for the website and every brand touchpoint.

01 — Symbol

Symbol

An A and a D form one shape through 180° rotational symmetry — design and engineering as two sides of the same work. The ring is an open aperture: it lets light in and brings things into focus. Every diagonal and opening follows the 58° axis.

58°Diagonal axis: The angle of every diagonal, wipe and hatch
180°Rotation: Turn the A half a revolution and it is the D; light and dark mode work the same way
44°Aperture: Two openings face each other across the 58° axis
¼Clear space: Keep a quarter of the ring diameter free on every side

Horizontal lockupStandard use, 260px wide and above

ReversedPaper on Ink

48 32 24 16

Small sizes16–47px uses the optically adjusted drawing

Clear space = ¼ diameter

01Scale uniformly only — never distort, re-space or retype the wordmark
02Use Ink or Paper only — no gradients, shadows or outlines
03Use the small-size drawing from 16 to 47px and the standard drawing from 48px
04Keep a quarter of the ring diameter as clear space

The symbol is never smaller than 48px; the wordmark never smaller than 144px.

02 — Colour

Colour

The palette is black, grey and white. Ink and Paper carry the contrast and a sixteen-step neutral scale handles depth. The interface uses no hue — the work supplies the colour.

Ink#0A0A0AHeadings, text and solid controls

Steel#6B6B6BSecondary information and labels

Paper#FAFAFAPage background

Paper 60%Ink 30%Grey 10%

Neutral scale

0#FFFFFFWhite
25#FAFAFAPaper 紙白
50#F4F4F4
100#EDEDEDMist 霧
150#E4E4E4
200#D6D6D6
300#BDBDBD
400#A1A1A1Ash 灰
500#858585
600#6B6B6BSteel 鋼
700#525252
800#2B2B2BGraphite 石墨
850#1F1F1F
900#161616
950#0E0E0E
1000#0A0A0AInk 墨

Semantic roles

Role	Light	Dark	Contrast (light / dark)
--color-bg	#FAFAFA	#0A0A0A	—
--color-bg-subtle	#F4F4F4	#0E0E0E	—
--color-surface	#EDEDED	#161616	—
--color-surface-raised	#FFFFFF	#1F1F1F	—
--color-fg	#0A0A0A	#FAFAFA	19.0 / 19.0
--color-fg-body	#2B2B2B	#E4E4E4	13.6 / 15.6
--color-fg-muted	#525252	#A1A1A1	7.5 / 7.7
--color-fg-subtle	#6B6B6B	#858585	5.1 / 5.4
--color-line	#E4E4E4	#1F1F1F	—
--color-line-strong	#BDBDBD	#525252	—
--color-line-contrast	#0A0A0A	#FAFAFA	—
--color-inverse-bg	#0A0A0A	#F4F4F4	—
--color-inverse-fg	#FAFAFA	#0A0A0A	—
--color-inverse-muted	#A1A1A1	#525252	—
--color-inverse-line	#2B2B2B	#D6D6D6	—
--color-inverse-surface	#161616	#EDEDED	—
--color-focus	#0A0A0A	#FAFAFA	—
--color-overlay	rgb(10 10 10 / 0.96)	rgb(10 10 10 / 0.97)	—
--color-nav	rgb(250 250 250 / 0.82)	rgb(10 10 10 / 0.78)	—

03 — Typography

Typography

Geist sets Latin text, Source Han Sans sets Traditional Chinese and Geist Mono sets labels and figures; Simplified Chinese, Japanese and Korean use the matching Noto Sans. Three weights only — 400, 500 and 600. Large type is set tight, body text loose.

GeistLatin text and figures400 · 500 · 600

永

Source Han Sans TWTraditional Chinese400 · 500 · 600

58°

Geist MonoLabels, indexes and data400 · 500 · 600

Type scale (fluid between 375 and 1440px)

--text-display46–116pxBring your brand into focus.
--text-3xl36–76pxBring your brand into focus.
--text-2xl30–52pxBring your brand into focus.
--text-xl24–36pxBring your brand into focus.
--text-lg20–26pxBring your brand into focus.
--text-md18–20pxBring your brand into focus.
--text-base16–17pxBring your brand into focus.
--text-sm14pxBring your brand into focus.
--text-xs12pxBring your brand into focus.
--text-2xs11pxBring your brand into focus.

04 — Layout

Layout

A 12-column grid, up to 1440px wide. Margins and gutters scale continuously with the screen; spacing uses a 4px unit.

Columns: 12
Max width: 1440px
Margin: 20–56px
Gutter: 16–24px

Spacing

--space-14px
--space-28px
--space-312px
--space-416px
--space-520px
--space-624px
--space-832px
--space-1040px
--space-1248px
--space-1664px
--space-2080px
--space-2496px
--space-32128px
--space-40160px

No rounded corners

Structure and controls are square. In the whole system, only the aperture is round.

05 — Texture

Texture

The hatching and dot grid of the previous site carry over into the identity: hatching runs on the 58° axis, the dot grid is the drawing surface for the mark and the work, solid rules divide sections and dotted rules divide items.

Hatch58° · 7px apart · 1px · 16% of foreground

Dot grid12px apart · 1px dots · 30% of foreground

RulesSolid between sections, dotted between items

06 — Motion

Motion

Motion has three moves: focus, wipe and turn. All of it stops when reduced motion is requested, and nothing depends on it.

Focus

FocusContent arrives like a lens finding focus: fade, rise and sharpen.

WipeButtons and the appearance switch invert along the 58° diagonal.

TurnLight and dark are the same mark turned half a revolution.

Hover a tile to preview

Easing

--ease-focus0.16, 1, 0.3, 1
--ease-standard0.2, 0, 0, 1
--ease-inout0.65, 0, 0.35, 1
--ease-exit0.4, 0, 1, 1

Duration

--duration-instant100ms
--duration-fast200ms
--duration-base360ms
--duration-slow640ms
--duration-slower1000ms

07 — Voice

Voice

We write the way we design: lead with the point, use concrete words, never overstate.

01Concise
One idea per sentence. Cut what does not carry meaning.
02Assured
State what we can do plainly. No vague promises.
03Warm
Speak as “we” to “you” — professional, never distant.

08 — Design tokens

Design tokens

Every value has one source: design/tokens/aoyue.tokens.json in the W3C Design Tokens format. The build generates CSS variables from it and checks text contrast; the same file can be imported into design tools or converted for other platforms.

:root {
  --color-fg: var(--gray-1000);   /* Ink */
  --color-bg: var(--gray-25);     /* Paper */
  --brand-diagonal: 58deg;
  --text-display: clamp(2.875rem, …, 7.25rem);
  --ease-focus: cubic-bezier(0.16, 1, 0.3, 1);
  --radius-none: 0px;
}