Internal Brand Guidelines
Brand Guidelines v1.0

CHAINISLE
Brand System

Web3 原生创作者基础设施平台品牌视觉规范。定义视觉语言、组件体系与使用规则，确保品牌在每个触达面传递精密的工程感与温暖的能量。

June 2026 — Dark canvas only
01 Logo 品牌标识 02 Colors 色彩系统 03 Typography 字体排版 04 Spacing 间距网格 05 Elevation 层级圆角 06 Components 组件 07 Do's & Don'ts 规则
Colors

Color System

品牌渐变是暗色宇宙中唯一的色彩爆发。点击任意色块复制色值。

Brand Gradient 品牌渐变
135°
Start 暖橙
#FF9B30
Mid 中值
#FF6B2C
End 红橙
#FF4528
Direction
135deg
RGB Start
255, 155, 48
RGB End
255, 69, 40
Brand Ramp 品牌色阶
50100200300400500600700800900950
50#FFF7ED
100#FFEDD5
200#FED7AA
300#FDBA74
400#FF9B30
500#FF6B2C
600#FF4528
700#C2310E
800#9A2A0E
900#7C2612
950#431007
400 = Gradient Start · 500 = Primary (单色场景) · 600 = Gradient End
Surface 表面层级
Canvas 画布Soft 微亮Card 卡片Elevated 浮层Mid 嵌套
#0a0a0a
#111214
#161819
#1C1E21
#252729
Text 文字层级
Ink 标题Soft 次标题Body 正文Mid 说明Mute 占位
#ffffff
#E8E9ED
#B0B3BA
#7D8187
#5A5E66
Accent 辅助色
Amber 琥珀
眉标 / 标签 / 辅助高亮
#C8A96E
200, 169, 110
50#FAF6EE
100#F0E7D2
200#E2D1A8
300#D5BD8B
400#C8A96E
500#A68B4B
600#7A6634
700#5C4516
Indigo 靛蓝
辅助强调 / 交互焦点 / 交替色块
#6366F1
99, 102, 241
50#EEF2FF
100#E0E7FF
200#C7D2FE
300#A5B4FC
400#818CF8
500#6366F1
600#4F46E5
700#3730A3
Teal 青
生态 / 成长 / 氛围渐变
#0D9488
13, 148, 136
50#F0FDFA
100#CCFBF1
200#99F6E4
300#5EEAD4
400#2DD4BF
500#0D9488
600#0F766E
700#115E59
Semantic 语义色
Success
成功
#22C55E
34, 197, 94
Error
错误
#EF4444
239, 68, 68
Warning
警告
#F59E0B
245, 158, 11
Info
信息
#3B82F6
59, 130, 246
色彩边界 Color Boundary
• 品牌渐变中值 #FF6B2C 用于需要单色的场景（favicon、小图标），不单独使用起止色
• 1000X 的 #E65100 是独立品牌色，不可与 CHAINISLE 渐变混用
• 辅助色仅限特定功能场景，不可替代品牌渐变出现在 Logo / Hero / 主 CTA
• 语义色仅在功能性 UI 中出现，不用于装饰
Typography

Type System

Three typefaces form a dual-voice system: Poppins for display and body, Noto Sans SC for Chinese, and Geist Mono for labels and eyebrows.

Poppins
Display + Body — English, numerals, all UI text
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789
Noto Sans SC
Chinese (Simplified only) — Headlines, body, captions
构建 Web3 创作者基础设施 驱动全球创作者经济 链屿 共建未来
GEIST MONO
Monospace — Eyebrows, labels, data counters (UPPERCASE + positive tracking)
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 !@#$%
Display XL
Powering Web3
96px / 600 / -2.4px tracking
Display LG
Creator Economy
72px / 600 / -1.8px tracking
Display MD
Infrastructure Platform
48px / 600 / -1.2px tracking
Display SM
Growth, not luck
32px / 600 / -0.6px tracking
Body XL
构建下一代 Web3 创作者生态，成为连接创作者、社群与生态项目的长期基础设施。
20px / 400 / 0 tracking
Body LG
CHAINISLE is a Web3-native, globally distributed creator infrastructure platform. Building the next generation of the creator economy.
18px / 400 / 0 tracking
Body MD
增长源自策划，而非偶然。专为 Web3 打造，而非由 Web2 改造。你投资的是长期影响力，而非短期走红。
16px / 400 / 0 tracking
Body SM
Copyright 2026 CHAINISLE. All rights reserved. Powering the Global Web3 Creator Economy.
14px / 400 / 0 tracking
Caption Mono
—— BRAND IDENTITY
14px / Geist Mono / +1.4px tracking / UPPERCASE / Amber
Label
FORMAT · VIEWBOX · ASPECT RATIO
12px / Geist Mono / +1.2px tracking / UPPERCASE / Mute
Number Display
01
64px / Poppins 800 / -1.6px tracking / Brand orange
Spacing & Layout

Spatial System

A 4px base unit scales through 12 tokens. Max content width 1200px, centered. No arbitrary values.

xxs
2px
xs
4px
sm
8px
md
12px
lg
16px
xl
24px
2xl
32px
3xl
48px
4xl
64px
5xl
96px
6xl
128px

Breakpoints

Mobile
< 768px — 1 col, hero 48px, hamburger nav
Tablet
768 – 1024px — 2 col, hero 48px
Desktop
> 1024px — Full hero, 2-4 col grids
Elevation & Shape

Depth & Radius

No box-shadows. All elevation is expressed through border color differentiation. The glow border (L2) is CHAINISLE's unique contribution to the x.ai minimal system.

L0 Flat
No border
L1 Hairline
1px #212327
L2 Glow
Gradient 25%
L3 Overlay
rgba(0,0,0,.7)

Border Radius

none
0px
sm
8px
md
12px
pill
9999px
full
9999px
Components

UI Components

All interactive elements use pill shape. Cards use 8px radius with hairline borders. One primary CTA per screen maximum.

Buttons

button-primary

Gradient fill pill — strongest CTA. Max 1 per screen.

button-outline

White border pill — standard secondary CTA.

button-outline-glow

Gradient glow border — brand moment secondary CTA.

button-ghost

Text only — navigation and footer links.

Full Button Set

Side by side comparison at actual scale

Cards

Hairline Card
Standard content container with 1px #212327 border. The default information vessel.
Glow Card
Brand signature container with gradient micro-glow border. For featured content.
Accent Orange
Solid brand-end fill for strong emphasis positions in 2x2 grids.
Accent Indigo
辅助强调色块，与品牌橙对角交替排列。
—— SECTION EYEBROW
Eyebrow + Section Pattern
Every content section opens with a gold Geist Mono uppercase eyebrow prefixed by double dashes. This is one of the brand's most distinctive typographic identifiers.

Step Numbers

01
IP Positioning
02
Traffic Growth
03
Trade Education

Dividers

Hairline
Gradient
Guidelines

Do's & Don'ts

Follow these rules to maintain brand consistency across all touchpoints.

Do

Use #0a0a0a as the only page background. Dark-canvas only.
Use brand gradient #FF9B30 to #FF4528 as the sole color eruption.
Use pill (9999px) on every interactive element.
Use negative letter-spacing on display headlines (-2.4px at 96px).
Use gold uppercase Geist Mono eyebrows to open every section.
Use two-digit step numbers: 01, 02, 03 in Poppins 800.
Use gradient glow borders to highlight key cards.
Use Poppins (EN) + Noto Sans SC (CN) + Geist Mono (labels).
Write brand copy using "X, not Y" antithesis patterns.
Place CHAINISLE first in co-branding: CHAINISLE x 1000X.

Don't

Introduce a light mode. This brand is dark-canvas only.
Use Bold (700) for display headlines. SemiBold (600) is the ceiling.
Use filled buttons broadly. Max 1 primary button per screen.
Use box-shadow anywhere. Hairline borders carry all elevation.
Use 1000X's solid orange #E65100 instead of the brand gradient.
Use atmosphere gradient as the only page background.
Use Traditional Chinese fonts. Only Noto Sans SC (Simplified).
Use Montserrat instead of Poppins (legacy gap on chainisle.info).
Apply gradient to body text. Gradient is for brand moments only.
Use exclamation marks, emojis, or overblown claims in copy.
Copied to clipboard