# theme-designer

> Create a consistent, professional frontend theme using a defined font, color system, layout structure, and component rules. This skill focuses on visual identity, UI consistency, and production-ready theming for modern web applications.

- Author: AftabAhmed4
- Repository: AftabAhmed4/todo-hackathon
- Version: 20260207194920
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-07
- Source: https://github.com/AftabAhmed4/todo-hackathon
- Web: https://mule.run/skillshub/@@AftabAhmed4/todo-hackathon~theme-designer:20260207194920

---

---
name: theme-designer
description: Create a consistent, professional frontend theme using a defined font, color system, layout structure, and component rules. This skill focuses on visual identity, UI consistency, and production-ready theming for modern web applications.
---

## PURPOSE

This skill is used to design and apply a **complete frontend theme** including:
- Typography
- Color system
- Navbar layout
- Hero section structure
- Card components with shadows
- Button styles

The goal is to ensure **visual consistency, professionalism, and brand identity** across the UI.

---

## CORE THEME IDENTITY

### Brand Personality
- Modern
- Clean
- Confident
- Slightly bold but professional
- Tech-oriented

This theme should feel **trustworthy and contemporary**, not playful or experimental.

---

## TYPOGRAPHY SYSTEM

### Primary Font
- **Font Name:** Ageo
- **Usage:** Entire application (headings + body)

### Font Roles
- **Headings:** Ageo Bold / Semi-Bold  
- **Body Text:** Ageo Regular  
- **Buttons / Nav Items:** Ageo Medium  

### Typography Rules
- Clear hierarchy using size and weight
- Comfortable line-height for readability
- No mixing of multiple font families
- Text should feel structured and clean

---

## COLOR SYSTEM

### Primary Brand Color
- **Primary:** `#FF6600` (Used for CTAs, highlights, active states)

### Neutral Colors
- **Text Primary:** #111111
- **Text Secondary:** #555555
- **Background:** #FFFFFF
- **Muted Background:** #F8F8F8
- **Border Color:** #E5E5E5

### Color Usage Rules
- Orange (`#FF6600`) should be dominant but controlled
- Do NOT overuse accent color
- CTA buttons and important actions must use primary color
- Maintain high contrast for accessibility

---

## NAVBAR DESIGN

### Layout
- **Left:** Logo
- **Center:** Navigation Links
  - Home
  - About Us
  - Our App
- **Right:** Action Buttons
  - Login
  - Sign Up (Primary CTA)

### Navbar Rules
- Height: Clean and balanced
- Background: White
- Subtle bottom border or shadow
- Active link highlighted with primary color
- Sign Up button filled with `#FF6600`
- Login button outlined or text-based

---

## HERO SECTION

### Layout Structure
- **Left Side:**
  - Headline (strong, bold)
  - Short descriptive paragraph
  - Two buttons:
    - Primary CTA (filled, orange)
    - Secondary CTA (outline or neutral)

- **Right Side:**
  - Hero image or illustration
  - Image should support the message, not distract

### Hero Rules
- Generous spacing
- Clear visual focus on headline
- Buttons aligned horizontally
- Strong first impression

---

## BUTTON SYSTEM

### Primary Button
- Background: `#FF6600`
- Text Color: White
- Border Radius: Medium (not too rounded)
- Hover: Slight darkening or shadow increase

### Secondary Button
- Background: Transparent
- Border: 1px solid `#FF6600`
- Text Color: `#FF6600`
- Hover: Light background tint

Buttons must feel **clickable and confident**.

---

## CARD COMPONENTS

### Card Design
- Used for features, services, or content blocks
- Background: White
- Border Radius: Subtle
- Padding: Comfortable, balanced

### Shadow Style
- Soft, realistic shadow
- Example intent:
  - Light elevation at rest
  - Slightly stronger shadow on hover

### Card Rules
- No harsh borders
- Shadow should create depth, not heaviness
- Hover effect should feel smooth and premium

---

## SHADOW SYSTEM

Shadows must be:
- Soft
- Neutral (no strong color)
- Consistent across components

No exaggerated or cartoon shadows.

---

## SPACING & LAYOUT

- Use consistent spacing scale
- Avoid clutter
- Sections should breathe
- Align content carefully
- Keep layout clean and predictable

---

## RESPONSIVENESS

- Navbar collapses gracefully on smaller screens
- Hero stacks vertically on mobile
- Cards adjust to grid layout
- Buttons remain easily tappable

---

## ACCESSIBILITY

- Proper color contrast
- Readable font sizes
- Clear focus states
- Buttons and links clearly distinguishable

---

## IMPLEMENTATION EXPECTATION

- Theme must be reusable
- Easy to apply across pages
- Works with HTML / CSS / Tailwind / React / Next.js
- No visual inconsistency

---

## FINAL QUALITY CHECK

Before considering the theme complete, verify:
- Font consistency
- Color discipline
- Visual balance
- Professional look
- No unnecessary decoration

---

## CORE PRINCIPLE

Simple. Consistent. Professional.

A theme that supports the product — not distracts from it.