Library · Data Viz
Data Visualization.
Perelel's numbers carry the science story. The charts, stats, and infographics in this section are designed to feel measured and compelling, leaning into the same hairlines, monospaced labels, and warm neutrals as the rest of the brand system.
Editorial, not dashboard.
Perelel's data visualizations live inside the brand's storytelling: folio pages, clinical trial reports, ingredient breakdowns, social proof, etc. They are read as part of an interesting story or throughline. They should feel typeset, not auto-generated.
- Hairlines & labels0.75–1px strokes, monospaced uppercase eyebrows, no chartjunk. Axes carry the brand voice.
- One number, bigA single Tobias percentage at 48–84px is more memorable than three competing stats.
- Quiet colorDefault to charcoal-on-cream. Use buttercup for fill, melon for accent, cream-light for tracks.
- Animated revealCharts animate on first scroll—bars grow, rings fill, lines draw. Once. Never loop.
Eight chart types.
1× Stat
Stat Ring
Single-number percentage with circular progress, eyebrow, and supporting copy.
2× Stat
Stat Stack
Two ringed stats stacked vertically, for paired clinical results.
Hybrid
Stat Split
Photo block stacked with colored stat block—for social proof tiles.
Comparison
Bar Chart
Five bar treatments—solid, pinstripe, diagonal, outlined, gradient.
Trend
Line & Scatter
Time-series and correlation plots with hairline axes and animated draw-on.
Composition
Radial
Donut and radial fills for showing proportional ingredient breakdowns.
Overlap
Venn
Two-circle overlap for showing what's-in / what's-not.
Diagram
Infographic
Anatomical / timeline diagrams with annotated tags and hairline rules.
Spec
Spec Table
Two-column grid for product attributes; matches packaging hairline language.