Salah satu hal pertama yang ingin Anda lakukan setelah menginstal Sitemas adalah mengubah branding agar sesuai dengan identitas Anda. Artikel ini akan memandu Anda mengkustomisasi logo, nama website, warna tema, dan elemen branding lainnya.

Overview Branding di Sitemas

Branding di Sitemas tersentralisasi di beberapa file kunci:

FileFungsi
src/utils/constants.tsNama, deskripsi, URL, email, slogan
src/styles/m3-tokens.cssWarna tema Material Design 3
src/components/global/Logo.astroKomponen logo
public/favicon.svgFavicon website
astro.config.mjsDomain production

1. Mengubah Informasi Website

Edit constants.ts

File src/utils/constants.ts adalah pusat konfigurasi Sitemas. Buka file ini dan edit bagian SITE:

src/utils/constants.ts
typescript 
export const SITE = {
    title: 'Nama Website Anda',           // Judul yang muncul di browser tab
    description: 'Deskripsi singkat website Anda untuk SEO',
    url: 'https://domainanda.com',        // URL production (tanpa trailing slash)
    author: 'Nama Anda atau Perusahaan',  // Untuk meta author
    lang: 'id',                           // Bahasa (id untuk Indonesia)
    slogan: 'Tagline Website Anda',       // Muncul di homepage
    email: 'email@domainanda.com',        // Email kontak
} as const;
Konsistensi URL

Pastikan url di constants.ts sama dengan site di astro.config.mjs. Inkonsistensi bisa menyebabkan masalah dengan canonical URL dan sitemap.

Update astro.config.mjs

astro.config.mjs
javascript 
export default defineConfig({
    site: 'https://domainanda.com',  // Harus sama dengan SITE.url
    output: 'static',
    // ... konfigurasi lain
});

Sitemas menggunakan komponen Logo.astro yang mendukung beberapa variant:

VariantPenggunaan
iconLogo icon saja (di mobile, footer)
wordmarkLogo dengan teks nama website
fullLogo lengkap dengan tagline

Mengganti Logo SVG

Logo default Sitemas berupa SVG inline di src/components/global/Logo.astro. Untuk mengganti:

Siapkan Logo Baru

Idealnya gunakan format SVG karena:

  • Scalable tanpa pecah
  • Ukuran file kecil
  • Mendukung animasi
  • Warna bisa dikontrol dengan CSS

Jika menggunakan PNG/JPG, pastikan resolusi minimal 512x512 piksel.

Edit Komponen Logo

Buka src/components/global/Logo.astro dan ganti SVG path dengan logo Anda:

Logo.astro (contoh modifikasi)
astro 
---
interface Props {
    size?: number;
    variant?: 'icon' | 'wordmark' | 'full';
}

const { size = 32, variant = 'icon' } = Astro.props;
---

{variant === 'icon' && (
    <!-- Ganti dengan SVG logo Anda -->
    <svg width={size} height={size} viewBox="0 0 32 32">
        <!-- Path logo icon Anda -->
        <path d="..." fill="currentColor" />
    </svg>
)}

{variant === 'wordmark' && (
    <div class="wordmark">
        <svg width={size} height={size} viewBox="0 0 32 32">
            <!-- Logo icon -->
        </svg>
        <span class="brand-name">Nama Website</span>
    </div>
)}

Test di Berbagai Ukuran

Logo digunakan di beberapa ukuran:

  • Navbar: 32-40px
  • Footer: 36px
  • Mobile: 28-32px

Pastikan logo terlihat baik di semua ukuran.

Menggunakan Logo Gambar (PNG/JPG)

Jika prefer menggunakan file gambar:

Logo.astro (versi gambar)
astro 
---
import logoIcon from '@/assets/logo-icon.png';
import logoFull from '@/assets/logo-full.png';

interface Props {
    size?: number;
    variant?: 'icon' | 'wordmark';
}

const { size = 32, variant = 'icon' } = Astro.props;
---

{variant === 'icon' && (
    <img 
        src={logoIcon.src} 
        width={size} 
        height={size} 
        alt="Logo" 
        class="logo-img"
    />
)}

{variant === 'wordmark' && (
    <img 
        src={logoFull.src} 
        height={size} 
        alt="Logo" 
        class="logo-wordmark"
    />
)}

<style>
    .logo-img,
    .logo-wordmark {
        object-fit: contain;
    }
</style>

3. Mengganti Favicon

Replace favicon.svg

Favicon muncul di browser tab. Ganti file public/favicon.svg dengan favicon Anda sendiri.

Format Favicon

SVG adalah pilihan terbaik untuk favicon modern karena skalabel. Browser lama mungkin memerlukan .ico, tapi sebagian besar browser modern sudah mendukung SVG.

Jika ingin mendukung berbagai format:

Struktur favicon lengkap
bash 
public/
├── favicon.svg          # SVG utama (modern browsers)
├── favicon.ico          # ICO fallback (legacy)
├── apple-touch-icon.png # iOS home screen (180x180)
└── favicon-32x32.png    # PNG fallback

Kemudian tambahkan di BaseLayout.astro bagian <head>:

BaseLayout.astro
html 
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

4. Mengubah Warna Tema

Sistem Warna Material Design 3

Sitemas menggunakan sistem token warna M3 yang terpusat di src/styles/m3-tokens.css. Warna utama yang perlu diubah:

src/styles/m3-tokens.css
css 
:root {
    /* ============================================
       PRIMARY COLOR - Warna utama brand Anda
       ============================================ */
    --md-sys-color-primary: #7438D2;              /* Warna utama */
    --md-sys-color-on-primary: #FFFFFF;           /* Teks di atas primary */
    --md-sys-color-primary-container: #EADDFF;    /* Background accent */
    --md-sys-color-on-primary-container: #21005E; /* Teks di primary container */
    
    /* ============================================
       SECONDARY COLOR - Warna pendukung
       ============================================ */
    --md-sys-color-secondary: #625B71;
    --md-sys-color-on-secondary: #FFFFFF;
    
    /* ============================================
       TERTIARY COLOR - Warna aksen ketiga
       ============================================ */
    --md-sys-color-tertiary: #7D5260;
    --md-sys-color-on-tertiary: #FFFFFF;
}

Cara Memilih Warna yang Tepat

Google menyediakan tool untuk generate palette M3:

  1. Kunjungi Material Theme Builder
  2. Pilih warna primary dari brand Anda
  3. System akan generate seluruh palette
  4. Export sebagai CSS Variables
  5. Copy ke m3-tokens.css
Warna yang Konsisten

Jangan hanya mengubah --md-sys-color-primary. Seluruh palette (primary, secondary, tertiary, surface, dll.) harus konsisten untuk tampilan yang harmonis. Gunakan Theme Builder untuk generate otomatis.

Contoh Palette Siap Pakai

Berikut beberapa contoh palette yang bisa langsung digunakan:

Tech Blue:

--md-sys-color-primary: #0061A4;
--md-sys-color-primary-container: #D1E4FF;

Nature Green:

--md-sys-color-primary: #006D3B;
--md-sys-color-primary-container: #94F7B7;

Creative Purple:

--md-sys-color-primary: #7B1FA2;
--md-sys-color-primary-container: #F3E5F5;

Professional Gray:

--md-sys-color-primary: #455A64;
--md-sys-color-primary-container: #CFD8DC;

5. Mengubah Warna Kategori

Sitemas memiliki warna khusus untuk setiap kategori artikel. Edit di m3-tokens.css:

m3-tokens.css - Warna Kategori
css 
:root {
    /* Warna kategori */
    --md-ext-color-dokumentasi: #3b82f6;  /* Blue */
    --md-ext-color-tutorial: #10b981;     /* Green */
    --md-ext-color-insight: #f59e0b;      /* Amber */
    --md-ext-color-tips: #8b5cf6;         /* Purple */
}

Warna ini digunakan di:

  • Badge kategori
  • Dot indicator di sidebar
  • Hover state di navigation

6. Mengubah Typography

Font Default

Sitemas menggunakan Google Sans sebagai font default yang di-self-host untuk performa. Font files ada di public/fonts/.

Untuk mengganti font:

Download Font Baru

Download font yang diinginkan dalam format WOFF2 (paling optimal untuk web).

Sumber font gratis:

Tambahkan ke public/fonts

public/fonts/
├── NamaFont-Regular.woff2
├── NamaFont-Medium.woff2
└── NamaFont-Bold.woff2

Update fonts.css

src/styles/fonts.css
css 
@font-face {
    font-family: 'Nama Font';
    src: url('/fonts/NamaFont-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nama Font';
    src: url('/fonts/NamaFont-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nama Font';
    src: url('/fonts/NamaFont-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

Update CSS Variable

Di global.css, ubah font stack:

global.css
css 
:root {
    --font-sans: 'Nama Font', system-ui, -apple-system, sans-serif;
}

Update Font Preload

Di BaseLayout.astro, update preload untuk font baru:

BaseLayout.astro
html 
<link
    rel="preload"
    href="/fonts/NamaFont-Regular.woff2"
    as="font"
    type="font/woff2"
    crossorigin
/>

7. Mengubah Theme Color

Meta theme-color mengontrol warna address bar di mobile browser. Edit di BaseLayout.astro:

BaseLayout.astro
html 
<meta name="theme-color" content="#7438D2" />

Ganti #7438D2 dengan warna primary brand Anda.

Checklist Branding

Setelah melakukan kustomisasi, pastikan:

  • Nama website sudah benar di constants.ts
  • URL production sudah benar di constants.ts dan astro.config.mjs
  • Logo terlihat baik di navbar, footer, dan mobile
  • Favicon sudah diganti
  • Warna primary sesuai brand
  • Theme color sudah diupdate
  • Email kontak valid

Langkah Selanjutnya

Setelah branding selesai, lanjutkan dengan mengatur navigasi:

Atur Navigasi

Pelajari cara mengkustomisasi menu navigasi dan footer links.

Konfigurasi Navigasi

Kesimpulan

Branding adalah langkah penting untuk membuat Sitemas benar-benar milik Anda. Dengan sistem yang tersentralisasi, Anda hanya perlu mengedit beberapa file untuk mengubah seluruh tampilan website.

Ingat bahwa branding bukan hanya soal visual — konsistensi antara nama, warna, dan tone komunikasi akan membangun identitas yang kuat di mata pengunjung.

M

Mas Admin

Penulis Konten

Menyajikan konten terbaik seputar teknologi dan produktivitas.