Hano Design System

Component reference — dev only

Logo

Dark (default)

Hano

Light

Hano

Sizes

Hano Hano Hano

Button

Variants

Sizes

As link (with href)

Link button Outline link

On dark background

SectionHeading

With subheading + body slot

Democratic Design

Crafted and Curated Without Compromise.

Optional body text passed as a slot, rendered below the heading.

Title only

The Foundations of the Brand

Heading levels (h2, h3, h4)

Level 2

This is an h2

Level 3

This is an h3

Level 4

This is an h4

FramedImage

Dark frame (default)

Sample interior

Light frame (on dark background)

Sample interior

With caption

Sample interior
001. Interior detail

Gallery grid

001.
002.
003.

HeaderLink

Active vs inactive states

Active (current page) Inactive Inactive

Color Palette

Ritual — Order, Intention, Precision

Play — Energy, Curiosity, Visual Joy

Memory — Warmth, Materiality, Emotional

Section Themes

.section-dark

Text inherits ivory-mist on smoky-black background.

.section-warm

Text inherits ivory-mist on dark-brown background.

.section-neutral

Text inherits smoky-black on natural-linen background.

Typography

Quadrant Text (font-heading) — Titles, headings

Curation with Purpose

ABC Diatype (font-body) — Body, UI, buttons

Hano bridges the gap between personal style and spatial coherence, translating individual preferences into curated design systems.

TAY Slowpoke (font-accent) — Pull quotes, accents

Where taste meets intention

.subheading utility

Uppercase tracked label

Editorial Utilities

.frame (dark border)

.frame-light (ivory border, for dark backgrounds)

.accent-text (TAY Slowpoke uppercase)

Elevated balanced curated