North star · Use expansive, uninterrupted black or white fields and let one oversized, tightly set headline or stark media moment define each section.
The page builds its identity from a strict black-and-white foundation: black dominates the opening and editorial sections, while white carries the ApeCoin feature, partnership callout, collection directory, and footer. White text reverses onto the dark sections; black text takes over on the light band. AK Monument Grotesk supplies both compact navigation and very large, heavy uppercase headlines, with tight leading and negative tracking making display copy feel compressed and emphatic. The first screen is an immersive monochrome motion graphic, not a product mock-up: a white abstract mark and dotted wave pattern sit against black. Long stretches of dark negative space separate sparse statements and collection imagery. The layout shifts to a broad white editorial field near the bottom, with left-aligned copy, a centered join prompt, and a compact multi-column directory. The acid yellow-green is a restrained accent found in a card, not the defining page canvas.
Used throughout for display headlines, editorial copy, navigation, links, and footer labels.
角色
示例
字号
字重
行高
字距
特大标题
Oversized uppercase statements and hero-scale display moments.
Yuga Labs
160px
800
0.82
-0.03em
一级标题
Large, heavy uppercase lead headline such as “BUILDING CULTURE ONCHAIN.”
Yuga Labs
102px
800
0.82
-0.03em
二级标题
Prominent section headings, including the ApeCoin headline.
Yuga Labs
52px
800
0.9
-0.02em
三级标题
Secondary headings and emphatic content labels.
Yuga Labs
32px
700
0.9
0
四级标题
Compact subsection and directory headings.
The quick brown fox 敏捷的狐狸
24px
700
0.83
0
正文
Supporting editorial copy and explanatory text.
The quick brown fox 敏捷的狐狸
14px
200
1.1
0
导航
Small, plain navigation labels and utility links.
The quick brown fox 敏捷的狐狸
14px
400
1
0
间距与布局
基准单位 2px · 密度：宽松
245px版块间距
—元素间距
—卡片内边距
1380px内容最大宽度
2px
6px
12px
15px
20px
25px
30px
40px
The page uses a spacious, mostly single-column editorial flow, with measured maximum content width of 1380px and a four-column collection showcase. Section rhythm is deliberately expansive: large black intervals separate the opening media, the left-aligned statement, and supporting copy. The white lower band changes the mood without changing the restrained alignment system. Its ApeCoin copy begins at the left, the join prompt is centered, and the directory and footer resolve into compact columns. Density remains low except around collections and footer links.
圆角与层次
按钮 · 9999px
链接 · 40px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The design is predominantly flat, with no measured shadows or gradients. Separate sections through large shifts in whitespace and the decisive black-to-white background change, not layered cards. Hairlines and underlined links provide restrained structure; collection panels use flat fills and square corners. Buttons are black pill shapes with a black border.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
A minimal bar at the bottom edge of the opening media, with a thin rule, Yuga Labs at left, and Home/About links at right.
Oversized statement
Large, bold uppercase AK Monument Grotesk on black, left-aligned with tight line-height and tracking.
Collection showcase
Four-column media-led collection area with white text links; measured card fills include #131313 and an occasional #d3de5d.
ApeCoin feature
White section with black uppercase heading, explanatory copy, video, a black rounded Learn more button, and a fine horizontal divider.
Join callout
Centered JOIN US headline on white with a compact black pill link beneath it.
Collection directory
Compact three-column link directory on white, headed by an underlined Our Collections label.
Footer
White, low-density footer with grouped navigation, policy, and social links arranged across three columns.
Imagery · The opening is defined by a full-bleed black-and-white animated-looking graphic: a central abstract white mark framed by a field of dotted, warped shapes. Collection content is media-heavy, with many image elements arranged in a four-column showcase; these assets are content imagery rather than the source of the core palette. A video appears in the white ApeCoin section. Keep imagery bold, high contrast, and spaciously framed.
Use black and white as the dominant section-level colour system.
Preserve generous dark negative space between content moments.
Set major display headlines in heavy uppercase with tight leading.
Keep navigation small and visually quiet.
Use the lime accent sparingly and only as a content-level highlight.
Prefer flat surfaces and thin rules over decorative elevation.
✕ 不该做
Do not fill every section with cards or copy.
Do not introduce gradients or drop shadows.
Do not use the lime accent as the primary canvas.
Do not round collection panels.
Do not make navigation compete with the hero artwork.
Do not add decorative colours beyond the measured palette.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in the Yuga Labs visual style using Abyss Black (#000000) and Gallery White (#ffffff) as the dominant alternating section fields. Use AK Monument Grotesk, or Space Grotesk if unavailable; make display headings heavy, uppercase, tightly tracked, and compact in leading. Keep navigation small and understated. Let each section breathe with substantial uninterrupted space, then use a deliberate alignment change—left-aligned editorial copy, a centered callout, or a compact multi-column directory—to create rhythm. Treat media as bold, high-contrast content, not decorative cards. Use Charcoal Panel (#131313) for subtle dark card differentiation and Acid Lime (#d3de5d) only as a restrained accent. Keep surfaces flat, buttons pill-shaped, and rules thin; avoid shadows, gradients, and unnecessary UI.
