> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nomiq.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Exporting Your Brand Kits and Assets from Nomiq Studio
> Download production-ready SVGs, PNGs, CSS variables, font files, and a full Brand Kit ZIP directly from the Nomiq Brand Studio export panel.
Once your logos, colors, and typography are locked, the Brand Studio's Export panel lets you pull production-ready files in every format your team needs — from scalable SVGs for your website to CMYK PDFs for the print shop. You can download a single asset on its own, or grab the **Master Brand Kit**, a pre-organized ZIP archive that contains every logo variation, color configuration file, font file, and PDF guideline snapshot in one download.
## What the Brand Kit Contains
The Master Brand Kit ZIP is structured into four top-level folders so every member of your team — developers, designers, and marketers alike — can find what they need immediately.
| Folder / File | Format | Use Case |
| :------------------------------ | :--------------------- | :---------------------------------------------------------------- |
| `/Logos/SVG/` | SVG | Web headers, email signatures, favicons, Figma imports |
| `/Logos/PNG/Transparent/` | PNG (transparent) | Pitch decks, social media posts, slide templates |
| `/Logos/PNG/Flattened/` | PNG (white background) | Platforms that do not support transparency |
| `/Logos/Print/` | PDF (CMYK) | Business cards, signage, merchandise, commercial printing |
| `/Colors/variables.css` | CSS | Web projects — paste directly into your stylesheet |
| `/Colors/tailwind.config.js` | JavaScript | Tailwind CSS projects — extend the default theme |
| `/Typography/Fonts/` | TTF + WOFF2 | Self-hosted web fonts; TTF for desktop apps |
| `/Typography/license_links.txt` | TXT | Links to purchase any commercial fonts not included |
| `/Social_Media/` | PNG (platform-sized) | Profile pictures pre-cropped for Instagram, LinkedIn, X |
| `brand_guidelines.pdf` | PDF | Offline brand reference; client deliverables; contract appendices |
Font files are only included in the ZIP if your selected typeface is published under an open-source license (Google Fonts or equivalent). Commercial fonts — such as those from Adobe Fonts or Monotype — are listed in `license_links.txt` with a direct link to the foundry where you must purchase the license separately.
## Export Workflow
Before you export, confirm that your Core Visual Identity is fully locked. Open the **Brand Studio** and check that the lock icon appears next to your Logo, Colors, and Typography panels.
Exporting from an unlocked project is possible, but assets are marked as **Draft** quality — they may contain placeholder symbols or unconfirmed color values. Lock everything first to receive production-ready files.
Click the **Export** tab in the Brand Studio's top navigation bar. The panel displays two sections side by side: **Master Brand Kit** on the left and **Individual Assets** on the right.
Use the Master Brand Kit when handing off a complete package to a developer, designer, or client. Use Individual Assets when you need a single file quickly — for example, a transparent PNG logo for a press inquiry.
Click **Download Full Kit (.zip)** to start the download. Nomiq compiles and packages all assets server-side before the download begins; allow up to 30 seconds for the archive to generate.
Upload the ZIP to a shared team folder — Google Drive, Dropbox, or Notion — immediately after downloading. Treat it as your official source-of-truth backup so team members always have access to the latest production files without needing a Nomiq account.
If you are integrating your brand into a web project, you do not need to unzip anything. Scroll down to the **Developer Snippets** section of the Export panel and copy the configuration that matches your stack.
```css variables.css theme={null}
:root {
--nomiq-primary: #4f46e5;
--nomiq-secondary: #818cf8;
--nomiq-surface: #f3f4f6;
--nomiq-background: #ffffff;
--nomiq-text: #111827;
}
```
```javascript tailwind.config.js theme={null}
module.exports = {
theme: {
extend: {
colors: {
primary: '#4f46e5',
secondary: '#818cf8',
surface: '#f3f4f6',
background: '#ffffff',
text: '#111827',
}
}
}
}
```
Paste the snippet directly into your codebase. When you update a color in Nomiq, return to this panel and copy the refreshed snippet — your CSS variable names stay the same, so the update is a one-line change.
When your brand is finalized and ready to share externally — with a print shop, a PR agency, or the public — click **Publish Kit** in the Export panel. Publishing makes your assets available via a permanent, direct-download public URL.
Publishing is an intentional, visible action. Once you click **Publish Kit**, your logo and color files become accessible to anyone who has the public URL without authentication. If your brand is confidential or pre-launch, do not publish until you are ready for external visibility. You can unpublish at any time from the Export panel, but any files already downloaded by external parties will remain in their possession.
## File Format Reference
Choose the right format for each context to avoid common quality and compatibility issues.
| Format | When to Use | When to Avoid |
| :--------------------- | :------------------------------------------------ | :----------------------------------------------------- |
| **SVG** | Website headers, app UI, Figma imports, icon sets | Email clients (many strip SVG tags) |
| **PNG (transparent)** | Social media posts, pitch decks, slide templates | Commercial printing (low DPI at large sizes) |
| **PNG (flattened)** | Platforms that reject transparent files, WhatsApp | Any situation where background color may change |
| **PDF (CMYK)** | Business cards, brochures, packaging, signage | Screen display (colors render differently on monitors) |
| **CSS variables** | Web projects using vanilla CSS or SCSS | Non-web environments |
| **tailwind.config.js** | Projects using Tailwind CSS v3 or v4 | Vanilla CSS or non-Tailwind frameworks |
| **TTF** | Desktop apps, Figma font installation | Web performance (use WOFF2 instead) |
| **WOFF2** | Self-hosted web fonts with `@font-face` | Desktop applications |
## Plan Tier Requirements
Export capabilities vary by plan. Review the table below to confirm your plan includes the formats your project requires before you reach a delivery deadline.
| Feature | Free | Pro | Agency |
| :--------------------------------------- | :--: | :-: | :----: |
| SVG logo exports | ✓ | ✓ | ✓ |
| PNG exports (standard resolution) | ✓ | ✓ | ✓ |
| PNG exports (high resolution, 4× retina) | — | ✓ | ✓ |
| CSS variables snippet | ✓ | ✓ | ✓ |
| Master Brand Kit ZIP | — | ✓ | ✓ |
| CMYK PDF for print | — | ✓ | ✓ |
| Font files (WOFF2 + TTF) | — | ✓ | ✓ |
| Published public kit URL | — | ✓ | ✓ |
| Unlimited project exports | — | — | ✓ |
| White-label kit (no Nomiq branding) | — | — | ✓ |
Upgrade your plan at any time from **Account → Billing**. Existing projects are immediately eligible for higher-tier exports after an upgrade — you do not need to regenerate your brand.
## Common Mistakes
| Mistake | Impact | Solution |
| :----------------------------------------------- | :-------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------- |
| **Sending RGB files to a commercial printer** | Colors print washed out and inaccurate because printers use CMYK ink, not RGB light. | Always send files from the `/Logos/Print/` folder — they are pre-converted to CMYK. |
| **Uploading a PNG logo to a website header** | PNGs become pixelated on high-resolution (Retina) displays. | Use the SVG version for all on-screen applications. SVGs stay crisp at any size. |
| **Embedding TTF files directly in a website** | Large TTF files slow page load times and hurt Lighthouse performance scores. | Use the WOFF2 files in the `/Typography/Fonts/` folder for web. WOFF2 is compressed and browser-optimized. |
| **Exporting before locking the visual identity** | Draft-quality assets may contain placeholder elements that do not represent your final brand. | Lock Logo, Colors, and Typography in the Brand Studio before opening the Export panel. |
## Related Pages
Lock your logos, colors, and typography in the visual editor before exporting production-ready files.
Share an always-current interactive brand document alongside your downloadable kit files.
Pull your Brand Kit directly into a codebase via the command line without manually downloading a ZIP.
Manage past export versions and access previous kit downloads from the project history panel.