Chalk: sistema de diseño educativo y cercano

Web · Light · Playful · Bold · Education

Chalk

Luminoso, redondeado y alentador, como una buena aula.

Chalk hace que aprender resulte cercano: páginas de crema cálido, un azul seguro para las acciones, ámbar y verde alegres para el progreso y una Nunito redondeada con un tamaño lo bastante grande para ojos jóvenes y cansados por igual. Las lecciones se dividen en pasos pequeños y bien etiquetados.

Preview

Rendered live from the tokens below, in the system's own fonts.

New in 2026Plan, ship and measure in one place

A calm workspace for small teams. Every number you need, nothing you don't.

Start freeBook a demo

Active users12,480

Revenue$48.2k

Retention86%

Invite your teamWork emailyou@company.comRoleEditor ▾Send invite

Recent ordersCustomerStatusAmountAda ParkPaid$1,240Lukas WeberPending$380Mei ChenRefunded$96

Use it in your project

Paste this into Codex or Claude Code. The agent saves the spec as DESIGN.md and follows it from then on.

This project uses the Chalk design system. Its spec is at https://codexdesign.io/es/design-systems/chalk.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.

Tokens

Colors

Light theme

background#FFF8ECoklch(0.981 0.018 81.333)
foreground#1C2333oklch(0.257 0.032 265.974)
card#FFFFFFoklch(1 0 0)
card-foreground#1C2333oklch(0.257 0.032 265.974)
popover#FFFFFFoklch(1 0 0)
popover-foreground#1C2333oklch(0.257 0.032 265.974)
primary#1F5FD6oklch(0.52 0.194 261.461)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#FFE7B8oklch(0.936 0.066 84.017)
secondary-foreground#5A3B00oklch(0.379 0.08 75.782)
muted#F6EEDFoklch(0.951 0.022 83.264)
muted-foreground#5A6070oklch(0.49 0.027 269.134)
accent#FFEFD0oklch(0.957 0.044 83.913)
accent-foreground#1C2333oklch(0.257 0.032 265.974)
destructive#C22F2Foklch(0.538 0.184 25.962)
border#EADFCBoklch(0.907 0.029 82.593)
input#DDCFB6oklch(0.859 0.037 82.163)
ring#1F5FD6oklch(0.52 0.194 261.461)
chart-1#1F5FD6oklch(0.52 0.194 261.461)
chart-2#F59E0Boklch(0.769 0.165 70.08)
chart-3#16A34Aoklch(0.627 0.17 149.214)
chart-4#E0457Boklch(0.625 0.195 3.518)
chart-5#0EA5B7oklch(0.661 0.112 208.672)

Dark theme

background#141A26oklch(0.218 0.025 263.828)
foreground#F3EEE4oklch(0.95 0.014 84.584)
card#1B2232oklch(0.253 0.032 265.946)
card-foreground#F3EEE4oklch(0.95 0.014 84.584)
popover#1B2232oklch(0.253 0.032 265.946)
popover-foreground#F3EEE4oklch(0.95 0.014 84.584)
primary#7BA4FFoklch(0.728 0.14 264.763)
primary-foreground#141A26oklch(0.218 0.025 263.828)
secondary#2A2F3Boklch(0.305 0.023 267.284)
secondary-foreground#F3EEE4oklch(0.95 0.014 84.584)
muted#1F2635oklch(0.269 0.03 265.06)
muted-foreground#A2A9B8oklch(0.734 0.023 265.71)
accent#262E40oklch(0.302 0.035 265.827)
accent-foreground#F3EEE4oklch(0.95 0.014 84.584)
destructive#FF7A7Aoklch(0.735 0.163 21.864)
border#2C3446oklch(0.326 0.034 265.934)
input#364056oklch(0.372 0.04 265.526)
ring#7BA4FFoklch(0.728 0.14 264.763)
chart-1#7BA4FFoklch(0.728 0.14 264.763)
chart-2#FBBF4Aoklch(0.839 0.146 80.739)
chart-3#4ADE80oklch(0.8 0.182 151.711)
chart-4#F582A7oklch(0.744 0.145 0.747)
chart-5#4FD1E0oklch(0.796 0.114 205.941)

Fonts

Headings: Nunito · 800
Body: Nunito · 500
Monospace: JetBrains Mono

Type scale

display · 64/1.05 · -0.02emThe quick brown fox
h1 · 44/1.1 · -0.015emThe quick brown fox
h2 · 30/1.2 · -0.01emThe quick brown fox
h3 · 21/1.3The quick brown fox
body · 18/1.6The quick brown fox
small · 15/1.45The quick brown fox

Radius, spacing and shadow

Corner radiussm 12pxmd 14pxlg 16pxxl 20px

Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px

ShadowSoft, low and wide, on cards and sheets only.

Layout

Max width: 1200px
Text width: 66ch
Columns: 12
Gutter: 24px

Best for

Cursos online y bootcamps
Escuelas, clases particulares y aprendizaje infantil
Sitios de productos EdTech
Talleres y guías de estudio

Do's and don'ts

Muestra el progreso en cada curso y cada lección.
Mantén el texto del cuerpo en 18px, incluso en lecciones densas.
No marques las respuestas incorrectas en rojo sin una explicación breve.
No apiles más de tres colores en una tarjeta.