What is Stray Cyber City?什么是 Stray Cyber City？
Stray Cyber City is a sunless neon-noir world where warm amber and pink-orange light stains every surface, and a single cool teal reflection keeps the darkness alive.Stray Cyber City 是一座不见天日的霓虹黑色城市：暖琥珀与粉橙光污染每一寸表面，唯一的冷青绿倒影让黑暗保持呼吸。
Stray Cyber City in briefStray Cyber City 速览
Stray Cyber City translates the atmosphere of Stray into a design language built from darkness, density, and artificial light. Its world is modeled on the Kowloon Walled City: narrow, layered, dusty, and without any visible sky. Interface surfaces should feel like walls and shopfronts in a wet alley, not like clean panels floating in open space.Stray Cyber City 将《Stray》的氛围转译为一套由黑暗、密度与人造光构成的设计语言。它以九龙城寨为城市想象的原型：狭窄、层叠、布满尘土，而且看不见天空。界面表面应像潮湿巷道里的墙面与店铺招牌，而不是漂浮在空旷空间中的洁净面板。
The visual hierarchy is carried by light rather than by spaciousness. A deep sodium-lit brown ground establishes the environment; warm amber neon acts as the dominant signal; hot pink and red provide supporting glow; a single cool teal accent introduces contrast without breaking the palette. The result is warm, humid, crowded, and faintly dangerous.这套视觉层级依靠光线而非开阔感来建立。深沉的钠灯暖棕构成环境底色，暖琥珀霓虹承担主要信号，热粉与红色提供辅助辉光，唯一的冷青绿则负责制造对比，却不破坏整体色调。最终呈现出的气质温暖、潮湿、拥挤，并带有隐约的危险感。
This is atmospheric cyberpunk rather than sterile futuristic technology. Surfaces may be grimy, reflections may be uneven, and layers may overlap. Yet the system still needs readable structure: light should direct attention, color should distinguish function, and darkness should create depth. The design succeeds when the interface feels inhabited rather than merely decorated.这里的赛博朋克是有氛围的，而不是无菌的未来科技。表面可以带着污迹，倒影可以不均匀，层次可以彼此叠压。但系统仍然必须保持可读：光线要引导注意力，色彩要区分功能，黑暗要制造深度。只有当界面像一个有人生活其中的城市，而不只是被装饰过的页面时，这套设计才算成立。
See the Stray Cyber City design system查看 Stray Cyber City 完整设计系统
Where does Stray Cyber City come from?Stray Cyber City 从何而来？
The source places Stray Cyber City in 2022, as an atmospheric cyberpunk adventure experienced from a cat’s-eye perspective. Its defining premise is not a bright technological future but a sealed urban environment: there is no daylight, only the colored illumination of signs, windows, and reflected street glow.源材料将 Stray Cyber City 定位于2022年，以猫的视角展开一场具有氛围感的赛博朋克冒险。它的核心并不是明亮的技术未来，而是一座封闭的城市环境：这里没有日光，只有招牌、窗户与街面反光共同投下的彩色照明。
The city is inspired by the Kowloon Walled City in Hong Kong, whose presence in the reference material supplies the system’s sense of compression and vertical density. Walls, alleys, signs, wires, refuse, and wet ground are understood as overlapping visual evidence of habitation. The city should feel assembled through accretion, with every surface carrying traces of another layer behind it.城市灵感来自香港九龙城寨，这一来源赋予系统压缩感与垂直密度。墙壁、巷道、招牌、线缆、垃圾与潮湿地面共同构成居住痕迹，彼此覆盖、彼此证明。城市应当像长期累积出来的结构，每一层表面都透露着背后仍有另一层存在。
Its production origin is placed in Western Europe through BlueTwelve Studio in France, while its imagined city draws from Hong Kong. The resulting identity belongs to a broader field of cozy cyberpunk, Kowloon Walled City density, and neon-noir environment art. It is intimate rather than monumental: the viewpoint stays close to surfaces, corners, reflections, and small pockets of colored light.它的制作来源位于西欧，关联法国的 BlueTwelve Studio；而它所想象的城市则汲取香港的灵感。由此形成的身份，属于温和而有氛围的赛博朋克、九龙城寨式的高密度空间，以及霓虹黑色环境艺术。它不是宏大的未来都市，而是贴近墙面、转角、倒影与小片彩光的亲密视角。
When translated into interface, this origin becomes a rule of atmosphere. Darkness is the base condition, amber is the guiding illumination, pink and red intensify the urban heat, and teal appears as a rare interruption. The system does not reproduce a literal street scene; it extracts the emotional logic of a crowded, sunless city and applies that logic to screens.当这套来源被转译为界面时，首先变成一条氛围规则：黑暗是默认环境，琥珀是引导光，粉与红负责加强城市热度，青绿只作为稀有的中断出现。系统并不复刻某条真实街巷，而是提取一座拥挤、无日光城市的情绪逻辑，再将它应用于屏幕。
What defines the Stray Cyber City look?Stray Cyber City 的视觉特征是什么？
Sodium Darkness钠灯般的黑暗
The ground is dark but not neutral. It carries a brown, sodium-lit warmth, so black areas feel like shadowed masonry rather than empty space. This warm darkness gives the brighter signs somewhere to bloom and keeps the interface from becoming a cold technological void.底色虽深，却不是中性的黑。它带着钠灯般的暖棕气息，让暗部像被遮住的墙体，而不是空无一物的空间。这种温暖的黑暗为明亮招牌提供了生长的地方，也避免界面坠入冰冷的科技虚空。
Amber Command琥珀主导
Warm amber is the principal visual signal. It should carry the most important actions, active states, and navigational emphasis, behaving like the strongest sign in an alley. Its presence is luminous and functional at once: it attracts attention while preserving the world’s nocturnal warmth.暖琥珀是最主要的视觉信号，应承担关键操作、激活状态与导航强调，像巷道里最醒目的那块招牌。它既有发光感，也有明确的功能性：负责吸引注意，同时维持整个世界的夜间温度。
Hot Supporting Glow热色辅助辉光
Pink-orange and red appear as supporting illumination rather than competing primaries. They can mark urgency, secondary activity, or the visual heat of crowded urban surfaces. Their best use is concentrated and layered, allowing the amber lead to remain legible.粉橙与红色承担辅助照明，而不是与主色争夺主导权。它们可以标记紧迫性、次级活动，或拥挤城市表面的视觉热度。最有效的用法是集中且层叠，让琥珀始终保持清晰的主导地位。
Teal Interruption青绿中断
Cool teal is intentionally scarce. It reads as reflected sign-light or a distant technological presence against the warm field, so even a small teal element can become a landmark. Using it everywhere would destroy its narrative role and flatten the warm-cool tension.冷青绿被刻意控制在稀少状态。它像倒映在湿地上的招牌光，也像暖色城市中遥远的技术存在，因此哪怕很小的一处青绿也能成为地标。若把它无处不在地铺开，就会削弱它的叙事作用，抹平冷暖之间的张力。
Wet Reflection潮湿倒影
Depth comes through reflection and diffusion across surfaces rather than through polished dimensional effects. Amber, pink, red, and teal may appear as broken glows on dark ground, suggesting rain, grime, and uneven pavement. The effect should feel environmental, not glossy.深度来自光线在表面上的反射与扩散，而不是精致光滑的立体特效。琥珀、粉、红与青绿可以在深色底面上形成破碎的辉光，暗示雨水、污垢与不平整的街面。最终效果应像环境留下的光，而不是抛光后的玻璃。
Accumulated Density累积式密度
The composition should feel layered and inhabited. Signs, labels, panels, wires, shadows, and fragments of information can sit close together, provided their hierarchy remains deliberate. Empty space is used as a dark alley or pause between signals, not as a default luxury.构图应当具有层叠感与居住感。招牌、标签、面板、线缆、阴影与信息碎片可以彼此靠近，但层级必须经过有意安排。留白被理解为黑暗巷道或信号之间的停顿，而不是默认的大方空场。
See the Stray Cyber City design system查看 Stray Cyber City 完整设计系统
Who shaped Stray Cyber City?谁塑造了 Stray Cyber City？
BlueTwelve Studio is the French studio named in the source material as the production origin of Stray. Within this design reference, it anchors the relationship between a Western European creative context and a city imagined through Kowloon Walled City density.BlueTwelve Studio 是源材料中列出的法国工作室，也是《Stray》的制作来源。在这套设计参考中，它连接了西欧创作语境与九龙城寨式城市密度之间的关系。
Annapurna Interactive appears in the approved material as one of the key figures attached to the Stray reference. Its inclusion places the design system within the game’s broader creative identity rather than treating the visual language as an isolated interface trend.Annapurna Interactive 在已批准的材料中被列为与《Stray》相关的关键名称之一。它的存在说明这套设计系统属于游戏整体的创意身份，而不是一套脱离作品语境的界面潮流。
Koola is listed in the source as a key figure associated with Stray Cyber City. Because the approved material gives no further role description, the name should be retained as part of the reference lineage without adding unsupported biography or production claims.Koola 是源材料中列出的 Stray Cyber City 关键名称之一。由于已批准材料没有提供更多身份说明，文章应将其保留为参考谱系的一部分，而不补写未经提供的经历或制作信息。
Viv is likewise named among the key figures in the approved source. The figure belongs to the system’s documented reference set, while the available material intentionally leaves the specific contribution open rather than defining it beyond the name.Viv 同样被已批准的源材料列为关键名称。这个名字属于系统记录下来的参考集合，但现有材料没有进一步界定其具体贡献，因此不应超出名称本身追加说明。
How do you use Stray Cyber City today?今天怎么用 Stray Cyber City？
For presentation slides, use the cover as a nocturnal street entrance: a deep warm ground, a concentrated amber title treatment, and small pink or red signals that suggest nearby activity. Content slides should preserve that hierarchy with dense but controlled information blocks. Data slides can treat charts as illuminated signage, using amber for the main reading, hot colors for secondary conditions, and teal only when a cool contrast carries real meaning.在演示文稿中，可以把封面处理成一条夜间街巷的入口：深沉的暖色底面、集中的琥珀标题，以及暗示附近活动的少量粉色或红色信号。内容页应保留这套层级，用密集但受控的信息区块组织内容。数据页可以把图表当成发光招牌处理，以琥珀承担主要阅读路径，用热色表达次级状态，只有当冷暖对比确实有意义时才启用青绿。
For web interfaces, the style fits dashboards, monitoring tools, and pricing pages that need a strong atmosphere without losing functional focus. Keep the environment dark and warm, give primary actions the clearest amber presence, and use pink or red for urgency or status. Teal can identify a distinct category, external signal, or cool counterpoint, but it should remain rare enough to feel intentional.在网页界面中，这种风格适合仪表板、监控工具与定价页面，尤其适合那些需要强烈氛围、同时又不能牺牲功能焦点的产品。环境保持深暗与温暖，主要操作获得最清晰的琥珀强调，粉色或红色用于紧迫状态与告警。青绿可以标示独立类别、外部信号或冷色对照，但必须足够稀少，才能显得有意为之。
For editorial and marketing work, build the page like a sequence of connected alleys rather than a single polished stage. Use dense information clusters, narrow reading paths, dark interruptions, and glowing calls to action. Marketing panels can alternate between nearly swallowed darkness and intense sign-like color, while editorial sections use wet reflections, cropped fragments, and layered labels to suggest a living urban environment.在编辑与营销内容中，应当把页面构造成一串彼此相连的巷道，而不是一座光洁完整的舞台。使用密集的信息簇、窄的阅读路径、深色停顿与发光式行动号召。营销区块可以在几乎被黑暗吞没的画面与强烈的招牌色之间切换；编辑内容则可借助潮湿倒影、裁切片段与层叠标签，营造一个正在生活的城市环境。
The system also works well for product launches, game-related campaigns, nightlife identities, and experiences that want intimacy rather than glossy futurism. Imagery should feel close to the ground and surrounded by atmosphere. A small pool of teal reflected across a dark field can carry more narrative force than a page filled with equally bright colors.这套系统也适合产品发布、游戏相关活动、夜生活品牌，以及那些追求亲密感而非光鲜未来感的体验。图像应贴近地面，并被氛围包围。一片深色背景上反射出的青绿微光，往往比整页铺满同等亮度的霓虹色更有叙事力量。
The common mistake is treating cyberpunk as permission to use every neon color at once. That produces generic visual noise and removes the world’s specific identity. Stray Cyber City depends on a warm amber lead, hot supporting colors, a dark sodium-lit ground, and one restrained cool accent. It also fails when grime becomes random clutter: density must still guide the eye, or the interface becomes difficult rather than atmospheric.最常见的错误，是把赛博朋克理解为同时使用所有霓虹色的许可。这样会制造普通的视觉噪音，也会抹掉这个世界独有的身份。Stray Cyber City 依靠暖琥珀主导、热色辅助、深沉的钠灯暖棕底面，以及克制的单一冷色来成立。另一个错误是把肮脏感做成随机杂乱：密度仍然必须引导视线，否则界面只会难用，而不会有氛围。
See the Stray Cyber City design system查看 Stray Cyber City 完整设计系统
Stray Cyber City — FAQStray Cyber City · 常见问题
Is Stray Cyber City meant to be a literal reconstruction of Kowloon Walled City?Stray Cyber City 是要真实复原九龙城寨吗？
No. The source describes the city as modeled on or inspired by Kowloon Walled City, not as a documentary reconstruction. The design system extracts qualities of density, enclosure, layered surfaces, wet streets, and neon-noir atmosphere, then turns those qualities into interface rules. Its goal is emotional and visual translation rather than historical replication.不是。源材料将这座城市描述为以九龙城寨为原型或获得其灵感，而不是一份纪实复原。设计系统提取的是密度、封闭感、层叠表面、湿街与霓虹黑色氛围，再把这些特质转化为界面规则。它追求的是情绪与视觉的转译，而非历史复制。
Why is teal restricted to a single accent?为什么青绿色只能作为单一强调色出现？
Teal provides the system’s cool counterpoint to its amber, pink, and red warmth. Because it is scarce, it can read as a reflection, landmark, or distinct signal. If it becomes a general-purpose color, the warm-cool tension disappears and the palette turns into undifferentiated neon decoration.青绿为琥珀、粉与红构成的暖色世界提供冷色对照。正因为它稀少，所以可以被读作倒影、地标或独立信号。若把它当作通用色大面积使用，冷暖张力就会消失，整套色板也会退化成没有区分度的霓虹装饰。
Can this style work on a light background?这种风格可以使用浅色背景吗？
It can be adapted, but the result will lose much of the system’s core logic. Stray Cyber City depends on the absence of daylight, the depth of a sodium-lit brown ground, and the way neon emerges from darkness. A light variant may borrow the amber, pink, red, and teal relationships, but it should be treated as an interpretation rather than the canonical expression.可以改编，但会失去这套系统的核心逻辑。Stray Cyber City 建立在无日光、钠灯暖棕底色，以及霓虹从黑暗中浮现的关系之上。浅色版本仍可借用琥珀、粉、红与青绿之间的关系，但它应被视为一种变体，而不是标准表达。
How can the interface stay readable when the style is so dense?风格如此密集时，界面如何保持可读性？
Density should be organized through light hierarchy, not added indiscriminately. Reserve the strongest amber emphasis for the primary path, let supporting colors describe secondary conditions, and keep text grouped into clear clusters. Dark space must remain available for pauses and separation. The city can feel crowded while the reading order stays deliberate.应当通过光线层级来组织密度，而不是无差别地堆叠元素。把最强的琥珀强调留给主要路径，让辅助色表达次级状态，并将文字归入清晰的信息簇。黑暗空间仍要承担停顿与分隔的作用。城市可以拥挤，但阅读顺序必须明确。
What makes this different from generic neon cyberpunk?它与普通的霓虹赛博朋克有什么不同？
Its identity comes from restriction and atmosphere. The palette is warm and grounded rather than broadly multicolored; teal is rare rather than ubiquitous; darkness behaves like an environment rather than a backdrop; and density comes from accumulated urban layers rather than random effects. The result is closer to a lived-in alley than to a polished science-fiction showroom.它的身份来自限制与氛围。色板温暖而有土地感，而不是泛用的多彩霓虹；青绿稀少而非无处不在；黑暗是一种环境，而不是单纯背景；密度来自城市层层累积的痕迹，而不是随机特效。最终效果更像有人生活过的巷道，而不是光洁的科幻展厅。
Related design styles相关设计风格
Daft Punk Discovery (Gold-Helmet)Warm sci-fi disco. Gold serif caps orbit a magenta void with chrome-disc geom…温热科幻迪斯科：金色衬线大字环绕品红虚空与铬色圆盘。
Northern Soul Wigan (1970)Underground urgency. Black ground, fist-red type, and tan vinyl rings hit lik…地下舞池的急迫感。黑底、拳红大字与唱片棕圆环像凌晨海报。
Akira Neo-TokyoNight moves fast. Firebrick trails cut crushed black, teal grids, and condens…黑夜疾驰。砖红光轨切开墨黑、青蓝网格与压缩招牌。
Blade Runner 1982 Neon NoirRain-soaked noir. Orange, magenta, and cyan neon cut black glass.雨夜黑色电影。橙洋红青霓虹切开黑玻璃。
Citizen SleeperWarm sci-fi, handmade. Orange-on-teal panels glow with riso grain and dice-cl…温暖的人文科幻：橙青双色、炭黑面板与骰钟几何覆上丝网颗粒。
CloudpunkNeon-noir goes voxel. Pink-cyan glow cuts deep-indigo grids and blocky tower…体素霓虹黑色电影：粉青硬光切开深靛网格与方块塔群。