tinqs/blog
5
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity Issues

rebrand: Studio design system — near-black base, Signal Lime + Agent Violet accents, Inter/Space Grotesk/JetBrains Mono fonts

Browse Source
This commit is contained in:
ozan
2026-06-14 01:32:08 +01:00
parent b8c3fc473b
commit f42c76308c
17 changed files with 1104 additions and 920 deletions
Download Patch File Download Diff File Expand all files Collapse all files
godot-optimisation.html
+65 -53
View File
@@ -39,21 +39,26 @@
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ── Self-contained post styles (Studio provides site chrome) ── */
/* ── Tinqs Studio brand — post styles ── */
:root {
--c-accent: #c9935a;
--c-accent-l: #d4a87c;
--c-bg: #0d1117;
--c-text: #e6edf3;
--c-muted: #9aa7b4;
--c-border: #2a3340;
--c-blue: #38bdf8;
--c-purple: #a855f7;
--c-gold: #f59e0b;
--c-code-bg: #1c2230;
--c-pre-bg: #0a0e14;
/* Studio near-black base */
--c-bg: #0B0C0E;
--c-bg-raised: #15171A;
/* Foreground */
--c-fg: #ECEEF1;
--c-muted: #8A95A3;
/* Family accents */
--c-lime: #B6FF3C;
--c-violet: #7C5CFF;
/* Borders */
--c-border: rgba(255,255,255,.07);
--c-border-strong: rgba(255,255,255,.12);
}
*, *::before, *::after { box-sizing: border-box; }
@@ -61,9 +66,10 @@
body {
margin: 0;
padding: 0;
background: transparent;
color: var(--c-text);
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background: var(--c-bg);
color: var(--c-fg);
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
@@ -72,40 +78,42 @@
.post {
max-width: 720px;
margin: 0 auto;
padding: 40px 24px 48px;
padding: 48px 24px 60px;
}
/* ── Back link ── */
.post__back {
color: var(--c-blue);
color: var(--c-muted);
text-decoration: none;
font-size: 0.9rem;
font-size: 0.875rem;
display: inline-block;
margin-bottom: 24px;
transition: color 0.15s;
}
.post__back:hover { color: var(--c-purple); }
.post__back:hover { color: var(--c-lime); }
/* ── Gradient title ── */
/* ── Gradient title — lime → violet ── */
.post__title {
background: linear-gradient(90deg, #c9935a, #f59e0b 40%, #38bdf8);
font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
background: linear-gradient(90deg, var(--c-lime), var(--c-violet));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 800;
font-weight: 700;
font-size: 2.2rem;
line-height: 1.25;
line-height: 1.2;
margin: 0 0 16px;
}
/* ── Date pill ── */
.post__date {
display: inline-block;
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
font-size: 0.72rem;
letter-spacing: 0.22em;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-blue);
border: 1px solid rgba(147, 140, 129, 0.25);
color: var(--c-muted);
border: 1px solid var(--c-border);
border-radius: 999px;
padding: 4px 14px;
margin-bottom: 16px;
@@ -124,16 +132,20 @@
.post__body p { margin: 14px 0; }
.post__body h2 {
font-size: 1.7rem;
font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
font-weight: 600;
font-size: 1.6rem;
margin: 54px 0 6px;
padding-left: 16px;
border-left: 4px solid var(--c-accent);
border-left: 4px solid var(--c-lime);
line-height: 1.3;
}
.post__body h3 {
color: var(--c-purple);
font-size: 1.18rem;
font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
font-weight: 500;
color: var(--c-violet);
font-size: 1.15rem;
margin: 30px 0 4px;
}
@@ -143,27 +155,27 @@
/* ── Inline code ── */
.post__body code {
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
font-size: 0.86em;
background: var(--c-code-bg);
color: #9fe6c0;
font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
font-size: 0.84em;
background: var(--c-bg-raised);
color: var(--c-lime);
padding: 2px 6px;
border-radius: 5px;
border-radius: 4px;
border: 1px solid var(--c-border);
}
/* ── Code blocks ── */
.post__body pre {
background: var(--c-pre-bg);
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: 10px;
border-radius: 8px;
padding: 16px 18px;
overflow-x: auto;
margin: 14px 0;
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
font-size: 0.85rem;
font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
font-size: 0.83rem;
line-height: 1.55;
color: var(--c-text);
color: var(--c-fg);
}
.post__body pre code {
@@ -177,22 +189,22 @@
/* ── Blockquote ── */
.post__body blockquote {
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.25);
border-left: 4px solid var(--c-gold);
border-radius: 0 12px 12px 0;
background: rgba(124, 92, 255, 0.06);
border: 1px solid rgba(124, 92, 255, 0.15);
border-left: 4px solid var(--c-violet);
border-radius: 0 8px 8px 0;
padding: 16px 18px;
margin: 18px 0;
color: #f4e3c4;
color: var(--c-fg);
font-size: 0.94rem;
}
/* ── Links ── */
.post__body a { color: var(--c-blue); }
.post__body a:hover { color: var(--c-purple); }
.post__body a { color: var(--c-lime); text-decoration: underline; text-underline-offset: 3px; }
.post__body a:hover { color: var(--c-violet); }
/* ── Strong ── */
.post__body strong { color: var(--c-gold); }
.post__body strong { color: var(--c-lime); font-weight: 600; }
/* ── HR ── */
.post__body hr {
@@ -233,8 +245,8 @@
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--c-accent);
color: var(--c-bg);
background: var(--c-violet);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
@@ -250,7 +262,7 @@
}
.post__author-name {
color: var(--c-text);
color: var(--c-fg);
font-weight: 600;
}
</style>
@@ -319,7 +331,7 @@
<p><strong>Always measure before optimizing.</strong> We added VRAM logging before writing a single line of optimization code. Half the "problems" we expected were non-issues. The other half were worse than expected. Profiling isn't optional.</p>
<hr>
<p>Godot 4 can handle open worlds at this scale, but it won't do it for you. You need to build streaming, manage your own caches, audit resource loading, and be disciplined about what runs per frame. The engine gives you the primitives — MultiMesh, <code>LoadThreadedRequest</code>, <code>QueueFree</code>. It's up to you to wire them into a system that scales.</p>
<p><em>We're building <a href="https://arikigame.com" style="color: var(--c-accent-l);">Ariki</a>, a survival colony sim, with these systems. The tools we use — git hosting, AI agents, creative pipelines — are part of <a href="https://tinqs.com" style="color: var(--c-accent-l);">Tinqs Studio</a>.</em></p>
<p><em>We're building <a href="https://arikigame.com" style="color: var(--c-lime);">Ariki</a>, a survival colony sim, with these systems. The tools we use — git hosting, AI agents, creative pipelines — are part of <a href="https://tinqs.com" style="color: var(--c-lime);">Tinqs Studio</a>.</em></p>
</div>
Before
After