# Cookies ::u-page-hero #title # Cookie Policy :: ::u-container{.prose-container} ## 1. Introduction Styleframe Pro, managed by Pixevil Creative Web SRL ("*the Company*", "*Styleframe*", "*styleframe*", "*we*", "*us*", or "*our*"), utilizes cookies and similar tracking technologies on our website [styleframe.dev](https://styleframe.dev){rel=""nofollow""} (the "Website") and associated services (collectively, the "Service"). This Cookie Policy explains the use of cookies and similar technologies to enhance and personalize your user experience. We use cookies to help improve your experience of our Website at [styleframe.dev](https://styleframe.dev){rel=""nofollow""}. This cookie policy is part of Styleframe’s [Privacy Policy](https://styleframe.dev/privacy). It covers the use of cookies between your device and our Website. We also provide basic information on third-party services we may use, who may also use cookies as part of their service. This policy does not cover their cookies. If you don’t wish to accept cookies from us, you should instruct your browser to refuse cookies from [styleframe.dev](https://styleframe.dev){rel=""nofollow""}. In such a case, we may be unable to provide you with some of your desired content and services. ### 1.3. Effective Date This License Agreement is effective as of 30 September 2025. Last Updated: 30 September 2025 ## 2. Understanding Cookies ### 2.1 What Are Cookies? A cookie is a small piece of data that a Website stores on your device when you visit. It typically contains information about the Website itself, a unique identifier that allows the site to recognize your web browser when you return, additional data that serves the cookie’s purpose, and the lifespan of the cookie itself. Cookies are used to enable certain features (e.g. logging in), track site usage (e.g. analytics), store your user settings (e.g. time zone, notification preferences), and to personalize your content (e.g. advertising, language). Cookies set by the Website you are visiting are usually referred to as first-party cookies. They typically only track your activity on that particular site. Cookies set by other sites and companies (i.e. third parties) are called third-party cookies They can be used to track you on other websites that use the same third-party service. ### 2.2 Types of Cookies - **Essential Cookies**: Necessary for the website to function and cannot be switched off in our systems. - **Performance Cookies**: Collect information about how visitors use a website, for instance, which pages visitors go to most often. - **Functionality Cookies**: Enable the website to provide enhanced functionality and personalization. - **Targeting Cookies**: Used to track visitors across websites to display ads that are relevant and engaging for the individual user. ## 3. How We Use Cookies ### 3.1 Essential Website Cookies These cookies are strictly necessary to provide you with services available through our Website and to use some of its features, such as access to secure areas. ### 3.2 Analytics and Customization Cookies These cookies collect information that is used either in aggregate form to help us understand how our Website is being used or how effective our marketing campaigns are, or to help us customize our Website for you. ### 3.3 Advertising Cookies These cookies are used to make advertising messages more relevant to you. They perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests. ## 4. Your Choices Regarding Cookies ### 4.1 Managing Cookies You can choose to accept or decline cookies. Most web browsers automatically accept cookies, but you can usually modify your browser setting to decline cookies if you prefer. This may prevent you from taking full advantage of the Website. ### 4.2 Cookie Preferences You can manage your Cookie Preferences on our Website by accessing our Cookie Consent Tool, where you can choose which types of cookies you consent to our using. ## 5. Changes to This Cookie Policy We may update this Cookie Policy from time to time in response to changing legal, technical, or business developments. When we update our Cookie Policy, we will take appropriate measures to inform you, consistent with the significance of the changes we make. ## 6. Contact Us If you have any questions about our use of cookies or the *Cookie Policy*, please contact us at . Pixevil Creative Web SRL :br VAT RO 36240950 :br Romania :br Dumbravita, Timis 307160 :br Tudor Vladimirescu 208A :br :: # Figma Plugin - Design Tokens Sync ::gradient-page-hero :video{.rounded autoplay loop muted playsinline src="https://styleframe.dev/assets/video/styleframe-figma.mp4"} #title Export Styleframe Design Tokens [to Figma]{.text-primary} and Back #description Sync your design tokens between Figma and code. Import and export W3C DTCG format JSON with full multi-mode support for light and dark themes, completely free. #links :::u-button --- color: primary size: xl target: _blank to: https://www.figma.com/community/plugin/1597716416772135340/styleframe trailing-icon: i-lucide-arrow-right --- Install Figma plugin ::: :::u-button --- color: neutral size: xl to: https://styleframe.dev/docs/getting-started/integrations/figma-plugin variant: outline --- Read plugin documentation ::: :: ::u-page-section --- class: border-t border-default --- #title A First-Class Token Synchronization Layer #description Your code is your source of truth. Export it to the industry-standard Design Tokens Community Group format. Compatible with Figma, Style Dictionary, Tokens Studio, and other tools. #features :::u-page-feature --- icon: i-lucide-code-2 --- #title [Code-First]{.text-primary} Architecture #description Your Styleframe config is the single source of truth. Define tokens in TypeScript, export to Figma. When code changes, designers stay in sync. ::: :::u-page-feature --- icon: i-lucide-shield-check --- #title [Type-Safe]{.text-primary} Tokens #description Full TypeScript support means autocomplete, refactoring, and compile-time errors. Catch token mismatches before they reach production. ::: :::u-page-feature --- icon: i-lucide-sun-moon --- #title [Multi-Mode]{.text-primary} by Design #description Light, dark, and custom themes are modeled using DTCG modifiers. Modes remain explicit, structured, and code-friendly. ::: :::u-page-feature --- icon: i-lucide-arrow-left-right --- #title True [Bidirectional]{.text-primary} Sync #description Import DTCG tokens into Figma or export Figma Variables back to JSON. Both directions preserve structure, aliases, and semantics. ::: :::u-page-feature --- icon: i-lucide-terminal --- #title [Automation]{.text-primary}-Ready #description Export tokens from code via CLI for CI/CD, reviews, and version control. Built for modern developer workflows. ::: :::u-page-feature --- icon: i-lucide-circle-dollar-sign --- #title [Free]{.text-primary} Forever #description No subscription. No seat limits. The CLI and Figma plugin are free and open source. Your design system, your rules. ::: :: ::u-page-section --- class: border-t border-default orientation: horizontal --- ![Styleframe - Import Design Tokens into Figma](https://styleframe.dev/assets/images/figma-import.png) #title [Import]{.text-primary} Design Tokens into Figma #description Drop a Styleframe DTCG JSON file into the plugin. Preview variables and modes before importing, then create a Figma variable collection with one click. All types mapped correctly. #features :::u-page-feature --- icon: i-lucide-upload --- #title [Drag & Drop]{.text-primary} #description Drop your tokens.json file into the plugin. Preview everything before committing to the import. ::: :::u-page-feature --- icon: i-lucide-layers --- #title [Auto-Create]{.text-primary} Collections #description The plugin creates Figma collections with modes for Light, Dark, and any custom themes defined in your tokens. ::: :::u-page-feature --- icon: i-lucide-check-circle --- #title [Type Validation]{.text-primary} #description Color, dimension, number, and string types are validated before import. Invalid tokens are flagged, not silently dropped. ::: :: ::u-page-section --- reverse: true orientation: horizontal --- ![Styleframe - Export Design Tokens from Figma](https://styleframe.dev/assets/images/figma-export.png) #title [Export]{.text-primary} Figma Variables to Styleframe #description Select a Figma variable collection and export it to the Styleframe W3C DTCG format. Copy the JSON or save it as a file. Aliases are preserved as proper token references. #features :::u-page-feature --- icon: i-lucide-mouse-pointer-click --- #title [One-Click]{.text-primary} Export #description Select a collection, click export. The plugin handles type conversion, alias mapping, and mode organization automatically. ::: :::u-page-feature --- icon: i-lucide-copy --- #title [Clipboard]{.text-primary} Ready #description Copy the generated JSON directly to your clipboard. Paste into your codebase or save as a file for version control. ::: :::u-page-feature --- icon: i-lucide-braces --- #title [Reference]{.text-primary} Syntax #description Variable aliases become DTCG references ({token.path}). Token relationships are preserved across every export. ::: #links :::u-button --- color: neutral icon: i-lucide-external-link target: _blank to: https://www.designtokens.org/ variant: outline --- Learn about DTCG Format ::: :: ::u-page-section --- class: border-t border-default headline: Developer Workflow orientation: horizontal --- :::browser-frame{title="Terminal"} ```bash # Export Styleframe variables to Figma-compatible format npx styleframe figma export \ --config styleframe.config.ts \ --output tokens/ \ --collection "Design Tokens" # Output: # Loading configuration from "styleframe.config.ts"... # Building DTCG document... # Flattening to Figma-compatible format... # Wrote "tokens/Default.tokens.json" (450 tokens) # Wrote "tokens/Dark.tokens.json" (450 tokens) # Exported 450 tokens as 2 Figma-compatible mode file(s) ``` ::: #title Automate with the CLI #description Export design tokens directly from your Styleframe config. Run in CI/CD pipelines to keep Figma tokens in sync with every code change. No manual exports, no drift. #features :::u-page-feature --- icon: i-lucide-git-branch --- #title [Git-Integrated]{.text-primary} Workflow #description Export tokens on every commit. Track changes in version control alongside your code. Review token updates in pull requests. ::: :::u-page-feature --- icon: i-lucide-repeat --- #title [CI/CD]{.text-primary} Ready #description Add the export command to your build pipeline. Automatically sync tokens from your Styleframe config to Figma-compatible format. ::: #links :::u-button --- color: neutral icon: i-lucide-book-open to: https://styleframe.dev/docs/getting-started/tooling/cli#dtcg variant: outline --- CLI Documentation ::: :: ::u-page-section --- class: border-t border-b border-default variant: primary --- #title Sync Design Tokens to Figma in [Minutes]{.text-primary} #description Install the Figma plugin, export your Styleframe config, and sync your design tokens. No subscriptions, no setup complexity. #links :::u-button --- color: primary size: xl target: _blank to: https://www.figma.com/community/plugin/1597716416772135340/styleframe trailing-icon: i-lucide-arrow-right --- Install Figma plugin ::: :::u-button --- color: neutral size: xl to: https://styleframe.dev/docs/getting-started/integrations/figma-plugin variant: outline --- Read plugin documentation ::: :: # Type-safe Composable CSS ::gradient-page-hero --- orientation: horizontal --- :::browser-frame{title="styleframe.config.ts"} ```ts import { styleframe } from 'styleframe'; import { useColorDesignTokens } from '@styleframe/theme'; const s = styleframe(); const { variable, ref, selector } = s; const spacing = variable('spacing', '1rem'); const { colorPrimary } = useColorDesignTokens(s, { primary: '#318fa0', }); selector('.button', { backgroundColor: ref(colorPrimary), padding: ref(spacing), }); export default s; ``` ::: #title Type-safe Composable CSS #description From simple UI styles to full Design Systems, write code using Styleframe’s powerful TypeScript CSS API. #links :::u-button --- color: primary size: xl to: https://styleframe.dev/docs/getting-started/introduction trailing-icon: i-lucide-arrow-right --- Get started ::: :::u-button --- color: neutral icon: i-lucide-github size: xl target: _blank to: https://github.com/styleframe-dev/styleframe variant: outline --- Star on GitHub ::: :: ::u-page-section --- class: border-t border-b border-default --- #title Built for Excellent Developer Experience #features :::u-page-feature --- icon: i-lucide-shield-check target: _blank to: https://styleframe.dev/docs/api --- #title [Type-safe]{.text-primary} CSS API #description All styles are validated at compile time, eliminating typos and runtime errors. ::: :::u-page-feature --- icon: i-lucide-boxes target: _blank to: https://styleframe.dev/docs/api/composables --- #title Easily [Composable]{.text-primary} #description Compose and reuse styles using functions, variables, arrays, or objects. Mix and match easily. ::: :::u-page-feature --- icon: i-lucide-palette target: _blank to: https://styleframe.dev/docs/api/themes --- #title Built-in [Theming]{.text-primary} Support #description Easily create and manage light and dark themes for your design system. ::: :::u-page-feature --- icon: i-lucide-heart-handshake target: _blank to: https://styleframe.dev/docs/getting-started/installation/vite --- #title Framework [Agnostic]{.text-primary} #description Works with any frontend stack (React, Vue, Solid, Svelte, Astro) and integrates seamlessly with Vite. ::: :::u-page-feature --- icon: i-lucide-settings target: _blank to: https://styleframe.dev/docs/api/instance#configuration-options --- #title Fully [Configurable]{.text-primary} #description Build themes using composables, variables, selectors, variants, and utilities naturally. ::: :::u-page-feature --- icon: i-lucide-square-terminal target: _blank to: https://styleframe.dev/docs/getting-started/guides --- #title Intuitive [Developer Experience]{.text-primary} #description Get auto-complete, in-editor documentation, and powerful static analysis for your CSS. ::: :: ::u-page-section --- class: border-t border-default orientation: horizontal --- :::browser-frame{title="Output"} ```css /* Static CSS generated at build time */ .button { background-color: var(--color-primary); padding: var(--spacing); } ``` ```ts /* Optional runtime generated for Recipes */ export const button = recipe('button', { background: "primary", }, { size: { sm: { padding: 'sm' }, md: { padding: 'md' }, lg: { padding: 'lg' } } }); ``` ::: #title Zero-Runtime by Default, Dynamic When You Need It #description Styleframe generates CSS at build time for maximum performance. When you need prop-based styling, an optional runtime handles Recipes. #features :::u-page-feature --- icon: i-lucide-zap --- #title [Static]{.text-primary} Generation #description CSS is generated at build time, resulting in zero runtime overhead for your base styles. ::: :::u-page-feature --- icon: i-lucide-between-horizontal-start to: https://styleframe.dev/docs/api/instance#configuration-options --- #title [Dual Output]{.text-primary} #description The transpiler outputs both CSS and TypeScript. Configure output on a per-token basis to control exactly what gets generated. ::: :::u-page-feature --- icon: i-lucide-play to: https://styleframe.dev/docs/api/recipes --- #title [Optional Runtime]{.text-primary} #description Need prop-based class generation? Use Recipes for dynamic component variants without sacrificing the static benefits. ::: #links :::u-button --- color: neutral icon: i-lucide-chef-hat to: https://styleframe.dev/docs/api/recipes variant: outline --- Learn more about Recipes ::: :: ::u-page-section --- links: - label: Explore the default theme color: neutral variant: outline to: /docs/theme/design-tokens icon: i-lucide-palette reverse: true orientation: horizontal --- :::browser-frame{title="styleframe.config.ts"} ```ts import { styleframe } from 'styleframe'; import { useColorDesignTokens } from '@styleframe/theme'; import { useSpacingDesignTokens, useTypography } from '@orgname/theme-minimal'; import { useComponents } from './my-components'; const s = styleframe(); // Colors from the default theme const { colorPrimary, colorSecondary } = useColorDesignTokens(s, { primary: '#318fa0', secondary: '#ff6b6b' }); // Typography and spacing from another theme useTypography(s); useSpacingDesignTokens(s); // Plus your custom components useComponents(s); export default s; ``` ::: #title Compose Design Systems in Minutes #description Use styleframe's native composability to construct your Design System out of existing parts. Plug and play composables, variables, selectors, variants, and utilities. #features :::u-page-feature --- icon: i-lucide-infinity --- #title Infinitely [Customizable]{.text-primary} #description Make your Design System your own. Use the default theme as a starting point and customize it to fit your needs. ::: :::u-page-feature --- icon: i-lucide-blend --- #title [Mix and Match]{.text-primary} Composables #description Colors from one theme, typography from another. Styleframe lets you combine different themes seamlessly. ::: :: ::u-page-section --- links: - label: Learn about themes color: neutral variant: outline to: /docs/api/themes icon: i-lucide-sun-moon orientation: horizontal --- :::tabs ::::tabs-item{.my-5 icon="i-lucide-settings" label="Configuration"} :::::browser-frame{title="styleframe.config.ts"} ```ts import { merge } from 'styleframe'; import lightTheme from './light.theme'; import darkTheme from './dark.theme'; export default merge(lightTheme, darkTheme); ``` ::::: :::: ::::tabs-item{.my-5 icon="i-lucide-sun" label="Light Theme"} :::::browser-frame{title="light.theme.ts"} ```ts import { styleframe } from 'styleframe'; const s = styleframe(); const { variable } = s; export const colorPrimary = variable('color-primary', '#007bff'); export default s; ``` ::::: :::: ::::tabs-item{.my-5 icon="i-lucide-moon" label="Dark Theme"} :::::browser-frame{title="dark.theme.ts"} ```ts import { styleframe } from 'styleframe'; import { colorPrimary } from './light.theme'; const s = styleframe(); const { theme } = s; theme('dark', ({ variable }) => { variable(colorPrimary, '#0056b3'); }); export default s; ``` ::::: :::: ::: #title Dark and Light Themes #description Easily create and manage themes for your design system using styleframe's native theming capabilities. #features :::u-page-feature --- icon: i-lucide-square-code target: _blank to: https://styleframe.dev --- #title [Intuitive]{.text-primary} API #description Writing CSS for different themes is as easy as defining a variable. No need to remember complex syntax or class names. ::: :::u-page-feature --- icon: i-lucide-blend target: _blank to: https://styleframe.dev --- #title [Mix and Match]{.text-primary} Themes #description Colors from one theme, typography from another. Styleframe lets you combine different themes seamlessly. ::: :: ::u-page-section --- class: border-t border-default orientation: horizontal --- :::browser-frame{title="Component"} ```html
``` ::: #title Write Markup, [Skip the CSS]{.text-primary} #description Our Utility Scanner is like Tailwind JIT, but type-safe and built on your own design system. Write utility classes directly in your markup - the scanner detects them and generates only the CSS you actually use at build time. Zero waste. #features :::u-page-feature --- icon: i-lucide-zap --- #title [Automatic]{.text-primary} Detection & Generation #description Use utility classes in your markup without pre-defining every value. The scanner matches class names against registered factories, resolves design tokens, and generates the CSS. ::: :::u-page-feature --- icon: i-lucide-heart-handshake --- #title [Framework]{.text-primary} Agnostic #description Built-in extractors for HTML, Vue, React, Svelte, Astro, MDX, and more. Add custom extractors for any file type. ::: #links :::u-button --- color: neutral icon: i-lucide-view to: https://styleframe.dev/scanner variant: outline --- Learn more about the Scanner ::: :: ::u-page-section --- reverse: true class: border-t border-default orientation: horizontal --- ![Styleframe - Import Design Tokens into Figma](https://styleframe.dev/assets/images/figma-import.png) #title Sync Design Tokens with [Figma]{.text-primary} #description Export your Styleframe design tokens to the W3C DTCG format and import them into Figma. Keep your code and design files in perfect sync with full multi-mode support for light and dark themes. #features :::u-page-feature --- icon: i-lucide-arrow-left-right --- #title [Bidirectional]{.text-primary} Sync #description Import tokens into Figma or export Figma Variables back to JSON. Both directions preserve structure, aliases, and semantics. ::: :::u-page-feature --- icon: i-lucide-sun-moon --- #title [Multi-Mode]{.text-primary} Support #description Light, dark, and custom themes are preserved as Figma modes. Your theme structure stays intact across every sync. ::: #links :::u-button --- color: neutral icon: i-lucide-figma to: https://styleframe.dev/figma variant: outline --- Learn more about the Figma Plugin ::: :: ::u-page-section --- class: border-t border-b border-default headline: Coming Soon orientation: horizontal --- :video{.rounded autoplay loop poster="/assets/images/styleframe-ai.webp" src="https://styleframe.dev/assets/video/styleframe-ai.mp4"} #title AI that Writes Type-safe Composable CSS #description Use styleframe for Agents. Choose from a variety of AI agents and start delegating work, from code generation to other technical tasks. #features :::u-page-feature --- icon: i-lucide-image-up target: _blank to: https://styleframe.dev --- #title Styleframe [MCP]{.text-primary} #description Connect styleframe to your favorite tools including Cursor, Claude, ChatGPT, and more. ::: :::u-page-feature --- icon: i-lucide-bot target: _blank to: https://styleframe.dev --- #title [Useful AI]{.text-primary} natively built in #description Styleframe uses the latest language models to power AI workflows that build your Design System for you. ::: #links :subscribe-modal{cta="Join waitlist for styleframe AI" group="ai" title="Join waitlist for styleframe AI"} :: :fluid-responsive-design-demo # License ::u-page-hero #title # Styleframe Pro License Agreement #description 30 September 2025 :: ::u-container{.prose-container} ## 1. Introduction ### 1.1. Agreement Parties Pixevil Creative Web SRL, a limited liability company (**"*the Company*", "*Styleframe*", "*styleframe*", "*we*", "*us*", and "*our*"**) based in Romania, and the organization or individual who has purchased or is presently purchasing a *Styleframe Pro* license through the *Online Store* at [styleframe.dev](https://styleframe.dev){rel=""nofollow""} ("*the Customer*", sometimes with *Styleframe*, the "*parties*") agree: ### 1.2. Agreement Scope and Products *Styleframe* is a Software Development company that develops and licenses the following software products: - *Styleframe Community*, an Open Source TypeScript Library, licensed under [MIT License](https://github.com/styleframe-dev/styleframe/blob/main/LICENSE){rel=""nofollow""}, published at [github.com/styleframe-dev/styleframe](https://github.com/styleframe-dev/styleframe){rel=""nofollow""} and [styleframe.dev](https://styleframe.dev){rel=""nofollow""} - *Styleframe Pro*, an extension of *Styleframe Community*, containing additional enterprise software, licensed under the terms of this agreement, published as a separate NPM package as [@styleframe/pro](https://www.npmjs.com/package/@styleframe/pro){rel=""nofollow""} - other related software, published at [github.com/styleframe-dev](https://github.com/styleframe-dev){rel=""nofollow""} and [styleframe.dev](https://styleframe.dev){rel=""nofollow""}, typically released as open-source software under the MIT License. You can find the license information for each software in the **LICENSE** file in the root of the open-source software repository. ### 1.3. Effective Date This License Agreement is effective as of 30 September 2025. Last Updated: 30 September 2025 ## 2. Definitions For the purpose of this License Agreement (**"*License*", "*Agreement*"**), the following definitions apply: - **"The Company", "*Styleframe*", "*We*", "*Us*", "*Our*"** refer to Pixevil Creative Web SRL, the company that develops and licenses *Styleframe Pro* - **"The Customer", "*You*", "*Your*"** refer to the individual or entity that has purchased or is presently purchasing a *Styleframe Pro* license through the *Online Store* at [styleframe.dev](https://styleframe.dev){rel=""nofollow""} - **"*Projects*"** are the software applications and other works that *Team Members* create using *Styleframe Pro* - **"*Team Members*"** are *the Customer*'s employees, contractors, software developers, and other personnel who *the Customer* appoints to use *Styleframe Pro* under this agreement. *The Customer* is also considered a *Team Member* - **"*Embed*"** means to include *Styleframe Pro* in *Projects* in a way that makes *Styleframe Pro* a part of those *Projects* - **"*License*"** is the permission this agreement gives *the Customer* to use *Styleframe Pro* - **"*Payment*"** is the fee *the Customer* owes under this agreement - **"*Online Store*"** is the online store operated by *Styleframe* at [styleframe.dev](https://styleframe.dev){rel=""nofollow""} - **"*NPM Registry*"** is the NPM Registry operated by *npm, Inc.* at [npmjs.com](https://npmjs.com){rel=""nofollow""} ## 3. License ### 3.1. License Grant In exchange for the license fee *the Customer* owes under *Payment*, *Styleframe* grants *the Customer* a *License*, under all the copyrights and any patent rights *Styleframe* can license during the term of this agreement, to use *Styleframe Pro* as described in [What the Customer May Do](https://styleframe.dev/#what-the-customer-may-do), [What *Team Members* May Do](https://styleframe.dev/#what-team-members-may-do), and [What *Team Members* May Not Do](https://styleframe.dev/#what-team-members-may-not-do). ### 3.2. Scope and Limitations The *License* granted under this agreement is in addition to, and separate from, *Styleframe*'s public licenses for *Styleframe Community*. This *License* agreement and the public licenses for *Styleframe Community* will be read separately, as independent legal documents. ### 3.3. Development Mode Exception Notwithstanding the license fee requirements in Section 3.1, *Styleframe* grants a limited, non-exclusive, non-transferable license to use *Styleframe Pro* in **development environments only**, free of charge, subject to the following conditions: - **Development Only**: This free license applies exclusively to local development, testing, and staging environments. "Development environment" means any environment not accessible to end users or the general public. - **Production Requires License**: Deploying, hosting, or making *Styleframe Pro* accessible in production environments, or any environment accessible to end users or the general public, requires a valid paid *License* as described in Section 3.1. - **No Distribution**: The development mode exception does not grant any rights to distribute, sublicense, or share *Styleframe Pro* with non-*Team Members*. - **Watermark/Warnings**: *Styleframe Pro* may display development mode indicators, watermarks, or console warnings when used without a valid production license key. ## 4. Rights and Obligations ### 4.1. What *the Customer* May Do #### 4.1.1. Manage *Team Members* *The Customer* is granted the flexibility to manage their team structure dynamically. Specifically, *the Customer* can: - **Appoint New *Team Members***: At any time, *the Customer* may invite new individuals to join as *Team Members*, granting them access to *Styleframe Pro* under the terms of this agreement. - **Remove *Team Members***: *The Customer* has the right to revoke any individual's *Team Member* status. Prior to removal, *the Customer* must ensure the individual ceases use of *Styleframe Pro* and deletes any installations or copies of *Styleframe Pro* from their devices. Adjustments to *the Customer*'s invoice, reflecting the revised *Team Member* count, will be processed promptly to ensure accurate billing. #### 4.1.2. Download, Backup, and Share with *Team Members* - **Download**: *The Customer* may download the latest version of *Styleframe Pro* from the *Online Store* or the *NPM Registry* at any time - **Backup**: Creating backup copies of *Styleframe Pro* for security and operational continuity is encouraged - **Share**: *The Customer* is permitted to share copies of *Styleframe Pro* with *Team Members*, facilitating collaboration and development within the organization ### 4.2. What *Team Members* May Do *Team Members* are authorized to embed *Styleframe Pro* in projects, including those intended for commercial sale, under the following conditions: #### 4.2.1. Copy, Change, and Share with Other *Team Members* - **Download**: *Team Members* may download the latest version of *Styleframe Pro* from the *Online Store* or the Styleframe *NPM Registry* at any time - **Copy**: *Team Members* are allowed to make copies of *Styleframe Pro* for development and backup purposes - **Modify**: Making modifications to *Styleframe Pro* components to better suit project needs is permitted - **Share**: Sharing these modifications or unmodified copies of *Styleframe Pro* with other *Team Members* enhances collaborative development efforts #### 4.2.2. *Embed* in *Projects* *Team Members* are empowered to *Embed* *Styleframe Pro* in various projects, including but not limited to: - **Websites and Software Applications**: Utilizing *Styleframe Pro* to develop and publish websites, web applications, and software applications is encouraged. The embedded *Styleframe Pro* components can be modified or used as-is. **Active License Requirement**: This permission is strictly limited to the duration for which the License remains valid and has not been terminated. #### 4.2.3. Pass on Permission to Use *Projects* *Team Members* can grant third parties permission to use, copy, publicly display, and run projects incorporating *Styleframe Pro*. This permission is limited to the context of the *Project* and does not extend to standalone use or modification of *Styleframe Pro* components. #### 4.2.4. Use *Styleframe Pro* Installing and using *Styleframe Pro* on personal or company computers for development, testing, and *Project* implementation is permitted within *the Customer*'s *License* scope. #### 4.2.5. Commercial Distribution Team Members may use Styleframe Pro in the development and commercial distribution of websites, web applications, and software applications, provided that such distribution is compliant with the terms of this license agreement. **License Requirement for End Users**: Before distributing a *Project* that includes *Styleframe Pro*, *the Customer* must ensure that either: - *The Customer* purchases a special *Styleframe Pro* *Builder License* for commercial distribution, paid annually. - *The Customer* maintains a valid *Styleframe Pro* *License* covering the use of *Styleframe Pro* within the project being sold, or - *The end customer* purchasing the *Project* acquires their own valid *Styleframe Pro* *License* prior to or upon purchase. This provision allows for the flexibility needed to incorporate *Styleframe Pro* into various commercial endeavors while ensuring that the necessary licensing requirements are met. ### 4.3. What *Team Members* May Not Do #### 4.3.1. Distribute to Non-*Team Members* Distributing standalone copies of *Styleframe Pro* outside the organization, whether modified or unmodified, is strictly prohibited. This ensures that *Styleframe Pro*'s value remains within licensed entities, protecting its intellectual property and encouraging fair use. #### 4.3.2. Pass on Permission to Make Changes or Embed *Team Members* cannot authorize non-*Team Members* to modify *Styleframe Pro* or *Embed* it in new *Projects*. This restriction is crucial for maintaining control over the distribution and use of *Styleframe Pro*, ensuring that any third-party wishing to utilize *Styleframe Pro* directly obtains a *License*, thereby adhering to the software's licensing terms. #### 4.3.3. Bypass End User Licensing It is prohibited for *Team Members* to bypass the licensing requirements by distributing *Styleframe Pro* embedded in *Projects* without ensuring that the end user either: - Is covered under *the Customer*'s valid *Styleframe Pro* *License*, or - Has obtained their own valid *Styleframe Pro* *License*. #### 4.3.4. Continue Use After *License* Expiration or Termination - **Use and Storage**: *Team Members* may not continue to use or keep any copies *Styleframe Pro* upon the expiration or termination of the *License* agreement. This includes any integration of *Styleframe Pro* within *Projects* that are ongoing or in development. - **Hosting and Distribution**: After the expiration or termination of the *License* agreement, hosting projects using *Styleframe Pro* on any platforms or repositories is expressly prohibited. This ensures that all instances of *Styleframe Pro* are removed from circulation outside of a valid licensing period. ## 5. Software Availability, Updates and Support ## 5.1. Access to Downloads While this agreement continues, *Styleframe* agrees to make the latest versions of *Styleframe Pro* available to download via the *Online Store* and the *Styleframe* *NPM Registry*. ### 5.2. Updates Policy *Styleframe* is committed to continuously improving *Styleframe Pro* through regular software updates and upgrades. These Updates may include, but are not limited to, templates, new components, bug fixes, security patches, new features, and performance enhancements. This agreement covers: - currently available *Styleframe Pro* - any new *Styleframe Pro* that *Styleframe* releases during the term of this agreement #### 5.2.1. After this Agreement Ends When this agreement ends, *the Customer*'s *License* is no longer entitled to [Updates](https://styleframe.dev/#_52-updates). *The Customer*'s *License* will not cover new versions released after this agreement ends. ### 5.3. Support *Styleframe* commits to providing reasonable support services to *the Customer* for *Styleframe Pro* through email, documentation, and other digital channels. This includes assistance with installation, troubleshooting, and guidance on best practices for using *Styleframe Pro*. *Styleframe* will endeavor to respond to support inquiries within a reasonable timeframe, acknowledging that response times may vary depending on the complexity of the inquiry and current support volumes. ## 6. Financial Terms ### 6.1. Payment Obligations *The Customer* agrees to pay the license fee for *Styleframe Pro* specified via the *Online Store* at the time Customer entered this agreement, using a payment method accepted by the *Online Store*. ### 6.2. Refund Policy *The Customer* has the option to terminate the agreement early, subject to a full refund if terminated within 14 days. ## 7. Term and Termination This agreement will continue for the term specified via the *Online Store*. This agreement will automatically renew at the end of the specified term unless terminated by *the Customer* through the *Online Store*. *Styleframe* also reserves the right to offer renewal terms and conditions different from those in the initial agreement, which *the Customer* may accept or decline. ## 8. Security and Privacy *The Customer* agrees to implement reasonable security measures to protect *Styleframe Pro* license keys and *Online Store* access credentials against unauthorized use, disclosure, or access. This includes, but is not limited to, secure storage of keys and credentials, limiting access to authorized personnel, and using encryption where applicable. In the event of suspected or actual unauthorized use or disclosure, *the Customer* must promptly notify *Styleframe* to allow for timely mitigative actions. ## 9. Compliance and Enforcement ### 9.1 Compliance with Agreement Terms If *Styleframe* has reasonable grounds to believe that *the Customer* or any of their *Team Members* has breached this agreement, *Styleframe* reserves the right to initiate a fair and transparent investigation into the alleged breach. Upon confirmation of a breach, *Styleframe* may, at its discretion, terminate this agreement and/or restrict *the Customer*'s ability to download *Styleframe Pro* from the *Online Store* and *NPM Registry*. ### 9.2. Breach and Remedies *Styleframe* agrees to send notice to the e-mail address *the Customer* provided via the *Online Store* promptly after terminating this agreement or restricting access. Where possible, *Styleframe* will provide *the Customer* with an opportunity to remedy the breach within a specified period before taking further action. These abilities do not limit *Styleframe*'s ability to enforce this agreement in other ways, such as by taking legal action. ## 10. Legal and Warranty ### 10.1. Guarantee *Styleframe* guarantees that *the Company* has all legal rights needed to license *Styleframe Pro* under this agreement. ### 10.2. Disclaimer *Styleframe* makes only the guarantee in [Guarantee](https://styleframe.dev/#_101-guarantee). Otherwise, *the Company* provides *Styleframe Pro* entirely as is, without any warranty at all. THE TERMS SET FORTH HEREIN ARE EXCLUSIVE AND IN LIEU OF ALL OTHER EXPRESS AND IMPLIED WARRANTIES AND CONDITIONS WHATSOEVER, WHETHER STATUTORY, COMMONLAW, OR OTHERWISE, INCLUDING BUT NOT LIMITED TO IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR PARTICULAR PURPOSE AND SATISFACTORY QUALITY. CUSTOMER EXPRESSLY WAIVES ANY RIGHTS THAT IT MIGHT OTHERWISE HAVE. ### 10.3. Limitation of Damages If *the Customer* takes legal action against *Styleframe* related to *Styleframe Pro*, under contract law, tort law, or any other kind of law, *the Customer*'s damages will be capped at the amount of fees *the Customer* actually paid *Styleframe* under this agreement. Under no circumstance shall *the Customer* be entitled to punitive, exemplary, consequential, or indirect damages. If *the Company* takes legal action against *the Customer* related to *Styleframe Pro*, under contract law, tort law, or any other kind of law, *Styleframe* shall not be entitled to receive punitive, exemplary, consequential, or indirect damages. ## 11. General Contractual Provisions ### 11.1. Entire Agreement These are the final, complete, and only expression of our agreement about *Styleframe Pro*. ### 11.2. Enforcement by the Parties Only *the Customer* and *Styleframe* can enforce rights under this agreement. ### 11.3. Amendment and Modification We will change or add to the terms of this agreement only by cosigning written amendments. ### 11.4. Assignment *The Customer* may not assign any right or license under this agreement. The Company may assign its rights and obligations under this agreement, as a whole, to a new legal entity created to change its jurisdiction or legal form of organization, or to an entity that acquires *Styleframe* assets related to *Styleframe Pro* or enough securities to control *Styleframe*'s management. Any attempt to assign against the terms of this agreement will have no legal effect. ### 11.5. Governing Law and Dispute Resolution This agreement is governed by the laws of Romania, without regard to its conflict of law principles. Any disputes arising from or related to this agreement shall be resolved through mediation prior to seeking arbitration or litigation. Both parties agree to engage in good faith negotiations to settle any dispute before resorting to arbitration, with arbitration to be conducted in Romania under the rules of the Romanian Arbitration Association. ### 11.6. Integration with Terms of Service This agreement is also subject to the [Terms of Service](https://styleframe.dev/terms) between the parties. The Terms of Service, available on the [styleframe.dev](https://styleframe.dev){rel=""nofollow""} website, are incorporated into this agreement by reference as if fully restated herein. This agreement and the Terms of Service shall be read and interpreted together. ## 12. Acceptance This License Agreement ("Agreement") is entered into and becomes effective between *Styleframe*, *the Customer*, and all *Team Members*, upon the earliest of the following acts ("Acceptance") by the Customer: ### 12.1. Purchasing a License By completing the purchase of an *Styleframe Pro* *License* through the *Online Store* at [styleframe.dev](https://styleframe.dev){rel=""nofollow""}, *the Customer* acknowledges that they have read, understand, and agree to be bound by the terms and conditions of this *Agreement*. ### 12.2. Using Styleframe Pro Installation, download, access, or use of *Styleframe Pro* software by *the Customer* or any of the *Team Members* constitutes acceptance of this Agreement and its terms. *The Customer* agrees that such use is governed by the terms of this *Agreement*. ### 12.3. Electronic or Written Agreement By clicking "Accept", "Agree" or a similar button or checkbox linked to this Agreement in the *Online Store*, or by signing this *Agreement* in a physical or electronic format, *the Customer* expressly acknowledges and agrees to the terms herein. ## 13. Contact Us If you have any questions about the *Styleframe Pro License Agreement*, please contact us at . Pixevil Creative Web SRL :br VAT RO 36240950 :br Romania :br Dumbravita, Timis 307160 :br Tudor Vladimirescu 208A :br :: # Pricing ::u-page-hero :::u-card :community-pricing-plan{.mb-8} :pro-pricing-plans :pro-free-in-development{.mt-8} ::: #title Start using styleframe for [free]{.text-primary} #description On top of all the core features and open source composables from styleframe, **styleframe Pro** gives you access to premium composables to create beautiful & responsive Design Systems in minutes. :: ::u-page-section :::card ### General ::::accordion{.mt-0} :::::accordion-item --- icon: i-lucide-circle-help label: What is the difference between styleframe and styleframe Pro? --- Styleframe Pro is a **collection of premium composables** built on top of styleframe. It includes advanced features designed ot help you build web applications faster. ::::: :::::accordion-item --- icon: i-lucide-circle-help label: What does "Unlimited minor & patch updates" include? --- We add new composables and improvements to styleframe Pro as we get new ideas and feedback, you will receive these updates for the major version you purchased. Your license key will work forever for the major version you purchased. We may release a major version including more advanced components and features in the future, and you will be able to upgrade to this version with a generous discount. ::::: :::::accordion-item --- icon: i-lucide-circle-help label: What does "Lifetime access" mean exactly? --- Buying a styleframe Pro license is a **one-time purchase, with no recurring subscription** . When you purchase a styleframe Pro license, you get access to everything in the current major version of styleframe Pro forever. ::::: :::::accordion-item --- icon: i-lucide-circle-help label: Do you have a free trial? --- We have something much better than a free trial, you can use styleframe Pro for **free in development mode** . Once you are ready to deploy your application, you can purchase a license. ::::: :::::accordion-item --- icon: i-lucide-circle-help label: Do you offer discounts for students or non-profits? --- Yes, we offer a **50% discount** for students and non-profits using styleframe Pro purely for educational purposes. Contact us at with your details and we'll send you a discount code. ::::: :::: ::: :::card ### License ::::accordion :::::accordion-item --- icon: i-lucide-circle-help label: Do I need a license for each project I work on? --- One license, unlimited projects. With Styleframe Pro, you can build as many sites as you want without purchasing additional licenses. Use it for all your client work, personal projects, and SaaS applications — as long as they comply with our license terms. No per-project fees, no hidden costs. [Read our license](https://styleframe.dev/license) for full details and examples. ::::: :::::accordion-item --- icon: i-lucide-circle-help label: Can I use styleframe Pro for client projects? --- Yes! Styleframe Pro is perfect for client work: - **Single client projects**: Use your license to build custom websites - **Multi-client templates**: Each client needs their own license Build with confidence knowing you're properly licensed. [Read our license](https://styleframe.dev/license) for full details and examples. ::::: :::::accordion-item --- icon: i-lucide-circle-help label: Can I use styleframe Pro for my own commercial projects? --- Absolutely! Your license covers unlimited projects — from public websites to paid SaaS applications. The only restriction: you can't create website builders or tools that let users generate their own sites using Styleframe Pro components. Please contact for more information about a Builder License. Everything else is fair game. [Read our license](https://styleframe.dev/license) for full details and examples. ::::: :::::accordion-item --- icon: i-lucide-circle-help label: Can I use styleframe Pro for Open Source projects? --- Yes, you can use styleframe Pro for your open source projects as well as your commercial projects as long as you don't sell styleframe Pro as a product and you don't share your license key. [Read our license](https://styleframe.dev/license) for full details and examples. ::::: :::::accordion-item --- icon: i-lucide-circle-help label: Can I sell templates/themes I build with styleframe Pro? --- Yes, you can use styleframe Pro to create derivative products like themes, UI kits, page builders, or anything else where you would be repackaging and redistributing our components or templates for someone else to use to build their own sites, but this will require a special Builder License. Contact for more information. [Read our license](https://styleframe.dev/license) for full details and examples. ::::: :::::accordion-item --- icon: i-lucide-circle-help label: Can I purchase an organization license that includes more than 20 developers? --- For organizations needing more than 20 seats, we offer two approaches: **Multiple teams?** Purchase separate team licenses for each division. For example, one for your storefront team, another for marketing, and another for data science. **Single large team or organization?** If you're an agency or unified organization without clear divisions, contact us at for enterprise pricing. ::::: :::: ::: :::card ### Contents ::::accordion :::::accordion-item --- icon: i-lucide-circle-help label: What do I get with my license? --- Once you purchase a license, you will receive a **license key** to activate. The license key will allow you to build your project to production. ::::: :::::accordion-item --- icon: i-lucide-circle-help label: Are Figma, Sketch, or Adobe XD files included? --- Design assets for Figma, Sketch, or Adobe XD are not included. We focus exclusively on delivering production-ready code components and templates. This allows us to provide more features, better documentation, and faster updates where it matters most — in your actual codebase. ::::: :::: ::: :::card ### Support ::::accordion :::::accordion-item --- icon: i-lucide-circle-help label: Do you offer technical support? --- Styleframe Pro is designed for developers comfortable with CSS and TypeScript. We provide support for account management and licensing questions, but expect you to have the technical skills needed to integrate our tools into your projects. While **we don't provide project-specific technical support or consulting** due to the unique nature of every codebase, our comprehensive [documentation](https://styleframe.dev/docs/getting-started/introduction) and active [community forum](https://discord.com/invite/KCVwuGz44M){rel=""nofollow""} are here to help you succeed. ::::: :::::accordion-item --- icon: i-lucide-circle-help label: What is your refund policy? --- If you are not satisfied with styleframe Pro, let us know within **14 days** of your purchase at and we'll refund your money. ::::: :::: ::: #title Frequently Asked Questions #description If you can't find what you're looking for, email our support team and someone will get back to you. :: # Privacy ::u-page-hero #title # Privacy Policy :: ::u-container{.prose-container} ## 1. Introduction Safeguarding your privacy is important to us. Styleframe is committed to protecting your privacy and adhering to relevant laws and regulations regarding any personal data we may collect about you, including through our Website, [styleframe.dev](https://styleframe.dev){rel=""nofollow""}, and other platforms we manage. Styleframe encompasses the entity behind the open-source UI framework known as Styleframe, as well as its commercial version, Styleframe Pro. This Privacy Policy (**"*Policy*"**) describes how Pixevil Creative Web SRL (**"*the Company*"**, **"*Styleframe*"**, **"*styleframe*"**, **"*we*"**, **"*us*"**, or **"*our*"**) collects, protects and uses the personally identifiable information (**"*Personal Information*"**) you (**"*User*"**, **"*you*"**, or **"*your*"**) may provide through the Styleframe website ([styleframe.dev](https://styleframe.dev){rel=""nofollow""}) or in the course of purchasing any Styleframe products (collectively, **"*Website*"**). Personal information refers to any information that can be used to identify you as an individual. This includes details about you as an individual (like your name, address, and date of birth), your devices, payment information, and even your activities on a website or online service. In the event that our Website directs you to third-party websites or services, be aware that these entities have their own privacy policies. Upon navigating to third-party content, you should review their Privacy Policy to understand how they collect and handle personal data. Our Privacy Policy does not cover the activities undertaken after you leave our Website. ### 1.1. Effective Date This Privacy Policy is effective as of 30 September 2025. Last updated: 30 September 2025 ## 2. Information We Collect The information we collect is categorized into two types: “provided voluntarily” and “collected automatically.” ### 2.1. Provided Voluntarily “Provided voluntarily” information is any data you willingly submit to us when using or participating in any of our services and promotions. ### 2.2 Collected Automatically “Collected automatically” information is data that your devices send automatically while you access our products and services. ## 3. Log Data Our servers may automatically record standard data from your web browser when you visit our Website. This data may include your device’s Internet Protocol (IP) address, browser type and version, the pages you visit, the date and time of your visit, the time spent on each page, and other visit details. Additionally, we may collect data about errors you encounter while using our Website, including technical details of your device, your actions when the error occurred, and other technical information about the issue. You might or might not be notified about such errors as they happen, including their occurrence or specifics. Please be aware that while this information might not identify you personally, it could potentially be combined with other data to identify individuals. ## 4. Device Data We may collect information about your device when you use our Website or services, including: - Device Type - Operating System - Unique device identifiers The specific data collected can vary based on your device and software settings. We advise reviewing your device manufacturer or software provider's policies to understand what information they share with us. ## 5. Purchases All purchases made through the Website are processed by a third party payment processor, Polar ([polar.sh](https://polar.sh){rel=""nofollow""}). Polar may ask you for personal and/or non-personal information, such as your name, address, email address, credit card information, or other Personal Information. Polar has a Privacy Policy ({rel=""nofollow""}) that describes their collection and use of personal information. Styleframe does not control Polar or its collection or use of information. Any questions or concerns about Polar’s practices should be directed to Polar. Polar provides us with certain non-personal information relating to purchases made by visitors to the Website. The non-personal information may include details of the purchase such as the date, amount paid, and product purchased. The non-personal purchase information may be linked to the Personal Information you provide to us (typically limited to your email address, as stated above). Polar does not supply us with any of your other Personal Information such as your name, street address, or credit card information. ## 6. Personal Information We may request personal information, such as when you submit content to us or contact us, which may include: - Name - Email ## 7. Legitimate Reasons for Processing Your Personal Information We collect and use your personal information only for legitimate reasons, ensuring we gather only what is necessary to offer our services to you. ## 8. Collection and Use of Information We may collect personal information from you when you engage in activities such as: - Registering for an account - Subscribing for updates via email or social media - Accessing our content through a mobile device or web browser - Contacting us via email, social media, or similar technologies - Mentioning us on social media We collect, hold, use, and disclose information for the following purposes, and we will not further process information in a manner that is incompatible with these purposes: - Providing you with our platform’s core features and services - Personalizing your experience on our Website - Delivering products and/or services to you - Communicating with you - Enabling your access to our Website, apps, and social media platforms - Complying with legal obligations and resolving disputes - Enhancing security and fraud prevention, and ensuring that our Website and apps are safe, secure, and used in line with our terms of use We may integrate information provided voluntarily with data obtained from other trusted sources to support activities like marketing and market research, aiming to improve our Website and your experience. ## 9. Security of Your Personal Information We strive to protect your personal information with commercially acceptable means against loss, theft, and unauthorized access, disclosure, copying, use, or modification. Despite our efforts, we remind you that no electronic transmission or storage method is entirely secure. It is your responsibility to choose a password and ensure its robustness to safeguard your information within our services. This includes maintaining the confidentiality and security of any passwords linked to your personal information and accounts. ## 10. How Long We Keep Your Personal Information We retain your personal information only as long as necessary, based on the purposes outlined in this Privacy Policy. For instance, if you submit personal information for account creation, we will hold onto this data for as long as your account remains active in our system. Should your personal information become unnecessary for its initial purpose, we will either delete it or anonymize it by stripping away any identifying details. Nonetheless, there may be situations where we are required to keep your personal information to fulfill legal, accounting, or reporting requirements, or for purposes of archiving in the public interest, or for scientific, historical research, or statistical analysis. ## 11. Children’s Privacy Our services are not directed at children under the age of 13, and we do not knowingly collect personal information from children under this age. ## 12. Disclosure of Personal Information to Third Parties We may share your personal information to: - Our company’s subsidiaries or affiliates - Third-party service providers to enable them to offer their services, including (without limitation) IT service providers, data storage, hosting and server providers, error loggers, debt collectors, maintenance or problem-solving providers, marketing providers, professional advisors, and payment systems operators - Our employees, contractors, and related entities - Existing or potential agents or business partners - Credit reporting agencies, courts, tribunals, and regulatory authorities, in the event you fail to pay for goods or services we have provided to you - Courts, tribunals, regulatory authorities, and law enforcement officers, as required by law, in connection with any actual or prospective legal proceedings, or in order to establish, exercise, or defend our legal rights - Third parties, including agents or sub-contractors, who assist us in providing information, products, services, or direct marketing to you - Third parties to collect and process data - An entity that buys, or to which we transfer all or substantially all of our assets and business Third parties we currently use include: - Polar - Supabase - PostHog ## 13. International Transfers of Personal Information Your personal information may be stored or processed in Europe or other locations where our partners and third-party providers operate. The nations where your personal information is stored, processed, or transferred might not offer the same level of data protection as the country where you first supplied the data. Should we move your personal information to third parties in different countries, we will: (i) conduct such transfers following the stipulations of relevant laws; and (ii) safeguard the personal information transferred as per the guidelines of this Privacy Policy. ## 14. Your Rights and Controlling Your Personal Information **Your choice**: By providing personal information to us, you understand we will collect, hold, use, and disclose your personal information in accordance with this Privacy Policy. You do not have to provide personal information to us, however, if you do not, it may affect your use of our Website or the products and/or services offered on or through it. **Information from third parties**: If we receive personal information about you from a third party, we will protect it as set out in this Privacy Policy. If you are a third party providing personal information about somebody else, you represent and warrant that you have such person’s consent to provide the personal information to us. **Marketing permission**: If you have previously agreed to us using your personal information for direct marketing purposes, you may change your mind at any time by contacting us using the details below. **Access**: You may request details of the personal information that we hold about you. **Correction**: If you believe that any information we hold about you is inaccurate, out of date, incomplete, irrelevant, or misleading, please contact us using the details provided in this Privacy Policy. We will take reasonable steps to correct any information found to be inaccurate, incomplete, misleading, or out of date. **Non-discrimination**: We will not discriminate against you for exercising any of your rights over your personal information. Unless your personal information is required to provide you with a particular service or offer (for example providing user support), we will not deny you goods or services and/or charge you different prices or rates for goods or services, including through granting discounts or other benefits, or imposing penalties, or provide you with a different level or quality of goods or services. **Notification of data breaches**: We will comply with laws applicable to us in respect of any data breach. **Complaints**: If you believe that we have breached a relevant data protection law and wish to make a complaint, please contact us using the details below and provide us with full details of the alleged breach. We will promptly investigate your complaint and respond to you, in writing, setting out the outcome of our investigation and the steps we will take to deal with your complaint. You also have the right to contact a regulatory body or data protection authority in relation to your complaint. **Unsubscribe**: To unsubscribe from our email database or opt-out of communications (including marketing communications), please contact us using the details provided in this Privacy Policy, or opt-out using the opt-out facilities provided in the communication. We may need to request specific information from you to help us confirm your identity. ## 15. Use of Cookies We use “cookies” to collect information about you and your activity across our Website. A cookie is a small piece of data that our Website stores on your computer, and accesses each time you visit, so we can understand how you use our Website. This helps us serve you content based on preferences you have specified. Please refer to our [Cookie Policy](https://styleframe.dev/cookies) for more information. ## 16. Business Transfers If we or our assets are acquired, or in the unlikely event that we go out of business or enter bankruptcy, we would include data, including your personal information, among the assets transferred to any parties who acquire us. You acknowledge that such transfers may occur, and that any parties who acquire us may, to the extent permitted by applicable law, continue to use your personal information according to this Privacy Policy, which they will be required to assume as it is the basis for any ownership or use rights we have over such information. ## 17. Limits of Our Policy Our Website may link to external sites that are not operated by us. Please be aware that we have no control over the content and policies of those sites, and cannot accept responsibility or liability for their respective privacy practices. ## 18. Changes to This Policy At our discretion, we may change our Privacy Policy to reflect updates to our business processes, current acceptable practices, or legislative or regulatory changes. If we decide to change this Privacy Policy, we will post the changes here at the same link by which you are accessing this Privacy Policy. If the changes are significant, or if required by applicable law, we will contact you (based on your selected preferences for communications from us) and all our registered users with the new details and links to the updated or changed Privacy Policy. If required by law, we will get your permission or give you the opportunity to opt in to or opt out of, as applicable, any new uses of your personal information. ## 19. Additional Disclosures for Australian Privacy Act Compliance (AU) ### 19.1. International Transfers of Personal Information Where the disclosure of your personal information is solely subject to Australian privacy laws, you acknowledge that some third parties may not be regulated by the Privacy Act and the Australian Privacy Principles in the Privacy Act. You acknowledge that if any such third party engages in any act or practice that contravenes the Australian Privacy Principles, it would not be accountable under the Privacy Act, and you will not be able to seek redress under the Privacy Act. ## 20. Additional Disclosures for General Data Protection Regulation (GDPR) Compliance (EU) ### 20.1. Data Controller / Data Processor The GDPR distinguishes between organisations that process personal information for their own purposes (known as “data controllers”) and organizations that process personal information on behalf of other organizations (known as “data processors”). We, Styleframe, located at the address provided in our Contact Us section, are a Data Controller and/or Processor with respect to the personal information you provide to us. ### 20.2. Legal Bases for Processing Your Personal Information We will only collect and use your personal information when we have a legal right to do so. In which case, we will collect and use your personal information lawfully, fairly, and in a transparent manner. If we seek your consent to process your personal information, and you are under 16 years of age, we will seek your parent or legal guardian’s consent to process your personal information for that specific purpose. Our lawful bases depend on the services you use and how you use them. This means we only collect and use your information on the following grounds: ### 20.3. Consent From You Where you give us consent to collect and use your personal information for a specific purpose. You may withdraw your consent at any time using the facilities we provide; however this will not affect any use of your information that has already taken place. You may consent to providing your email address for the purpose of receiving marketing emails from us. While you may unsubscribe at any time, we cannot recall any email we have already sent. If you have any further enquiries about how to withdraw your consent, please feel free to enquire using the details provided in the Contact Us section of this Privacy Policy. ### 20.4. Performance of a Contract or Transaction Where you have entered into a contract or transaction with us, or in order to take preparatory steps prior to our entering into a contract or transaction with you. For example, if you contact us with an enquiry, we may require personal information such as your name and contact details in order to respond. ### 20.5. Our Legitimate Interests Where we assess it is necessary for our legitimate interests, such as for us to provide, operate, improve and communicate our services. We consider our legitimate interests to include research and development, understanding our audience, marketing and promoting our services, measures taken to operate our services efficiently, marketing analysis, and measures taken to protect our legal rights and interests. ### 20.6. Compliance with Law In some cases, we may have a legal obligation to use or keep your personal information. Such cases may include (but are not limited to) court orders, criminal investigations, government requests, and regulatory obligations. If you have any further enquiries about how we retain personal information in order to comply with the law, please feel free to enquire using the details provided in the Contact Us section of this Privacy Policy. ### 20.7. International Transfers Outside of the European Economic Area (EEA) We will ensure that any transfer of personal information from countries in the European Economic Area (EEA) to countries outside the EEA will be protected by appropriate safeguards, for example by using standard data protection clauses approved by the European Commission, or the use of binding corporate rules or other legally accepted means. ### 20.8. Your Rights and Controlling Your Personal Information **Restrict**: You have the right to request that we restrict the processing of your personal information if (i) you are concerned about the accuracy of your personal information; (ii) you believe your personal information has been unlawfully processed; (iii) you need us to maintain the personal information solely for the purpose of a legal claim; or (iv) we are in the process of considering your objection in relation to processing on the basis of legitimate interests. **Objecting to processing**: You have the right to object to processing of your personal information that is based on our legitimate interests or public interest. If this is done, we must provide compelling legitimate grounds for the processing which overrides your interests, rights, and freedoms, in order to proceed with the processing of your personal information. **Data portability**: You may have the right to request a copy of the personal information we hold about you. Where possible, we will provide this information in CSV format or other easily readable machine format. You may also have the right to request that we transfer this personal information to a third party. **Deletion**: You may have a right to request that we delete the personal information we hold about you at any time, and we will take reasonable steps to delete your personal information from our current records. If you ask us to delete your personal information, we will let you know how the deletion affects your use of our Website or products and services. There may be exceptions to this right for specific legal reasons which, if applicable, we will set out for you in response to your request. If you terminate or delete your account, we will delete your personal information within 30 days of the deletion of your account. Please be aware that search engines and similar third parties may still retain copies of your personal information that has been made public at least once, like certain profile information and public comments, even after you have deleted the information from our services or deactivated your account. ## 21. Additional Disclosures for California Compliance (US) Under California Civil Code Section 1798.83, if you live in California and your business relationship with us is mainly for personal, family, or household purposes, you may ask us about the information we release to other organizations for their marketing purposes. To make such a request, please contact us using the details provided in this Privacy Policy with “Request for California privacy information” in the subject line. You may make this type of request once every calendar year. We will email you a list of categories of personal information we revealed to other organisations for their marketing purposes in the last calendar year, along with their names and addresses. Not all personal information shared in this way is covered by Section 1798.83 of the California Civil Code. ### 21.1. Do Not Track Some browsers have a “Do Not Track” feature that lets you tell websites that you do not want to have your online activities tracked. At this time, we do not respond to browser “Do Not Track” signals. We adhere to the standards outlined in this Privacy Policy, ensuring we collect and process personal information lawfully, fairly, transparently, and with legitimate, legal reasons for doing so. ### 21.2. Cookies and Pixels At all times, you may decline cookies from our Website if your browser permits. Most browsers allow you to activate settings on your browser to refuse the setting of all or some cookies. Accordingly, your ability to limit cookies is based only on your browser’s capabilities. Please refer to the [Use of Cookies](https://styleframe.dev/#use-of-cookies) section of this Privacy Policy for more information. ### 21.2. CCPA-permitted financial incentives In accordance with your right to non-discrimination, we may offer you certain financial incentives permitted by the CCPA that can result in different prices, rates, or quality levels for the goods or services we provide. Any CCPA-permitted financial incentive we offer will reasonably relate to the value of your personal information, and we will provide written terms that describe clearly the nature of such an offer. Participation in a financial incentive program requires your prior opt-in consent, which you may revoke at any time. ### 21.3. California Notice of Collection In the past 12 months, we have collected the following categories of personal information enumerated in the California Consumer Privacy Act: - Customer records identified by personal information, such as name, contact information, and financial information For more information on information we collect, including the sources we receive information from, review the “Information We Collect” section. We collect and use these categories of personal information for the business purposes described in the “Collection and Use of Information” section, including to provide and manage our Service. ### 21.4. Right to Know and Delete If you are a California resident, you have rights to delete your personal information we collected and know certain information about our data practices in the preceding 12 months. In particular, you have the right to request the following from us: - The categories of personal information we have collected about you; - The categories of sources from which the personal information was collected; - The categories of personal information about you we disclosed for a business purpose or sold; - The categories of third parties to whom the personal information was disclosed for a business purpose or sold; - The business or commercial purpose for collecting or selling the personal information; and - The specific pieces of personal information we have collected about you. - To exercise any of these rights, please contact us using the details provided in this Privacy Policy. ### 21.5. Shine the Light If you are a California resident, in addition to the rights discussed above, you have the right to request information from us regarding the manner in which we share certain personal information as defined by California’s “Shine the Light” with third parties and affiliates for their own direct marketing purposes. To receive this information, send us a request using the contact details provided in this Privacy Policy. Requests must include “California Privacy Rights Request” in the first line of the description and include your name, street address, city, state, and ZIP code. ## 22. Acceptance of this policy You acknowledge that you have read this Privacy Policy and agree to all its terms and conditions. By using the Website you agree to be bound by this Privacy Policy. If you do not agree to abide by the terms of this Privacy Policy, you are not authorized to use or access the Website. ## 23. Contact Us If you have any questions about the *Privacy Policy*, please contact us at . Pixevil Creative Web SRL :br VAT RO 36240950 :br Romania :br Dumbravita, Timis 307160 :br Tudor Vladimirescu 208A :br :: # styleframe Pro - Premium Design System Tools ::gradient-page-hero #title Build Faster with styleframe [Pro]{.text-primary} #description Create beautiful design systems with mathematical precision. Premium composables and advanced features built on top of styleframe. #links :::u-button --- color: primary size: xl to: https://styleframe.dev/pricing trailing-icon: i-lucide-arrow-right --- Get it now ::: :: ::u-page-section --- class: border-t border-b border-default --- #title Premium Features for Professional Design Systems #features :::u-page-feature --- icon: i-lucide-sparkles target: _blank to: https://styleframe.dev/docs/theme/design-tokens/fluid-design --- #title [Premium]{.text-primary} Composables #description Advanced design system tools built on styleframe's type-safe API. Production-ready, fully tested. ::: :::u-page-feature --- icon: i-lucide-infinity --- #title [Unlimited]{.text-primary} Projects #description Use styleframe Pro on unlimited personal and commercial projects. Build websites, apps, and client work. ::: :::u-page-feature --- icon: i-lucide-shield-check --- #title [Commercial]{.text-primary} License #description Includes commercial usage rights for client projects, SaaS applications, and commercial websites. ::: :::u-page-feature --- icon: i-lucide-zap target: _blank to: https://styleframe.dev/docs/theme/design-tokens/fluid-design/viewport --- #title [Performance]{.text-primary} Optimized #description Smaller CSS bundles mean faster page loads. All of our composables are optimized for best performance. ::: :::u-page-feature --- icon: i-lucide-book-open target: _blank to: https://styleframe.dev/docs/theme/design-tokens/fluid-design --- #title [Complete]{.text-primary} Documentation #description In-depth guides, examples, and best practices. Get up and running in minutes with clear instructions. ::: :: ::u-page-section --- class: border-t border-b border-default variant: primary --- :::u-card{.max-w-5xl.mx-auto} :community-pricing-plan{.mb-8} :pro-pricing-plans :pro-free-in-development{.mt-8} ::: #title Simple, Transparent Pricing #description One-time purchase. Unlimited projects. Lifetime access. Free in development mode. :: # Utility Scanner - Automatic CSS Generation ::gradient-page-hero #title Next Generation [Utility-First]{.text-primary} Integration #description If you've used Tailwind JIT, you already know the workflow. Write utility classes in your markup, and the utility scanner generates only the CSS you use at build time. The difference: your classes are backed by type-safe factories and your own design tokens — with complete control over syntax, naming, and generation behavior. #links :::u-button --- color: primary size: xl to: https://styleframe.dev/docs/getting-started/introduction trailing-icon: i-lucide-arrow-right --- Get started ::: :::u-button --- color: neutral size: xl to: https://styleframe.dev/docs/getting-started/tooling/scanner variant: outline --- Read utility scanner docs ::: :: ::u-page-section --- class: border-t border-default --- #title Write Classes. The Utility Scanner Handles the Rest #description Use utility classes directly in your templates — no need to pre-define every value. The scanner reads your source files, detects your classes, and generates only the CSS you actually use. #features :::u-page-feature --- icon: i-lucide-pencil-off --- #title [Zero]{.text-primary} Registration #description Use utility classes directly in your markup without pre-defining every value. The scanner detects and registers them for you. ::: :::u-page-feature --- icon: i-lucide-zap --- #title [Only Used]{.text-primary} CSS #description Unused utilities produce no output. Your stylesheet contains exactly what your templates reference — nothing more, nothing less. ::: :::u-page-feature --- icon: i-lucide-brackets --- #title [Arbitrary]{.text-primary} Values #description Need a one-off value? Use bracket syntax like `_padding:[2.5rem]`. No need to register a design token for every edge case. ::: :::u-page-feature --- icon: i-lucide-layers --- #title [Stacked]{.text-primary} Modifiers #description Chain modifiers freely. `_dark:hover:color:primary` just works — detected and generated automatically. ::: :::u-page-feature --- icon: i-lucide-settings --- #title [Your Syntax]{.text-primary}, Your Rules #description Unlike fixed utility catalogs, you define the factories behind your classes. Control naming conventions, allowed values, and generation behavior — the scanner adapts to your system. ::: :::u-page-feature --- icon: i-lucide-refresh-cw --- #title [Instant]{.text-primary} HMR #description Template changes trigger incremental rescans during development. Only changed files are re-processed — your feedback loop stays instant. ::: :: ::u-page-section --- class: border-t border-default orientation: horizontal --- :::browser-frame{title="Button.vue"} ```html ``` ::: #title Write Classes in Your [Templates]{.text-primary} #description Use utility classes in your markup like you would with Tailwind. The scanner reads your source files, extracts every `_property:value` class, and generates the matching CSS at build time. #features :::u-page-feature --- icon: i-lucide-file-code --- #title [12+]{.text-primary} File Types #description Vue, React, Svelte, Astro, MDX, PHP, ERB, Twig, Blade, and plain HTML — each with a specialized extractor optimized for its syntax. ::: :::u-page-feature --- icon: i-lucide-puzzle --- #title [Custom]{.text-primary} Extractors #description Working with an unsupported file type? Write a custom extractor function in a few lines and plug it in. ::: :: ::u-page-section --- reverse: true orientation: horizontal --- :::browser-frame{title="Output CSS"} ```css /* Only the utilities your templates reference */ ._padding\:lg { padding: var(--spacing-lg); } ._background\:primary { background: var(--color-primary); } ._hover\:background\:secondary:hover { background: var(--color-secondary); } /* Arbitrary values generate literal CSS */ ._padding\:\[2\.5rem\] { padding: 2.5rem; } ``` ::: #title See Exactly What [Gets Generated]{.text-primary} #description Design tokens resolve to CSS custom properties. Arbitrary bracket values produce literal CSS. Modifiers wrap declarations in the correct pseudo-selectors and media queries. What you write is what you get — predictable, readable output. :: ::u-page-section --- class: border-t border-b border-default variant: primary --- #title Start Writing Utility Classes [Today]{.text-primary} #description Enable the scanner, register your factories, and let your templates drive your CSS output. Type-safe, JIT, and built on your own design tokens. #links :::u-button --- color: primary size: xl to: https://styleframe.dev/docs/getting-started/introduction trailing-icon: i-lucide-arrow-right --- Get started ::: :::u-button --- color: neutral size: xl to: https://styleframe.dev/docs/getting-started/tooling/scanner variant: outline --- Read utility scanner docs ::: :: # Terms ::u-page-hero #title # Terms of Service :: ::u-container{.prose-container} ## 1. Introduction ### 1.1. Agreement Parties Pixevil Creative Web SRL, a limited liability company (**"*the Company*", "*Styleframe*", "*styleframe*", "*we*", "*us*", and "*our*"**) based in Romania, and the organization or individual accessing or using the *Website* and the *Service* (**"*User*", "*you*", and "*your*"**) have entered into this agreement (**"*Agreement*"**) to define the terms and conditions under which the User may access and use the *Website* and the *Service*. ### 1.2. Agreement Scope Styleframe offers [styleframe.dev](https://styleframe.dev){rel=""nofollow""} ("Website"), including all subdomains, information, tools, and services available from this *Website* to you ("User", "you"), conditioned upon your acceptance of all terms, conditions, policies, and notices stated here. ### 1.3. Effective Date These *Terms of Service* are effective as of 30 September 2025. Last updated: 30 September 2025 ## 2. Definitions For the purpose of these Terms of *Service* (**"*Terms*"**), the following definitions apply: - **"The Company", "*Styleframe*", "*We*", "*Us*", "*Our*"** refer to Pixevil Creative Web SRL, the company that operates the *Website* and provides services to users. - **"*User*", "*You*", "*Your*"** refer to any individual or entity who accesses or uses the Website, including but not limited to browsers, vendors, customers, merchants, and contributors of content. - **"*Website*"** refers to [styleframe.dev](https://styleframe.dev){rel=""nofollow""} and all its subdomains, through which Styleframe offers information, tools, and services. - **"*Service*"** encompasses all the tools, information, products, and services available through the Website, including but not limited to Styleframe Pro software. - **"*Styleframe Pro*"** refers to the proprietary software offered by Styleframe, subject to its own License Agreement, which users may purchase or subscribe to through the *Website*. - **"*License Agreement*"** specifies the agreement that governs the use of Styleframe Pro software, detailing the rights and obligations of the user and Styleframe with respect to the software. - **"*Content*"** includes, but is not limited to, text, images, audio, video, and other materials users may encounter on the *Website* or as part of the Service, regardless of who creates such content. - **"*Personal Information*"** means any information that identifies, relates to, describes, is capable of being associated with, or could reasonably be linked, directly or indirectly, with a specific user, as further described in our Privacy Policy. - **"*Third-Party Tools*"** refers to any software, applications, or services not owned or controlled by Styleframe that may be accessible to or used by users through the *Website*. - **"*Privacy Policy*"** is the document that describes how Styleframe collects, uses, maintains, and discloses information collected from users, which is incorporated by reference into these Terms. These definitions are intended to clarify terms used throughout these Terms of *Service* and are incorporated by reference into all sections of this document. ### 3. Acceptance of Terms ### 3.1. Agreement to Terms By accessing and using the *Website* or by clicking to accept or agree to the *Terms of Service* when this option is made available to you, you accept and agree to be bound and abide by these [Terms of Service](https://styleframe.dev/terms), the [Styleframe Pro License Agreement](https://styleframe.dev/license), and our [Privacy Policy](https://styleframe.dev/privacy), incorporated herein by reference. These *Terms of Service* apply to all users of the site, including without limitation users who are browsers, vendors, customers, merchants, and/or contributors of content. Please read these *Terms of Service* carefully before accessing or using our website. By accessing or using any part of the site, you agree to be bound by these *Terms of Service*. If you do not agree to all the terms and conditions of this agreement, then you may not access the website or use any services. If these *Terms of Service* are considered an offer, acceptance is expressly limited to these *Terms of Service*. ### 3.2. Changes to the Terms of Service Any new features or tools which are added to the current store shall also be subject to the *Terms of Service*. You can review the most current version of the *Terms of Service* at any time on this page. We reserve the right to update, change or replace any part of these *Terms of Service* by posting updates and/or changes to our website. It is your responsibility to check this page periodically for changes. Your continued use of or access to the website following the posting of any changes constitutes acceptance of those changes. ## 4. Online Store Terms ### 4.1. Store and Subscription Service Our store and subscription service is operated by [LemonSqueezy](https://lemonsqueezy.com){rel=""nofollow""}. They provide us with the online e-commerce platform that allows us to sell our products and services to you. ### 4.2. Products or Services We reserve the right, but are not obligated, to limit the sales of our products or services to any person, geographic region, or jurisdiction. We may exercise this right on a case-by-case basis. We reserve the right to limit the quantities of any products or services that we offer. All descriptions of products or product pricing are subject to change at any time without notice, at the sole discretion of us. We reserve the right to discontinue any product at any time. Any offer for any product or service made on this site is void where prohibited. We do not warrant that the quality of any products, services, information, or other material purchased or obtained by you will meet your expectations, or that any errors in the *Service* will be corrected. ### 4.3. Age Requirement By agreeing to these Terms of Service, you represent that you are at least the age of majority in your state or province of residence, or that you are the age of majority in your state or province of residence and you have given us your consent to allow any of your minor dependents to use this site. ## 5. General Conditions ### 5.1. Service Provision and Risk Your use of the Service is at your sole risk. The service is provided on an "as is" and "as available" basis. ### 5.2. Legal and Authorized Use #### 5.2.1. Compliance with Laws You may not use our products for any illegal or unauthorized purpose. In your use of the Service, you must not violate any laws in your jurisdiction, including but not limited to copyright laws. #### 5.2.2. Prohibited Actions You must not transmit any worms, viruses, or any code of a destructive nature. ### 5.3. Service Refusal Rights We reserve the right to refuse service to anyone for any reason at any time. ### 5.4. Data Transmission and Security You understand that your content (not including credit card information) may be transferred unencrypted and involve transmissions over various networks; and changes to conform and adapt to technical requirements of connecting networks or devices. Credit card information is always encrypted during transfer over networks. ### 5.5. Restrictions on Use #### 5.5.1. No Unauthorized Use You agree not to reproduce, duplicate, copy, sell, resell, or exploit any portion of the Service, use of the Service, or access to the Service without the express written permission by Styleframe. #### 5.5.2. Third-Party Services You understand that Styleframe uses third-party vendors and hosting partners to provide the necessary hardware, software, networking, storage, and related technology required to run the Service. #### 5.5.3. No Service Modification You must not modify, adapt, or hack the Service or modify another website so as to falsely imply that it is associated with the Service, Styleframe, or any other Styleframe service. ### 5.6. User Conduct #### 5.6.1. Prohibited Behavior Verbal, physical, written, or other abuse (including threats of abuse or retribution) of any Styleframe customer, employee, member, or officer will result in immediate account termination. #### 5.6.2. Spam and Unsolicited Communication You must not upload, post, host, or transmit unsolicited email, SMSs, or "spam" messages. ### 5.7. Headings The headings used in this agreement are included for convenience only and will not limit or otherwise affect these Terms. ## 6. Styleframe Pro ### 6.1. License Agreement By using or purchasing *Styleframe Pro* through our Online Store, you are also agreeing to the terms of the *Styleframe Pro License Agreement*, which governs the use of Styleframe Pro software. It is important to read the *Styleframe Pro License Agreement* carefully, as it contains specific provisions that apply to your use of Styleframe Pro, in addition to these *Terms of Service*. The *Styleframe Pro License Agreement* can be found at . ### 6.2. Direct Integration and Precedence These *Terms of Service* incorporate by reference the [*Styleframe Pro License Agreement*](https://styleframe.dev/license). In the event of any conflict or inconsistency between these *Terms of Service* and the *Styleframe Pro License Agreement*, the terms of the *Styleframe Pro License Agreement* will take precedence with respect to the use of *Styleframe Pro*. ### 6.3. Conflict Resolution Should any conflict arise between the provisions of these *Terms of Service* and the *Styleframe Pro License Agreement*, the provisions of the *Styleframe Pro License Agreement* shall prevail. Users are encouraged to review both documents thoroughly to understand their rights and obligations fully. ### 6.4. Updates and Communication We will communicate any updates to the *Styleframe Pro License Agreement* through the online store and via email to our current users. Users are responsible for regularly reviewing the License Agreement for any changes that may affect their use of Styleframe Pro. ## 7. Accuracy, Completeness, and Timeliness of Information We are not responsible if information made available on this site is not accurate, complete, or current. The material on this site is provided for general information only and should not be relied upon or used as the sole basis for making decisions without consulting primary, more accurate, more complete, or more timely sources of information. Any reliance on the material on this site is at your own risk. This site may contain certain historical information. Historical information, necessarily, is not current and is provided for your reference only. We reserve the right to modify the contents of this site at any time, but we have no obligation to update any information on our site. You agree that it is your responsibility to monitor changes to our site. ## 8. Service and Prices Modifications We reserve the right to modify or discontinue the *Service* (or any part of it) without notice at any time. Prices for our products are subject to change without notice. Changes to the *Service* may also be subject to new terms in the *Styleframe Pro License Agreement*. We shall not be liable to you or to any third-party for any modification, price change, suspension, or discontinuance of the *Service*. ## 9. Billing and Account Information ### 9.1. Order Refusal Rights We reserve the right to refuse any order you place with us. We may, in our sole discretion, limit or cancel quantities purchased per person, per household, or per order. These restrictions may include orders placed by or under the same customer account, the same credit card, and/or orders that use the same billing and/or shipping address. In the event that we make a change to or cancel an order, we may attempt to notify you by contacting the e-mail and/or billing address/phone number provided at the time the order was made. We reserve the right to limit or prohibit orders that, in our sole judgment, appear to be placed by dealers, resellers, or distributors. ### 9.2. Accurate Information You agree to provide current, complete, and accurate purchase and account information for all purchases made at our store. You agree to promptly update your account and other information, including your email address and credit card numbers and expiration dates, so that we can complete your transactions and contact you as needed. ## 10. Optional Tools We may provide you with access to third-party tools over which we neither monitor nor have any control nor input. You acknowledge and agree that we provide access to such tools ”as is” and “as available” without any warranties, representations, or conditions of any kind and without any endorsement. We shall have no liability whatsoever arising from or relating to your use of optional third-party tools. The use of any optional tools offered through the site is entirely at your own risk and discretion and you should ensure that you are familiar with and approve of the terms on which tools are provided by the relevant third-party provider(s). We may also, in the future, offer new services and/or features through the website (including, the release of new tools and resources). Such new features and/or services shall also be subject to these *Terms of Service*. ## 11. Personal Information Safeguarding your privacy is important to us. Styleframe is committed to protecting your privacy and adhering to relevant laws and regulations regarding any personal data we may collect about you, including through our Website, [styleframe.dev](https://styleframe.dev){rel=""nofollow""}, and other platforms we manage. Your submission of personal information through the store is governed by our [Privacy Policy](https://styleframe.dev/privacy). ## 12. Errors, Inaccuracies, and Omissions Occasionally there may be information on our site or in the *Service* that contains typographical errors, inaccuracies, or omissions that may relate to product descriptions, pricing, promotions, offers, product shipping charges, transit times, and availability. We reserve the right to correct any errors, inaccuracies, or omissions, and to change or update information or cancel orders if any information in the *Service* or on any related website is inaccurate at any time without prior notice (including after you have submitted your order). ## 13. Prohibited Uses In addition to other prohibitions as set forth in the Terms of Service, you are prohibited from using the site or its content: (a) for any unlawful purpose; (b) to solicit others to perform or participate in any unlawful acts; (c) to violate any international, federal, provincial, or state regulations, rules, laws, or local ordinances; (d) to infringe upon or violate our intellectual property rights or the intellectual property rights of others; (e) to harass, abuse, insult, harm, defame, slander, disparage, intimidate, or discriminate ## 14. Legal and Warranty ### 14.1. Guarantee We do not guarantee, represent, or warrant that your use of our *Service* will be uninterrupted, timely, secure, or error-free. We do not warrant that the results that may be obtained from the use of the *Service* will be accurate or reliable. You agree that from time to time we may remove the *Service* for indefinite periods of time or cancel the *Service* at any time, without notice to you. You expressly agree that your use of, or inability to use, the *Service* is at your sole risk. The *Service* and all products and services delivered to you through the *Service* are (except as expressly stated by us) provided 'as is' and 'as available' for your use, without any representation, warranties, or conditions of any kind, either express or implied, including all implied warranties or conditions of merchantability, merchantable quality, fitness for a particular purpose, durability, title, and non-infringement. ### 14.2. Disclaimer *Styleframe* makes only the guarantee in [Guarantee](https://styleframe.dev/#_141-guarantee). Otherwise, *the Company* provides *Styleframe Pro* entirely as is, without any warranty at all. THE TERMS SET FORTH HEREIN ARE EXCLUSIVE AND IN LIEU OF ALL OTHER EXPRESS AND IMPLIED WARRANTIES AND CONDITIONS WHATSOEVER, WHETHER STATUTORY, COMMONLAW, OR OTHERWISE, INCLUDING BUT NOT LIMITED TO IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR PARTICULAR PURPOSE AND SATISFACTORY QUALITY. CUSTOMER EXPRESSLY WAIVES ANY RIGHTS THAT IT MIGHT OTHERWISE HAVE. ### 14.3. Limitation of Liability In no case shall Styleframe, our directors, officers, employees, affiliates, agents, contractors, interns, suppliers, service providers, or licensors be liable for any injury, loss, claim, or any direct, indirect, incidental, punitive, special, or consequential damages of any kind, including, without limitation lost profits, lost revenue, lost savings, loss of data, replacement costs, or any similar damages, whether based in contract, tort (including negligence), strict liability or otherwise, arising from your use of any of the *Service* or any products procured using the service, or for any other claim related in any way to your use of the *Service* or any product, including, but not limited to, any errors or omissions in any content, or any loss or damage of any kind incurred as a result of the use of the *Service* or any content (or product) posted, transmitted, or otherwise made available via the service, even if advised of their possibility. Because some states or jurisdictions do not allow the exclusion or the limitation of liability for consequential or incidental damages, in such states or jurisdictions, our liability shall be limited to the maximum extent permitted by law. ### 14.4. Indemnification You agree to indemnify, defend and hold harmless Styleframe and our parent, subsidiaries, affiliates, partners, officers, directors, agents, contractors, licensors, service providers, subcontractors, suppliers, interns, and employees, harmless from any claim or demand, including reasonable attorneys’ fees, made by any third-party due to or arising out of your breach of these *Terms of Service* or the documents they incorporate by reference, or your violation of any law or the rights of a third-party. ### 14.5. Severability In the event that any provision of these *Terms of Service* is determined to be unlawful, void, or unenforceable, such provision shall nonetheless be enforceable to the fullest extent permitted by applicable law, and the unenforceable portion shall be deemed to be severed from these Terms of Service, such determination shall not affect the validity and enforceability of any other remaining provisions. ## 15. Termination The obligations and liabilities of the parties incurred prior to the termination date shall survive the termination of this agreement for all purposes. These *Terms of Service* are effective unless and until terminated by either you or us. You may terminate these *Terms of Service* at any time by notifying us that you no longer wish to use our Services, or when you cease using our site. If in our sole judgment you fail, or we suspect that you have failed, to comply with any term or provision of these Terms of Service, we also may terminate this agreement at any time without notice and you will remain liable for all amounts due up to and including the date of termination; and/or accordingly may deny you access to our Services (or any part thereof). ## 16. General Contractual Provisions ### 16.1. Entire Agreement The failure of us to exercise or enforce any right or provision of these *Terms of Service* shall not constitute a waiver of such right or provision. These *Terms of Service* and any policies or operating rules posted by us on this site or in respect to The *Service* constitutes the entire agreement and understanding between you and us and govern your use of the Service, superseding any prior or contemporaneous agreements, communications and proposals, whether oral or written, between you and us (including, but not limited to, any prior versions of the Terms of Service). Any ambiguities in the interpretation of these *Terms of Service* shall not be construed against the drafting party. ### 16.2. Governing Law and Dispute Resolution These *Terms of Service* and any separate agreements whereby we provide you Services are governed by the laws of Romania, without regard to its conflict of law principles. Any disputes arising from or related to this agreement shall be resolved through mediation prior to seeking arbitration or litigation. Both parties agree to engage in good faith negotiations to settle any dispute before resorting to arbitration, with arbitration to be conducted in Romania under the rules of the Romanian Arbitration Association. ## 17. Contact Us If you have any questions about the *Terms of Service*, please contact us at . Pixevil Creative Web SRL :br VAT RO 36240950 :br Romania :br Dumbravita, Timis 307160 :br Tudor Vladimirescu 208A :br :: # Introduction Welcome to **styleframe** — the open-source tool for writing type-safe, composable, and future-proof CSS in TypeScript. Build robust, scalable Design Systems in minutes, catch style bugs before they ship, and supercharge your Front-End workflow with a developer experience you'll actually love. ## Why styleframe? - **Type-Safe CSS API**: All your styles are validated at compile time. No more typos, no more runtime surprises. - **Composable & Modular**: Mix, match, and reuse style logic using simple functions, variables, and plugins. Build your design system from ready-made parts. - **Built-in Theming**: Create light/dark modes and custom themes with zero pain—just a few lines of code. - **Framework Agnostic**: Works seamlessly with React, Vue, Svelte, Solid, Astro, and more. - **First-Class Developer Experience**: Enjoy IDE auto-complete, in-editor docs, and static analysis—right where you code. ### How does it work? Styleframe is built as a **transpiler-first system**. You write your design tokens, selectors, utilities, and recipes in TypeScript, and Styleframe tokenizes everything into an internal representation. From there, the transpiler generates **dual outputs**: - **CSS output**: variables, selectors, utilities, themes, keyframes - **TypeScript output**: typed recipe functions with full IDE autocomplete This architecture means you can have complete control over customizing how your system is output. You could even use the generated tokens to render documentation for your design system components. ### What can you build with styleframe? Styleframe is completely framework-agnostic and integrates seamlessly into any modern Front-End stack, including React, Vue, Svelte, Solid, Astro, and beyond. - **Design tokens** (colors, spacing, typography) that live in TypeScript and generate real CSS variables. - **Reusable component styles** for buttons, cards, layouts, and more. - **Runtime Recipes** for styling your components based on props. - **Custom themes** for brands, products, or just dark mode fans. - **A fully custom design system** without writing a single line of raw CSS. ## Who is styleframe for? - Front-End developers who want fewer bugs and more confidence in their code. - Teams and companies building or maintaining Design Systems. - Anyone tired of fighting CSS tools that don't scale or catch mistakes. If you're ready for a new, more reliable way to write and manage styles, styleframe is here for you. ❤️ ## Questions? Feedback? If you have questions or feedback, or just want to see what others are building, [join our community on Discord](https://discord.gg/KCVwuGz44M){rel=""nofollow""} or [open an issue on GitHub](https://github.com/styleframe-dev/styleframe/issues){rel=""nofollow""}. Styleframe is open source and built in public - we'd love for you to be part of the journey. # Installation Styleframe is designed to work seamlessly with your existing project setup. Whether you're using Vite, Nuxt, or have a custom build pipeline, we've got you covered. ## Choose Your Installation Method Select the installation guide that matches your project setup: ::card-group :::card --- icon: i-devicon-vitejs title: Vite to: https://styleframe.dev/docs/getting-started/installation/vite --- Quick setup for Vite projects with automatic configuration. Perfect for Vue, React, or vanilla JavaScript applications. ::: :::card --- icon: i-devicon-nuxt title: Nuxt to: https://styleframe.dev/docs/getting-started/installation/nuxt --- Seamless integration with Nuxt applications. Automatic module setup with zero configuration required. ::: :::card --- icon: i-lucide-wrench title: Custom Setup to: https://styleframe.dev/docs/getting-started/installation/custom --- Manual installation for custom build pipelines or frameworks. Full control over your styleframe configuration. ::: :: ## What Happens During Installation? All installation methods will: - Install `styleframe` packages as dependencies - Create a `styleframe.config.ts` configuration file - Create or update `tsconfig.json` with styleframe includes - Set up the build pipeline integration (when applicable) - Generate a virtual CSS module for importing in your project ## Need Help? Having trouble with installation? - [Join our Discord community](https://discord.gg/KCVwuGz44M){rel=""nofollow""} for real-time assistance. - [Open an issue on GitHub](https://github.com/styleframe-dev/styleframe/issues){rel=""nofollow""} for support. ## Next Steps After installation, you'll be ready to: 1. Create your first styleframe configuration 2. Define design tokens and variables 3. Build type-safe, maintainable CSS [Start building your design system →](https://styleframe.dev/docs/getting-started/guides/create-design-system-in-under-15-minutes) # Manual Vite Installation ::steps ### Install styleframe in your project Install all styleframe packages as development dependencies to your project. We've released each package separately to allow for better tree-shaking and version control. :::code-group ```bash [pnpm] pnpm install -D styleframe @styleframe/cli @styleframe/core @styleframe/loader @styleframe/plugin @styleframe/theme @styleframe/transpiler pnpm install @styleframe/runtime ``` ```bash [yarn] yarn add -D styleframe @styleframe/cli @styleframe/core @styleframe/loader @styleframe/plugin @styleframe/theme @styleframe/transpiler yarn add @styleframe/runtime ``` ```bash [npm] npm install -D styleframe @styleframe/cli @styleframe/core @styleframe/loader @styleframe/plugin @styleframe/theme @styleframe/transpiler npm install @styleframe/runtime ``` ```bash [bun] bun install -D styleframe @styleframe/cli @styleframe/core @styleframe/loader @styleframe/plugin @styleframe/theme @styleframe/transpiler bun install @styleframe/runtime ``` ::: ### Add styleframe to Vite Next, add `styleframe` to your Vite configuration file. ```ts [vite.config.ts] import { defineConfig } from 'vite'; import styleframe from 'styleframe/plugin/vite'; export default defineConfig({ plugins: [styleframe()], }); ``` ### Configure TypeScript Styleframe generates TypeScript declarations for type-safe imports. Map `virtual:styleframe` to the generated types with a `paths` entry, and include the declaration files (the `.styleframe/**/*.d.ts` glob picks up the `virtual:styleframe.css` shim): ```json [tsconfig.json] { "compilerOptions": { "moduleResolution": "bundler", "noEmit": true, "paths": { "virtual:styleframe": ["./.styleframe/styleframe.d.ts"] } }, "include": [ "styleframe.config.ts", "*.styleframe.ts", ".styleframe/**/*.d.ts" ] } ``` Add the generated directory to your `.gitignore`: ```bash [.gitignore] .styleframe/ ``` ### Import styleframe in your project Open your `main.ts` file and import the auto-generated virtual module: ```ts [main.ts] import 'virtual:styleframe.css'; ``` ### Create a styleframe theme file Create a `styleframe.config.ts` theme file in your project's root directory. ```ts [styleframe.config.ts] import { styleframe } from 'styleframe'; const s = styleframe(); const { variable, selector, ref } = s; const colorPrimary = variable('color-primary', '#007bff'); selector('body', { background: ref(colorPrimary), }); export default s; ``` ### Enjoy using styleframe Enjoy writing modern, maintainable, composable theme files using styleframe! [Create a Design System with styleframe in under 15 minutes.](https://styleframe.dev/docs/getting-started/guides/create-design-system-in-under-15-minutes) :: # Manual Nuxt Installation ::steps ### Install styleframe in your project Install all styleframe packages as development dependencies to your project. We've released each package separately to allow for better tree-shaking and version control. :::code-group ```bash [pnpm] pnpm install -D styleframe @styleframe/cli @styleframe/core @styleframe/loader @styleframe/plugin @styleframe/theme @styleframe/transpiler pnpm install @styleframe/runtime ``` ```bash [yarn] yarn add -D styleframe @styleframe/cli @styleframe/core @styleframe/loader @styleframe/plugin @styleframe/theme @styleframe/transpiler yarn add @styleframe/runtime ``` ```bash [npm] npm install -D styleframe @styleframe/cli @styleframe/core @styleframe/loader @styleframe/plugin @styleframe/theme @styleframe/transpiler npm install @styleframe/runtime ``` ```bash [bun] bun install -D styleframe @styleframe/cli @styleframe/core @styleframe/loader @styleframe/plugin @styleframe/theme @styleframe/transpiler bun install @styleframe/runtime ``` ::: ### Add styleframe to Nuxt Next, add `styleframe` to your Nuxt configuration file. ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['styleframe/plugin/nuxt'], }); ``` ### Configure TypeScript Styleframe generates TypeScript declarations for type-safe imports. The Nuxt module sets up `virtual:styleframe` automatically — just include the generated declaration files so the `virtual:styleframe.css` shim is picked up: ```json [tsconfig.json] { "compilerOptions": { "moduleResolution": "bundler", "noEmit": true }, "include": [ "styleframe.config.ts", "*.styleframe.ts", ".styleframe/**/*.d.ts" ] } ``` Add the generated directory to your `.gitignore`: ```bash [.gitignore] .styleframe/ ``` ### Import styleframe in your project Open your `app.vue` file and import the auto-generated virtual module: ```ts [app.vue] import 'virtual:styleframe.css'; ``` ### Create a styleframe theme file Create a `styleframe.config.ts` theme file in your project's root directory. ```ts [styleframe.config.ts] import { styleframe } from 'styleframe'; const s = styleframe(); const { variable, selector, ref } = s; const colorPrimary = variable('color-primary', '#007bff'); selector('body', { background: ref(colorPrimary), }); export default s; ``` ### Enjoy using styleframe Enjoy writing modern, maintainable, composable theme files using styleframe! [Create a Design System with styleframe in under 15 minutes.](https://styleframe.dev/docs/getting-started/guides/create-design-system-in-under-15-minutes) :: # Vite Installation ::steps ### Initialize styleframe in your project Use the CLI to initialize `styleframe` in your project. Make sure you have a `vite.config.ts` file in your project root. :::code-group ```bash [pnpm] pnpx styleframe init pnpm install ``` ```bash [yarn] yarn create styleframe yarn install ``` ```bash [npm] npx styleframe init npm install ``` ```bash [bun] bunx styleframe init bun install ``` ::: Using the CLI command above, it will: - Add all `styleframe` packages to your project dependencies - Create a new `styleframe.config.ts` file - Create or update `tsconfig.json` with styleframe includes - Add the `styleframe` plugin to Vite, if possible ### Import styleframe in your project Open your `main.ts` file and import the auto-generated virtual module: ```ts [main.ts] import 'virtual:styleframe.css'; ``` ### Enjoy using styleframe Enjoy writing modern, maintainable, composable theme files using styleframe! [Create a Design System with styleframe in under 15 minutes.](https://styleframe.dev/docs/getting-started/guides/create-design-system-in-under-15-minutes) :: --- ::card --- class: mt-10 icon: i-lucide-hammer title: Manual Vite Installation Instructions to: https://styleframe.dev/docs/getting-started/installation/manual/vite variant: soft --- Have a custom Vite setup and need to install styleframe manually? **Click here** . :: # Nuxt Installation ::steps ### Initialize styleframe in your project Use the CLI to initialize `styleframe` in your project. Make sure you have a `nuxt.config.ts` file in your project root. :::code-group ```bash [pnpm] pnpx styleframe init pnpm install ``` ```bash [yarn] yarn create styleframe yarn install ``` ```bash [npm] npx styleframe init npm install ``` ```bash [bun] bunx styleframe init bun install ``` ::: Using the CLI command above, it will: - Add all `styleframe` packages to your project dependencies - Create a new `styleframe.config.ts` file - Create or update `tsconfig.json` with styleframe includes - Add the `styleframe` module to Nuxt, if possible ### Import styleframe in your project Open your `app.vue` file and import the auto-generated virtual module: ```ts [app.vue] import 'virtual:styleframe.css'; ``` ### Enjoy using styleframe Enjoy writing modern, maintainable, composable theme files using styleframe! [Create a Design System with styleframe in under 15 minutes.](https://styleframe.dev/docs/getting-started/guides/create-design-system-in-under-15-minutes) :: --- ::card --- class: mt-10 icon: i-lucide-hammer title: Manual Nuxt Installation Instructions to: https://styleframe.dev/docs/getting-started/installation/manual/nuxt variant: soft --- Have a custom Nuxt setup and need to install styleframe manually? **Click here** . :: # Custom Installation ::steps ### Install styleframe in your project Install all styleframe packages as development dependencies to your project. We've released each package separately to allow for better tree-shaking and version control. :::code-group ```bash [pnpm] pnpm install -D styleframe @styleframe/cli @styleframe/core @styleframe/loader @styleframe/plugin @styleframe/theme @styleframe/transpiler pnpm install @styleframe/runtime ``` ```bash [yarn] yarn add -D styleframe @styleframe/cli @styleframe/core @styleframe/loader @styleframe/plugin @styleframe/theme @styleframe/transpiler yarn add @styleframe/runtime ``` ```bash [npm] npm install -D styleframe @styleframe/cli @styleframe/core @styleframe/loader @styleframe/plugin @styleframe/theme @styleframe/transpiler npm install @styleframe/runtime ``` ```bash [bun] bun install -D styleframe @styleframe/cli @styleframe/core @styleframe/loader @styleframe/plugin @styleframe/theme @styleframe/transpiler bun install @styleframe/runtime ``` ::: ### Create a styleframe theme file Create a `styleframe.config.ts` theme file in your project's root directory. ```ts [styleframe.config.ts] import { styleframe } from 'styleframe'; const s = styleframe(); const { variable, selector, ref } = s; const colorPrimary = variable('color-primary', '#007bff'); selector('body', { background: ref(colorPrimary), }); export default s; ``` ### Build styleframe theme files #### a. Using the CLI Use the CLI to build your theme files: ```bash styleframe build ``` #### b. Using a script ```typescript [scripts/build.ts] import { build, loadConfiguration } from "@styleframe/loader"; const instance = await loadConfiguration(); await build(instance); ``` ### Import styleframe in your project Open your `main.ts` file and import the generated css file: ```ts [main.ts] import '../styleframe/index.css'; ``` ### Enjoy using styleframe Enjoy writing modern, maintainable, composable theme files using styleframe! [Create a Design System with styleframe in under 15 minutes.](https://styleframe.dev/docs/getting-started/guides/create-design-system-in-under-15-minutes) :: # Guides ## Overview Our guides provide hands-on tutorials and real-world examples to help you master Styleframe. Whether you're building your first design system or implementing advanced patterns, these guides will walk you through best practices and common use cases. ## Available Guides Here are the guides we have written so far. We promise we will continue to add more: ::card --- icon: i-lucide-rocket title: Create a Design System with styleframe in Under 15 minutes to: https://styleframe.dev/docs/getting-started/guides/create-design-system-in-under-15-minutes --- Build your first design system with Styleframe. Learn how to set up variables, create reusable components, and implement theming. :: ::card --- icon: i-lucide-palette title: Implementing a Theme Switcher to: https://styleframe.dev/docs/getting-started/guides/theme-switcher --- Learn how to implement a dynamic theme switcher in your application using Styleframe's data-theme attribute system. :: ### Coming Soon More guides are on the way! We're working on tutorials covering: - **Dark Mode Implementation**: Build a complete dark mode system with automatic switching - **Component Library Setup**: Structure and organize a scalable component library - **Migration from CSS-in-JS**: Move your existing styled-components or emotion styles to Styleframe - **Advanced Theming**: Create multi-brand themes and user-customizable designs - **Performance Optimization**: Best practices for optimal bundle sizes and runtime performance ## Contributing Have an idea for a guide? Found something that could be explained better? We welcome contributions! ::tip **Want to contribute?** Check out our [GitHub repository](https://github.com/styleframe-dev/styleframe){rel=""nofollow""} to submit guide ideas or improvements. :: ## FAQ ::accordion :::accordion-item --- icon: i-lucide-circle-help label: How often are new guides added? --- We aim to publish new guides regularly based on community feedback and common use cases. Follow our GitHub repository or Discord for announcements. ::: :::accordion-item --- icon: i-lucide-circle-help label: Can I request a specific guide topic? --- Absolutely! Open an issue on our GitHub repository with your guide request, or discuss it with the community on Discord. ::: :::accordion-item --- icon: i-lucide-circle-help label: Are the guides suitable for beginners? --- Yes! We design our guides to be accessible to developers of all levels, with clear explanations and step-by-step instructions. ::: :::accordion-item --- icon: i-lucide-circle-help label: Do guides include downloadable code examples? --- Each guide includes complete code examples that you can copy and adapt. Some guides also link to interactive CodeSandbox demos. ::: :: # Create a Design System in Under 15 Minutes **Building a design system from scratch can take weeks.** Picking color scales, tuning typography for every viewport, wiring up dark mode, hand-rolling each component – it adds up fast. **Styleframe collapses all of that into five preset calls.** Five lines of configuration give you a complete, type-safe design token system with sensible defaults, opinionated typography, a CSS reset, \~200 utility classes, and modifier syntax for hover/focus/dark/responsive states. Then you customize what you want, plug in **23 production-ready component recipes**, and ship. ::note **What you'll build:** A full design system with branded colors (and auto-generated levels, shades, and tints), fluid typography that scales smoothly across viewports, dark mode, semantic global element styling, ready-to-use Button and Card components, plus utility classes and modifiers. All type-safe at build time. :: ## Prerequisites Before starting, make sure you have: - Node.js 18+ - A project with the Styleframe Vite plugin already configured ([Manual Vite Installation](https://styleframe.dev/docs/getting-started/installation/vite)) - Familiarity with TypeScript is helpful but not required ## Step 1: The Foundation (1 minute) Open your `styleframe.config.ts` and add the five presets that ship with the `@styleframe/theme` package. This is the canonical setup that every Styleframe app starts from. ::tabs :::tabs-item{icon="i-lucide-code" label="styleframe.config.ts"} ```ts [styleframe.config.ts] import { useDesignTokensPreset, useGlobalPreset, useModifiersPreset, useSanitizePreset, useUtilitiesPreset, } from '@styleframe/theme'; import { styleframe } from 'styleframe'; const s = styleframe(); useDesignTokensPreset(s); useSanitizePreset(s); useGlobalPreset(s); useUtilitiesPreset(s); useModifiersPreset(s); export default s; ``` ::: :::tabs-item{icon="i-lucide-list-checks" label="What you get"} - A complete CSS variable system (colors, spacing, typography, shadows, breakpoints, easings, z-index) - Fluid typography that scales smoothly from mobile to desktop, **on by default** - Cross-browser CSS normalization (sanitize.css) - Opinionated styling for ``, `

`–`

`, ``, `

`, ``, `

`, `
    `, `
    `, and 11 more elements
  - Around 200 utility classes (`_padding:md`, `_color:primary`, `_display:flex`, …)
  - Modifier syntax for state and responsive variants (`_hover:`, `_focus-visible:`, `_dark:`, `_md:`, …)
  :::
::

Each preset has a single responsibility:

| Preset                  | What it does                                                                                                                                                     |
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `useDesignTokensPreset` | Generates every CSS variable: colors (with auto-levels/shades/tints), spacing, fluid font sizes, line heights, shadows, breakpoints, easings, z-index, and more. |
| `useSanitizePreset`     | Applies sanitize.css normalization: box-sizing, margin/padding resets, form-element consistency, system font fallbacks, and `prefers-reduced-motion` handling.   |
| `useGlobalPreset`       | Wires up sensible defaults for global HTML elements so plain markup looks designed without any extra classes.                                                    |
| `useUtilitiesPreset`    | Registers utility class generators for nearly every CSS property: layout, spacing, typography, colors, borders, transforms, transitions, and more.               |
| `useModifiersPreset`    | Adds pseudo-class, pseudo-element, ARIA, media-query, and directional modifiers so utilities can be combined into stateful and responsive variants.              |

::tip
**You can stop here.**

 Even with zero customization, your app already has a CSS reset, a full token system, semantic typography, and a deep utility library. Every following step is opt-in customization.
::

## Step 2: Brand It (2 minutes)

Pass your brand colors to `useDesignTokensPreset`. Styleframe automatically generates eleven lightness levels (`50`–`950`), four darker **shades** for hover/active states, and four lighter **tints** for soft backgrounds, using OKLCH for perceptually uniform output.

::tabs
  :::tabs-item{icon="i-lucide-code" label="styleframe.config.ts"}
  ```ts [styleframe.config.ts]
  import { useDesignTokensPreset /* ... */ } from '@styleframe/theme';
  import { styleframe } from 'styleframe';

  const s = styleframe();

  useDesignTokensPreset(s, {
      colors: {
          primary: '#0066ff',
          secondary: '#7c3aed',
          success: '#10b981',
          warning: '#f59e0b',
          error: '#ef4444',
          info: '#06b6d4',
      },
  });

  // ... other presets
  export default s;
  ```
  :::

  :::tabs-item{icon="i-lucide-file-input" label="Generated CSS (excerpt)"}
  ```css [styleframe/index.css]
  :root {
      --color--primary: #0066ff;
      --color--primary-50:  oklch(from var(--color--primary) 0.97 c h);
      --color--primary-100: oklch(from var(--color--primary) 0.93 c h);
      /* ... all the way through 950 */
      --color--primary-shade-50:  oklch(from var(--color--primary) calc(l - 0.05) c h);
      --color--primary-shade-100: oklch(from var(--color--primary) calc(l - 0.10) c h);
      --color--primary-tint-50:   oklch(from var(--color--primary) calc(l + 0.05) c h);
      --color--primary-tint-100:  oklch(from var(--color--primary) calc(l + 0.10) c h);
      /* same for secondary, success, warning, error, info */
  }
  ```
  :::
::

Use these in your CSS and components:

- **Levels**: full lightness ramp for backgrounds, text, and borders. (`primary-50`, `primary-100`, `primary-200`, etc.)
- **Shades**: subtle darken steps, perfect for `:hover` and `:active` states. (`primary-shade-50`, `primary-shade-100`, `primary-shade-150`)
- **Tints**: subtle lighten steps, perfect for soft backgrounds and badges. (`primary-tint-50`, `primary-tint-100`, `primary-tint-150`)

::tip
**Add without replacing.** Custom values merge with defaults by default, so just list the colors you want to add:

```ts
useDesignTokensPreset(s, {
    colors: { brand: '#ff6600' },
});
// All default colors plus `brand`
```

Pass `meta: { merge: false }` if you want your custom record to replace the default palette entirely.

[Learn more about color generation options →](https://styleframe.dev/docs/theme/design-tokens/preset#color-generation-options)
::

::note
**Why OKLCH?**

 Unlike HSL, OKLCH maintains perceptual uniformity. Lightness 

`0.5`

 actually looks halfway between black and white across every hue, so color ramps look consistent and contrast scales predictably.
::

#### Tune Typography

The preset enables **fluid typography** by default: every `font-size.*` token interpolates smoothly between a min size at the smallest viewport and a max size at the largest. No media queries required. Type just *grows*.

You can override the viewport range, the modular scale ratios, and the base font size:

```ts [styleframe.config.ts]
useDesignTokensPreset(s, {
    colors: { /* ... */ },

    // Custom font stack
    fontFamily: {
        default: '@font-family.base',
        base: '"Inter", -apple-system, BlinkMacSystemFont, sans-serif',
        mono: '"JetBrains Mono", SFMono-Regular, Menlo, monospace',
    },

    // Tune the fluid viewport range and modular-scale ratios.
    fluidViewport: { minWidth: 375, maxWidth: 1440 },
    fluidScale: { min: '@scale.minor-third', max: '@scale.major-third' },

    // Retarget the fluid base (defaults: min 16 / max 18).
    fontSize: { 
        min: 16, 
        max: 20,
    },
});
```

[Learn more about fluid typography →](https://styleframe.dev/docs/theme/design-tokens/preset#fluid-typography)

## Step 3: Polish the Globals (1 minute)

`useGlobalPreset` styles native HTML elements so plain markup (from a CMS, an email, a third-party widget) already looks designed.

```ts [styleframe.config.ts]
useGlobalPreset(s, {
    body: {
        color: '@color.text',
        background: '@color.background',
        lineHeight: '@line-height.normal',
    },
    heading: {
        fontWeight: '@font-weight.bold',
        lineHeight: '@line-height.tight',
        sizes: {
            h1: '@font-size.4xl',
            h2: '@font-size.3xl',
            h3: '@font-size.2xl',
            h4: '@font-size.xl',
            h5: '@font-size.lg',
            h6: '@font-size.md',
        },
    },
    link: {
        color: '@color.primary',
        textDecoration: 'none',
        hoverColor: '@color.primary-700',
        hoverTextDecoration: 'underline',
    },
});
```

::tip
The Global preset also covers 

`
    `

, 

``

, 

`
    `

, 

`
      `

, 

`
        `

, 

`
        `

, 

`
        `

, 

`
        `

, 

`
        `

, 

``

, 

``

, 

``

, 

``

, 

`
        `

, 

``

, plus selection and focus states. Pass 

`false`

 to any element key (e.g., 

`link: false`

) to opt a specific element out.
::

::note
Form elements like 

``

, 

`
      0/280
  
  ```
  :::

#### See it in action

  :::story-preview{panel story="theme-recipes-forms-textarea--default"}
  :::
::

## Colors

The Textarea recipe includes 3 color variants: `light`, `dark`, and `neutral`. Like the Input, Card, and ChatMessage recipes, Textarea uses neutral-spectrum colors designed for content surfaces rather than status communication — a field's color reflects its surface, not a state. The wrapper combines each color with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations — including dark mode overrides.

The `neutral` color adapts automatically: it uses a light appearance in light mode and a dark appearance in dark mode, making it the safest default for general-purpose forms.

::story-preview{panel story="theme-recipes-forms-textarea--neutral"}
::

### Color Reference

::story-preview
---
height: 520
story: theme-recipes-forms-textarea--all-variants
---
::

| Color     | Token                            | Use Case                                          |
| --------- | -------------------------------- | ------------------------------------------------- |
| `light`   | `@color.white` / `@color.gray-*` | Light surfaces, stays light in dark mode          |
| `dark`    | `@color.gray-900`                | Dark surfaces, stays dark in light mode           |
| `neutral` | Adaptive (light ↔ dark)          | Default color, adapts to the current color scheme |

::tip
**Pro tip:**

 Use 

`neutral`

 as your default textarea color. It adapts to the user's color scheme automatically, so you don't need to manage light and dark variants separately.
::

## Variants

Three visual style variants control how the field surface is rendered. Each variant is combined with the selected color through [compound variants](https://styleframe.dev/docs/api/recipes#compound-variants), so you always get the correct background, text, and border colors for your chosen color.

### Default

Opaque surface with a visible border — the standard bordered text field. Sits above the page with a solid background and reveals a primary-colored focus ring on `:focus-within`.

::story-preview{panel story="theme-recipes-forms-textarea--default-variant"}
::

### Soft

Tinted gray background with a matching border. A gentler, lower-contrast field that blends into dense forms.

::story-preview{panel story="theme-recipes-forms-textarea--soft"}
::

### Ghost

No background and no border until interaction. The field shows only the focus ring on `:focus-within`, making it ideal for inline editing and borderless layouts.

::story-preview{panel story="theme-recipes-forms-textarea--ghost"}
::

## Sizes

Three size variants from `sm` to `lg` control the field's font size, padding, and border radius. The prefix and suffix addons share the same size axis, scaling their font size, inner padding, and gap to stay aligned with the field.

::story-preview{:height='420' story="theme-recipes-forms-textarea--all-sizes"}
::

### Size Reference

| Size | Font Size       | Padding (V / H)     | Border Radius       |
| ---- | --------------- | ------------------- | ------------------- |
| `sm` | `@font-size.xs` | `@0.375` / `@0.625` | `@border-radius.sm` |
| `md` | `@font-size.sm` | `@0.5` / `@0.75`    | `@border-radius.md` |
| `lg` | `@font-size.md` | `@0.625` / `@0.875` | `@border-radius.md` |

::note
**Good to know:**

 Use the native 

`rows`

 attribute on the nested 

`
    0/280




        
    
    

        
```

::tip
**Pro tip:**

 Use 

`useTextareaRecipe()`

 on its own (with optional prefix/suffix) for most textareas, and reach for a 

[Field Group](https://styleframe.dev/docs/theme/components/field-group)

 only when you attach interactive blocks.
::

## Accessibility

- **Pair the `invalid` state with `aria-invalid`.** The error border is a visual cue only. Set `aria-invalid="true"` on the native textarea and reference an error message with `aria-describedby` so screen readers announce the problem.
- **Mirror states on the native textarea.** Set the real `disabled` and `readonly` attributes in addition to the recipe state, so the field is correctly removed from (or kept in) the tab order and submitted accordingly.
- **Label every field.** Associate a `