Brand Kits & Design Systems

Who can do this: Owners, Admins, and Editors can create and edit brand kits. See Roles and Permissions for details.

Your design system is the foundation of your project’s visual identity. Brand kits give you a head start with curated aesthetics, or you can define your own.

Pre-Made Brand Kits

Start with a curated color palette. Brand kits are pre-selected color groupings designed to work well together. Browse the available options in the design panel and select one to apply it instantly.

Custom Colors

Define your own visual identity by selecting up to 4 custom colors using the color picker. The colors you choose are available for use throughout your project – specify in your prompt how you want each color applied.

For example: “Use my first color for buttons and CTAs, the second for section backgrounds, the third for headings, and the fourth for body text.”

Custom Fonts

Typography is essential to your brand identity. You have two options:

• Upload your own fonts – Attach font files (WOFF2, WOFF, TTF, OTF) in chat and tell Sticklight where to use them
• Use pre-installed fonts – Choose from our curated selection of professional web fonts

For detailed instructions on uploading and configuring fonts, see Custom Fonts.

Choosing Your Colors

Select up to 4 custom colors using the color picker in the design panel. These colors become available for use throughout your project.

How you apply each color is up to you. Specify in your prompt how you want your colors used:

“Use my first color for buttons and CTAs, the second for section backgrounds, the third for headings, and the fourth for accents.”

“Apply my brand blue to all interactive elements and my brand gray for text.”

The more specific you are, the more consistent your results.

Setting Colors

Via chat:

“Set my primary color to #3B82F6 and secondary to #10B981”

Via brand kit panel:
Click any color swatch in the design panel and use the color picker.

From uploads:
Upload your logo or brand assets and ask:

“Extract the colors from my logo for the brand kit”

See Attach Files for Context for more on uploads.

Color Formats

Sticklight accepts:

• Hex: #3B82F6
• RGB: rgb(59, 130, 246)
• HSL: hsl(217, 91%, 60%)
• Named colors: blue, coral, navy

Hex codes are most precise for brand matching.

Accessibility Considerations

Good color choices ensure everyone can use your site:

• Text contrast – 4.5:1 minimum ratio for body text
• Large text – 3:1 minimum for headings 18px+
• Interactive elements – Buttons and links should be clearly visible

Sticklight helps maintain accessible contrast, but verify with your specific color combinations.

Applying Colors Consistently

Once you’ve set your colors, guide Sticklight on where to use them:

• Be specific – “Use the teal for all buttons” works better than “make it colorful”
• Reference by position or description – “my first color” or “the dark blue”
• Layer your requests – Set colors first, then refine individual elements

For precise control over individual elements, use Visual Editing.