Etch A Sketch — HTML Style Guide

01

Color Palette

Drawn from the toy itself: the iconic red frame, aluminum powder screen gray, white plastic knobs, and the dark etch lines. Minimal and purposeful.

Frame Colors

Etch Red

#D42626

Primary brand / frame

Red Dark

#A81E1E

Frame shadow

Red Light

#E84848

Hover states

Red Highlight

#F06060

Accent highlights

Screen Colors

Screen

#C4C4B8

Background surface

Screen Light

#D4D4C8

Cards / inputs

Screen Dark

#A8A89C

Secondary text

Screen Line

#8A8A7E

All etch lines / text

Utility Colors

Knob White

#F0ECE4

Light surfaces

Etch Black

#2A2A28

Darkest text

Success

#4A8C3C

Positive feedback

Warning

#C89420

Caution states

02

Typography

Three carefully chosen fonts: Silkscreen for angular display text that echoes the stepped, pixelated nature of Etch A Sketch lines; Share Tech Mono for precise body text; and Fredoka for friendly UI elements that match the toy's playful personality.

Display // Silkscreen

DRAW

Shake to Erase

Left knob = horizontal

Right knob = vertical

THE WORLD'S FAVORITE DRAWING TOY

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

Body // Share Tech Mono

Every masterpiece starts with a single line.

The aluminum powder clings to the screen's underside, displaced only by the sharp stylus point controlled by the two knobs.

Horizontal and vertical movements combine to approximate curves, diagonals, and complex shapes through patient, deliberate turns of the knobs.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%

UI // Fredoka

Playful & Friendly

Buttons, labels, and navigation

The rounded forms echo the toy's molded plastic

Regular weight for secondary UI text and descriptions

03

Spacing Scale

A 4px base unit honors the stepped, grid-aligned nature of Etch A Sketch drawings. Every dimension snaps to this grid, just like the stylus moves in discrete horizontal and vertical increments.

--space-xs

4px

--space-sm

8px

--space-md

16px

--space-lg

24px

--space-xl

32px

--space-2xl

48px

--space-3xl

64px

--space-4xl

96px

04

Buttons

Clean, single-line borders with an etch-drawn feel. The primary red variant calls back to the toy's frame. Hover states add a slight shadow offset, as if the line is being drawn deeper into the screen.

Variants

Sizes

States

Button Group

05

Form Elements

Form fields styled as mini screens within the screen. The silver-gray background with thin line borders keeps the etch aesthetic. Focus states bring in the red frame accent color.

Drawing Title

What will you create today?

Artist Name

Error State

Error: only horizontal and vertical lines allowed!

Difficulty

Drawing Notes

Checkboxes

Snap to grid Show line weight Enable shake-to-erase

Radio Buttons

Horizontal lines only Vertical lines only Both directions (full control)

06

Cards

Content containers with the characteristic single-line borders of an Etch A Sketch drawing. The clipped corner detail suggests a line drawn just short of completing the rectangle.

The Classic

The original Etch A Sketch was invented in the late 1950s by Andre Cassagnes, a French electrical technician. It uses aluminum powder and tiny plastic beads coating the inside of a glass screen.

How It Works

Two knobs control horizontal and vertical rods. Where they meet, a stylus scrapes aluminum powder off the glass, leaving a dark line. Turning the toy upside down and shaking recoats the screen.

Mechanical Classic

The Constraint

You cannot lift the "pen" — every drawing is one continuous line. Diagonals become staircases. Curves become approximations. This limitation is what makes it magical.

07

Alerts

Notification banners with a bold left-edge line accent, drawn in the style of an Etch A Sketch border. Color-coded for different severity levels.

Drawing Tip

Turn the left knob to move horizontally, the right knob to move vertically. Use both simultaneously for stepped diagonal lines.

Masterpiece Saved

Your drawing has been preserved. Careful not to shake the device!

Shake Detected

You are about to erase your drawing. This action cannot be undone. All aluminum powder will be redistributed across the screen.

Drawing Erased

The screen has been cleared. All lines have been lost to the aluminum powder. Start fresh with a blank canvas.

08

Badges & Tags

Compact labels styled as tiny etch-drawn rectangles. Used for categories, statuses, and metadata throughout the design system.

Outline

Default Red Success Warning Danger

Filled

Default Red

Contextual

Classic Toy 1960 Ohio Art In Stock Limited Ed.

09

Progress Bars

Progress indicators that look like horizontal etch lines being drawn across the screen. The fill area uses the same line-weight as drawn etch marks.

Drawing Complexity 75%

Shake Intensity 45%

Aluminum Coverage 90%

Knob Precision 30%

10

Knob Controls

The two white knobs are the soul of the Etch A Sketch. Here we showcase CSS-rendered knobs in different styles, each with the characteristic radial gradient that gives them a three-dimensional, tactile quality.

Classic

Original white

Frame

Red variant

Silver

Aluminum tone

11

Etch Patterns

Decorative backgrounds created using only the horizontal and vertical line constraint of the Etch A Sketch. Staircases, grids, mazes, and nested rectangles rendered purely in CSS.

Staircase

Zigzag

Maze Grid

Concentric

12

Data Table

Tabular data rendered with thin etch lines as dividers. Minimal and clean, matching the single-weight line aesthetic of the toy.

Year	Model	Screen Size	Status
1960	Original Classic	Standard	Iconic
1971	Pocket Edition	Mini	Portable
1993	Etch A Sketch Animator	Standard	Digital
2010	Toy Story Edition	Standard	Limited
2024	Revolution Edition	Large	Current

13

Drawing Canvas

A working mini Etch A Sketch! Click and drag to draw. Use arrow keys for precision. Hit the "Shake to Erase" button to clear the screen.

Click & drag to draw / Arrow keys for precision