Atom Style Guide

Scientifically accurate, emotionally intuitive atoms for learning chemistry. Every atom is a little creature whose mood shows how close it is to a full shell — the chemistry is the design.

Interactive · WebGL

Real glass you can rotate

Full screen ↗
1

Core Anatomy

Six parts. Each one carries real meaning.

Legend

Open site — available for bonding (hungry)
Lone pair — two electrons it keeps close
Bonded — a site that's been filled
2

Common Atoms

Notches aren't memorized — they're derived. Same rule for every atom.

The notch rule

bonding sites = 8 − outer electrons   lone pairs = (outer electrons − sites) ÷ 2

Sites + lone pairs always equals 4 — the four tetrahedral directions. That's not a coincidence: the same four notches predict the molecule's shape later. (Hydrogen wants a duet → 1 site. Boron is happy with 6 → 3 sites, still a little hungry. Noble gases are already full → 0 sites, 4 lone pairs.)

Open (available to bond) Lone pair (two electrons) Bonded (site filled)
3

Mood Rules

Same atom, different needs. Mood is set by the number of open bonding sites.

4

Try it — fill carbon's shell

Click the glowing sockets. Watch the mood and the shell ring change as carbon reaches a full octet.

Bonding is just reaching “content.”

A lone carbon has four open sites — it's overwhelmed. Every bond fills one site and calms it down. At zero open sites the shell is full and carbon is finally content. That feeling is the octet rule.

4 open · overwhelmed
5

Bond Language

A bond is two atoms holding hands to share what they're each missing. Stronger bonds sit tighter and shorter.

6

Shape Intuition

Lone pairs are puffier than bonds, so they take up more room and push the bonded atoms closer. Shape falls straight out of how the four notches are used.

7

Why it helps you learn

Mood reveals valence

How many bonds an atom wants is written on its face — before any words.

Notches reveal capacity

Four positions show exactly where — and how many — bonds can form.

Lone pairs take space

You can see and feel lone pairs changing shape and reactivity.

Full shells feel complete

Satisfaction comes from a complete shell — that's the whole game.

Bond strength is felt

Single, double, triple bonds look and feel different — short means strong.

One rule, everywhere

The same notch rule works for every atom, so confidence transfers.

Design
principles
Scientifically accurate

Built on real electron counts and CPK colors — it transfers to real chemistry.

Emotionally intuitive

Faces and moods make invisible ideas visible and memorable.

Consistent & predictable

The same rules everywhere build confidence.

Accuracy first, cute second

Decoration never hides the chemistry — it reveals it.

MoleMates design system · ← Concept  ·  Open the app →