Design & theming - Gainable

Overview

Gainable apps use DaisyUI themes for consistent styling. You can customize colors, apply themes, and adjust the visual design through your prompts.

Themes

Themes provide a complete color palette for your app. Request a theme by name:

"Use the corporate theme"
"Apply the cupcake theme"
"Switch to dark mode"

Available themes

Theme	Description
`light`	Clean, minimal light theme (default)
`dark`	Dark mode with high contrast
`cupcake`	Soft, playful pastels
`corporate`	Professional blues and grays
`retro`	Warm, vintage colors
`cyberpunk`	Bold neons on dark
`valentine`	Pinks and romantic tones
`garden`	Fresh greens and naturals
`forest`	Deep, earthy greens
`lofi`	Muted, relaxed tones
`pastel`	Soft pastel colors
`fantasy`	Purple and magical
`luxury`	Gold and black elegance
`autumn`	Warm oranges and browns
`business`	Serious, professional
`night`	Deep blue dark mode
`winter`	Cool blues and whites
`nord`	Nordic-inspired palette
`emerald`	Rich emerald greens

Choosing a theme

Match the theme to your app’s purpose:

App Type	Suggested Themes
Business/CRM	corporate, business, light
Fun/Consumer	cupcake, pastel, fantasy
Tech/Developer	cyberpunk, night, nord
Nature/Eco	garden, forest, emerald
Premium/Luxury	luxury, dark
Warm/Friendly	autumn, retro, lofi

Requesting themes

Direct theme request

"Use the corporate theme"
"Apply dark mode"

By description

"Professional, corporate feel" → corporate or business
"Playful and fun" → cupcake or pastel
"Modern and techy" → cyberpunk or night
"Warm and cozy" → autumn or retro
"Premium look" → luxury or dark
"Fresh and natural" → garden or emerald

If you describe a style like “professional” or “playful”, Gainable will choose an appropriate theme automatically.

Color customization

Beyond themes, you can request specific colors:

"Use blue and gray colors"
"Make the primary color green"
"Use a purple accent color"

Color contexts

Context	What it affects
Primary	Buttons, links, active states
Secondary	Secondary buttons, accents
Accent	Highlights, special elements
Neutral	Backgrounds, text

UI components

Gainable apps use DaisyUI components that adapt to your theme:

Buttons

"Primary action buttons"
"Outline style buttons"
"Ghost buttons for subtle actions"

Cards

"Cards with shadows"
"Bordered cards"
"Compact cards"

Forms

"Bordered input fields"
"Floating label inputs"
"Compact form layout"

"Tab navigation"
"Sidebar navigation"
"Breadcrumb navigation"

Layout requests

Page structure

"Sidebar on the left with main content on the right"
"Header at top, content below"
"Full-width layout"

Content layout

"2-column layout"
"Grid of cards"
"Stacked sections"

Spacing

"More padding around content"
"Compact layout"
"Spacious design"

Responsive design

All Gainable apps are automatically responsive. The layout adjusts for:

Desktop: Full sidebar, multi-column grids
Tablet: Collapsible sidebar, adjusted columns
Mobile: Single column, hamburger menu

You don’t need to request this - it’s built in.

Common customizations

"Add a sidebar with navigation links to Dashboard, Deals, and Contacts"

Style badges

"Show priority as colored badges:
- High: red
- Medium: yellow
- Low: green"

Card styling

"Show deals as cards with shadows and hover effects"

Table styling

"Striped table rows"
"Compact table with smaller text"
"Bordered table cells"

Best practices

Choose one theme and stick with it

Consistency is better than mixing styles. Pick a theme that fits your purpose.

Let the theme do the work

Themes handle colors automatically. You don’t need to specify colors for every element.

Describe the feel, not the pixels

“Professional and clean” works better than “use #1a1a1a with 16px padding”

Consider your users

Business apps → corporate themes. Fun apps → playful themes. Match user expectations.

Examples

Professional dashboard

"Use the corporate theme.
Clean layout with:
- Sidebar navigation
- KPI cards at the top
- Charts below
- Professional, minimal design"

Playful task app

"Use the cupcake theme.
Friendly design with:
- Colorful status badges
- Card-based layout
- Fun, approachable feel"

Dark mode app

"Use dark mode.
Modern, sleek design with:
- High contrast text
- Subtle borders
- Glowing accent colors"

Changing themes later

You can always update the theme:

"Change the theme to dark mode"
"Switch to the forest theme"
"Make it look more professional"

The entire app updates to the new theme while keeping all your data and features.

​Overview

​Themes

​Available themes

​Choosing a theme

​Requesting themes

​Direct theme request

​By description

​Color customization

​Color contexts

​UI components

​Buttons

​Cards

​Forms

​Navigation

​Layout requests

​Page structure

​Content layout

​Spacing

​Responsive design

​Common customizations

​Add a sidebar

​Style badges

​Card styling

​Table styling

​Best practices

​Examples

​Professional dashboard

​Playful task app

​Dark mode app

​Changing themes later

​Learn more

Views

Best practices

Overview

Themes

Available themes

Choosing a theme

Requesting themes

Direct theme request

By description

Color customization

Color contexts

UI components

Buttons

Cards

Forms

Navigation

Layout requests

Page structure

Content layout

Spacing

Responsive design

Common customizations

Add a sidebar

Style badges

Card styling

Table styling

Best practices

Examples

Professional dashboard

Playful task app

Dark mode app

Changing themes later

Learn more