Techniques
Ring-fill arc (SVG/CSS)
The canonical three-rings hero motif — concentric circular progress arcs with rounded stroke caps on pure black.
.ring {
fill: none;
stroke-linecap: round;
stroke-width: 18px;
transform: rotate(-90deg);
transform-origin: center;
transition: stroke-dashoffset 400ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ring--move { stroke: #FA114F; }
.ring--exercise { stroke: #92E82A; }
.ring--stand { stroke: #1EEAEF; }
.ring-track { stroke: #3A3A3C; stroke-width: 18px; fill: none; }
Metric stat card
Dense calorie/step/distance readout card with uppercase caption labels and tabular mono figures.
.stat-card {
background: #1C1C1E;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 20px 24px;
}
.stat-card__label {
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #AEAEB2;
}
.stat-card__value {
font-family: 'Inter', sans-serif;
font-size: 2.25rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #F4F4F4;
line-height: 1.1;
}
Sweat-glow radial vignette
Subtle radial gradient vignette behind athlete portraits or ring heroes — the only gradient permitted in the system.
.sweat-glow {
position: relative;
}
.sweat-glow::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at 50% 40%,
rgba(250, 17, 79, 0.15) 0%,
transparent 70%
);
pointer-events: none;
}