skills.rest
Absolute-Space-GHCP
Absolute-Space-GHCPOFFICIAL
Explore all skills by this author →
GitHub

jl-branding-toolkit

Applies Johannes Leonardo brand guidelines to React and Tailwind CSS UI components.

Updated Aug 27, 2026
Search Tags:#branding#frontend#style guide#component library#UI design#Johannes Leonardo
One-click install
npx skills add https://github.com/Absolute-Space-GHCP/leo-participation-translator --skill jl-branding-toolkit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: jl-branding-toolkit
Source: https://github.com/Absolute-Space-GHCP/leo-participation-translator/tree/main/.cursor/skills/jl-branding-toolkit
Command: npx skills add https://github.com/Absolute-Space-GHCP/leo-participation-translator --skill jl-branding-toolkit

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about jl-branding-toolkit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply Johannes Leonardo brand guidelines to a React component?▼

To apply Johannes Leonardo brand guidelines to a React component, use this toolkit to implement JL's color palettes, typography stacks, and layout patterns, ensuring visual consistency and brand integrity across your UI elements.

Does this branding style guide work with Tailwind CSS?▼

Yes, the branding style guide works with Tailwind CSS by providing defined Tailwind CSS classes and CSS custom properties for JL's hero and accent colors, allowing direct application to frontend designs and dashboards.

What is included in the JL UI design branding toolkit?▼

The JL UI design branding toolkit includes color palette application, typography guidance with size scales, logo usage standards, layout patterns for buttons and cards, and brand voice copy guidelines for UI text.

Can I use this to style dashboards and data display components?▼

Yes, you can use this to style dashboards and data display components by applying JL's aesthetic of clean, minimal design with bold statements, utilizing provided patterns for status indicators, cards, and numerals.

What's the best way to ensure my HTML presentation matches JL brand standards?▼

The best way to ensure your HTML presentation matches JL brand standards is to apply the toolkit's typography guidance, logo usage rules, and component styling examples to maintain the official aesthetic and human-centered language.

Related Skills

Explore More Design & Creative Skills→
traylinxtraylinx
2

web-artifacts-builder

Bundle React, Tailwind, and shadcn/ui artifacts into a single HTML file.

Official
Advanced
billydeeii136billydeeii136

ui-styling

Generate UI components using shadcn/ui and Tailwind CSS utility classes.

Community
Intermediate
snqbsnqb
1

ui-design

Aggregate design-system guidance across domains into cohesive UI recommendations.

Community
Advanced
fefogarciafefogarcia
1

design-consistency-auditor

Audits frontend applications for design system consistency and accessibility.

Community
Advanced