Avatar & Monogram Studio

The Mathematics of Squircles: Superellipses in Apple & Figma Design

A standard rounded rectangle (border-radius) connects four straight sides to circular arcs, creating an abrupt change in surface curvature where the straight line meets the circle (curvature discontinuity, G1 continuity). In contrast, modern interfaces like Apple iOS and Figma utilize the superellipse (squircle), which achieves continuous curvature (G2 curvature continuity).

Mathematically defined by Gabriel Lamé as |x/a|^n + |y/b|^n = 1 (where n is typically between 4 and 5), the squircle eliminates visual corners, resulting in an exceptionally smooth, organic shape that feels premium and tactile.

Typographic Monogram Hierarchy & Font Rendering

For user accounts without uploaded headshots, systems generate initial monograms. Achieving a polished appearance requires strict typographic metrics: centering initials by their visual center of gravity rather than their font bounding box, pairing letter spacing (tracking) with appropriate font weights, and applying balanced chromatic background palettes.

BlankImages supports curated typography (Inter, Outfit, Playfair Display, Space Grotesk) with optical vertical alignment and complementary foreground/background color combinations.

/* CSS modern superellipse avatar container with online status badge */
.avatar-wrapper {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 28%; /* Simulates squircle curvature */
  overflow: hidden;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: 2.25rem;
  font-weight: 700;
  color: #ffffff;
}

.avatar-status-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  background-color: #22c55e; /* Online active indicator */
  border: 3px solid var(--surface);
  border-radius: 50%;
}

Standard Platform Profile Dimensions

While platforms display avatars at small sizes (32px to 64px in comment threads), upload endpoints require high-resolution source files. The industry standard upload resolution is 400×400 pixels (used by X/Twitter, LinkedIn, and GitHub), while Instagram and Facebook recommend at least 320×320 pixels. BlankImages outputs crisp 400×400 and custom ultra-res vectors.