Skip to content

Commit 5e5eb47

Browse files
edsuwarnaedsuwarna
committed
Update branding: change accent color to ClickHouse-style amber/yellow, replace logo with chevron-cascade SVG icon
1 parent e36f5e3 commit 5e5eb47

4 files changed

Lines changed: 424 additions & 16 deletions

File tree

‎site/.vitepress/theme/components/ArusHome.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@
55
<div class="nav-inner">
66
<div class="nav-left">
77
<a href="/" class="logo">
8-
<span class="logo-icon">A</span>
8+
<svg width="28" height="28" viewBox="0 0 32 32" fill="none" class="logo-icon">
9+
<rect x="1" y="1" width="30" height="30" rx="7" fill="#14171d" stroke="#23262e" stroke-width="0.5"/>
10+
<polyline points="8,10 12,14 8,18" stroke="#eab308" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
11+
<polyline points="14,10 18,14 14,18" stroke="#ca8a04" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.6"/>
12+
<polyline points="20,10 24,14 20,18" stroke="#a16207" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.3"/>
13+
</svg>
914
<span class="logo-text">Arus</span>
1015
</a>
1116
<div class="nav-links">
@@ -361,12 +366,7 @@ function checkClass(v) {
361366
}
362367
.nav-left { display: flex; align-items: center; gap: 32px; }
363368
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: #e8eaed; text-decoration: none; letter-spacing: -0.3px; }
364-
.logo-icon {
365-
width: 30px; height: 30px;
366-
background: linear-gradient(135deg, #eab308, #ca8a04);
367-
border-radius: 8px; display: flex; align-items: center; justify-content: center;
368-
font-weight: 800; font-size: 14px; color: #fff; flex-shrink: 0;
369-
}
369+
.logo-icon { flex-shrink: 0; }
370370
.nav-links { display: flex; gap: 24px; }
371371
.nav-links a { color: #9aa0a8; font-size: 14px; font-weight: 500; text-decoration: none; transition: color 0.2s; }
372372
.nav-links a:hover { color: #e8eaed; }

‎site/public/arus-icon.svg‎

Lines changed: 5 additions & 9 deletions
Loading

‎sketch-logo-refined.html‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Logo Refined</title>
7+
<style>
8+
* { margin: 0; padding: 0; box-sizing: border-box; }
9+
body {
10+
background: #0b0d11; font-family: 'Inter', sans-serif;
11+
display: flex; flex-direction: column; align-items: center; padding: 60px 40px;
12+
}
13+
.section { margin-bottom: 60px; text-align: center; }
14+
.label {
15+
font-size: 14px; font-weight: 600; letter-spacing: 2px;
16+
text-transform: uppercase; margin-bottom: 8px;
17+
}
18+
.label.arus { color: #eab308; }
19+
.label.anjungan { color: #10b981; }
20+
.title { font-size: 28px; font-weight: 700; color: #e8eaed; margin-bottom: 32px; }
21+
.variants { display: flex; gap: 60px; flex-wrap: wrap; justify-content: center; }
22+
.card { text-align: center; }
23+
.card .preview {
24+
width: 160px; height: 160px; margin: 0 auto 16px;
25+
display: flex; align-items: center; justify-content: center;
26+
}
27+
.card .label-sm { font-size: 13px; color: #9aa0a8; margin-top: 4px; }
28+
.card .fav {
29+
display: flex; gap: 8px; justify-content: center; margin-top: 12px;
30+
align-items: center;
31+
}
32+
.card .fav svg { border-radius: 4px; }
33+
</style>
34+
</head>
35+
<body>
36+
37+
<!-- ARUS -->
38+
<div class="section">
39+
<div class="label arus">Arus</div>
40+
<div class="title">Pipeline Chevrons — Refined</div>
41+
<div class="variants">
42+
43+
<div class="card">
44+
<div class="preview">
45+
<svg width="140" height="140" viewBox="0 0 140 140" fill="none">
46+
<circle cx="70" cy="70" r="68" stroke="#23262e" stroke-width="2"/>
47+
<polyline points="38,48 60,70 38,92" stroke="#eab308" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
48+
<polyline points="62,48 84,70 62,92" stroke="#ca8a04" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.7"/>
49+
<polyline points="86,48 108,70 86,92" stroke="#a16207" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.4"/>
50+
</svg>
51+
</div>
52+
<div class="label-sm">Cascade Chevrons</div>
53+
<div class="fav">
54+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
55+
<rect width="32" height="32" rx="6" fill="#14171d"/>
56+
<polyline points="9,12 15,16 9,20" stroke="#eab308" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
57+
<polyline points="16,12 22,16 16,20" stroke="#ca8a04" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.6"/>
58+
<polyline points="23,12 29,16 23,20" stroke="#a16207" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.3"/>
59+
</svg>
60+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
61+
<rect width="16" height="16" rx="3" fill="#14171d"/>
62+
<polyline points="4,6 7,8 4,10" stroke="#eab308" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
63+
<polyline points="8,6 11,8 8,10" stroke="#ca8a04" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.5"/>
64+
</svg>
65+
</div>
66+
</div>
67+
68+
<div class="card">
69+
<div class="preview">
70+
<svg width="140" height="140" viewBox="0 0 140 140" fill="none">
71+
<rect x="4" y="4" width="132" height="132" rx="20" fill="#14171d" stroke="#23262e" stroke-width="2"/>
72+
<polyline points="38,48 60,70 38,92" stroke="#eab308" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
73+
<polyline points="62,48 84,70 62,92" stroke="#ca8a04" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.7"/>
74+
<polyline points="86,48 108,70 86,92" stroke="#a16207" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.4"/>
75+
</svg>
76+
</div>
77+
<div class="label-sm">Rounded Square</div>
78+
<div class="fav">
79+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
80+
<rect x="1" y="1" width="30" height="30" rx="6" fill="#14171d" stroke="#23262e" stroke-width="0.5"/>
81+
<polyline points="9,12 15,16 9,20" stroke="#eab308" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
82+
<polyline points="16,12 22,16 16,20" stroke="#ca8a04" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.6"/>
83+
<polyline points="23,12 29,16 23,20" stroke="#a16207" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.3"/>
84+
</svg>
85+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
86+
<rect x="0.5" y="0.5" width="15" height="15" rx="3" fill="#14171d" stroke="#23262e" stroke-width="0.5"/>
87+
<polyline points="4,6 7,8 4,10" stroke="#eab308" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
88+
<polyline points="8,6 11,8 8,10" stroke="#ca8a04" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.5"/>
89+
</svg>
90+
</div>
91+
</div>
92+
93+
<div class="card">
94+
<div class="preview">
95+
<svg width="140" height="140" viewBox="0 0 140 140" fill="none">
96+
<circle cx="70" cy="70" r="68" fill="#14171d" stroke="#23262e" stroke-width="2"/>
97+
<polyline points="38,48 60,70 38,92" stroke="#eab308" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
98+
<polyline points="62,48 84,70 62,92" stroke="#ca8a04" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.7"/>
99+
<polyline points="86,48 108,70 86,92" stroke="#a16207" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.4"/>
100+
</svg>
101+
</div>
102+
<div class="label-sm">Filled Circle</div>
103+
<div class="fav">
104+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
105+
<circle cx="16" cy="16" r="15.5" fill="#14171d" stroke="#23262e" stroke-width="0.5"/>
106+
<polyline points="9,12 15,16 9,20" stroke="#eab308" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
107+
<polyline points="16,12 22,16 16,20" stroke="#ca8a04" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.6"/>
108+
<polyline points="23,12 29,16 23,20" stroke="#a16207" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.3"/>
109+
</svg>
110+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
111+
<circle cx="8" cy="8" r="7.5" fill="#14171d" stroke="#23262e" stroke-width="0.5"/>
112+
<polyline points="4,6 7,8 4,10" stroke="#eab308" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
113+
<polyline points="8,6 11,8 8,10" stroke="#ca8a04" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.5"/>
114+
</svg>
115+
</div>
116+
</div>
117+
118+
</div>
119+
</div>
120+
121+
<!-- ANJUNGAN -->
122+
<div class="section">
123+
<div class="label anjungan">Anjungan</div>
124+
<div class="title">Dashboard Grid — Refined</div>
125+
<div class="variants">
126+
127+
<div class="card">
128+
<div class="preview">
129+
<svg width="140" height="140" viewBox="0 0 140 140" fill="none">
130+
<circle cx="70" cy="70" r="68" stroke="#23262e" stroke-width="2"/>
131+
<rect x="30" y="34" width="32" height="32" rx="4" stroke="#5c626e" stroke-width="2.5" fill="none"/>
132+
<rect x="78" y="34" width="32" height="32" rx="4" stroke="#5c626e" stroke-width="2.5" fill="none"/>
133+
<rect x="30" y="76" width="32" height="32" rx="4" stroke="#5c626e" stroke-width="2.5" fill="none"/>
134+
<rect x="78" y="76" width="32" height="32" rx="4" fill="#10b981" stroke="#10b981" stroke-width="2.5"/>
135+
<rect x="84" y="82" width="20" height="20" rx="3" fill="#0b0d11"/>
136+
</svg>
137+
</div>
138+
<div class="label-sm">4 Squares — 1 Active</div>
139+
<div class="fav">
140+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
141+
<rect width="32" height="32" rx="6" fill="#14171d"/>
142+
<rect x="6" y="7" width="8" height="8" rx="1.5" stroke="#5c626e" stroke-width="1.5" fill="none"/>
143+
<rect x="18" y="7" width="8" height="8" rx="1.5" stroke="#5c626e" stroke-width="1.5" fill="none"/>
144+
<rect x="6" y="18" width="8" height="8" rx="1.5" stroke="#5c626e" stroke-width="1.5" fill="none"/>
145+
<rect x="18" y="18" width="8" height="8" rx="1.5" fill="#10b981" stroke="#10b981" stroke-width="1.5"/>
146+
<rect x="20" y="20" width="4" height="4" rx="1" fill="#0b0d11"/>
147+
</svg>
148+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
149+
<rect width="16" height="16" rx="3" fill="#14171d"/>
150+
<rect x="2" y="3" width="5" height="5" rx="1" stroke="#5c626e" stroke-width="1" fill="none"/>
151+
<rect x="9" y="3" width="5" height="5" rx="1" stroke="#5c626e" stroke-width="1" fill="none"/>
152+
<rect x="2" y="9" width="5" height="5" rx="1" stroke="#5c626e" stroke-width="1" fill="none"/>
153+
<rect x="9" y="9" width="5" height="5" rx="1" fill="#10b981" stroke="#10b981" stroke-width="1"/>
154+
<rect x="10" y="10" width="3" height="3" rx="0.5" fill="#0b0d11"/>
155+
</svg>
156+
</div>
157+
</div>
158+
159+
<div class="card">
160+
<div class="preview">
161+
<svg width="140" height="140" viewBox="0 0 140 140" fill="none">
162+
<rect x="4" y="4" width="132" height="132" rx="20" fill="#14171d" stroke="#23262e" stroke-width="2"/>
163+
<rect x="30" y="34" width="32" height="32" rx="4" stroke="#5c626e" stroke-width="2.5" fill="none"/>
164+
<rect x="78" y="34" width="32" height="32" rx="4" stroke="#5c626e" stroke-width="2.5" fill="none"/>
165+
<rect x="30" y="76" width="32" height="32" rx="4" stroke="#5c626e" stroke-width="2.5" fill="none"/>
166+
<rect x="78" y="76" width="32" height="32" rx="4" fill="#10b981" stroke="#10b981" stroke-width="2.5"/>
167+
<rect x="84" y="82" width="20" height="20" rx="3" fill="#0b0d11"/>
168+
</svg>
169+
</div>
170+
<div class="label-sm">Rounded Square</div>
171+
<div class="fav">
172+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
173+
<rect x="1" y="1" width="30" height="30" rx="6" fill="#14171d" stroke="#23262e" stroke-width="0.5"/>
174+
<rect x="6" y="7" width="8" height="8" rx="1.5" stroke="#5c626e" stroke-width="1.5" fill="none"/>
175+
<rect x="18" y="7" width="8" height="8" rx="1.5" stroke="#5c626e" stroke-width="1.5" fill="none"/>
176+
<rect x="6" y="18" width="8" height="8" rx="1.5" stroke="#5c626e" stroke-width="1.5" fill="none"/>
177+
<rect x="18" y="18" width="8" height="8" rx="1.5" fill="#10b981" stroke="#10b981" stroke-width="1.5"/>
178+
<rect x="20" y="20" width="4" height="4" rx="1" fill="#0b0d11"/>
179+
</svg>
180+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
181+
<rect x="0.5" y="0.5" width="15" height="15" rx="3" fill="#14171d" stroke="#23262e" stroke-width="0.5"/>
182+
<rect x="2" y="3" width="5" height="5" rx="1" stroke="#5c626e" stroke-width="1" fill="none"/>
183+
<rect x="9" y="3" width="5" height="5" rx="1" stroke="#5c626e" stroke-width="1" fill="none"/>
184+
<rect x="2" y="9" width="5" height="5" rx="1" stroke="#5c626e" stroke-width="1" fill="none"/>
185+
<rect x="9" y="9" width="5" height="5" rx="1" fill="#10b981" stroke="#10b981" stroke-width="1"/>
186+
<rect x="10" y="10" width="3" height="3" rx="0.5" fill="#0b0d11"/>
187+
</svg>
188+
</div>
189+
</div>
190+
191+
<div class="card">
192+
<div class="preview">
193+
<svg width="140" height="140" viewBox="0 0 140 140" fill="none">
194+
<circle cx="70" cy="70" r="68" fill="#14171d" stroke="#23262e" stroke-width="2"/>
195+
<rect x="30" y="34" width="32" height="32" rx="4" stroke="#5c626e" stroke-width="2.5" fill="none"/>
196+
<rect x="78" y="34" width="32" height="32" rx="4" stroke="#5c626e" stroke-width="2.5" fill="none"/>
197+
<rect x="30" y="76" width="32" height="32" rx="4" stroke="#5c626e" stroke-width="2.5" fill="none"/>
198+
<rect x="78" y="76" width="32" height="32" rx="4" fill="#10b981" stroke="#10b981" stroke-width="2.5"/>
199+
<rect x="84" y="82" width="20" height="20" rx="3" fill="#0b0d11"/>
200+
</svg>
201+
</div>
202+
<div class="label-sm">Filled Circle</div>
203+
<div class="fav">
204+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
205+
<circle cx="16" cy="16" r="15.5" fill="#14171d" stroke="#23262e" stroke-width="0.5"/>
206+
<rect x="6" y="7" width="8" height="8" rx="1.5" stroke="#5c626e" stroke-width="1.5" fill="none"/>
207+
<rect x="18" y="7" width="8" height="8" rx="1.5" stroke="#5c626e" stroke-width="1.5" fill="none"/>
208+
<rect x="6" y="18" width="8" height="8" rx="1.5" stroke="#5c626e" stroke-width="1.5" fill="none"/>
209+
<rect x="18" y="18" width="8" height="8" rx="1.5" fill="#10b981" stroke="#10b981" stroke-width="1.5"/>
210+
<rect x="20" y="20" width="4" height="4" rx="1" fill="#0b0d11"/>
211+
</svg>
212+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
213+
<circle cx="8" cy="8" r="7.5" fill="#14171d" stroke="#23262e" stroke-width="0.5"/>
214+
<rect x="2" y="3" width="5" height="5" rx="1" stroke="#5c626e" stroke-width="1" fill="none"/>
215+
<rect x="9" y="3" width="5" height="5" rx="1" stroke="#5c626e" stroke-width="1" fill="none"/>
216+
<rect x="2" y="9" width="5" height="5" rx="1" stroke="#5c626e" stroke-width="1" fill="none"/>
217+
<rect x="9" y="9" width="5" height="5" rx="1" fill="#10b981" stroke="#10b981" stroke-width="1"/>
218+
<rect x="10" y="10" width="3" height="3" rx="0.5" fill="#0b0d11"/>
219+
</svg>
220+
</div>
221+
</div>
222+
223+
</div>
224+
</div>
225+
226+
<!-- COMBINED PREVIEW -->
227+
<div class="section" style="margin-top: 40px; padding-top: 40px; border-top: 1px solid #23262e;">
228+
<div class="title">Preview — Di Landing Page</div>
229+
<div style="display: flex; gap: 80px; justify-content: center; align-items: flex-start; flex-wrap: wrap;">
230+
231+
<!-- Arus navbar logo preview -->
232+
<div style="text-align: center;">
233+
<div style="color: #5c626e; font-size: 12px; margin-bottom: 16px; letter-spacing: 1px;">ARUS NAVBAR</div>
234+
<div style="background: #14171d; border: 1px solid #23262e; border-radius: 12px; padding: 16px 24px; display: inline-flex; align-items: center; gap: 10px;">
235+
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
236+
<rect x="1" y="1" width="26" height="26" rx="6" fill="#14171d" stroke="#23262e" stroke-width="0.5"/>
237+
<polyline points="8,10 12,14 8,18" stroke="#eab308" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
238+
<polyline points="14,10 18,14 14,18" stroke="#ca8a04" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.6"/>
239+
<polyline points="20,10 24,14 20,18" stroke="#a16207" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.3"/>
240+
</svg>
241+
<span style="color:#e8eaed; font-weight: 700; font-size: 18px;">Arus</span>
242+
</div>
243+
</div>
244+
245+
<!-- Anjungan navbar logo preview -->
246+
<div style="text-align: center;">
247+
<div style="color: #5c626e; font-size: 12px; margin-bottom: 16px; letter-spacing: 1px;">ANJUNGAN NAVBAR</div>
248+
<div style="background: #14171d; border: 1px solid #23262e; border-radius: 12px; padding: 16px 24px; display: inline-flex; align-items: center; gap: 10px;">
249+
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
250+
<rect x="1" y="1" width="26" height="26" rx="6" fill="#14171d" stroke="#23262e" stroke-width="0.5"/>
251+
<rect x="5" y="6" width="7" height="7" rx="1.5" stroke="#5c626e" stroke-width="1.5" fill="none"/>
252+
<rect x="16" y="6" width="7" height="7" rx="1.5" stroke="#5c626e" stroke-width="1.5" fill="none"/>
253+
<rect x="5" y="16" width="7" height="7" rx="1.5" stroke="#5c626e" stroke-width="1.5" fill="none"/>
254+
<rect x="16" y="16" width="7" height="7" rx="1.5" fill="#10b981" stroke="#10b981" stroke-width="1.5"/>
255+
<rect x="18" y="18" width="3" height="3" rx="0.5" fill="#0b0d11"/>
256+
</svg>
257+
<span style="color:#e8eaed; font-weight: 700; font-size: 18px;">Anjungan</span>
258+
</div>
259+
</div>
260+
261+
</div>
262+
</div>
263+
264+
</body>
265+
</html>

0 commit comments

Comments
 (0)