--- title: "Our Blog Just Got a Visual Upgrade — Here's How We Did It" slug: blog-visual-upgrade date: "2026-06-03" description: "We gave the Tinqs blog a visual refresh, borrowing the dark, gradient-heavy aesthetic from our internal team guides. No external CSS tinkering, no framework, no build-step drift — just two template files and a Node script." og_description: "How we restyled the Tinqs blog with a gradient-first, dark-code-panel aesthetic — using only two template files and a markdown build script." og_image: "https://www.tinqs.com/img/og-cover.jpg" excerpt: "We gave the Tinqs blog a visual refresh — borrowing the dark, gradient-heavy look from our internal team docs. Here's why, what we changed, and how the build system made it painless." author: "Ozan Bozkurt" author_initials: "OB" author_role: "CTO & Developer, Tinqs" --- Until yesterday, the Tinqs blog looked... fine. Readable. Semantic. It had the brand amber accent, proper typography, and all the SEO metadata in the right places. But it didn't have much *personality*. The code blocks were unstyled. The headings sat flat. And the design said "competent" more than "intentional". Then we looked at our own internal team guide — the onboarding doc we keep at `docs/team/dev-basics-env-secrets-git.html`. It had gradient titles that clip to transparent. Dark, crisp code panels. Callout boxes with coloured left borders. Pill-shaped date labels. A restrained four-colour palette that felt cohesive without screaming. We wanted the blog to feel like it came from the same shop. So we restyled it. ## The design source Our team guide is a single self-contained HTML file with a dark theme — background `#0d1117`, panels `#161b22`, ink `#e6edf3`. It uses a four-accent palette: - **Green** `#22c55e` — for `.env` and environment topics - **Blue** `#38bdf8` — secondary links, kickers, syntax table headers - **Purple** `#a855f7` — git topics, hover states - **Amber** `#f59e0b` — warnings, emphasis, callouts The title is the star: an `h1` filled with a `linear-gradient` across all four colours, clipped to the text via `-webkit-background-clip: text`. Code blocks live in dark `#0a0e14` panels with `#2a3340` borders. Blockquotes become amber-tinted callouts. The whole thing radiates a "well-maintained developer doc" energy without feeling like a Bootstrap template. We wanted that energy on the public-facing blog. ## The build system (and why it mattered) The blog is generated by a zero-dependency Node script — `build.js` — that converts markdown posts into HTML. The pipeline is: ``` posts/*.md + _template.html / _index_template.html → *.html ``` This means **we never touch a generated `.html` file by hand**. Every visual change flows through the two templates. `build.js` then stamps out all 11 posts plus the index in under a second. The site-wide CSS — navigation, footer, base typography, the brand amber `--c-accent: #c9935a` — lives in `../style.css`, which is served by Git Studio from outside the blog repo. We deliberately **did not** touch that file. Instead, we injected a self-contained `