# Atelier | Complete Platform Specifications & Answer Engine Index (Full Version)
This document serves as the comprehensive plain-text reference guide detailing the Atelier programmatic design platform, its CDN engines, API specs, payment guidelines, catalog metadata, and user FAQs. It is optimized for access by Large Language Models, AI citation engines, and semantic answer processors.
---
## π 1. COMPLETE ASSET CATEGORIES & DESCRIPTIONS
Every asset served or listed on the Atelier platform is specifically compiled, typed, and formatted to ensure maximum performance across the modern developer ecosystem.
### A. Vector Icons Pack (Lucide Icons)
* **Description:** Access to over 1700+ clean, consistent vector icons designed on a standard 24x24 grid with rounded endpoints.
* **Design Standards:** Mapped with a default 2px stroke width, rounded caps, and joins. Features 1px of consistent internal padding, ensuring visual balance when multiple vectors are integrated adjacent to each other.
* **Integrations:** Direct CDN embedding in raw HTML or inline CSS backgrounds, official React component imports (`lucide-react`), Next.js App Router tree-shakeable bundles, Vue 3 packages (`lucide-vue-next`), Angular directives (`lucide-angular`), and Svelte bindings (`lucide-svelte`).
* **Licensing:** Released under the MIT License, authorizing personal and commercial use without attribution.
### B. Adaptive Vector Illustrations
* **Description:** Modern, flat, and isometric vector scene illustrations designed for loading, onboarding, and dashboard interfaces.
* **Dynamic Styling:** Ingested using separate theme components, allowing SVGs to adapt light/dark color mappings seamlessly based on the user's active theme. Fully editable via vector design systems like Figma.
### C. Prototyping UI Kits & Component Blocks
* **Description:** Centralized layouts, high-fidelity components, custom vector wireframes, design tokens, and display grids optimized to enable rapid developer mockups and prototype liftoff.
* **Format:** Available as HTML/CSS configurations, React components, and raw JSON-formatted token properties for absolute styling agility.
### D. Structural Code Snippets
* **Description:** Pre-configured components, copy-paste responsive navbar layouts, dashboard cards, glassmorphic cards, charts, and modern forms styled with Tailwind CSS utility properties.
### E. Sound Effects & micro-Audio
* **Description:** Lightweight acoustic assets designed for user micro-interactions, including click chimes, navigation swipes, alerts, and success signals. Mapped for fast browser buffering and playbacks.
---
## π οΈ 2. FULL API & CDN ENDPOINT DOCUMENTATION
Atelier serves vector assets directly to client web browsers using standard HTTPS GET request paths.
### A. Base API Address
* `https://api.atelier.design` (or `http://localhost:3000` during local developer staging).
### B. Programmatic Embed Endpoint
* **Format:** `GET /u/:userNumber/icons/lucideicons/:iconName`
* **Parameters:**
* `:userNumber` (Your unique 4-digit registration sequence, e.g. `0001` or `0024`).
* `:iconName` (The lowercase string identifier of the target icon, e.g. `compass`, `arrow-right`, `star`).
* **Query Options:**
* `?size=X` (An integer setting width/height in pixels. Default is `24`. Maximum allowed is `128`).
* `?color=HEX` (A standard URL-encoded color string. For example, `?color=%234F46E5` for indigo or `?color=currentColor` to inherit parent styles).
* `?stroke=Y` (A floating-point weight specifying line widths, typically between `1.0` and `3.0`. Default is `2`).
### C. Domain-Locking Security (Allowed Domains)
* **Mechanism:** When a request is made to a paid Creator Pro user's programmatic path, the backend checks the HTTP `Referer` or `Origin` header.
* **Checks:**
* If the requesting domain is in the user's whitelisted `allowed_domains` array, the request succeeds with `200 OK` and returns raw SVG content with caching headers.
* If the domain is unlisted or spoofed, the server issues a `403 Forbidden` response and blocks execution.
* Free Explorer tiers do not support domain whitelisting.
### D. Server Response Codes
* `200 OK` - SVG returned successfully with headers `Content-Type: image/svg+xml` and `Cache-Control: public, max-age=86400`.
* `400 Bad Request` - Missing parameters, invalid weights, or incorrect color values.
* `403 Forbidden` - Request threshold reached (free limits) or unauthorized domain hotlinking.
* `404 Not Found` - Requested asset key or icon name does not exist in the database.
---
## π³ 3. νλ«νΌ μκΈμ & κ°κ²© μΈλΆ μ¬ν (PLATFORM PRICING)
| Plan | Price (INR) | Features Included | API Limits |
| :--- | :--- | :--- | :--- |
| **Explorer Free** | βΉ0 / forever | UI library exploration, customizer playground access, and personal license. | Strictly limited to 10 trial API calls. |
| **Creator Pro** | βΉ199 / month | Unlimited CDN requests, Allowed Domain whitelisting, commercial license clearance, production delivery authorization, and a custom sequence number. | Unlimited requests (subject to fair use). |
* **Spotlight Split:** Marketplace creators retain 85% of all sales revenues; Atelier retains 15% to support payment systems, CDN distributions, and developer search systems.
* **Refund Policy:** Purchases are non-refundable by default due to digital assets replication, but requests made within 7 days of payment are reviewed case-by-case if no API calls were executed.
---
## β 4. COMPLETE PLATFORM FAQ CATALOG (LUCIDE ICONS & SYSTEM FAQS)
### FAQ 1: Is Lucide Icons free for commercial projects?
* **Answer:** Yes, completely. Lucide Icons is released under the MIT License which means you can use it in any personal or commercial project, modify the icons, redistribute them, and even include them in products you sell β all without paying anything or giving attribution. The only condition is that you keep the MIT license notice if you redistribute the source files themselves.
### FAQ 2: Do I need to credit Lucide in my project?
* **Answer:** No, attribution is not required for MIT licensed assets. You do not need to add any credit in your app, website, or product. However, if you are distributing the raw SVG files or the source code itself as part of a package or open source project, you should include the original MIT license file.
### FAQ 3: How do I install Lucide Icons in a React project?
* **Answer:** Run `npm install lucide-react` in your project terminal. Then import any icon by its PascalCase name directly from the package. For example: `import { ArrowRight, Check, User } from 'lucide-react'`. Each icon is a React component that accepts props like size, color, strokeWidth, and className. You can also pass any standard SVG attribute as a prop.
### FAQ 4: How do I use Lucide Icons in a Next.js project?
* **Answer:** Install with `npm install lucide-react`. In Next.js App Router, icons work in both Server Components and Client Components since they are just SVG elements with no browser-only APIs. Import and use them exactly like in React: `import { Home, Settings } from 'lucide-react'`. No special configuration needed. They are tree-shakeable so only the icons you import are included in your bundle.
### FAQ 5: How do I use Lucide Icons in Vue 3?
* **Answer:** Install with `npm install lucide-vue-next`. Then import icons as Vue components: `import { ArrowRight } from 'lucide-vue-next'`. Use them in your template as self-closing tags: ``. The package supports Vue 3 Composition API and Options API. For Nuxt 3, no additional configuration is needed.
### FAQ 6: Can I use Lucide Icons without npm or a build tool?
* **Answer:** Yes. Add the CDN script tag to your HTML: ``. Then place icon placeholder elements: ``. Finally call `lucide.createIcons()` in your script after the DOM loads. This replaces all data-lucide elements with the actual SVG icons. No build tool or Node.js required.
### FAQ 7: How do I install Lucide in an Angular project?
* **Answer:** Run `npm install lucide-angular`. Import `LucideAngularModule` in your `app.module.ts` and pass the icons you want to use: `LucideAngularModule.pick({ ArrowRight, Check, Home })`. Then use the icon component in your templates: ``. The pick method ensures only selected icons are bundled.
### FAQ 8: How do I use Lucide Icons in Svelte or SvelteKit?
* **Answer:** Install with `npm install lucide-svelte`. Import icons as Svelte components: `import { ArrowRight } from 'lucide-svelte'`. Use them in your markup: ``. Icons are fully typed and tree-shakeable. SvelteKit works with no additional setup. The package supports both Svelte 3 and Svelte 4.
### FAQ 9: How do I change the size of a Lucide icon?
* **Answer:** Pass the size prop with a number value in pixels. Example: ``. The default size is 24. You can also use width and height props separately if you need non-square icons, though Lucide icons are designed for square use. In CSS you can also set width and height on the SVG element directly.
### FAQ 10: How do I change the color of a Lucide icon?
* **Answer:** There are three ways. First, use the color prop: ``. Second, use CSS since icons use currentColor by default β set color on a parent element and all icons inside inherit it: ``. Third, use a className and target it with CSS or Tailwind: ``. The Tailwind method is most common in modern projects.
### FAQ 11: How do I change the stroke width of a Lucide icon?
* **Answer:** Use the strokeWidth prop. The default is 2. Example: `` for a lighter look or `` for a bolder look. Values between 1 and 3 work best. Going below 1 can make icons hard to see at small sizes. This is one of the key customization advantages of stroke-based icon sets like Lucide.
### FAQ 12: Can I use Lucide icons with Tailwind CSS?
* **Answer:** Yes, Lucide works perfectly with Tailwind. Since icons render as SVG elements, you can apply Tailwind classes directly. Use text utilities for color: `className="text-indigo-600"`. Use w and h utilities for size: `className="w-6 h-6"`. Example: ``. This is the most popular way to use Lucide in Tailwind projects.
### FAQ 13: How do I use Lucide icons in Figma?
* **Answer:** Install the official Lucide Figma plugin from the Figma Community. Search for Lucide in the Figma plugin marketplace. Once installed, open it from Plugins menu, search for any icon by name, and insert it directly onto your canvas as a vector frame. Icons are inserted as individual vector components that you can recolor, resize, and modify freely.
### FAQ 14: Are Lucide Icons tree-shakeable?
* **Answer:** Yes. All Lucide packages are fully tree-shakeable. Only the icons you actually import are included in your final bundle. If you import 10 icons out of 1711, your bundle only contains those 10. This makes it safe to install the full package without worrying about bundle size. A single Lucide icon is typically around 0.5 to 1KB in your bundle.
### FAQ 15: What is the viewBox and grid system Lucide uses?
* **Answer:** All Lucide icons use a 24x24 viewBox. The design grid is 24x24 pixels with a 2px stroke width, rounded line caps, and rounded line joins. Icons have 1px of padding inside the viewBox meaning the actual icon content fits within a 22x22 area. This consistency is what makes all Lucide icons look perfectly matched when used together in a UI.
### FAQ 16: Does Lucide support TypeScript?
* **Answer:** Yes, all Lucide packages ship with full TypeScript definitions. The lucide-react package exports a LucideIcon type for the icon component, and a LucideProps interface for the props. You can use these for typed icon prop passing: `import { LucideIcon } from 'lucide-react'`. This makes it easy to build typed icon wrapper components or accept dynamic icon names in your design system.
### FAQ 17: Can I pass a dynamic icon name as a variable?
* **Answer:** Yes but you need to use a lookup approach since you cannot import icons dynamically by string name directly. Import all icons you might need and create a map object: `const icons = { arrowRight: ArrowRight, check: Check }`. Then look up: `const Icon = icons[iconName]`. Use it as a component: ``. Alternatively use the lucide package with `createLucideIcon` or use Iconify which supports dynamic string-based icon names.
### FAQ 18: What is the difference between Lucide and Feather Icons?
* **Answer:** Lucide started as a community fork of Feather Icons in 2020 when Feather's development slowed down. Lucide kept the same clean stroke-based design style but added hundreds of new icons, established stricter contribution guidelines, improved consistency across the set, and created official packages for every major framework. Feather has 286 icons while Lucide has over 1700. If you are starting a new project today, Lucide is the choice.
### FAQ 19: How do I access Lucide Icons through the Atelier API?
* **Answer:** Generate an API key from your Atelier dashboard under Settings > API Keys. Then make a GET request to `https://api.atelier.design/v1/icons?pack=lucide` with your key in the `x-api-key` header. The API returns icon metadata including SVG URLs, tags, and categories. You can also fetch individual icon SVG markup directly from the `/v1/icons/lucide/{icon-name}/svg` endpoint.
### FAQ 20: Is the Lucide Icons API access free on Atelier?
* **Answer:** Yes, Lucide Icons is a free asset on Atelier so all API requests to the Lucide pack are counted against your regular API quota. Free accounts get 100 API requests per day. Pro accounts get unlimited requests. Since Lucide is MIT licensed, there are no additional access restrictions β any valid API key can fetch any Lucide icon at any time.
### FAQ 21: How do I upgrade to the Pro plan if Stripe regional checkouts fail?
* **Answer:** We have introduced active backup channels. Free users seeking Creator Pro access can trigger payment support panels under `upgrade.html` and initiate direct communication with Atelier administrators through our dynamically configured Discord or Instagram support links.
### FAQ 22: What happens when standard free trial limits are reached?
* **Answer:** If a Free tier user reaches 10 programmatic API query calls, their dashboard is locked immediately. Endpoint parameters are blurred, domain inputs are disabled, and a prominent lock screen prompts them to upgrade directly to the Creator Pro plan to restore service.