Back to Details

swiss-bauhaus-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Swissted Design System

Swissted设计系统

The Editframe landing page is modeled on Swissted — Mike Joyce's project reimagining punk/indie concert posters in the Swiss International Style. This is the specific reference. Not generic Swiss/Bauhaus, not De Stijl.
Swissted characteristics:
  • Saturated primary colors as full-bleed grounds (not muted, not "sophisticated")
  • Heavy all-caps type set directly on color — no cards, no containers
  • Hard geometric rules as structural dividers
  • Three to four compositional elements per section, no more
Editframe着陆页以Swissted为设计蓝本——这是Mike Joyce的项目，采用瑞士国际风格重新设计朋克/独立音乐演唱会海报。此为特定参考风格，而非通用的瑞士/包豪斯风格，也不是风格派（De Stijl）。
Swissted风格特征：
  • 饱和度高的主色调作为满版背景（不要低饱和度、不要“精致感”配色）
  • 加粗全大写字体直接置于色块之上——无卡片、无容器
  • 硬朗的几何线条作为结构分隔符
  • 每个板块包含3-4个排版元素，不得更多

Quality and Completion

设计质量与完整性

Design quality is felt before it is named. A developer lands on the page and either thinks "these people know what they're doing" or they feel an unease they can't name. That gap — between trust and almost-trust — is where the system runs out of care.
A system feels complete when:
  • Every token has a declared role
  • Every role is actually used
  • Color choices are motivated, not arbitrary
  • A new agent reading the CSS understands what to use and why
A system feels abandoned when:
  • Tokens are defined but unused
  • Colors appear because they were available
  • Rules are implied but never written
When something feels wrong, don't patch the symptom. Trace the failure back to where care ran out and repair the system there.
设计质量是直观感受，无需刻意定义。开发者进入页面时，要么觉得“这些人很专业”，要么会产生莫名的不适感。这种信任与近乎信任之间的差距，正是设计系统缺乏细致打磨的体现。
设计系统具备完整性的表现：
  • 每个令牌都有明确的角色定义
  • 每个定义的角色都实际被使用
  • 颜色选择有明确依据，而非随意选取
  • 新Agent阅读CSS时能理解各令牌的用途及原因
设计系统被弃用的表现：
  • 定义了令牌但未实际使用
  • 颜色仅因可用就被使用
  • 规则仅隐含存在但未书面明确
当设计出现问题时，不要只修补表面症状。要追溯到缺乏细致打磨的根源，从那里修复系统。

Token System

设计令牌系统

Defined in 
telecine/services/web/app/styles/landing.css
.
css
/* PRIMARY — brand moment, hero CTA, primary feature section BG */
--poster-red: #E53935;

/* SECONDARY — emphasis on dark backgrounds, template/data section BG */
/* Never as text on light backgrounds — contrast fails WCAG AA (~2.3:1) */
--poster-gold: #FFB300;

/* TECHNICAL — focus rings, code syntax, architecture diagrams */
/* Not for section backgrounds or CTAs */
--poster-blue: #1565C0;

/* AI/AGENT — PromptToTool section only. Do not use elsewhere. */
--poster-green: #2E7D32;

/* STRUCTURE */
--ink-black: #1a1a1a;
--paper-cream: #FAF8F5;
--warm-gray: #6B6B6B;
--card-dark-bg: #1a1a1a;
--poster-pink
is defined in the CSS but removed from use. Dead tokens make the palette appear larger and less deliberate than it is.
Gold on light backgrounds: 
--poster-gold
(#FFB300) fails WCAG AA on cream or white. For gold text on light: use 
#B45309
(~4.5:1 against white).
定义于
telecine/services/web/app/styles/landing.css
。
css
/* PRIMARY — 品牌展示、Hero区CTA、核心功能板块背景 */
--poster-red: #E53935;

/* SECONDARY — 深色背景强调色、模板/数据板块背景 */
/* 绝不能作为浅色背景上的文字——对比度不符合WCAG AA标准（约2.3:1） */
--poster-gold: #FFB300;

/* TECHNICAL — 焦点环、代码语法高亮、架构图 */
/* 不可用于板块背景或CTA按钮 */
--poster-blue: #1565C0;

/* AI/AGENT — 仅用于PromptToTool板块，请勿在其他地方使用 */
--poster-green: #2E7D32;

/* STRUCTURE */
--ink-black: #1a1a1a;
--paper-cream: #FAF8F5;
--warm-gray: #6B6B6B;
--card-dark-bg: #1a1a1a;
--poster-pink
在CSS中已定义，但已停止使用。废弃令牌会让调色板显得冗余且缺乏目的性。
浅色背景上的金色文字：
--poster-gold
（#FFB300）在米白或白色背景上不符合WCAG AA标准。浅色背景上的金色文字请使用
#B45309
（与白色对比度约4.5:1）。

Section Architecture

板块架构

Each section has a declared ground color and a thematic rationale. The choice is motivated — not arbitrary.
SectionGroundPrimary accentRationale
Hero
--paper-cream
--poster-red
Brand moment, the first impression
CodeExamples
--card-dark-bg
--poster-gold
Craft/code — gold reads on darkness
TemplatedRendering
--poster-gold
blackData drives the template — gold is the content
RenderAnywhere
--poster-red
whiteThe primary power claim
Architecture
--paper-cream
--poster-blue
/ gold		Technical diagrams
GettingStartedwhite
--poster-red
Action — red motivates
PromptToTool
--poster-green
white / goldAI/agent — green is reserved here
Narrative order: cream → dark → gold → red → cream → white → green. New sections must fit this sequence and declare their thematic rationale in a comment.
每个板块都有明确的背景色及主题依据，颜色选择需有明确动机——而非随意选取。
板块背景色主强调色设计依据
Hero
--paper-cream
--poster-red
品牌展示，第一印象
CodeExamples
--card-dark-bg
--poster-gold
技术/代码场景——金色在深色背景上可读性强
TemplatedRendering
--poster-gold
黑色数据驱动模板——金色代表内容
RenderAnywhere
--poster-red
白色核心能力展示
Architecture
--paper-cream
--poster-blue
/ 金色		技术图示场景
GettingStarted白色
--poster-red
行动引导——红色更具驱动力
PromptToTool
--poster-green
白色 / 金色AI/Agent场景——绿色为该板块专属色
叙事顺序：米白 → 深色 → 金色 → 红色 → 米白 → 白色 → 绿色。新增板块需契合此顺序，并在注释中说明主题依据。

Typography

排版规范

css
/* Headlines — the Swissted voice */
font-weight: 900;           /* font-black */
letter-spacing: -0.05em;    /* tracking-tighter */
text-transform: uppercase;
line-height: 0.9;

/* Section labels — visually distinct from headlines */
font-size: 0.75rem;         /* text-xs */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;     /* tracking-widest */
color: var(--warm-gray);

/* Body */
font-weight: 400;
color: var(--warm-gray);
line-height: 1.625;         /* leading-relaxed */
All-caps headlines are the aesthetic voice, not a label treatment. Do not soften them to mixed case. The power comes from commitment.
css
/* 标题 — Swissted风格标志性字体 */
font-weight: 900;           /* font-black */
letter-spacing: -0.05em;    /* tracking-tighter */
text-transform: uppercase;
line-height: 0.9;

/* 板块标签 — 视觉上与标题区分开 */
font-size: 0.75rem;         /* text-xs */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;     /* tracking-widest */
color: var(--warm-gray);

/* 正文 */
font-weight: 400;
color: var(--warm-gray);
line-height: 1.625;         /* leading-relaxed */
全大写标题是风格核心，不要改为大小写混合。风格的力量源于坚定的执行。

Type on Ground

文字与背景的排版规则

The ground is the section background. Type sits directly on it.
WRONG:  section-bg → white card → shadow → content
RIGHT:  section-bg → content
Grid column alignment organizes elements. Rules separate them. Nothing else.
Structural dividers on light sections:
html
<div class="border-t-4 border-[var(--ink-black)]" />     <!-- section break -->
<div class="border-r-2 border-[var(--ink-black)]" />     <!-- column divider -->
On colored sections (red, gold, green):
html
<div class="border-t-2 border-white/40" />               <!-- white rule -->
<div class="border-r-2 border-black/20" />               <!-- dark rule -->
The full-bleed color change already signals a new section. No additional signal — no label, no shadow, no card — is needed or appropriate.
背景指板块的底色，文字直接置于背景之上。
错误： 板块背景 → 白色卡片 → 阴影 → 内容
正确： 板块背景 → 内容
通过网格列对齐来组织元素，用线条分隔元素，无需其他装饰。
浅色板块的结构分隔符：
html
<div class="border-t-4 border-[var(--ink-black)]" />     <!-- 板块分隔线 -->
<div class="border-r-2 border-[var(--ink-black)]" />     <!-- 列分隔线 -->
彩色板块（红、金、绿）：
html
<div class="border-t-2 border-white/40" />               <!-- 白色分隔线 -->
<div class="border-r-2 border-black/20" />               <!-- 深色分隔线 -->
满版颜色变化已足以标识新板块，无需额外标识——无需标签、阴影或卡片。

Digital Affordances to Eliminate

需要移除的数字交互元素

These are web UI conventions that break the print feel:
ElementWhy it's wrongWhat to do instead
box-shadow
(any)		Print is flat. Shadows simulate UI depth that doesn't exist in print.None. Color contrast carries weight.
border-radius
> 0		Rounded corners signal interactive UI element. Print boxes are square.
rounded-none
or omit entirely
Cards on colored backgroundsA white card on red is a web component, not a poster composition.Type directly on the section ground
Subtle borders 
rgba(0,0,0,0.12)
Whisper borders are a digital UI convention.Full-weight rules (2–4px, full opacity) or none at all
Multiple hierarchy signalsColor + shadow + label + card = four signals for one transitionPick one. The color is enough.
Hover states on non-interactive elementsTrains the eye to expect interaction everywhereRestrict visual hover feedback to actual interactive elements
以下是破坏印刷质感的网页UI惯例：
元素问题原因替代方案
box-shadow
（任何形式）		印刷是平面的，阴影模拟的UI深度在印刷中不存在无需阴影，用颜色对比度体现层次感
border-radius
> 0		圆角代表交互式UI元素，印刷中的框都是方形使用
rounded-none
或完全省略
彩色背景上的卡片红色背景上的白色卡片是网页组件，不符合海报排版逻辑文字直接置于板块背景之上
细微边框 
rgba(0,0,0,0.12)
淡边框是数字UI惯例使用全粗线条（2–4px，完全不透明）或省略边框
多重层级标识颜色+阴影+标签+卡片=一次过渡使用四种标识只选一种，颜色变化已足够
非交互元素的悬停状态会让用户误以为所有元素都可交互仅对实际可交互元素添加悬停视觉反馈

Buttons

按钮规范

No rounded corners. No soft shadow. Square geometry, clear intent.
html
<!-- Primary CTA — always poster-red -->
<a class="px-8 py-4 bg-[var(--poster-red)] text-white font-bold uppercase tracking-wider hover:bg-[var(--ink-black)]">
  Get Early Access
</a>

<!-- Secondary / outline -->
<a class="px-8 py-4 border-2 border-[var(--ink-black)] font-bold uppercase tracking-wider hover:bg-[var(--ink-black)] hover:text-white">
  Read the Docs
</a>
Primary CTAs are always 
--poster-red
. No section should introduce a different CTA background color.
无圆角，无柔化阴影。方形几何造型，意图明确。
html
<!-- 主CTA — 始终使用poster-red -->
<a class="px-8 py-4 bg-[var(--poster-red)] text-white font-bold uppercase tracking-wider hover:bg-[var(--ink-black)]">
  Get Early Access
</a>

<!-- 次要/轮廓按钮 -->
<a class="px-8 py-4 border-2 border-[var(--ink-black)] font-bold uppercase tracking-wider hover:bg-[var(--ink-black)] hover:text-white">
  Read the Docs
</a>
主CTA始终使用
--poster-red
，任何板块都不得使用其他背景色作为主CTA。

Code Blocks

代码块规范

The one exception to "no cards" — code needs a container to function as code. Use the established pattern:
html
<div class="bg-[var(--card-dark-bg)]">
  <div class="flex items-center gap-2 px-4 py-3 border-b border-white/10">
    <div class="w-3 h-3 rounded-full bg-[#ff5f57]" />
    <div class="w-3 h-3 rounded-full bg-[#febc2e]" />
    <div class="w-3 h-3 rounded-full bg-[#28c840]" />
    <span class="ml-4 text-xs text-white/50 font-mono">filename.tsx</span>
  </div>
  <pre class="p-6 font-mono text-sm text-white/90">...</pre>
</div>
Syntax highlighting: keywords → 
--poster-red
, JSX tags → 
--poster-blue
, strings/values → 
--poster-gold
.
这是“无卡片”规则的唯一例外——代码需要容器来明确其代码属性。请使用以下既定模式：
html
<div class="bg-[var(--card-dark-bg)]">
  <div class="flex items-center gap-2 px-4 py-3 border-b border-white/10">
    <div class="w-3 h-3 rounded-full bg-[#ff5f57]" />
    <div class="w-3 h-3 rounded-full bg-[#febc2e]" />
    <div class="w-3 h-3 rounded-full bg-[#28c840]" />
    <span class="ml-4 text-xs text-white/50 font-mono">filename.tsx</span>
  </div>
  <pre class="p-6 font-mono text-sm text-white/90">...</pre>
</div>
语法高亮规则：关键字 → 
--poster-red
，JSX标签 → 
--poster-blue
，字符串/值 → 
--poster-gold
。

Completion Check

完成度检查

Before finishing any design work:
  • Every token used has a declared role (cross-reference the table above)
  • Every section's color choice is motivated and commented
  • No 
    box-shadow
    on non-code-block elements
  • No 
    border-radius
    on section containers or feature items
  • Content sits on the ground, not inside a card
  • One structural signal per section transition (the color change is it)
  • All primary CTAs use 
    bg-[var(--poster-red)]
  • Gold text on light backgrounds uses 
    #B45309
    , not 
    --poster-gold
  • A new agent reading this section's code would understand every color choice without asking
完成任何设计工作前，请确认：
  • 所有使用的令牌都有明确的角色定义（对照上方表格）
  • 每个板块的颜色选择都有明确依据并添加注释
  • 非代码块元素无
    box-shadow
  • 板块容器或功能项无
    border-radius
  • 内容直接置于背景之上，而非卡片内部
  • 每次板块过渡仅使用一种结构标识（颜色变化即可）
  • 所有主CTA都使用
    bg-[var(--poster-red)]
  • 浅色背景上的金色文字使用
    #B45309
    ，而非
    --poster-gold
  • 新Agent阅读该板块代码时，无需询问就能理解所有颜色选择的依据