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
index.html
+45 -35
View File
@@ -15,19 +15,26 @@
<meta property="og:description" content="Dev logs, behind-the-scenes, and lessons learned from building games, tools, and platform at Tinqs Studio.">
<meta property="og:image" content="https://www.tinqs.com/img/og-cover.jpg">
<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 index styles (Studio provides site chrome) ── */
/* ── Tinqs Studio brand — index 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;
/* 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; }
@@ -35,9 +42,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;
}
@@ -45,12 +53,12 @@
/* ── Section label kicker ── */
.section-label {
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;
@@ -63,15 +71,16 @@
padding: 60px 24px 32px;
}
/* ── Gradient index title ── */
/* ── Gradient index title — lime → violet ── */
.blog-header__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.4rem;
line-height: 1.25;
line-height: 1.2;
margin: 0 0 12px;
}
@@ -96,36 +105,37 @@
.blog-card {
display: block;
text-decoration: none;
background: #0c1119;
background: var(--c-bg-raised);
border: 1px solid var(--c-border);
border-radius: 12px;
border-radius: 8px;
padding: 20px 24px;
transition: border-color 0.2s;
}
.blog-card:hover {
border-color: var(--c-accent);
border-color: var(--c-lime);
}
/* ── Date pill ── */
.blog-card__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: 10px;
}
.blog-card__title {
color: var(--c-text);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.35;
font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
font-weight: 600;
color: var(--c-fg);
font-size: 1.2rem;
line-height: 1.3;
margin: 0 0 8px;
}
@@ -138,13 +148,13 @@
/* ── Read link accent ── */
.blog-card__read {
color: var(--c-blue);
font-size: 0.9rem;
color: var(--c-lime);
font-size: 0.875rem;
font-weight: 500;
}
.blog-card:hover .blog-card__read {
color: var(--c-purple);
color: var(--c-violet);
}
</style>
</head>
Before
After