NewsThe Basemode plugin is now on Figma Community
Docs

Output formats

The 15 formats Basemode writes, with real output from each.

Basemode writes the same tokens in 15 formats, plus a shadcn/ui theme. Pick as many as you need; every file comes from the same snapshot, so they never disagree.

FormatFilesGood to know
csstokens.cssCustom properties. Semantic tokens stay var() references to primitives, and other modes switch with data-theme.
tailwind4tokens.cssAn @theme static block, so every token gets its utilities, plus an @utility per text style.
tailwind3tokens.css, tokens.preset.jsImport the stylesheet and add the preset: presets: [require("./tokens.preset.js")].
scsstokens.scssSass variables with final values, a map per mode, and a mixin per text style.
lesstokens.lessLess variables, a .theme-<mode>() mixin per mode, and a mixin per text style.
typescripttokens.tsTyped constants, for code that needs values rather than CSS: charts, canvas, email.
javascripttokens.jsThe same constants as an ES module, for builds without TypeScript.
jsontokens.values.jsonPlain values keyed by Figma name, with a section per mode. For scripts and other tools.
dtcgtokens.json, tokens.<mode>.jsonW3C Design Tokens, which Style Dictionary and most token tools read. One file per mode.
storybookTokens.mdxA Storybook docs page of the tokens.
swiftTokens.swiftSwiftUI colors that follow dark mode, metrics and fonts.
androidvalues/colors.xml, values-night/colors.xml, values/dimens.xmlResources, with dark mode in values-night.
composeTokens.ktJetpack Compose Color, Dp and TextStyle values, with dark colors in their own object.
fluttertokens.dartDart Color, double, TextStyle and BoxShadow constants, with a TokensDark class.
react-nativetokens.native.tsUnitless numbers, text styles ready for StyleSheet, shadows for iOS and Android, and themes.
shadcnshadcn.cssThe shadcn/ui theme variables, picked from your tokens. You can choose any of them by hand in Basemode.

Every sync also writes basemode.lock.json. It records exactly what was generated, so the next pull request can describe what changed and which renames to repair. Commit it.

Options

  • Colors: hex, RGB, HSL or OKLCH.
  • Units: px, rem or em.
  • Prefix: put a word in front of every name, such as --nw-action-primary.
  • Folder: where in the repository the files go.

Output is byte-for-byte the same for the same tokens, so a sync with nothing new never opens a pull request. How each format handles light, dark and other modes is in modes and themes.

Real output

Every sample below is generated live by the engine from the example design system, trimmed to its first lines. Try any format on your own file in the playground.

CSS

tokens.css
/* Generated by Basemode from Figma. Do not edit: changes are overwritten on the next sync. */

:root {
  --action-brand: var(--color-blue-600);
  --action-primary-hover: var(--color-blue-700);
  --border-default: var(--color-slate-200);
  --color-blue-50: #EFF6FF;
  --color-blue-200: #BFDBFE;
  --color-blue-400: #60A5FA;
  --color-blue-600: #1E40AF;
  --color-blue-700: #1D4ED8;
  --color-blue-950: #172554;
  --color-green-50: #ECFDF5;
  --color-green-200: #A7F3D0;
  --color-green-400: #34D399;
  --color-green-600: #059669;
  --color-green-700: #047857;
  --color-green-950: #022C22;
…  81 more lines

Tailwind 4

tokens.css
/* Generated by Basemode from Figma. Do not edit: changes are overwritten on the next sync. */

@theme static {
  --color-action-brand: var(--color-blue-600);
  --color-action-primary-hover: var(--color-blue-700);
  --color-border-default: var(--color-slate-200);
  --color-blue-50: #EFF6FF;
  --color-blue-200: #BFDBFE;
  --color-blue-400: #60A5FA;
  --color-blue-600: #1E40AF;
  --color-blue-700: #1D4ED8;
  --color-blue-950: #172554;
  --color-green-50: #ECFDF5;
  --color-green-200: #A7F3D0;
  --color-green-400: #34D399;
  --color-green-600: #059669;
  --color-green-700: #047857;
  --color-green-950: #022C22;
…  81 more lines

Sass

tokens.scss
// Generated by Basemode from Figma. Do not edit: changes are overwritten on the next sync.

$action-brand: #1E40AF;
$action-primary-hover: #1D4ED8;
$border-default: #E2E8F0;
$color-blue-50: #EFF6FF;
$color-blue-200: #BFDBFE;
$color-blue-400: #60A5FA;
$color-blue-600: #1E40AF;
$color-blue-700: #1D4ED8;
$color-blue-950: #172554;
$color-green-50: #ECFDF5;
$color-green-200: #A7F3D0;
$color-green-400: #34D399;
$color-green-600: #059669;
$color-green-700: #047857;
$color-green-950: #022C22;
$color-red-50: #FEF2F2;
…  79 more lines

Less

tokens.less
// Generated by Basemode from Figma. Do not edit: changes are overwritten on the next sync.

@action-brand: #1E40AF;
@action-primary-hover: #1D4ED8;
@border-default: #E2E8F0;
@color-blue-50: #EFF6FF;
@color-blue-200: #BFDBFE;
@color-blue-400: #60A5FA;
@color-blue-600: #1E40AF;
@color-blue-700: #1D4ED8;
@color-blue-950: #172554;
@color-green-50: #ECFDF5;
@color-green-200: #A7F3D0;
@color-green-400: #34D399;
@color-green-600: #059669;
@color-green-700: #047857;
@color-green-950: #022C22;
@color-red-50: #FEF2F2;
…  79 more lines

TypeScript

tokens.ts
// Generated by Basemode from Figma. Do not edit: changes are overwritten on the next sync.

export const tokens = {
  "action-brand": "#1E40AF",
  "action-primary-hover": "#1D4ED8",
  "body-default": {
    "font-family": "\"Inter\"",
    "font-weight": "400",
    "font-size": "16px",
    "line-height": "1.5",
    "letter-spacing": "0"
  },
  "border-default": "#E2E8F0",
  "color-blue-50": "#EFF6FF",
  "color-blue-200": "#BFDBFE",
  "color-blue-400": "#60A5FA",
  "color-blue-600": "#1E40AF",
  "color-blue-700": "#1D4ED8",
…  83 more lines

JSON

tokens.values.json
{
  "tokens": {
    "action/brand": "#1E40AF",
    "action/primary-hover": "#1D4ED8",
    "Body/Default": {
      "font-family": "\"Inter\"",
      "font-weight": "400",
      "font-size": "16px",
      "line-height": "1.5",
      "letter-spacing": "0"
    },
    "border/default": "#E2E8F0",
    "color/blue/50": "#EFF6FF",
    "color/blue/200": "#BFDBFE",
    "color/blue/400": "#60A5FA",
    "color/blue/600": "#1E40AF",
    "color/blue/700": "#1D4ED8",
    "color/blue/950": "#172554",
…  78 more lines

W3C DTCG

tokens.json
{
  "action": {
    "brand": {
      "$type": "color",
      "$value": "{color.blue.600}"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "{color.blue.700}"
    }
  },
  "body": {
    "default": {
      "$type": "typography",
      "$value": {
        "font-family": "\"Inter\"",
        "font-weight": "400",
        "font-size": "16px",
…  293 more lines
tokens.dark.json
{
  "action": {
    "brand": {
      "$type": "color",
      "$value": "{color.blue.400}"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "{color.blue.200}"
    }
  },
  "border": {
    "default": {
      "$type": "color",
      "$value": "{color.slate.700}"
    }
  },
  "feedback": {
…  31 more lines

Swift

Tokens.swift
// Generated by Basemode. Do not edit: changes are overwritten on the next sync.

import SwiftUI
#if canImport(UIKit)
import UIKit
#endif

public enum Tokens {
    public enum Colors {
        #if canImport(UIKit)
        public static let actionBrand = Color(UIColor { $0.userInterfaceStyle == .dark ? UIColor(red: 0.3765, green: 0.6471, blue: 0.9804, alpha: 1.0000) : UIColor(red: 0.1176, green: 0.2510, blue: 0.6863, alpha: 1.0000) })
        #else
        public static let actionBrand = Color(red: 0.1176, green: 0.2510, blue: 0.6863, opacity: 1.0000)
        #endif
        #if canImport(UIKit)
        public static let actionPrimaryHover = Color(UIColor { $0.userInterfaceStyle == .dark ? UIColor(red: 0.7490, green: 0.8588, blue: 0.9961, alpha: 1.0000) : UIColor(red: 0.1137, green: 0.3059, blue: 0.8471, alpha: 1.0000) })
        #else
        public static let actionPrimaryHover = Color(red: 0.1137, green: 0.3059, blue: 0.8471, opacity: 1.0000)
…  87 more lines

Android

values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by Basemode. Do not edit: changes are overwritten on the next sync. -->
<resources>
    <color name="action_brand">#FF1E40AF</color>
    <color name="action_primary_hover">#FF1D4ED8</color>
    <color name="border_default">#FFE2E8F0</color>
    <color name="color_blue_50">#FFEFF6FF</color>
    <color name="color_blue_200">#FFBFDBFE</color>
    <color name="color_blue_400">#FF60A5FA</color>
    <color name="color_blue_600">#FF1E40AF</color>
    <color name="color_blue_700">#FF1D4ED8</color>
    <color name="color_blue_950">#FF172554</color>
    <color name="color_green_50">#FFECFDF5</color>
    <color name="color_green_200">#FFA7F3D0</color>
    <color name="color_green_400">#FF34D399</color>
    <color name="color_green_600">#FF059669</color>
    <color name="color_green_700">#FF047857</color>
    <color name="color_green_950">#FF022C22</color>
…  21 more lines
values-night/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by Basemode. Do not edit: changes are overwritten on the next sync. -->
<resources>
    <color name="action_brand">#FF60A5FA</color>
    <color name="action_primary_hover">#FFBFDBFE</color>
    <color name="border_default">#FF1E293B</color>
    <color name="feedback_danger">#FFF87171</color>
    <color name="feedback_success">#FF34D399</color>
    <color name="surface_default">#FF0F172A</color>
    <color name="surface_raised">#FF1E293B</color>
    <color name="text_muted">#FF94A3B8</color>
    <color name="text_primary">#FFF8FAFC</color>
</resources>

Jetpack Compose

Tokens.kt
// Generated by Basemode. Do not edit: changes are overwritten on the next sync.

package tokens

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.em
import androidx.compose.ui.unit.sp

object Tokens {
    object Colors {
        val actionBrand = Color(0xFF1E40AF)
        val actionPrimaryHover = Color(0xFF1D4ED8)
        val borderDefault = Color(0xFFE2E8F0)
        val colorBlue50 = Color(0xFFEFF6FF)
        val colorBlue200 = Color(0xFFBFDBFE)
…  68 more lines

Flutter

tokens.dart
// Generated by Basemode. Do not edit: changes are overwritten on the next sync.

import 'package:flutter/painting.dart';

class Tokens {
  Tokens._();

  static const Color actionBrand = Color(0xFF1E40AF);
  static const Color actionPrimaryHover = Color(0xFF1D4ED8);
  static const Color borderDefault = Color(0xFFE2E8F0);
  static const Color colorBlue50 = Color(0xFFEFF6FF);
  static const Color colorBlue200 = Color(0xFFBFDBFE);
  static const Color colorBlue400 = Color(0xFF60A5FA);
  static const Color colorBlue600 = Color(0xFF1E40AF);
  static const Color colorBlue700 = Color(0xFF1D4ED8);
  static const Color colorBlue950 = Color(0xFF172554);
  static const Color colorGreen50 = Color(0xFFECFDF5);
  static const Color colorGreen200 = Color(0xFFA7F3D0);
…  66 more lines

React Native

tokens.native.ts
// Generated by Basemode. Do not edit: changes are overwritten on the next sync.

export const tokens = {
  "actionBrand": "#1E40AF",
  "actionPrimaryHover": "#1D4ED8",
  "bodyDefault": {
    "fontFamily": "Inter",
    "fontWeight": "400",
    "fontSize": 16,
    "lineHeight": 24.0
  },
  "borderDefault": "#E2E8F0",
  "colorBlue50": "#EFF6FF",
  "colorBlue200": "#BFDBFE",
  "colorBlue400": "#60A5FA",
  "colorBlue600": "#1E40AF",
  "colorBlue700": "#1D4ED8",
  "colorBlue950": "#172554",
…  100 more lines
PreviousConnect GitHub or GitLabNextModes and themes