ThinkerLog Design System
The visual grammar, spectral tokens, mathematical notations, and pedagogical callouts powering ThinkerLog’s curiosity-first science explainers.
🎨 Primary Canvas & Accent Tokens
Dark-mode-first foundations evoking deep space exploration. Click any swatch to copy its hex value.
🔬 The 7 Science Disciplines Spectral Palette
Every scientific domain has a distinct wavelength token for immediate visual cognition.
Photons, lasers, quantum mechanics
Cosmic horizons, dark matter, exoplanets
Genetics, cellular respiration, evolution
Neural synapses, memory, consciousness
Orbital bonds, elements, synthesis
Plate tectonics, geology, climate systems
Launch vehicles, lunar & interplanetary probes
🔤 Typography & Fluid Scale
Engineering precision with Space Grotesk, long-form editorial legibility with Lato, and scientific equations with JetBrains Mono.
clamp(2.4rem, 6vw, 3.8rem)
clamp(2.0rem, 5vw, 3.2rem)
clamp(1.4rem, 3.5vw, 2.0rem)
clamp(1.1rem, 2.5vw, 1.4rem)
17px (1.05rem) / 1.75 line-height
0.95rem monospace
🟢 Cognitive Difficulty Indicators
Allows readers and STEM students to calibrate article depth before beginning.
⚡ Pedagogical Science Callouts
Bespoke Markdown containers that break dense research papers into digestible milestones.
A black hole is a region of spacetime where gravity is so strong that nothing — not even light — can escape past the event horizon. They form when massive stars exhaust their nuclear fuel and catastrophically collapse under their own gravity.
The famous 2019 image of black hole M87* is an image of the accretion disk and photon ring, not of the black hole itself, which is inherently invisible.
r_s = \frac{2GM}{c^2}Calculates the radius of the event horizon for a non-rotating spherically symmetric mass.
- G= Gravitational constant (6.674 × 10⁻¹¹ N·m²/kg²)
- M= Mass of the celestial object in kilograms
- c= Speed of light in vacuum (299,792,458 m/s)
Imagine being enclosed in a windowless elevator in deep space being pulled upward at 9.8 m/s². Any experiment you perform inside — dropping a ball, shining a flashlight — will yield results identical to standing in Earth’s gravity. This is the Equivalence Principle that led to General Relativity.
Universal speed limit for causality and information transfer.
Determined by Planck cosmic microwave background radiation data.
ISRO Chandrayaan-3 Pragyan rover operating acceleration.
Nature doesn’t care about our common sense. It behaves according to quantum principles, and if you want to understand nature, you must learn to think in its language.
— Richard Feynman, Nobel Laureate in Physics
🧩 UI Component Sandbox
Interactive button states, glassmorphism cards, and category navigation chips.
Deep Obsidian Glass Panel
Features a 16px backdrop blur, subtle teal border, and semi-transparent obsidian fill for elevated floating interfaces.
Interactive Hover Glass Card
Subtle 12px blur with an elevated hover lift (`translateY(-2px)`) and glowing teal shadow.
📝 Science Writer’s Markdown Cheatsheet
Copy-paste these standardized blocks when authoring new explainers in `thinkerlog/posts/`.
--- title: "Why Is the Sky Blue? (Rayleigh Scattering Explained)" date: "2026-10-10" category: "physics" difficulty: "beginner" tags: ["optics", "light", "atmosphere", "electromagnetism"] hero_image: "/images/posts/why-is-the-sky-blue.webp" --- :::quick-answer The sky is blue because Earth's atmosphere scatters sunlight. Shorter blue wavelengths scatter roughly 10 times more efficiently than longer red wavelengths. ::: ## The Mechanism of Rayleigh Scattering Sunlight contains every color of the visible spectrum... :::insight If Earth had no atmosphere, the sky would appear pitch black even during broad daylight! ::: :::formula Rayleigh Scattering Intensity I ∝ 1 / λ⁴ Where I is scattering intensity and λ (lambda) is the wavelength of light. ::: :::experiment The Milk and Flashlight Experiment Fill a transparent glass with water and add a few drops of milk. Shine a white flashlight through the side. Notice how the liquid appears bluish from the side and reddish from behind. ::: :::stat 299,792 km/s | Speed of Light in Vacuum Light slows down slightly when entering Earth's dense atmospheric nitrogen layer. ::: :::quote Lord Rayleigh (John William Strutt) The colour of the light scattered by particles smaller than the wavelength is predominantly blue. ::: :::takeaways - Blue light has shorter wavelengths (~400 nm) compared to red light (~700 nm). - Nitrogen and oxygen molecules act as dipole scatterers. - Sunsets appear red because sunlight traverses 10x more atmosphere at low angles. :::