Versa
bootswatchMITLight · lightMedium · mediumNeutral · neutralMuted · mutedSerif · serifGeneral · generalLanding · landingProfessional · professional
Bootswatch theme “Versa” for Bootstrap.
NNorthwind
Product · PricingSpecimen
Make the work feel finished
One interface, dressed in this style. Compare type, color, radius, and density.
128
Active
4.8
Score
12ms
Edge
Attribution
"Versa" from https://github.com/thomaspark/bootswatch (MIT). © Thomas Park. dist/versa/_variables.scss @ bff83c63ea84.
https://github.com/thomaspark/bootswatch · dist/versa/_variables.scss · bff83c63ea84 · © Thomas Park
Prompt
Design a user interface in the "Versa" style. Bootswatch theme “Versa” for Bootstrap. Apply these tokens to every surface. Do not invent a second palette. - Background #ffffff, foreground #0a0a0a - Primary #161616 on #fafaf9 - Accent #04c951, muted #f5f5f5, border #dee2e6 - Radius .5rem, type ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" - Shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04) "Versa" from https://github.com/thomaspark/bootswatch (MIT). © Thomas Park. dist/versa/_variables.scss @ bff83c63ea84. powered by Styledex — https://styledex.dev
Tokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Versa. \"Versa\" from https://github.com/thomaspark/bootswatch (MIT). © Thomas Park. dist/versa/_variables.scss @ bff83c63ea84.",
"$extensions": {
"dev.styledex": {
"id": "bootswatch-versa",
"license": "MIT",
"attribution": "\"Versa\" from https://github.com/thomaspark/bootswatch (MIT). © Thomas Park. dist/versa/_variables.scss @ bff83c63ea84.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#ffffff"
},
"foreground": {
"$type": "color",
"$value": "#0a0a0a"
},
"card": {
"$type": "color",
"$value": "#ffffff"
},
"card-foreground": {
"$type": "color",
"$value": "#0a0a0a"
},
"primary": {
"$type": "color",
"$value": "#161616"
},
"primary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"secondary": {
"$type": "color",
"$value": "#ffffff"
},
"secondary-foreground": {
"$type": "color",
"$value": "#0a0a0a"
},
"accent": {
"$type": "color",
"$value": "#04c951"
},
"accent-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"muted": {
"$type": "color",
"$value": "#f5f5f5"
},
"muted-foreground": {
"$type": "color",
"$value": "#606060"
},
"border": {
"$type": "color",
"$value": "#dee2e6"
},
"destructive": {
"$type": "color",
"$value": "#e7020b"
},
"ring": {
"$type": "color",
"$value": "#161616"
}
},
"font": {
"sans": {
"$type": "fontFamily",
"$value": [
"ui-sans-serif",
"system-ui",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji"
]
},
"serif": {
"$type": "fontFamily",
"$value": [
"ui-serif",
"Georgia",
"serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
}
},
"radius": {
"base": {
"$type": "dimension",
"$value": ".5rem"
}
},
"spacing": {
"base": {
"$type": "dimension",
"$value": "1rem"
}
},
"shadow": {
"base": {
"$type": "shadow",
"$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
CSS
/* powered by Styledex — https://styledex.dev */
/* "Versa" from https://github.com/thomaspark/bootswatch (MIT). © Thomas Park. dist/versa/_variables.scss @ bff83c63ea84. */
:root {
--background: #ffffff;
--foreground: #0a0a0a;
--card: #ffffff;
--card-foreground: #0a0a0a;
--primary: #161616;
--primary-foreground: #fafaf9;
--secondary: #ffffff;
--secondary-foreground: #0a0a0a;
--accent: #04c951;
--accent-foreground: #fafaf9;
--muted: #f5f5f5;
--muted-foreground: #606060;
--border: #dee2e6;
--destructive: #e7020b;
--ring: #161616;
--radius: .5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
Tailwind
/* powered by Styledex — https://styledex.dev */
/* "Versa" from https://github.com/thomaspark/bootswatch (MIT). © Thomas Park. dist/versa/_variables.scss @ bff83c63ea84. */
/** Tailwind theme extend for Versa (bootswatch-versa) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#ffffff",
"foreground": "#0a0a0a",
"card": "#ffffff",
"primary": "#161616",
"primary-foreground": "#fafaf9",
"secondary": "#ffffff",
"accent": "#04c951",
"muted": "#f5f5f5",
"border": "#dee2e6",
"destructive": "#e7020b",
"ring": "#161616"
},
"borderRadius": {
"lg": ".5rem"
},
"fontFamily": {
"sans": [
"ui-sans-serif",
"system-ui",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji"
],
"serif": [
"ui-serif",
"Georgia",
"serif"
],
"mono": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
},
"boxShadow": {
"styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
};
shadcn
/* powered by Styledex — https://styledex.dev */
/* "Versa" from https://github.com/thomaspark/bootswatch (MIT). © Thomas Park. dist/versa/_variables.scss @ bff83c63ea84. */
@layer base {
:root {
--background: #ffffff;
--foreground: #0a0a0a;
--card: #ffffff;
--card-foreground: #0a0a0a;
--primary: #161616;
--primary-foreground: #fafaf9;
--secondary: #ffffff;
--secondary-foreground: #0a0a0a;
--accent: #04c951;
--accent-foreground: #fafaf9;
--muted: #f5f5f5;
--muted-foreground: #606060;
--border: #dee2e6;
--destructive: #e7020b;
--ring: #161616;
--radius: .5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}