HOKALI Brand Identity

A complete profile of HOKALI's visual system — colors, typography, components, and personality.

Quick Facts

Color Palette

• primary: #0000EE
• secondary: #292D3B
• accent: #E81E76
• background: #F8F9FB
• textPrimary: #E81E76
• link: #E81E76

Typography

• primary: Inter — https://fonts.google.com/specimen/Inter
• heading: Rubik — https://fonts.google.com/specimen/Rubik

Visual Assets

• Favicon:
• Social card (og:image):

UI Components

• buttonPrimary: background=#E81E76, textColor=#000000, borderRadius=25px, shadow=none

Brand Personality

Tone: playful · Energy: high · Audience: young, active individuals interested in sports or fitness activities

HOKALI Brand in the Wild

Real-world brand assets — ads, campaigns, marketing materials.

• Parents | HOKALI
  • Image:
  • Source: https://www.hokali.com/parents
• Drawing & Painting - My Framer Site
  • Image:
  • Source: https://www.hokali.com/after-school/drawing-painting
• All Stars Summer Camp | HOKALI
  • Image:
  • Source: https://www.hokali.com/all-stars-summer-camp
• LEGO - My Framer Site
  • Image:
  • Source: https://www.hokali.com/after-school/lego

Machine-Readable Profile

{
 "colorScheme": "light",
 "fonts": [
  {
   "family": "Rubik",
   "role": "heading"
  },
  {
   "family": "Inter",
   "role": "body"
  }
 ],
 "colors": {
  "primary": "#0000EE",
  "secondary": "#292D3B",
  "accent": "#E81E76",
  "background": "#F8F9FB",
  "textPrimary": "#E81E76",
  "link": "#E81E76"
 },
 "typography": {
  "fontFamilies": {
   "primary": "Inter",
   "heading": "Rubik"
  },
  "fontStacks": {
   "heading": [
    "Rubik",
    "sans-serif"
   ],
   "body": [
    "sans-serif"
   ],
   "paragraph": [
    "Rubik",
    "sans-serif"
   ]
  },
  "fontSizes": {
   "h1": "55px",
   "h2": "45px",
   "body": "14px"
  }
 },
 "spacing": {
  "baseUnit": 12,
  "borderRadius": "20px"
 },
 "components": {
  "buttonPrimary": {
   "background": "#E81E76",
   "textColor": "#000000",
   "borderRadius": "25px",
   "borderRadiusCorners": {
    "topLeft": "25px",
    "topRight": "25px",
    "bottomRight": "25px",
    "bottomLeft": "25px"
   },
   "shadow": "none"
  }
 },
 "images": {
  "favicon": "https://framerusercontent.com/images/rOHenV1dzOLIwWjuV6jWc9cWxI.png",
  "ogImage": "https://framerusercontent.com/assets/I0Y4NtL0ScL88QIfpRnkICyR0.jpg"
 },
 "personality": {
  "tone": "playful",
  "energy": "high",
  "targetAudience": "young, active individuals interested in sports or fitness activities"
 },
 "designSystem": {
  "framework": "custom",
  "componentLibrary": ""
 },
 "confidence": {
  "buttons": 0.9,
  "colors": 0.9,
  "overall": 0.9
 }
}