Chalkboard 黑板粉笔风格(Chalkboard)

Scope: This entry covers the chalk-on-dark-board treatment of UI surfaces — chalk lettering, chalk-outlined controls, dust and smudges on a slate ground. It is not generic dark mode, and it is not pen-and-paper sketching; that light-ground sibling is Hand-drawn / Doodle. Wooden frames and classroom props are optional set dressing, not the core.

范围:本条覆盖「深色板面 + 粉笔」的界面处理 —— 粉笔字、粉笔描边的控件、石板底上的粉尘与擦痕。它不是泛泛的深色模式,也不是纸笔素描;那个浅色底的近亲是手绘涂鸦(Hand-drawn / Doodle)。木边框和教室道具是可选布景,不是核心。

Midnight Drive
Neon Coast
1:123:48

标本可交互 —— 点点看。Specimen is live — try it.

If you called it…如果你管它叫……

“website that looks like a cafe chalkboard menu”「长得像咖啡馆粉笔菜单板的网站」“white chalk writing on a dark green board”「深绿板子上的白粉笔字」“ui that looks like a school blackboard with chalk doodles”「像学校黑板、画满粉笔涂鸦的 UI」“dark background with sketchy white lettering and dust smudges”「深色底配草感白色手写字和粉尘涂抹」“the classroom blackboard look with stars and arrows drawn in chalk”「教室黑板那种粉笔画星星箭头的样子」“hand lettered menu board style ui”「手写菜单板风格的 UI」

Full style DNA完整风格 DNA

  1. Dark slate board ground深石板色板面 color defining定义特征

    The canvas is a near-black slate or chalkboard green — #2b3a33 down to #1e2a24 — with a faint matte tooth and darker vignette at the edges; never pure flat black, never a glowing gradient.

    画布是近黑的石板色或粉笔绿 —— #2b3a33 到 #1e2a24 —— 带一层哑光颗粒,边缘微微压暗;绝不是纯平黑,也不是发亮的渐变。

  2. Chalk-white sketchy strokes白色粉笔笔触 surface defining定义特征

    Every mark is chalk: opaque white (#f2efe6) strokes with soft grainy edges, slight opacity variation, and doubled re-traced lines as if the writer went over the stroke twice.

    每一笔都是粉笔:不透明的白(#f2efe6)笔画,边缘柔和带颗粒,透明度略有变化,常有描了两遍的重影线。

  3. Chalk dust and eraser smudges粉笔灰与板擦痕迹 surface defining定义特征

    Soft radial smears, cloudy wipe marks where old content was erased, and a faint dust speckle sit on the board; nothing on the surface is crisp.

    板面上叠着柔和的放射状涂抹、擦掉旧内容后留下的云状擦痕和淡淡的粉尘颗粒;表面没有一根线条是干脆的。

  4. Hand-lettered chalk type手写粉笔字 typography defining定义特征

    Headings use casual hand lettering with uneven stroke weight and a slight bounce off the baseline, often with a visible double outline like re-traced chalk.

    标题用随意的手写粉笔字,笔画粗细不均,基线轻微弹跳,常带一圈明显的双重轮廓,像粉笔回描过一遍。

  5. Pastel chalk accents彩色粉笔点缀 color supporting辅助特征

    Pink, yellow, and sky-blue chalk (#f0a6c0, #f2d06b, #9ecfe4) highlight one or two elements — an underline, an icon, a star — against the dominant white.

    粉、黄、天蓝的彩色粉笔(#f0a6c0、#f2d06b、#9ecfe4)只点亮一两个元素 —— 一条下划线、一个图标、一颗星 —— 在满版白色中跳出来。

  6. Doodle stars, swirls, arrows星星、螺旋、箭头涂鸦 imagery supporting辅助特征

    Four-point stars, spiral flourishes, hand-drawn arrows, and wavy underlines ornament corners and labels, like a café menu board.

    四角星、螺旋花饰、手绘箭头和波浪下划线装饰着角落和标签,像咖啡馆的菜单板。

  7. Chalk-outlined rounded controls粉笔描边的圆角控件 geometry supporting辅助特征

    Buttons are rounded rectangles drawn with a 2–3px chalk outline and slightly uneven corner radii; the primary action may be chalk-filled with board-colored glyphs punched out.

    按钮是 2–3px 粉笔描边的圆角矩形,圆角半径故意不均匀;主操作可以用粉笔填满,露出板底色的图形。

  8. Clean vector polish干净的矢量抛光 surface avoid避免

    Crisp 1px strokes, solid digital fills, drop shadows, or neon glow dissolve the dusty matte illusion instantly — chalk never shines.

    锐利的 1px 线条、实心数字填充、投影或霓虹辉光会立刻瓦解 dusty 哑光的错觉 —— 粉笔永远不发光。

Often confused with: Hand-drawn / Doodle最容易混淆:手绘涂鸦(Hand-drawn / Doodle)

Midnight Drive
Neon Coast
1:123:48

Chalkboard黑板粉笔风格(Chalkboard)

Midnight Drive
Neon Coast
1:123:48

Hand-drawn / Doodle手绘涂鸦(Hand-drawn / Doodle)

This is Chalkboard because the ground is a dark slate board and every mark is chalk: white or pastel strokes with grainy edges, doubled hand-lettering, dust, and eraser smudges.

这是黑板粉笔风格,因为底是深石板色的板面,每一笔都是粉笔:白色或彩色笔画带颗粒边缘、描着重影的手写字、粉尘和板擦擦痕。

It would become Hand-drawn / Doodle if the board were swapped for light paper and the chalk for pen or marker — dark ink on a cream ground, with no dust, no smudges, and no pastel chalk.

如果把板面换成浅色纸张、粉笔换成钢笔或马克笔 —— 米色底上的深色墨迹,没有粉尘、没有擦痕、没有彩色粉笔 —— 就变成手绘涂鸦了。

Compare: Chalkboard vs Hand-drawn / Doodle →对比页 →

In code — optional starting points代码写法 —— 可选起点

Chalk lettering: doubled, uneven white strokes

color:#f2efe6; text-shadow:1px 1px 0 rgba(242,239,230,.4), -1px 0 0 rgba(242,239,230,.25); letter-spacing:.02em; transform:rotate(-.5deg);

Dusty slate board with wooden frame

background:#2b3a33; box-shadow:inset 0 0 80px rgba(0,0,0,.35); border:6px solid #7d5f45; border-radius:8px;

Chalk-outlined rounded button (primary gets the chalk fill)

border:2.5px solid #f2efe6; border-radius:12px 15px 11px 16px; background:transparent; color:#f2efe6; padding:10px 18px;

Style brief — paste into your agent风格 Brief —— 粘贴给你的代理

Create the surface as a Chalkboard. Ground: matte slate #2b3a33 with box-shadow: inset 0 0 80px rgba(0,0,0,.35); dust it with a feTurbulence noise overlay at ~10% opacity, 2–3 soft radial smears (rgba(255,255,255,.04–.07)), and one faint diagonal eraser-wipe band; a 5–7px wood frame (#7d5f45) is optional. All strokes are chalk: white #f2efe6 with grainy, doubled edges — fake with an offset text-shadow (1px 1px 0 rgba(242,239,230,.4)) and feTurbulence displacement on SVG strokes. Accents: pastel chalk only — pink #f0a6c0, yellow #f2d06b, sky #9ecfe4 — one per element. Headings in a hand-lettered face (Chalkboard SE, Caveat) rotated ±0.5deg; body and numerals in a sans or mono at 15–16px. Buttons: chalk-outlined rounded rectangles, 2–2.5px stroke, uneven radii (12px 15px 11px 16px); the primary action is chalk-filled with board-colored glyphs. Add doodle four-point stars, swirls, arrows, wavy underlines; freeze any draw-in or dust drift under prefers-reduced-motion. Avoid: neon glow, crisp vector edges, drop shadows, and light-paper grounds — that is Hand-drawn.

按黑板粉笔风格(Chalkboard)创建界面。底:哑光石板色 #2b3a33,加 box-shadow: inset 0 0 80px rgba(0,0,0,.35);用 feTurbulence 噪点叠加层(约 10% 不透明度)、2–3 处柔和的放射状涂抹(rgba(255,255,255,.04–.07))和一条淡淡的斜向板擦擦痕做粉尘;可选 5–7px 木边框(#7d5f45)。所有笔画都是粉笔:白色 #f2efe6、带颗粒的重影边缘 —— 用偏移 text-shadow(1px 1px 0 rgba(242,239,230,.4))和 SVG 描边上的 feTurbulence 位移来模拟。点缀色只用彩色粉笔 —— 粉 #f0a6c0、黄 #f2d06b、天蓝 #9ecfe4 —— 每个元素一处。标题用手写粉笔感字体(Chalkboard SE、Caveat),旋转 ±0.5deg;正文和数字用无衬线或等宽字体,15–16px。按钮:粉笔描边圆角矩形,描边 2–2.5px,圆角不均匀(12px 15px 11px 16px);主操作用粉笔填满,露出板底色图形。加上四角星、螺旋、箭头、波浪下划线涂鸦;prefers-reduced-motion 下任何描画动画或粉尘漂移都直接定格在最终帧。避免:霓虹辉光、锐利的矢量边缘、投影,以及浅色纸底 —— 那是手绘涂鸦。

Accessibility & misuse可访问性与误用

Chalk white #f2efe6 on slate #2b3a33 measures about 10:1, and the pastel chalks hold roughly 6–8:1 against the clean board — but only against the clean board. Pastel strokes are thin by nature and lose perceived contrast fast at small sizes, so keep pastels to decorative marks and large headings, and letter all running text in chalk white.

粉笔白 #f2efe6 配石板底 #2b3a33 实测约 10:1,彩色粉笔在干净板面上也有约 6–8:1 —— 但前提是与干净板面相配。彩色粉笔笔画天生纤细,字号一小感知对比度就掉得快,所以彩色只留给装饰和大标题,连续文本一律用粉笔白。

Dust smudges and eraser wipes lighten the board locally, which drags down the contrast of anything written across them. Keep a wiped-clean writing zone behind body copy, and if text must cross a smudge, verify 4.5:1 against the lightest point of the smudge rather than the base board color.

粉尘涂抹和板擦擦痕会局部提亮板面,压低压过其上文字的对比度。正文背后要留一块擦干净的书写区;如果文字必须跨过涂抹,要对着涂抹最亮的点验证 4.5:1,而不是对着板面底色。

Doubled, sketchy strokes and hand-lettered fonts cost legibility below about 16px — reserve the lettering for headings and short labels, and set controls and numerals in a clean sans or mono. State changes must not ride on chalk texture alone: swap the icon or fill as well. Chalk draw-in animations and drifting dust need a prefers-reduced-motion fallback that renders the finished frame statically.

重影、草感的笔画和手写体在 16px 以下会损失可读性 —— 手写体留给标题和短标签,控件和数字用干净的无衬线或等宽字体。状态变化不能只靠粉笔纹理:同时要换图标或填充。粉笔描画动画和漂移的粉尘需要 prefers-reduced-motion 兜底,直接静态呈现完成的画面。

Origin起源

The classroom board itself dates to early-1800s Scotland — James Pillans, headmaster of the Old High School in Edinburgh, is often credited with mounting the first large slate teaching board around 1801 — and the familiar green surface arrived with porcelain-enamel steel boards in the 1960s, picked partly for reduced glare. In digital design the look rode the early-2010s skeuomorphic wave: café and restaurant sites, menu apps, and indie games dressed interfaces as chalk on slate, and chalkboard display fonts carried it into slide decks and marketing pages, where it survives as a friendly hand-made signal.

教室黑板本身可追溯到 19 世纪初的苏格兰 —— 爱丁堡老中学(Old High School)校长 James Pillans 常被认为在 1801 年前后率先挂出了大幅石板教学板 —— 而我们熟悉的绿色板面则随搪瓷钢板在 1960 年代普及,部分原因是眩光更低。在数字设计里,这个外观搭上了 2010 年代初的拟物浪潮:咖啡馆和餐厅网站、菜单应用和独立游戏把界面扮成石板上的粉笔字,黑板风展示字体又把它带进幻灯片和营销页,作为一种亲切的手工感信号留存至今。

See also相关词条