Skills
.Work. You
Rest

jl-branding-toolkit

Official

Apply JL brand guidelines to UI.

Design & Creative#branding#frontend#style guide#component library#UI design#Johannes Leonardo
AuthorAbsolute-Space-GHCP
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Ensures all UI components, dashboards, and frontend designs adhere to the official Johannes Leonardo (JL) brand guidelines, maintaining visual consistency and brand integrity.

Core Features & Use Cases

  • Color Palette Application: Utilizes JL's hero and accent colors with defined Tailwind CSS classes and CSS custom properties.
  • Typography Guidance: Provides font stacks, size scales, and CSS classes for titles, body text, and numerals.
  • Logo Usage Standards: Details available logo variants and rules for their application.
  • Layout and Component Patterns: Offers examples for buttons, cards, status indicators, and data display adhering to JL's aesthetic.
  • Brand Voice: Outlines copy guidelines and key phrases for UI text.
  • Use Case: When designing a new React component for the JL marketing dashboard, use this Skill to ensure the colors, typography, and overall styling perfectly match the JL brand.

Quick Start

Apply the JL brand guidelines to a new React button component.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: jl-branding-toolkit
Download link: https://github.com/Absolute-Space-GHCP/leo-participation-translator/archive/main.zip#jl-branding-toolkit

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.