Brand — Gallory

Art without borders.

Logo

Three marks, each in two inks. Use -dark on light backgrounds and-light on dark: the suffix names the ink, not the theme.

Logo

Primary lockup: headers, share image, email

Download: logo-dark.svg logo-light.svg

Logomark

Favicon, avatar, collapsed sidebar, app icons

Download: logomark-dark.svg logomark-light.svg

Logotype

Wordmark only: print, partner lockups

Download: logotype-dark.svg logotype-light.svg

Clear space

Keep clear space of at least half the logomark height on every side, and never go below 16 px for the logomark or 96 px wide for the logo and logotype. Never stretch, recolor, rotate or add effects. (Proposed best practice; the designer gave no rules.)

Color

Paper and Void carry the brand; primary actions are Void; Indigo is the accent for links, focus and marks.

Paper · light

The page, surfaces and text. Void carries the primary actions; indigo is the accent.

surface-page (Paper)#F5F4F1

surface-card (Paper)#FFFFFF

surface-tint (Paper)#EBEAE6

ink (Paper)#101011

ink-muted (Paper)#5A5955

line (Paper)#DAD9D4

line-strong (Paper)#8A8985

accent (Paper)#4F46E5

accent-hover (Paper)#423BBB

accent-text (Paper)#4F46E5

on-accent (Paper)#FFFFFF

destructive (Paper)#B91C1C

accent-wash (Paper)#EBEAE6

success (Paper)#3f6b4f

warning (Paper)#8a5d0a

primary-hover (Paper)#2B2A29

primary (Paper)#101011

on-primary (Paper)#F5F4F1

Void · dark

The same semantic roles on the dark canvas.

surface-page (Void)#101011

surface-card (Void)#1B1B1C

surface-tint (Void)#2B2A29

ink (Void)#F5F4F1

ink-muted (Void)#9A9994

line (Void)#2B2A29

line-strong (Void)#74736F

accent (Void)#8B8CF5

accent-hover (Void)#A0A1F4

accent-text (Void)#8B8CF5

on-accent (Void)#101011

destructive (Void)#FF8A80

accent-wash (Void)#2B2A29

success (Void)#7fb08f

warning (Void)#e0a83a

primary-hover (Void)#EBEAE6

primary (Void)#F5F4F1

on-primary (Void)#101011

Text pairs

Every pairing below meets WCAG AA (4.5:1). The values are computed from the palette when this page is built.

ink (Paper) on surface-page (Paper)17.3:1

ink-muted (Paper) on surface-page (Paper)6.4:1

on-accent (Paper) on surface-tint (Paper)1.2:1

surface-page (Paper) on ink (Paper)17.3:1

destructive (Paper) on surface-page (Paper)5.9:1

ink (Void) on surface-page (Void)17.3:1

ink-muted (Void) on surface-page (Void)6.7:1

on-accent (Void) on surface-tint (Void)1.3:1

surface-page (Void) on ink (Void)17.3:1

destructive (Void) on surface-page (Void)8.3:1

Roles

Every semantic token, both themes, with the role it plays. Primary actions use ink; indigo never fills a primary button.

Token	Paper	Void	Role
surface-page	#F5F4F1	#101011	Page background. Paper in light, Void in dark. The gallery wall the artwork hangs on.
surface-card	#FFFFFF	#1B1B1C	Cards, panels, inputs. In light it is pure white so artwork photos sit on a clean surface.
surface-tint	#EBEAE6	#2B2A29	Relief fields: image placeholders, disabled controls, quiet bands. Also the menu, ghost and select hover surface (shadcn accent). ink-muted stays readable on it: 5.8:1 in light, 5.0:1 in dark.
ink	#101011	#F5F4F1	Primary text and the primary action fill (shadcn primary). Void on Paper in light, Paper on Void in dark, 17.3:1 both ways. Also secondary-button outlines.
ink-muted	#5A5955	#9A9994	Secondary text: captions, medium and dimensions, artist labels. 6.4:1 on surface-page in light, 6.7:1 in dark.
line	#DAD9D4	#2B2A29	Hairline borders and dividers (1px). Used instead of shadows.
line-strong	#8A8985	#74736F	Resting border of form controls (1px). At least 3:1 on surface-card and surface-page (WCAG 1.4.11); line stays for dividers and card edges. The dark value is a schema placeholder: dark controls are not designed yet (PLAN-124).
accent	#4F46E5	#8B8CF5	Indigo. Links, focus ring and the one small bold mark per screen. Never the fill of a primary button: primary actions are ink. 5.7:1 on surface-page in light, 6.5:1 (Indigo Soft) in dark.
accent-hover	#423BBB	#A0A1F4	Hover and pressed state of accent-coloured links and marks. The one derived v3 value: indigo 20% toward ink in light, indigo-soft 20% toward paper in dark. 7.4:1 on surface-page in light, 8.1:1 in dark.
accent-text	#4F46E5	#8B8CF5	Accent-coloured text and links at body size. 5.7:1 on surface-page in light, 6.5:1 in dark.
on-accent	#FFFFFF	#101011	Text and icons on an accent fill. 6.3:1 in light, 6.5:1 in dark.
destructive	#B91C1C	#FF8A80	Errors, destructive actions: delete, cancel order, refund, failed states. 5.9:1 with surface-page text in light, 8.3:1 in dark. Distinct from primary (ink) and accent (indigo).
accent-wash	#EBEAE6	#2B2A29	Neutral field for menu, ghost and outline hover and selected rows. Deliberately neutral, not indigo-tinted: UI chrome does not compete with artwork.
success	#3f6b4f	#7fb08f	Available, confirmed, delivered. Muted sage so it never competes with the artwork. 5.6:1 on Paper, 7.7:1 on Void.
warning	#8a5d0a	#e0a83a	Reserved, pending payment, attention needed. 5.2:1 on Paper, 8.9:1 on Void.
primary-hover	#2B2A29	#EBEAE6	Hover state of primary (ink) fills: ink-800 in light, ink-100 in dark. Replaces accent-hover on bg-primary elements, so primary buttons do not hover into indigo.
primary	#101011	#F5F4F1	Primary action fill, resolved through the shadcn mapping
on-primary	#F5F4F1	#101011	Text and icons on the primary fill

Typography

Fraunces for display text, Hanken Grotesk for interface text, Geist Mono for identifiers. Self-hosted; no third-party font requests.

Fraunces — display

Art without borders.

Original work, collected quietly.

Hanken Grotesk — UI and body

Discover and collect original art

Buttons, forms, navigation, tables, badges and prices: Add to cart · € 1,250.00

Geist Mono — identifiers

ORD-2026-000184 · ED 3/25 · @atelier

Fraunces is for short display text and artwork titles. Use Hanken Grotesk for long text and controls.

In use

The logomark on an opaque Void tile for icons; the light lockup on Void for the default share image.

Touch icon, 180 px

Icon, 512 px