NEXDATAFORGE / VISUAL FOUNDATION

Typography Board

Foundation v1.1Visual Preview: AvailableProduct Core / Website FoundationUpdated 2026-08-05

Principle

Typography keeps product roles intact and adds website roles for display, hero, section, marketing body, eyebrow, and captions.

Display

NexDataForge Design Studio

48px / 700

Heading 1

Tell users what matters first

32px / 700

Title

Three suggestions are ready

20px / 700

Body

AI organized the request details.

16px / 400

Label

Reservation time

13px / 700

Numeric

125,000 / 4.9 / 02:35

22px / 700

PRODUCTION FOUNDATION

Website Typography Roles

Stage 2 adds role tokens without changing product typography. Width and layout decisions come before font-size reduction.

Display

NexDataForge Website Foundation

var(--ndf-website-display-size)

Hero Title

Build intelligence for better systems

var(--ndf-website-hero-title-size)

Section Title

Reusable website sections begin with shared rhythm

var(--ndf-website-section-title-size)

Section Description

Descriptions keep enough width on desktop, then wrap naturally on tablet and mobile without forced line breaks.

var(--ndf-website-section-description-size)

Eyebrow

WEBSITE FOUNDATION

var(--ndf-website-eyebrow-size)

Marketing Body

Marketing copy uses product typography as its base, then adds role-based width and line-height rules for repeatable pages.

var(--ndf-website-body-size)

Caption

Production foundation. Visual board sample only.

var(--ndf-website-caption-size)

DesktopPrefer one-line headings by checking width and max-width first.

TabletAllow natural wrapping and reduce grid columns.

Mobile / 320pxSingle-column flow, no clipping, no horizontal scroll.

Visual Samples

Foundation tokens

Usage

Related component

Good / Avoid

Good

의미와 상태를 분명히 하고, 실제 행동과 연결합니다.

Avoid

장식만을 위해 강조하거나 색·크기만으로 상태를 전달하지 않습니다.

Accessibility

Keyboard focus, 충분한 대비, semantic HTML, 명확한 label, 44px 터치 영역과 320px 화면을 확인합니다.

Project Application · Bidme

Bidme preview is next.