skills.rest
justEstif
justEstifCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

brand-guidelines

Applies standardized UI and UX design rules to ensure consistent branding across the product's screens and elements.

Updated Dec 29, 2025
Search Tags:#typography#accessibility#design-system#color-palette#brand-guidelines#UI-design
One-click install
npx skills add https://github.com/justEstif/sv-100-hours-tracker --skill brand-guidelines-justestif
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brand-guidelines
Source: https://github.com/justEstif/sv-100-hours-tracker/tree/main/.opencode/skill/brand-guidelines
Command: npx skills add https://github.com/justEstif/sv-100-hours-tracker --skill brand-guidelines-justestif

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill standardizes visual branding across the 100 Hours Tracker UI, ensuring a cohesive, welcoming look that aligns with the Lazy Lofi philosophy.

Core Features & Use Cases

  • Brand palette and typography enforcement to maintain consistent colors, type scale, and spacing across components.
  • Design reasoning templates and decision guidance for UI components, pages, and interactions.
  • Use Case: When updating a component or designing a new screen, apply the brand rules to ensure colors, typography, spacing, and motion follow the Lazy Lofi guidelines.

Quick Start

Review and apply the guidelines in the project styles and components:

  • Load the Lazy Lofi tokens into your Tailwind/DaisyUI setup (colors, fonts, radii).
  • Use the DaisyUI theme classes and ensure accessible contrast and responsive spacing.

Frequently Asked Questions about brand-guidelines

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

FAQPage Schema
How do I standardize UI typography and color palette across a web app?▼

To standardize UI typography and color palette, load brand tokens into your Tailwind and DaisyUI setup to enforce consistent colors, fonts, and radii across all components and pages.

How do I ensure accessible contrast when using a DaisyUI theme?▼

Ensure accessible contrast by applying DaisyUI theme classes according to brand guidelines, verifying that selected color palette combinations meet accessibility standards across all responsive layout conventions.

Can I use these brand guidelines for designing new screens and interactions?▼

Yes, you can use these brand guidelines when designing new screens or interactions to ensure typography, spacing, and motion follow the established design system and DaisyUI theme conventions.

What is the best way to maintain consistent spacing and type scale in a design system?▼

Maintain consistent spacing and type scale by enforcing brand palette and typography rules, loading predefined design tokens into your Tailwind configuration to standardize visual output across components.

Do I need Tailwind and DaisyUI to apply the Lazy Lofi brand rules?▼

Yes, the Lazy Lofi brand rules are designed to be applied by loading tokens into a Tailwind and DaisyUI setup, utilizing theme classes to maintain the warm color palette and responsive layout.

Related Skills

Explore More Design & Creative Skills→
pelletencatepelletencate

styling

Style Rails 8 views with Tailwind CSS utilities and DaisyUI components.

Community
Intermediate
marduk191marduk191
9

frontend-design

Design and implement production-grade frontend interfaces with HTML/CSS/JS or React and Vue components.

Community
Advanced
angelgarciasolorzanoangelgarciasolorzano

shadcn

Generate design system guidelines for Shadcn UI components with WCAG 2.2 AA compliance.

Community
Advanced
Equat-ionEquat-ion

neobrutalism

Generate Neobrutalism design tokens for typography, color, and spacing.

Community
Intermediate