Styling Best Practices

Flint automatically extracts your brand's design system from your website, but there will be times when you want to fine-tune how individual sections or components look on a page.

This guide covers best practices for adjusting styles effectively, whether you're changing colors and imagery or directing the Flint agent to make precise visual changes.

Flint maintains a design token system derived from your brand. When changing colors on a section, follow these principles:

Use your brand colors first
Always try to use colors already in your brand palette. Ask Flint things like "Use the brand primary color for this button" or "Make this section use the dark background variant" rather than specifying arbitrary hex values.

Reference existing sections for consistency
If a color is already used correctly elsewhere on your site, point to it: "Make this hero background match the dark section on our pricing page." This ensures color roles stay consistent across your site.

Avoid overriding too many properties at once
Changing a section's background, text color, button color, and border all at once can produce unexpected results. Make one change at a time and preview before continuing.

Light vs dark sections
Flint understands light and dark section variants. Saying "make this section dark" or "flip this to a light background" is often the most reliable way to switch a section's color scheme while keeping text readable.

Images and visual assets are among the most impactful elements on any page. Here's how to manage them effectively in Flint:

Upload your own assets
For the best results, upload your own brand images directly to Flint. This ensures they match your visual identity and are optimized for your pages.

Reference the asset you want replaced
When asking the Flint agent to update an image, click on the element first to select it, then describe the change. Selected context gives Flint the precise location rather than having to guess which image you mean.

Be specific about the role of the image
Instead of "change the hero image," try "replace the hero background with a photo of our product dashboard" or "swap the team photo with this uploaded image." Role context helps Flint understand how the image should be cropped and sized.

Logo handling
For partner logos, integration logos, or brand icons, Flint can automatically fetch high-quality logos by company name. Simply ask: "Add the HubSpot logo to the integrations section" and Flint will source and add it correctly.

Thumbnail images for videos
If your section includes a video, always provide a custom thumbnail rather than relying on auto-generated ones from YouTube or Vimeo. Auto-generated thumbnails often have built-in borders or letterboxing that break the layout.

The Flint agent is purpose-built for marketing pages and understands visual intent. Here are the most effective ways to work with it on styling tasks:

Select the element before prompting
Click on the specific section or component you want to change before typing your request. The agent receives context about the selected element, which dramatically improves accuracy.

Describe the outcome, not the code
Flint works best when you describe the visual result you want, not the implementation. Say "make this section feel warmer and more approachable" rather than "change the background to #fff7ed." The agent will select appropriate values from your design system.

Use comparative references
Reference other pages or sections on your site for consistency: "Make this CTA section look like the one on the homepage" or "Use the same card style as the pricing page."

Iterate in small steps
For complex styling changes, break them into smaller requests. Change the background first, then the typography, then the button styles. This makes it easier to spot issues and gives you more control.

Be explicit about what to keep
If you only want to change one aspect, say so: "Only change the button color, keep everything else the same." This prevents the agent from making broader adjustments than you intended.

Ask for alternatives
If the first result isn't quite right, ask the agent to try a different approach: "That's close, but can you try a lighter background instead?" The agent maintains context across your conversation.

Typography is one of the most sensitive aspects of brand consistency. Follow these guidelines when adjusting text styles:

Stick to your extracted font families
Flint extracts your brand fonts during setup. Avoid introducing new font families unless you're intentionally updating your design system. Mixing fonts is a common source of off-brand results.

Use semantic size language
Ask for "larger heading" or "smaller body text" rather than pixel values. Flint maps these to the appropriate scale from your design system.

Heading hierarchy matters
Every section should have a clear visual hierarchy: a main heading (H1 or H2), supporting subheadings, and body text. Avoid making all text the same size or weight, which makes sections harder to scan.

Line length and readability
For body text, ideal line length is 60-75 characters. If your text spans the full page width, ask Flint to constrain it: "Limit the body text to a readable width in the center of the section."

The thumbnail has strange borders or spacing
This usually happens when the video container has a background color or border that's visible around the thumbnail. Ask Flint: "Remove any background color and border from the video container so the thumbnail fills it completely." Also ensure you're using a custom thumbnail rather than an auto-generated YouTube/Vimeo thumbnail.

Colors look off-brand
If a section's color doesn't match your brand, it may be using a fallback value. Select the section and ask: "Reset this section's colors to use only our brand palette."

Images appear cropped unexpectedly
Flint uses object-cover by default for images in containers, which centers and crops to fill. If you need the full image visible, ask: "Show the full image without cropping" and Flint will adjust the object-fit or container proportions.

Styles apply to the wrong section
Always select the specific element before making a styling request. If you describe a change without selecting an element, the agent may apply it to the wrong section. Click first, then prompt.

Changes don't appear to take effect
After the agent makes changes, wait for the preview to reload. If the change still isn't visible, try refreshing the preview. If the issue persists, undo and try the request again with more specific language.