Copied!
Brand Identity Kit · 2026 Edition

Brand
Identity
System

Your Digital-AI Solution Partner

Keria Byte Solutions
202603074832 (TR0339294-D)
Shah Alam, Selangor
+601110233552

Section 01

Logo System

Primary — Deep Forest
Primary — on Deep Forest
PNG
KBS Logo on White Background
On White Background
PNG
KBS Logo on Warm Surface
On Warm Surface
PNG
Large
Icon Focus — Large
Medium
Icon Focus — Medium
Favicon
Favicon Size — 48px
Minimum Clear Space
1× logo height 1× Clear Space

Maintain clear space equal to the full height of the logo mark on all four sides. No text, graphic elements, or other logos may appear within this zone.

Minimum Reproduction Sizes
120px
120px — Digital minimum
80px
80px — UI components
48px
48px — Favicon minimum
Section 02

Color Palette

Deep Forest
Deep Forest
HEX#1A2A1D
RGB26, 42, 29
HSL130°, 24%, 13%
CMYK38, 0, 31, 84
PantonePantone 627 C
Primary • Headers • BG
Rose Copper
Rose Copper
HEX#D1A07D
RGB209, 160, 125
HSL25°, 47%, 65%
CMYK0, 23, 40, 18
PantonePantone 729 C
Accent • CTA • Highlights
Sage Mint
Sage Mint
HEX#98B29E
RGB152, 178, 158
HSL133°, 13%, 65%
CMYK15, 0, 11, 30
PantonePantone 558 C
UI Accent • Icons • Bars
White
White
HEX#FFFFFF
RGB255, 255, 255
HSL0°, 0%, 100%
CMYK0, 0, 0, 0
PantonePantone White
Background • Text on dark
Deep Forest — Tint Scale
10%
25%
50%
75%
100%
Shade
Rose Copper — Tint Scale
10%
25%
50%
75%
100%
Shade
Sage Mint — Tint Scale
10%
25%
50%
75%
100%
Shade
Section 03

Typography System

Headings — Montserrat
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#&*()
Bold 700 • SemiBold 600 • Google Fonts
Body — Lato
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#&*()
Light 300 • Regular 400 • Bold 700 • Google Fonts
StyleSampleFontSizeWeightUsageSpecs
DisplayHeroMontserrat48–72pxBlack 900Hero headlines, covertracking: -1px
Heading 1Page TitleMontserrat32–42pxBold 700Page titlestracking: 0
Heading 2Section HeadMontserrat22–28pxSemiBold 600Section headingscolor: Sage
Heading 3Sub-sectionMontserrat16–20pxSemiBold 600Sub-sections, cardstracking: 0
BodyParagraph text for all body copy and descriptions.Lato15–17pxRegular 400All body copyline-height: 1.7
CaptionHelper text, labels, footnotesLato12–13pxRegular 400Captions, metacolor: muted
LabelSECTION LABELMontserrat9–11pxBold 700Section tags, UI labelsALL CAPS • 3px
Section 04

UI Components

Buttons
Badges
B2B B2C Innovation Active In Development
Navigation Bar
Logo KERIA BYTE
Services Projects About
Service Cards
B2C
Digital Commerce
Performance-driven affiliate & direct sales, powered by data-optimised campaigns and AI iteration.
B2B
SME Consulting
Enterprise-grade digital solutions at SME pricing, delivered at speed with AI-augmented execution.
Innovation
AI Healthcare
Nadi-AI — an intelligent clinic operations system built for GP clinics across Malaysia.
Hero Section Example
Digital-AI Solution Partner
Your Digital-AI
Solution Partner.
Enterprise-grade digital solutions for Malaysian SMEs — delivered with the speed and precision of AI-augmented consulting.
Logo
Section 05

Spacing Scale

4px
Micro — icon gaps, badge padding, tight inline spacing
8px
XSmall — inline element gaps, icon-to-text spacing
16px
Small — card padding, form field gap, list item spacing
24px
Base — section inner spacing, button padding
40px
Medium — between components, card gaps in grid
64px
Large — section breaks, hero padding
96px
XLarge — page-level vertical rhythm between major sections
Section 06

Usage Rules

✓ DO
Always use the logo on Deep Forest (#1A2A1D) as the primary background. This is the approved primary combination.
✓ DO
Use Rose Copper exclusively for CTAs, accent highlights, and interactive elements. Never as a full page background.
✓ DO
Maintain minimum clear space equal to the full logo height on all four sides at all times.
✗ DON'T
Place the logo on any busy or mid-tone background — the copper ring mark requires high contrast dark backgrounds.
✗ DON'T
Use Montserrat for body copy or long paragraphs. Reserve it strictly for headings, labels, and UI elements.
✗ DON'T
Stretch, crop, recolour, rotate, or apply filters or effects to the logo under any circumstances.
✗ DON'T
Reproduce the logo below 48px width in digital or 15mm in print — use the wordmark text only at smaller sizes.
✓ DO
Import both Google Fonts (Montserrat + Lato) on every web page. Never substitute with system fonts on branded pages.
✓ DO
Use the CSS variables in Section 07 as the single source of truth across the entire website codebase.
Section 07

Website Implementation

Copy the following directly into your stylesheet. These are the single source of truth for all brand colors, fonts, and spacing across the website.

Google Fonts Import
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap');
CSS Variables
:root {
  /* Brand Colors — sampled directly from official logo */
  --color-primary:    #1A2A1D;   /* Deep Forest  — logo background  */
  --color-copper:     #D1A07D;   /* Rose Copper  — logo ring        */
  --color-mint:       #98B29E;   /* Sage Mint    — logo accent bars */
  --color-white:      #FFFFFF;         /* White                           */

  /* UI Surface Colors */
  --color-surface:    #F5F2EE;   /* Warm off-white page background  */
  --color-surface-2:  #EAE4DC;   /* Deeper surface / hover states   */
  --color-border:     #d4cfc7;   /* Default border color            */

  /* Text Colors */
  --color-text:       #1e2920;   /* Near-black body text            */
  --color-muted:      #5a6b5e;   /* Secondary / muted text          */

  /* Typography */
  --font-heading:     'Montserrat', sans-serif;
  --font-body:        'Lato', sans-serif;

  /* Border Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;

  /* Spacing Scale */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;
}