Design API

Programmatic Theming

Make your app adopt each customer’s look and feel with extracted colors, typography, buttons, cards and CSS exports.

Colors Fonts Buttons Cards

Extract a styleguide Read docs

01 Semantic colors

02 Typography h1-h4 and p tokens

03 Button and card CSS

04 CSS variables and Tailwind theme

How it works

From input to useful output in three steps

GET /v1/web/styleguide

Inspect

Read the visual system

Analyze colors, fonts, spacing and component styles from the target site.

GET /v1/web/styleguide

Preview

Render a design sample

Show colors, typography, buttons and cards before applying them to production UI.

Visual preview

Apply

Export reusable tokens

Use CSS variables or theme config to style dashboards, portals and reports.

CSS variables

Example workflow

Website style to product theme

App needs

A dashboard or report that visually matches a customer website.

MediaHarvester extracts

Semantic colors, h1-h4 typography, paragraph styles, button/card tokens and font links.

Frontend applies

CSS variables, Tailwind theme hints and component styles for a branded experience.

GET /v1/web/styleguide?domain=haberler.com

Built for

Teams that can use this immediately

White-label SaaS

Challenge: Every tenant looks the same.

Solution: Theme with customer brand tokens.

Impact: Products feel client-specific.

Report builders

Challenge: Reports are visually generic.

Solution: Use extracted colors and type.

Impact: Deliverables look more polished.

AI website builders

Challenge: Generated designs miss brand detail.

Solution: Start generation with style tokens.

Impact: Less manual design cleanup.

Implementation FAQ

Questions teams ask before building Programmatic Theming

12 answers

What does Programmatic Theming help me build?

It turns Styleguide API for white-label dashboards, reports and AI website builders. into a repeatable workflow. The first practical outcome is semantic colors.

Which API should I call first?

Start with GET /v1/web/styleguide. The workflow section shows the supporting endpoints to add when you need more context, evidence or visual assets.

What input do I need from my user?

The smallest useful input is shown in the example workflow: A dashboard or report that visually matches a customer website. Ask only for the domain, URL, email, ticker or descriptor that the selected endpoint actually needs.

What should I store from the response?

Store the normalized result together with source URLs, confidence or access state, and the time it was fetched. This keeps later refreshes and human review explainable.

Can I use this from a backend, CLI or AI agent?

Yes. The REST endpoint, TypeScript and Python SDKs, CLI and MCP tools use the same local API contract. No-code templates are available for business workflows.

How do I keep the result current?

Use maxAgeMs where the endpoint supports it, or schedule the relevant crawl or workflow. Refresh facts that can change and cache stable assets such as logos more aggressively.

What happens when the website blocks access?

The API reports blocked, verification_required, login_required, robots_disallowed or permission_required instead of treating an empty page as a successful result.

How should I handle missing fields?

Keep the UI usable with optional fields, sensible placeholders and manual overrides. A missing logo, address or classification should not prevent the rest of the workflow from completing.

Who is this workflow designed for?

The examples focus on white-label saas, report builders, ai website builders, but the API response is general enough to use in custom applications.

Can I review the result before publishing it?

Yes. Show extracted values, source URLs and generated visual previews in an approval step before changing customer-facing content or records.

Is batch processing supported?

Use the batch, crawl or workflow endpoint shown for the capability when available. For smaller integrations, process a controlled list and record individual failures rather than failing the whole job.

How do I try the complete example locally?

Open the linked playground from this page or call GET /v1/web/styleguide at http://127.0.0.1:8013 with X-API-Key: mh-localhost-dev-key. The example payload on this page is ready to adapt.

Related use cases

Explore adjacent workflows

Power LLMs with Web Context Give AI agents real-time website context with clean markdown, crawl results, screenshots, brand data and structured extraction. Reduce Onboarding Friction Personalize onboarding automatically with company logos, colors, fonts, styleguides, descriptions and industry classification. Enrich Company Profiles Build richer CRM, directory and marketplace profiles with logos, descriptions, socials, colors, addresses and industry data. Automated Brand Kits Generate brand kits on demand with logos, colors, typography, component tokens, CSS variables and Tailwind theme exports. Stock Ticker Enrichment Resolve public-company tickers and ISINs into company websites, logos, brand profiles and stock metadata. Logo Link API Serve company logos through a spreadsheet-friendly public Logo Link endpoint with monogram fallback.