LCARS LCARS(图书馆计算机访问/检索系统)
LCARS is the 24th-century Starfleet computer interface: a black canvas covered in large, flat, rounded color blocks — orange, peach, amber, lavender, and red — that act as both labels and touch targets. Section headers bend in curved "elbow" or boomerang shapes, text is almost always uppercase sans-serif, and the whole thing reads as an illuminated console rather than a windowed desktop. It was created for Star Trek: The Next Generation in 1987 and remains the visual shorthand for friendly, accessible sci-fi ship controls.
LCARS 是 24 世纪星际舰队计算机界面的视觉语言:一块黑色画布上铺着大片扁平的圆角色块——橙、桃、琥珀、薰衣草紫和红色——这些色块同时充当标签和触控目标。区块标题会弯成「弯头」或回旋镖形状,文字几乎全是带衬线体以外的无衬线大写,整体读起来像一块发光的控制台,而不是窗口化桌面。它诞生于 1987 年的《星际迷航:下一代》,至今仍是友好、易用型科幻飞船控制界面的视觉代名词。
Scope: This entry covers the on-screen graphic language of LCARS as a visual style, not the fictional operating system or its in-universe rules. Touch-panel hardware and voice interfaces are part of the Star Trek prop world but are not the atlas signals here.
范围:本条覆盖 LCARS 作为视觉风格的屏幕图形语言,不覆盖虚构操作系统或其设定内规则。触控面板硬件和语音交互属于《星际迷航》道具世界,不是本图鉴的信号。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Black canvas ground黑色画布底 surface defining定义特征
The entire interface sits on a near-black ground (#0b0b0b to #000000) so the colored blocks read as illuminated touch-panel surfaces rather than cards on a page.
整个界面坐落在接近纯黑的底色上(#0b0b0b 到 #000000),让彩色块读起来像是发光的触控面板表面,而不是页面上的卡片。
-
Rounded lozenge blocks圆角菱形块 geometry defining定义特征
UI elements are pill-like or lozenge-shaped rectangles with 12–20px corner radii on the short ends; small caps act as buttons, large caps act as section headers.
UI 元素是药丸形或菱形圆角矩形,短边圆角半径 12–20px;小色块充当按钮,大色块充当区块标题。
-
Curved elbow headers弯头标题 geometry defining定义特征
Section dividers and titles sit inside curved, boomerang, or L-shaped caps that bend around a panel corner, often with one rounded end and one straight or clipped edge.
区块分隔和标题位于弯曲、回旋镖形或 L 形的弯头盖内,常常一端圆角、另一端直边或切角,绕过面板角落。
-
Warm orange / peach / lavender palette暖橙 / 桃 / 薰衣草配色 color defining定义特征
Dominant blocks use saturated orange (#FF9900), peach (#FFCC99), amber (#FF9966), and lavender (#9999CC); red (#CC6666) and blue (#6699CC) appear as accents, all against black.
主色块使用饱和橙(#FF9900)、桃色(#FFCC99)、琥珀(#FF9966)和薰衣草紫(#9999CC);红色(#CC6666)和蓝色(#6699CC)作为小面积点缀,全部压在黑色上。
-
All-caps compact sans labels大写紧凑无衬线标签 typography defining定义特征
Text is set in a tight, medium-weight sans-serif, almost always uppercase, with generous tracking (0.06–0.12em) so labels read as instrument annotations.
文字使用紧排、中等字重的无衬线体,几乎全为大写,字间距 0.06–0.12em,让标签读起来像仪器注释。
-
Flat touch targets扁平触控目标 layout supporting辅助特征
Controls are flat color swatches with no gradient, shadow, or bevel; the shape and color alone indicate the interactive area, as if pressing a lit touch panel.
控件是 flat 的纯色块,没有渐变、阴影或倒角;仅靠形状和颜色暗示可交互区域,像按一块发光触控面板。
-
Phosphor scanline depth磷光扫描线纵深 depth avoid避免
Monochrome green glow, CRT scanlines, terminal fixed-width typography, or faux 3D bevels belong to terminal-hacker and skeuomorphism; LCARS keeps the surface flat, warm, and blocky.
单色绿光、CRT 扫描线、终端等宽字体或拟真 3D 倒角属于 Terminal Hacker 和拟物设计;LCARS 保持表面扁平、温暖、块状。
Often confused with: Terminal Hacker最容易混淆:终端黑客风(Terminal / Hacker / CRT)
LCARSLCARS(图书馆计算机访问/检索系统)
Terminal Hacker终端黑客风(Terminal / Hacker / CRT)
This is LCARS because the black ground serves a warm, blocky, touch-panel language — colored rounded lozenges, curved elbow headers, and uppercase labels that invite tapping rather than typing.
这是 LCARS,因为黑色底色承载的是温暖、块状、触控面板的语言——彩色圆角菱形、弯头标题、大写标签,呼唤的是点击而不是输入命令。
It would become Terminal Hacker if the color blocks were replaced by a monochrome phosphor-green command-line grid, a blinking cursor, scanlines, and fixed-width glyphs.
如果把这些彩色块换成单色磷光绿的命令行网格、加上闪烁光标、扫描线和等宽字体,就变成 Terminal Hacker 了。
In code — optional starting points代码写法 —— 可选起点
The signature lozenge button / header block
background: #FF9900; color: #0b0b0b; border-radius: 999px; padding: 10px 18px; text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-sans);
Curved elbow header using a pseudo-element cap
.elbow { position: relative; background: #9999CC; border-radius: 999px 0 0 999px; padding: 8px 14px; }
.elbow::after { content: ''; position: absolute; right: -28px; top: 0; width: 48px; height: 100%; border-radius: 0 999px 999px 0; background: #9999CC; }
Layout utilities in Tailwind syntax
bg-[#0b0b0b] text-[#FF9900] rounded-full uppercase tracking-widest font-sans px-4 py-2
Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the surface in the spirit of LCARS. Start with a near-black canvas (#0b0b0b) as the only background. Build every interactive element as a flat, rounded lozenge: 12–20px border-radius on the short ends, no shadows, no gradients. Use the canonical palette — #FF9900 orange for primary actions and headers, #FFCC99 peach and #FF9966 amber for secondary blocks, #9999CC lavender for tertiary regions, #CC6666 red and #6699CC blue as small accents. Add curved "elbow" or boomerang headers by combining straight bars with pseudo-element caps (border-radius: 999px on one side). Set all labels in uppercase sans-serif with 0.06–0.12em letter-spacing and a medium weight; body text should stay minimal. Space blocks with generous black gaps (8–16px) so the colored shapes float on the canvas. Do not add scanlines, phosphor glow, terminal cursors, 3D bevels, or glass blur — those push the design toward Terminal Hacker or Aqua. For interactivity, states can invert text/background color or add a thin inner border; do not animate width/height on the lozenges. Maintain 4.5:1 contrast between the dark canvas and text, and ensure uppercase labels do not become unreadable at small sizes.
按 LCARS 的精神创建这个界面。先用接近纯黑的画布(#0b0b0b)作为唯一背景。把所有交互元素都做成长短边带圆角的扁平菱形:短边圆角 12–20px,不要阴影和渐变。使用经典色板——#FF9900 橙色用于主操作和标题,#FFCC99 桃色和 #FF9966 琥珀色用于次要色块,#9999CC 薰衣草紫用于第三级区域,#CC6666 红色和 #6699CC 蓝色作为小面积点缀。通过直条加伪元素端盖做出弯曲的「弯头」或回旋镖标题(单侧 border-radius: 999px)。所有标签使用大写无衬线体,字间距 0.06–0.12em,中等字重;正文尽量保持克制。色块之间留出 8–16px 的黑色间隙,让彩色形状浮在画布上。不要加扫描线、磷光辉光、终端光标、3D 倒角或玻璃模糊——那些会把设计推向 Terminal Hacker 或 Aqua。交互状态可用反色或细内边框表示,但不要对菱形本身做宽高动画。保持深色画布与文字的 4.5:1 对比度,并确保小尺寸大写标签仍可读。
Accessibility & misuse可访问性与误用
The black ground plus warm colored blocks can fail contrast if text sits directly on the lighter peach (#FFCC99) or lavender (#9999CC) fills; use near-black ink (#0b0b0b) on those blocks and keep white text off the yellow-orange swatches.
黑色底色加温配色块容易在文字直接压在浅色桃色(#FFCC99)或薰衣草紫(#9999CC)上时对比度不足;在这些色块上用近黑字(#0b0b0b),并避免在白底色上放白色文字。
All-caps, tightly tracked labels reduce legibility for readers with dyslexia or low vision; reserve uppercase for short labels, keep sentence case for body copy, and use generous line-height.
全大写且字间距紧的标签会降低阅读障碍或低视力用户的可读性;大写只留给短标签,正文用句首大写,并加大行高。
The style's flatness means there are no default focus shadows — add a visible focus ring (e.g. a 2px #CC6666 outline with 2px offset) so keyboard users can see which lozenge is active.
这种风格的扁平化意味着默认没有焦点阴影——给键盘用户加一个可见焦点环(例如 2px #CC6666 outline,偏移 2px),让其清楚知道哪个菱形块处于激活状态。
Origin起源
LCARS — Library Computer Access/Retrieval System — was designed by graphic designer Michael Okuda for Star Trek: The Next Generation, which premiered in 1987. Roddenberry wanted the Enterprise-D bridge to look more advanced than the original series, so Okuda devised the black-screen, colored-block touch-panel language for the ship's consoles. The look carried through Deep Space Nine and Voyager and became the defining visual shorthand for 24th-century Starfleet interfaces.
LCARS——图书馆计算机访问/检索系统(Library Computer Access/Retrieval System)——由平面设计师 Michael Okuda 为 1987 年首播的《星际迷航:下一代》设计。Roddenberry 希望企业号-D 的舰桥看起来比原初系列更先进,于是 Okuda 创造了这种黑屏彩色块触控面板语言,用于飞船控制台。这一外观延续到了《深空九号》和《航海家号》,并成为 24 世纪星际舰队界面的标志性视觉符号。