Fluent 3D Face Anatomy

The face isn't a flat yellow disc with shading on top. It is a single wide gradient running from a lemon highlight at the upper right down to salmon at the lower left, with a magenta rim light in the last ~8 px of the bottom edge and a hard white specular dot at roughly 74% / 20%. Every face in the set uses the same one — sampled probes on 😐, 🙂 and 😀 agree to within two levels per channel.

The pink at the very bottom is the detail people miss when they re-draw this style. It only occupies the final 1% of the silhouette, but it is what stops the face reading as plastic.

Clustered in perceptual space over every fully-opaque pixel in the face subset. The percentage is that cluster's share of the artwork, which is a decent proxy for how much of a page you can paint with it before it stops feeling like the emoji.

Rarer accents, from the expressive faces

Read as a single swatch, the mouth and eyebrow strokes look like a dark brown. They are actually a short vertical gradient that starts warm brown and lands on violet — which is what makes them sit inside the plastic rather than on top of it. The pupils are a different, darker, genuinely flat colour, so don't reuse one for the other.

Mouth bar — 😐 1f610

Size

95 × 14 px · 37% × 5.5% of icon

Caps

fully round — cap radius equals half the stroke, border-radius: 99px

Top

#4C3837 warm brown

Mid

#523A4E at 48%

Bottom

#51275B violet

Cap tint

#472D3C — ends run ~5% darker

Eyebrow — 🤔 1f914

Weight

10–12 px · 4.0–4.7% of icon

Rule

brows run 65–75% of the mouth weight on the same face

Colour

#4E3845 median — same ramp, shorter run

Heavier set

angry & frowning mouths (😠 😞) go to 16 px · 6.3%

Pupil

Colour

#3F2831 — flat, no gradient

Diameter

48 px · 18.8% of icon

Eye white

67 px · pupil is 72% of it

Vs. strokes

darker and browner: L* 24 vs 28, and no violet at the bottom

Measured by connected-component labelling on pixels below L* 40, taking twice the peak of the distance transform as the true stroke thickness — which is why the cap geometry falls out of it: for every stroke, max thickness equals the bounding-box height exactly.

Each eye white drops a soft shadow onto the face. To measure it, a 4th-order polynomial was fitted to the face gradient using only skin pixels more than 24 px from any feature, then the real image was divided by that fit. What's left is the shadow alone.

A neutral black shadow is the giveaway of a hand-made imitation. Because the shadow eats green and leaves blue alone, on amber skin it resolves toward maroon — which is where the rgba(124, 36, 49, .22) below comes from. On a neutral surface use a plum rgba(74, 49, 64, .20) instead.

Drop-in custom properties. The two gradients and the shadow are the pieces worth copying verbatim; everything else is a flat value you can tint from.

:root {
  /* face body — 17.9% + 17.0% + 13.1% of the artwork */
  --f3d-face-hi:     #FFDD55;   /* top-right rim  */
  --f3d-face-lit:    #FFC13B;
  --f3d-face:        #FBA941;   /* the workhorse  */
  --f3d-face-shade:  #F4944C;
  --f3d-face-warm:   #F77D5D;   /* bottom bounce  */
  --f3d-face-rim:    #F97FC6;   /* last 3px only  */

  /* ink — never pure black anywhere in the set */
  --f3d-stroke-top:  #4C3837;
  --f3d-stroke-mid:  #523A4E;
  --f3d-stroke-bot:  #51275B;
  --f3d-pupil:       #3F2831;   /* flat, darker    */

  /* accents */
  --f3d-mouth:       #B31199;
  --f3d-mouth-deep:  #9F0BA4;
  --f3d-pink:        #F47587;
  --f3d-hot-pink:    #E62776;
  --f3d-blue:        #4271FF;
  --f3d-green:       #44CE81;
  --f3d-white:       #FFFEFE;
  --f3d-cool:        #D7C1EA;   /* the cool fringe */

  /* the face, as one background */
  --f3d-orb:
    radial-gradient(circle at 74% 20%, rgba(255,255,255,.92) 0%, rgba(255,246,200,0) 17%),
    radial-gradient(78% 62% at 50% 104%, #F97FC6 0%, rgba(249,127,198,0) 46%),
    radial-gradient(122% 118% at 71% 15%, #FFE950 0%, #FFCE2B 22%, #FFC13B 36%,
                    #FBA941 56%, #F4944C 72%, #F08055 86%, #F97965 100%);

  /* a stroke — round caps, warm at the top, violet at the foot */
  --f3d-stroke: linear-gradient(180deg, #4C3837 0%, #523A4E 48%, #51275B 100%);
  --f3d-stroke-weight: 5.5%;    /* of icon size; brows 4.2% */

  /* contact shadow, scaled off a 256px icon */
  --f3d-shadow:      drop-shadow(-0.4% 0.5% 1.6% rgba(124, 36, 49, .22));
  --f3d-shadow-flat: 0 2px 8px rgba(74, 49, 64, .20);
}

Percentages in drop-shadow aren't legal CSS — use them as a scaling rule when you author per size. At a 40 px icon that's drop-shadow(-0.2px 0.2px 1.9px rgba(124,36,49,.22)); at 160 px, drop-shadow(-0.6px 0.8px 7.5px …).