Statechain Blue

version: alpha
name: Statechain-Blue
description: A Chinese state-enterprise corporate system where one confident tech-blue (#0366e0) carries trust across a white canvas. Heavy Chinese sans headlines pair with light italic English serif kickers in bilingual lockups, photography does the emotional work in full-bleed bands (city skyline hero, alpine timeline), services are numbered flat cards with one blue spotlight, and a circular partner constellation crowns a blue half-dome above a slate footer.

colors:
  primary: "#0366e0"
  primary-hover: "#2f82ec"
  on-primary: "#ffffff"
  canvas: "#ffffff"
  surface-ice: "#eef7fe"
  surface-neutral: "#f5f6f8"
  hairline: "#e8ecf2"
  band-deep: "#215db5"
  footer-bg: "#334050"
  footer-muted: "#889199"
  hero-sky: "#0188d9"
  text: "#333f4d"
  text-muted: "#7b8595"
  text-faint: "#b9c2cf"

typography:
  hero-display:
    fontFamily: "Noto Sans SC, PingFang SC, Microsoft YaHei, sans-serif"
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.02em
  display-lg:
    fontFamily: "Noto Sans SC, PingFang SC, Microsoft YaHei, sans-serif"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.02em
  year-display:
    fontFamily: "Noto Sans SC, PingFang SC, Microsoft YaHei, sans-serif"
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: 0.04em
  kicker-en:
    fontFamily: "Georgia, Times New Roman, serif"
    fontSize: 18px
    fontWeight: 400
    fontStyle: italic
    lineHeight: 1.4
    letterSpacing: 0.06em
  card-title:
    fontFamily: "Noto Sans SC, PingFang SC, Microsoft YaHei, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  card-title-en:
    fontFamily: "Georgia, Times New Roman, serif"
    fontSize: 13px
    fontWeight: 400
    fontStyle: italic
    lineHeight: 1.4
    letterSpacing: 0.04em
  body:
    fontFamily: "Noto Sans SC, PingFang SC, Microsoft YaHei, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0
  body-sm:
    fontFamily: "Noto Sans SC, PingFang SC, Microsoft YaHei, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0
  button:
    fontFamily: "Noto Sans SC, PingFang SC, Microsoft YaHei, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0.08em
  nav-link:
    fontFamily: "Noto Sans SC, PingFang SC, Microsoft YaHei, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0.04em

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xxs: 4px
  xs: 8px
  sm: 16px
  md: 24px
  lg: 32px
  xl: 48px
  xxl: 64px
  section: 80px

components:
  top-nav:
    backgroundColor: transparent
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-link}"
    height: 72px
  search-bar:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.text-muted}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.pill}"
    height: 48px
    maxWidth: 480px
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 12px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
  service-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.text}"
    typography: "{typography.card-title}"
    rounded: "{rounded.sm}"
    borderWidth: 1px
    borderColor: "{colors.hairline}"
    padding: 32px 24px
  service-card-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.card-title}"
    rounded: "{rounded.sm}"
  timeline-band:
    backgroundColor: "{colors.band-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.year-display}"
    padding: "{spacing.section} 24px"
  news-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.text}"
    typography: "{typography.card-title}"
    rounded: "{rounded.sm}"
    borderWidth: 1px
    borderColor: "{colors.hairline}"
  tab-group:
    backgroundColor: transparent
    textColor: "{colors.text-muted}"
    typography: "{typography.body-sm}"
  tab-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: 6px 16px
  partner-dome:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.year-display}"
    borderRadius: "50% 50% 0 0"
  logo-chip:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.text}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.pill}"
    borderWidth: 1px
    borderColor: "{colors.hairline}"
  footer-column:
    backgroundColor: "{colors.footer-bg}"
    textColor: "{colors.footer-muted}"
    typography: "{typography.body-sm}"

Overview

Statechain Blue runs on one idea: institutional trust rendered in a single blue. The page is a white canvas ({colors.canvas} #ffffff) punctuated by full-bleed photographic bands — a dusk city skyline for the hero, a snow-mountain ridge washed in royal blue ({colors.band-deep} #215db5) for the milestone timeline — and between them, content sits in quiet, flat, generously spaced blocks. The only expressive color is tech blue ({colors.primary} #0366e0): it fills the spotlight service card, the primary buttons, the active tab, the partner half-dome, and the phone-number accents. Nothing glows, nothing shadows; depth comes from photography and one soft ice-tint surface ({colors.surface-ice} #eef7fe).

The signature is the bilingual lockup. Every section header pairs a heavy Chinese sans headline ({typography.display-lg}, Noto Sans SC 700) with a light italic English serif kicker underneath ({typography.kicker-en}, Georgia italic — "Memorabilia", "News Center"). The same pairing repeats inside cards: Chinese title, italic English subtitle. It gives the state-enterprise voice a formal, bilingual-official character: assertive in Chinese, understated in English.

Key Characteristics:

• White canvas ruled by photography: two full-bleed photo bands (hero skyline, alpine timeline) carry all the visual drama; everything else is flat white or ice-tint.
• Exactly one accent: tech blue #0366e0 — CTA fills, the spotlight card, active tabs, the partner dome, data numerals. Deep royal #215db5 is its photographic extension, used only inside the timeline band.
• Bilingual lockups everywhere: Chinese sans (500–700) leads, italic Georgia serif (13–18px) subtitles — never the reverse.
• Numbered service cards: faint index numerals ("01"–"04") with "s" suffix styling, one card promoted to solid blue with a photo footer.
• Ascending year timeline: 2019 → 2022 steps upward along the ridge line, each year a light-weight white numeral with a 2px left bar and small body copy.
• Circular partner constellation: white pill chips scattered above a blue semicircle stamped with a giant "300+" and a trust slogan.
• Slate footer ({colors.footer-bg} #334050) — the only dark chrome on the page, with muted blue-gray link text ({colors.footer-muted} #889199).

Colors

Source pages analyzed: homepage hero, services band, milestone timeline, news center, partner constellation, footer. The palette is consistent across all sections.

Brand & Accent

• Tech Blue ({colors.primary} — #0366e0): The single interactive color. Primary button fills, the spotlight service card, active tab chips, the partner half-dome, and the "查看更多" affordance. It reads as state-enterprise reliability — saturated but disciplined, never neon.
• Hover Blue ({colors.primary-hover} — #2f82ec): The hover brighten for primary buttons. Never used statically.
• Band Royal ({colors.band-deep} — #215db5): The timeline band's photographic blue wash. It is a second, deeper blue reserved exclusively for full-bleed imagery — never for buttons or chrome.
• Hero Sky ({colors.hero-sky} — #0188d9): The dominant tone inside hero photography (dusk sky, glass towers). A color of the image world, not the chrome — do not use it for UI.
• Blue never appears in long body text. It marks action, state, and celebration only.

Surface Ladder

• Canvas ({colors.canvas} — #ffffff): Page background and card fills. The default state of the system.
• Ice Tint ({colors.surface-ice} — #eef7fe): A pale blue wash for the partner constellation band and soft section backgrounds — one breath of blue above white.
• Neutral Gray ({colors.surface-neutral} — #f5f6f8): Alternate section background (news center), image placeholders, quiet zones.

Text

• Ink Slate ({colors.text} — #333f4d): Headlines, card titles, nav labels on white. A blue-warmed near-black — never pure black.
• Muted Slate ({colors.text-muted} — #7b8595): Body copy, descriptions, dates, inactive tabs. The paragraph workhorse.
• Faint Blue-Gray ({colors.text-faint} — #b9c2cf): Index numerals ("01"), English serif kickers on white, decorative metadata. Reads as structure, not content.

Footer

• Footer Slate ({colors.footer-bg} — #334050): The footer band — the page's only dark chrome, anchoring the document like a signature block.
• Footer Muted ({colors.footer-muted} — #889199): Footer links, addresses, ICP filing text on slate.

Lines

• Hairline ({colors.hairline} — #e8ecf2): 1px card borders and divider rules. The lightest possible structure — cards are separated by this whisper line plus whitespace, not shadows.

No gradients on chrome. The hero photo darkens organically for text legibility, and the timeline band multiplies #215db5 over photography, but every button, card, and header is flat.

Typography

Font Families

• Display/Body: Noto Sans SC (with PingFang SC, Microsoft YaHei fallbacks) — all Chinese text, from hero to body. Weights 300 (year numerals), 400 (body/UI), 500 (card titles/nav), 700 (headlines).
• English Kickers: Georgia (italic) — section subtitles and card EN subtitles only. Light, small, and always subordinate to the Chinese.

Hierarchy

Token	Size	Weight	Line Height	Use
{typography.hero-display}	44px	700	1.3	Hero headline ("技术与运营共驱"), centered white over skyline
{typography.display-lg}	30px	700	1.3	Section headlines ("大事记", "新闻中心")
{typography.year-display}	40px	300	1.1	Timeline years, "300+" dome numeral — light, airy, white
{typography.kicker-en}	18px	400 italic	1.4	English serif subtitle under section headlines
{typography.card-title}	18px	500	1.4	Card titles, news headlines
{typography.card-title-en}	13px	400 italic	1.4	English subtitle inside cards
{typography.body}	15px	400	1.8	Paragraphs, timeline copy
{typography.body-sm}	13px	400	1.6	Meta rows, dates, footer links, tab labels
{typography.button}	14px	400	1	Button labels (+0.08em tracking)
{typography.nav-link}	15px	400	1	Nav links

Principles

• Weight and color carry hierarchy, not size. Card titles (500, ink) sit directly above descriptions (400, muted) at similar sizes.
• The italic serif is a subtitle voice. Georgia italic never appears above 18px and never in Chinese contexts — it is the English echo of the Chinese headline.
• Light numerals at display scale. Years and the "300+" are weight 300 — institutional confidence without shouting.
• Relaxed body leading. 1.8 line height for Chinese paragraphs; 65ch max-width.
• No bold body text. Emphasis is color (blue) or the heavier title weight.

Note on Font Substitutes

Noto Sans SC is an open Google Font (load 300/400/500/700). Georgia is a system serif — no webfont needed. If a full open-source stack is required, substitute Source Serif 4 italic for Georgia.

Layout

Spacing System

• Base unit: 8px. Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 16px · {spacing.md} 24px · {spacing.lg} 32px · {spacing.xl} 48px · {spacing.xxl} 64px · {spacing.section} 80px.
• Section vertical padding: {spacing.section} (80px) on white bands; photo bands run taller (120px+).
• Card gutters: 24px; card inner padding 32px × 24px.

Grid & Container

• Max content width: 1200px centered; photo bands break full-bleed.
• Services: 4 equal columns on desktop (the one sanctioned equal-card row — it is a numbered series, not a feature grid); the 3rd card renders taller as the blue spotlight.
• Timeline: years stagger diagonally — each successive year block offsets upward and rightward, echoing the mountain ridge.
• News center: 3-zone asymmetric grid — large photo card (~40%) | date panel (~30%) | link list (~30%).
• Partners: freeform circular constellation around a centered half-dome; chips float on the ice-tint band without a grid.

Whitespace Philosophy

Whitespace is administrative calm: wide, even, and symmetric on white bands, with all expressiveness delegated to the two photographic bands. Nothing crowds; every section breathes for at least 80px.

Elevation & Depth

Level	Treatment	Use
Flat	No shadow, 1px hairline	Cards, chips, inputs
Ice tint	{colors.surface-ice} fill	Partner band, soft sections
Photo band	Full-bleed image, darkened/toned overlay	Hero, timeline
Dome	Solid blue semicircle	Partner constellation anchor

Shadow philosophy. No drop-shadows anywhere. Photography provides depth; chrome stays flat and printable, like an official document.

Shapes

Border Radius Scale

Token	Value	Use
{rounded.sm}	4px	Buttons, cards, tabs — the default corner
{rounded.md}	8px	Larger panels, image blocks
{rounded.lg}	12px	Feature imagery inside cards
{rounded.pill}	999px	Search bar, logo chips — the friendly exceptions

Geometry Rules

• Chrome is nearly square. 4px corners keep buttons and cards institutional; only the search bar and circular partner chips round fully.
• The half-dome is the hero geometry. A perfect semicircle (border-radius: 50% 50% 0 0) anchoring the partner band — the page's single large gesture.
• Logo chips are perfect circles or pills, floating without grid alignment.

Components

Top Navigation

top-nav — 72px transparent bar overlaying the hero photo: white logo lockup (emblem + Chinese company name) left, white 15px links center-right, phone number with icon far right. On scroll it should solidify to white with ink text; the analyzed state is the transparent hero variant.

Search Bar

search-bar — 480px white pill centered in the hero: muted placeholder text, trailing magnifier icon. The only fully-rounded chrome on the page.

Buttons

button-primary — Tech-blue rectangle, white text, {typography.button} (14px/+0.08em), {rounded.sm}, padding 12px × 28px. Hover brightens to {component.button-primary-hover}. Used for "查看更多" and form submissions. Ghost variants are absent — this system speaks through fills, not outlines.

Service Cards

service-card — White, 1px hairline, 4px corners, 32px × 24px padding: faint index numeral ("01"), circular icon, Chinese title + italic EN subtitle, muted description. Four in a row, numbered sequentially. service-card-active — The promoted card (index "03"): solid tech blue, white text, taller than its siblings, with a full-width photo footer (logistics truck) and a white "了解更多 →" text link. Exactly one spotlight per row.

Timeline Band

timeline-band — Full-bleed snow-mountain photograph multiplied with {colors.band-deep}; a "大事记 / Memorabilia" lockup opens the band; years 2019–2022 ascend diagonally, each a light 40px white numeral with a 2px white left-bar and 13–15px white copy beneath.

News Center

tab-group — Text tabs top-right ("公司新闻 / 行业新闻…"), active tab as a blue chip ({component.tab-active}, white 13px text). news-card — Photo-led card: image top (rounded-md), date block ("16 Apr"), Chinese title, muted excerpt. news-date-panel — White panel with a giant date numeral ("31 Jul"), body copy, and a button-primary "查看更多". news-list-item — Thumbnail left, title + date right, separated by hairlines.

Partner Constellation

partner-dome — Blue semicircle centered at the band's bottom edge: giant light "300+" numeral and a trust slogan line ("放心链接·梦想机构伙伴"). logo-chip — White circular/pill chips with hairline borders holding partner logos, scattered around the dome on the ice-tint band.

Footer

footer-column — Slate #334050 band: link columns in {typography.body-sm} footer-muted, contact info, QR code block right, ICP filing line at the base. The dark close mirrors the official-document seal.

Do's and Don'ts

Do

• Use {colors.primary} for every action, active state, and celebration — one blue, many jobs.
• Pair every Chinese headline with an italic English serif subtitle — the bilingual lockup is the brand's voice.
• Delegate drama to photography: full-bleed bands (hero, timeline) carry emotion; keep chrome flat white.
• Number the service series ("01"–"04") in faint blue-gray and promote exactly one card to the blue spotlight.
• Keep numerals light (weight 300) at display scale — years, counters, "300+".
• Anchor sections with {spacing.section} (80px) of whitespace; let the page breathe like a formal document.

Don't

• Don't introduce a second accent hue — blue family (#0366e0, #215db5) plus slate is the entire palette.
• Don't add drop-shadows, gradients, or glass effects to chrome; flat and hairline-separated only.
• Don't use the italic serif for Chinese text or above 18px — it is a small subtitle voice.
• Don't set body text in blue; blue marks action and state, slate-gray carries prose.
• Don't repeat the spotlight treatment on multiple cards — one promoted card per series.
• Don't round buttons or cards beyond 4px; full rounding belongs to the search pill and logo chips only.
• Don't overlay white text on photography without a darkening/toning wash — legibility over drama.

Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	≤ 640px	Hero headline ~28px; nav collapses to logo + hamburger; services stack 4 → 1; timeline years stack vertically; news grid becomes single column
Tablet	641–1024px	Services 2 × 2; news grid 2-zone; timeline staircase flattens to 2 steps per row
Desktop	≥ 1025px	Full 4-card row, 3-zone news grid, diagonal timeline

Collapsing Strategy

• Nav: links fold into a hamburger drawer below 768px; the phone number survives as a compact icon.
• Service row: equal columns collapse in order; the blue spotlight card keeps its photo footer while stacked.
• Timeline: the diagonal staircase becomes a vertical white-rule list on mobile, preserving the ascending order.
• Partner constellation: chips re-flow into a centered wrap above the dome; dome keeps full width.

Image Behavior

• Hero and timeline photography crops center at every size and never letterboxes; text zones get proportional darkening.
• News imagery lazy-loads below the fold; the hero loads eagerly.

Iteration Guide

1. Focus on ONE component at a time. Reference its YAML key directly ({component.service-card}, {component.partner-dome}).
2. Variants (-hover, -active) live as separate entries in components:.
3. Use {token.refs} everywhere — never inline hex (the band blue especially must stay consistent).
4. When adding a headline, write the Chinese first at 700, then echo it in Georgia italic below.
5. When adding a series, number it in faint blue-gray before styling anything else.
6. When in doubt about emphasis: promote with the solid blue fill before adding size, weight, or shadow.

Known Gaps

• Form inputs and validation states were not surfaced on the analyzed page; only the hero search pill is documented.
• The top nav's scrolled/solid variant is inferred, not observed — the screenshot captures only the transparent hero state.
• Individual partner logos are placeholder marks in the source; chip dimensions are documented, logo content is not.
• The news center's inner pagination and hover states were not visible in the capture.
• Exact overlay opacity for the timeline blue wash was estimated from sampling (~35–45% multiply).