{
  "slug": "olea",
  "name": "Olea",
  "description": "Olive, terracotta and linen with Gilda Display and Manrope. Restaurants, trattorias, wine bars.",
  "author": {
    "name": "CopyPasteUI",
    "github": "copypasteui"
  },
  "radius": "0.375rem",
  "style": {
    "shadow": "soft",
    "border": "1px",
    "surface": "solid",
    "texture": "none",
    "motion": "subtle",
    "headingWeight": "default",
    "headingTracking": "default",
    "headingSize": "default",
    "buttons": "default"
  },
  "fonts": {
    "sans": "'Manrope', ui-sans-serif, system-ui, sans-serif",
    "display": "'Gilda Display', ui-serif, Georgia, serif",
    "googleFonts": [
      "Manrope:wght@400;500;600;700",
      "Gilda+Display"
    ]
  },
  "light": {
    "background": "#f5f0e6",
    "foreground": "#1f2118",
    "card": "#fbf8f1",
    "card-foreground": "#1f2118",
    "primary": "#3d4a2b",
    "primary-foreground": "#f7f2e8",
    "secondary": "#e7dfcd",
    "secondary-foreground": "#1f2118",
    "muted": "#ece5d6",
    "muted-foreground": "#5d5f4f",
    "accent": "#a9492a",
    "accent-foreground": "#fff8f0",
    "border": "#d9d0bc",
    "ring": "#3d4a2b"
  },
  "dark": {
    "background": "#13150f",
    "foreground": "#efe9dc",
    "card": "#1b1e16",
    "card-foreground": "#efe9dc",
    "primary": "#c9d29a",
    "primary-foreground": "#1a1f10",
    "secondary": "#262a1f",
    "secondary-foreground": "#efe9dc",
    "muted": "#20241a",
    "muted-foreground": "#a9ab98",
    "accent": "#d4714c",
    "accent-foreground": "#1a0d07",
    "border": "#30352a",
    "ring": "#c9d29a"
  },
  "images": {
    "thumbnail": "https://cdn.copypasteui.dev/thumbs/themes/olea.jpg"
  },
  "license": "PolyForm-Shield-1.0.0",
  "googleFontsUrl": "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Gilda+Display&display=swap",
  "css": ":root {\n  --background: #f5f0e6;\n  --foreground: #1f2118;\n  --card: #fbf8f1;\n  --card-foreground: #1f2118;\n  --primary: #3d4a2b;\n  --primary-foreground: #f7f2e8;\n  --secondary: #e7dfcd;\n  --secondary-foreground: #1f2118;\n  --muted: #ece5d6;\n  --muted-foreground: #5d5f4f;\n  --accent: #a9492a;\n  --accent-foreground: #fff8f0;\n  --border: #d9d0bc;\n  --ring: #3d4a2b;\n  --radius: 0.375rem;\n  --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;\n  --font-display: 'Gilda Display', ui-serif, Georgia, serif;\n  --border-width: 1px;\n  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);\n  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n}\n\n.dark {\n  --background: #13150f;\n  --foreground: #efe9dc;\n  --card: #1b1e16;\n  --card-foreground: #efe9dc;\n  --primary: #c9d29a;\n  --primary-foreground: #1a1f10;\n  --secondary: #262a1f;\n  --secondary-foreground: #efe9dc;\n  --muted: #20241a;\n  --muted-foreground: #a9ab98;\n  --accent: #d4714c;\n  --accent-foreground: #1a0d07;\n  --border: #30352a;\n  --ring: #c9d29a;\n}\n\n/* Motion (subtle): sections come in as you scroll. */\n@media (prefers-reduced-motion: no-preference) {\n  @supports (animation-timeline: view()) {\n    @keyframes cpui-rise {\n      from {\n        opacity: 0;\n        translate: 0 1rem;\n      }\n    }\n    @keyframes cpui-zoom {\n      from {\n        scale: 1.14;\n      }\n    }\n    section :is(h1, h2):not([style]):not([class*=\"translate-\"]):not(nav *):not(header *):not([class*=\"animate-\"] *),\n    :is([class~=\"bg-card\"], [class~=\"bg-primary\"], [class~=\"bg-accent\"], [class~=\"bg-secondary\"]):is([class*=\"rounded\"]):is( [class^=\"p-\"], [class*=\" p-\"], [class^=\"px-\"], [class*=\" px-\"], [class^=\"py-\"], [class*=\" py-\"] ):not(a, button):not([style]):not([class*=\"translate-\"]):not(nav *):not(header *):not([class*=\"animate-\"] *) {\n      animation: cpui-rise linear backwards;\n      animation-timeline: view();\n      animation-range: entry 0% cover 22%;\n    }\n  }\n}",
  "styleVars": {
    "--border-width": "1px",
    "--shadow-2xs": "0 1px rgb(0 0 0 / 0.05)",
    "--shadow-xs": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
    "--shadow-sm": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
    "--shadow-md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
    "--shadow-lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
    "--shadow-xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
    "--shadow-2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)"
  },
  "styleRules": "/* Motion (subtle): sections come in as you scroll. */\n@media (prefers-reduced-motion: no-preference) {\n  @supports (animation-timeline: view()) {\n    @keyframes cpui-rise {\n      from {\n        opacity: 0;\n        translate: 0 1rem;\n      }\n    }\n    @keyframes cpui-zoom {\n      from {\n        scale: 1.14;\n      }\n    }\n    section :is(h1, h2):not([style]):not([class*=\"translate-\"]):not(nav *):not(header *):not([class*=\"animate-\"] *),\n    :is([class~=\"bg-card\"], [class~=\"bg-primary\"], [class~=\"bg-accent\"], [class~=\"bg-secondary\"]):is([class*=\"rounded\"]):is( [class^=\"p-\"], [class*=\" p-\"], [class^=\"px-\"], [class*=\" px-\"], [class^=\"py-\"], [class*=\" py-\"] ):not(a, button):not([style]):not([class*=\"translate-\"]):not(nav *):not(header *):not([class*=\"animate-\"] *) {\n      animation: cpui-rise linear backwards;\n      animation-timeline: view();\n      animation-range: entry 0% cover 22%;\n    }\n  }\n}",
  "tailwindV4": "@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-border: var(--border);\n  --color-ring: var(--ring);\n  --font-sans: var(--font-sans);\n  --font-display: var(--font-display);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n  --default-border-width: var(--border-width);\n  --shadow: var(--shadow-sm);\n  --shadow-2xs: var(--shadow-2xs);\n  --shadow-xs: var(--shadow-xs);\n  --shadow-sm: var(--shadow-sm);\n  --shadow-md: var(--shadow-md);\n  --shadow-lg: var(--shadow-lg);\n  --shadow-xl: var(--shadow-xl);\n  --shadow-2xl: var(--shadow-2xl);\n}",
  "tailwindV3": "// tailwind.config.js (Tailwind v3) — extend your existing config\ntheme: {\n  extend: {\n    colors: {\n      \"background\": \"var(--background)\",\n      \"foreground\": \"var(--foreground)\",\n      \"card\": \"var(--card)\",\n      \"card-foreground\": \"var(--card-foreground)\",\n      \"primary\": \"var(--primary)\",\n      \"primary-foreground\": \"var(--primary-foreground)\",\n      \"secondary\": \"var(--secondary)\",\n      \"secondary-foreground\": \"var(--secondary-foreground)\",\n      \"muted\": \"var(--muted)\",\n      \"muted-foreground\": \"var(--muted-foreground)\",\n      \"accent\": \"var(--accent)\",\n      \"accent-foreground\": \"var(--accent-foreground)\",\n      \"border\": \"var(--border)\",\n      \"ring\": \"var(--ring)\"\n    },\n    fontFamily: { sans: [\"var(--font-sans)\"], display: [\"var(--font-display)\"] },\n    borderRadius: { lg: \"var(--radius)\", md: \"calc(var(--radius) - 2px)\", sm: \"calc(var(--radius) - 4px)\", xl: \"calc(var(--radius) + 4px)\" },\n    borderWidth: { DEFAULT: \"var(--border-width)\" },\n    boxShadow: { DEFAULT: \"var(--shadow-sm)\", \"2xs\": \"var(--shadow-2xs)\", xs: \"var(--shadow-xs)\", sm: \"var(--shadow-sm)\", md: \"var(--shadow-md)\", lg: \"var(--shadow-lg)\", xl: \"var(--shadow-xl)\", \"2xl\": \"var(--shadow-2xl)\" },\n  },\n}",
  "promptBlock": "## Theme: Olea\nThe component uses design tokens (bg-background, text-foreground, bg-primary, text-muted-foreground, border-border, font-display, rounded-lg …).\nIf the project does not define these tokens yet, add the theme below. If it already has shadcn/ui-style tokens, you may keep the existing ones instead.\n\n1. Add these CSS variables to the global stylesheet:\n```css\n:root {\n  --background: #f5f0e6;\n  --foreground: #1f2118;\n  --card: #fbf8f1;\n  --card-foreground: #1f2118;\n  --primary: #3d4a2b;\n  --primary-foreground: #f7f2e8;\n  --secondary: #e7dfcd;\n  --secondary-foreground: #1f2118;\n  --muted: #ece5d6;\n  --muted-foreground: #5d5f4f;\n  --accent: #a9492a;\n  --accent-foreground: #fff8f0;\n  --border: #d9d0bc;\n  --ring: #3d4a2b;\n  --radius: 0.375rem;\n  --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;\n  --font-display: 'Gilda Display', ui-serif, Georgia, serif;\n  --border-width: 1px;\n  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);\n  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n}\n\n.dark {\n  --background: #13150f;\n  --foreground: #efe9dc;\n  --card: #1b1e16;\n  --card-foreground: #efe9dc;\n  --primary: #c9d29a;\n  --primary-foreground: #1a1f10;\n  --secondary: #262a1f;\n  --secondary-foreground: #efe9dc;\n  --muted: #20241a;\n  --muted-foreground: #a9ab98;\n  --accent: #d4714c;\n  --accent-foreground: #1a0d07;\n  --border: #30352a;\n  --ring: #c9d29a;\n}\n\n/* Motion (subtle): sections come in as you scroll. */\n@media (prefers-reduced-motion: no-preference) {\n  @supports (animation-timeline: view()) {\n    @keyframes cpui-rise {\n      from {\n        opacity: 0;\n        translate: 0 1rem;\n      }\n    }\n    @keyframes cpui-zoom {\n      from {\n        scale: 1.14;\n      }\n    }\n    section :is(h1, h2):not([style]):not([class*=\"translate-\"]):not(nav *):not(header *):not([class*=\"animate-\"] *),\n    :is([class~=\"bg-card\"], [class~=\"bg-primary\"], [class~=\"bg-accent\"], [class~=\"bg-secondary\"]):is([class*=\"rounded\"]):is( [class^=\"p-\"], [class*=\" p-\"], [class^=\"px-\"], [class*=\" px-\"], [class^=\"py-\"], [class*=\" py-\"] ):not(a, button):not([style]):not([class*=\"translate-\"]):not(nav *):not(header *):not([class*=\"animate-\"] *) {\n      animation: cpui-rise linear backwards;\n      animation-timeline: view();\n      animation-range: entry 0% cover 22%;\n    }\n  }\n}\n```\n\n2. Tailwind v4 — add this to the same stylesheet, after `@import \"tailwindcss\";`:\n```css\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-border: var(--border);\n  --color-ring: var(--ring);\n  --font-sans: var(--font-sans);\n  --font-display: var(--font-display);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n  --default-border-width: var(--border-width);\n  --shadow: var(--shadow-sm);\n  --shadow-2xs: var(--shadow-2xs);\n  --shadow-xs: var(--shadow-xs);\n  --shadow-sm: var(--shadow-sm);\n  --shadow-md: var(--shadow-md);\n  --shadow-lg: var(--shadow-lg);\n  --shadow-xl: var(--shadow-xl);\n  --shadow-2xl: var(--shadow-2xl);\n}\n```\n   Tailwind v3 — instead, extend tailwind.config:\n```js\n// tailwind.config.js (Tailwind v3) — extend your existing config\ntheme: {\n  extend: {\n    colors: {\n      \"background\": \"var(--background)\",\n      \"foreground\": \"var(--foreground)\",\n      \"card\": \"var(--card)\",\n      \"card-foreground\": \"var(--card-foreground)\",\n      \"primary\": \"var(--primary)\",\n      \"primary-foreground\": \"var(--primary-foreground)\",\n      \"secondary\": \"var(--secondary)\",\n      \"secondary-foreground\": \"var(--secondary-foreground)\",\n      \"muted\": \"var(--muted)\",\n      \"muted-foreground\": \"var(--muted-foreground)\",\n      \"accent\": \"var(--accent)\",\n      \"accent-foreground\": \"var(--accent-foreground)\",\n      \"border\": \"var(--border)\",\n      \"ring\": \"var(--ring)\"\n    },\n    fontFamily: { sans: [\"var(--font-sans)\"], display: [\"var(--font-display)\"] },\n    borderRadius: { lg: \"var(--radius)\", md: \"calc(var(--radius) - 2px)\", sm: \"calc(var(--radius) - 4px)\", xl: \"calc(var(--radius) + 4px)\" },\n    borderWidth: { DEFAULT: \"var(--border-width)\" },\n    boxShadow: { DEFAULT: \"var(--shadow-sm)\", \"2xs\": \"var(--shadow-2xs)\", xs: \"var(--shadow-xs)\", sm: \"var(--shadow-sm)\", md: \"var(--shadow-md)\", lg: \"var(--shadow-lg)\", xl: \"var(--shadow-xl)\", \"2xl\": \"var(--shadow-2xl)\" },\n  },\n}\n```\n\n3. Load the fonts (e.g. in the root layout <head> or with next/font): https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Gilda+Display&display=swap\n",
  "shadcnUrl": "https://copypasteui.dev/r/shadcn/theme-olea.json",
  "thumbnailUrl": "https://cdn.copypasteui.dev/thumbs/themes/olea.jpg",
  "ogImageUrl": "https://cdn.copypasteui.dev/thumbs/themes/olea.jpg"
}