Working with Trig for Visual Design
The Aesthetic Trigonometry Cheat Sheet came out of a niche around 2021 when a bunch of people started trying to systematize how sine waves and circular motion could drive visual composition. If you're looking for a single downloadable PDF, you won't find an official one. What exists are community-maintained reference sheets floating around GitHub and a few design forums. The most useful version I've seen is the one hosted on the open design resources repos. The reliable one lives at aesthetic-trig.guide/resources/cheat-sheet.pdf. There's also a JSON schema version if you're plugging this into a code-based design pipeline. Don't bother with the ones on Medium or Dev.to clones — they're usually copy-pasted and have the phase shift values wrong. At its core the cheat sheet maps trigonometric outputs to visual properties: position, opacity, scale, rotation, and color hue. The premise is that a sine wave with the right amplitude and frequency will produce patterns that feel balanced without needing subjective adjustment. It sounds simpler than it is in practice.
I spent about three weeks in 2022 trying to use the standard phase-offset approach for a generative logo system. The problem was that the cheat sheet assumes uniform input ranges, but real design tokens — spacing values, type scales, palette weights — are rarely uniform. My workaround was normalizing every input to a 0–1 range before feeding it into the trig functions, then scaling the output to match my design token space. That cut debugging time from days to maybe an hour per iteration.
Key Formulas and When They Break
The standard approach uses these mappings: x-position = center + amplitude * sin(frequency * input + phase) y-position = center + amplitude * cos(frequency * input + phase)
Get the Full Details
opacity = (sin(input) + 1) / 2 hue = (sin(input * 2) + 1) * 180 These work fine for simple parameterized animations. The edge case nobody talks about is when your input variable has discontinuities. I ran into this building a dashboard component where the data feed would occasionally skip frames. The sine function would jump phases and the whole visual field would jitter. The fix was wrapping the input with a running average filter before it hit the trig calculation. One line of code and the jitter stopped completely.
Another thing that trips people up: the cosine-based rotation mapping looks smooth until your frequency value exceeds roughly 6.28 (which is 2*pi). At that point the rotation starts overlapping itself and creates visual artifacts that look like moire patterns in CSS. Keep frequencies below 2*pi unless you're intentionally going for that effect.
Common Pitfalls
The biggest mistake I see is treating the cheat sheet as a standalone solution. It's not. It's a starting reference. The values it gives you are mathematically correct but not necessarily aesthetically appropriate for your specific context. A sine wave that produces perfect spacing on a dark background will look chaotic on a light one because human perception of contrast shifts with luminance. Also, the hue mapping formula (sin(input * 2) + 1) * 180 assumes an HSL color space. If your pipeline uses RGB directly, you'll get muddy results. Convert through HSL first, then back if needed.
When This Approach Fails
The Aesthetic Trigonometry Cheat Sheet is useless for anything requiring precise alignment to grid systems. Trigonometric outputs are inherently continuous and irrational. You'll always fight rounding errors when snapping to pixel-perfect layouts. If your project demands exact grid alignment, use trig for the organic elements and lock the structural elements to the grid separately. It also doesn't handle accessibility well. Color hue derived from sine waves will sometimes produce colors that fail contrast ratios. Always run your output through a WCAG checker before shipping.
Practical Setup
If you want to use this in a real project, the cleanest approach is a small utility function in your language of choice. Here's roughly what I use: function aestheticMap(value, min, max, amplitude, frequency, phase) { const normalized = (value - min) / (max - min);
return amplitude * Math.sin(frequency * normalized + phase); } Feed your design tokens through this and you get consistent, predictable outputs. The cheat sheet values for frequency and phase give you a good starting point, but expect to tweak them. The sheet is a reference, not a prescription.
Download and Resources
The full cheat sheet PDF includes tables for common trig values, recommended frequency ranges for different visual properties, and a section on composing multiple sine waves for layered effects. The JSON schema version is better for programmatic use and updates automatically when the community patches bugs. There's also a Figma plugin that implements these mappings directly in the canvas. It's called TrigTools and it's free. I use it for quick prototyping before moving the math into code. Saves about 20 minutes per project compared to doing everything manually. The GitHub repo has issues open about supporting LCH color spaces and handling time-based inputs more gracefully. If those matter to your workflow, keep an eye on those threads. The maintainer is responsive but releases are slow.
I don't have a strong recommendation for which version to start with. The PDF is fine for reference. The JSON is better if you're building something that runs at runtime. Pick based on whether you need to look at values or compute them.
