- Family
- Display
- Typeface
- Bricolage Grotesque
- Radius
- 0.75rem
- Density
- comfortable
- Shadows
- deep
Light and dark
Overview
Good morning, Ana
Revenue, 7 days
$48,210
Weekly digest
Overview
Good morning, Ana
Revenue, 7 days
$48,210
Weekly digest
Install
One registry item sets the colours, radius, font stack, spacing step and shadow scale. Load the typeface itself with next/font or Fontsource.
npx shadcn@latest add https://ui.tealmac.com/r/presets/display-lime.json{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "preset-display-lime",
"type": "registry:theme",
"title": "Lime preset",
"description": "Display — lime on a bold Bricolage Grotesque face. Bricolage Grotesque, comfortable density, deep shadows.",
"cssVars": {
"theme": {
"font-sans": "\"Bricolage Grotesque\", ui-sans-serif, system-ui, sans-serif",
"spacing": "0.275rem",
"shadow-2xs": "0 1px 2px rgb(0 0 0 / 0.08)",
"shadow-xs": "0 2px 4px 0 rgb(0 0 0 / 0.08)",
"shadow-sm": "0 3px 8px -1px rgb(0 0 0 / 0.12), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
"shadow": "0 6px 14px -2px rgb(0 0 0 / 0.14), 0 3px 6px -3px rgb(0 0 0 / 0.1)",
"shadow-md": "0 10px 22px -4px rgb(0 0 0 / 0.16), 0 4px 8px -4px rgb(0 0 0 / 0.12)",
"shadow-lg": "0 20px 40px -8px rgb(0 0 0 / 0.2), 0 8px 16px -8px rgb(0 0 0 / 0.14)"
},
"light": {
"radius": "0.75rem",
"background": "oklch(0.985 0.006 128)",
"foreground": "oklch(0.23 0.03 128)",
"card": "oklch(1 0 128)",
"card-foreground": "oklch(0.23 0.03 128)",
"popover": "oklch(1 0 128)",
"popover-foreground": "oklch(0.23 0.03 128)",
"primary": "oklch(0.5 0.18 128)",
"primary-foreground": "oklch(0.985 0.012 128)",
"secondary": "oklch(0.95 0.02 128)",
"secondary-foreground": "oklch(0.26 0.03 128)",
"muted": "oklch(0.955 0.015 128)",
"muted-foreground": "oklch(0.49 0.035 128)",
"accent": "oklch(0.93 0.05 128)",
"accent-foreground": "oklch(0.4 0.11 128)",
"destructive": "oklch(0.58 0.22 25)",
"border": "oklch(0.9 0.02 128)",
"input": "oklch(0.87 0.02 128)",
"ring": "oklch(0.5 0.18 128)",
"chart-1": "oklch(0.58 0.18 128)",
"chart-2": "oklch(0.62 0.171 168)",
"chart-3": "oklch(0.66 0.162 208)",
"chart-4": "oklch(0.7 0.153 88)",
"chart-5": "oklch(0.55 0.18 298)",
"sidebar": "oklch(1 0 128)",
"sidebar-foreground": "oklch(0.23 0.03 128)",
"sidebar-primary": "oklch(0.5 0.18 128)",
"sidebar-primary-foreground": "oklch(0.985 0.012 128)",
"sidebar-accent": "oklch(0.95 0.02 128)",
"sidebar-accent-foreground": "oklch(0.26 0.03 128)",
"sidebar-border": "oklch(0.9 0.02 128)",
"sidebar-ring": "oklch(0.5 0.18 128)"
},
"dark": {
"background": "oklch(0.16 0.022 128)",
"foreground": "oklch(0.95 0.012 128)",
"card": "oklch(0.2 0.026 128)",
"card-foreground": "oklch(0.95 0.012 128)",
"popover": "oklch(0.21 0.03 128)",
"popover-foreground": "oklch(0.95 0.012 128)",
"primary": "oklch(0.72 0.18 128)",
"primary-foreground": "oklch(0.17 0.02 128)",
"secondary": "oklch(0.27 0.03 128)",
"secondary-foreground": "oklch(0.95 0.012 128)",
"muted": "oklch(0.27 0.03 128)",
"muted-foreground": "oklch(0.72 0.03 128)",
"accent": "oklch(0.31 0.06 128)",
"accent-foreground": "oklch(0.9 0.05 128)",
"destructive": "oklch(0.66 0.2 25)",
"border": "oklch(0.3 0.02 128)",
"input": "oklch(0.34 0.025 128)",
"ring": "oklch(0.72 0.18 128)",
"chart-1": "oklch(0.7 0.18 128)",
"chart-2": "oklch(0.74 0.171 168)",
"chart-3": "oklch(0.78 0.162 208)",
"chart-4": "oklch(0.72 0.153 88)",
"chart-5": "oklch(0.68 0.18 298)",
"sidebar": "oklch(0.2 0.026 128)",
"sidebar-foreground": "oklch(0.95 0.012 128)",
"sidebar-primary": "oklch(0.72 0.18 128)",
"sidebar-primary-foreground": "oklch(0.17 0.02 128)",
"sidebar-accent": "oklch(0.27 0.03 128)",
"sidebar-accent-foreground": "oklch(0.95 0.012 128)",
"sidebar-border": "oklch(0.3 0.02 128)",
"sidebar-ring": "oklch(0.72 0.18 128)"
}
}
}