Verdance — Agency Website Design Studio (Dark Emerald)

{"summary": "A dark-emerald 'design studio / agency website' single page with an editorial, award-show feel. A fixed glassy forest-green nav (brass leaf wordmark + Start a project pill) sits above a hero whose signature move is a giant cream sans display headline ('AGENCY / WEBSITES') with an italic emerald-soft serif script accent ('that win') tucked at the baseline, a two-column studio statement, and a full-bleed feature photo capped with brass hairlines and a script caption. Below: an infinite-scroll trust marquee of award names separated by brass diamonds; a serif studio statement with a 4-up stat grid built from 1px brass gridlines; an asymmetric work grid (one tall card + two square cards + one wide editorial card) with photos tinted into the emerald palette and brass uppercase category labels; a thin numbered services list (4 rows, hairline-divided, no cards) with phosphor icons and a sliding brass arrow on hover; a recognition strip of three award cards plus a centered press-logo row; a centered closing CTA with a brass email pill + ghost 'Book a call'; and a 4-column footer. The whole thing is built from two surfaces (forest #0d1f17 and a deeper forestDeep #0a1711), cream #f1ede3 text, a muted creamDim #b8b3a6, an emerald/emeraldSoft green accent, and a single brass #c9a227 metallic for hairlines, labels, and primary buttons. Inter for display + UI, Fraunces italic serif for the script accents and editorial type.", "style": {"description": "Premium, calm, editorial dark mode in a deep emerald 'forest' palette with a brass metallic accent. The page is built from just two near-black green surfaces (forest #0d1f17 as the warmer base and forestDeep #0a1711 as the deeper alternating band) separated by 1px brass hairlines (rgba(201,162,39,0.32)) rather than by hard color blocks. Text is cream #f1ede3 for primary and a soft muted creamDim #b8b3a6 for secondary/eyebrows. There are two accents working together: a green pair (emerald #1f6f4f and the lighter emeraldSoft #2c8a63) used for glows, washes, the script-italic headline accents, and service icons; and a single brass/gold #c9a227 metallic used for ALL hairlines, the bracketed uppercase section labels, award diamonds, primary pill buttons, and link underlines. The signature contrast is typographic: a tight, heavy Inter display face (font-weight 700, letter-spacing -0.045em, line-height 0.92) for the GIANT uppercase headlines, set against an italic Fraunces serif ('script') used for small lyrical accents ('that win', 'considered', 'projects', 'in mind?') and for editorial stat numbers and pull-quotes. Atmosphere comes from craft, not noise: a faint fractal-noise grain overlay (opacity 0.05) on the hero and CTA, large soft emerald radial blur glows, photos pushed into the palette with a desaturate+sepia 'work-img' filter plus an emerald multiply 'tint', a centered brass-line gradient hairline (transparent -> brass -> transparent), and an infinite CSS marquee. Restrained, high-craft, Awwwards-studio energy.", "prompt": "Dark-emerald editorial design-studio / agency website with a single brass metallic accent. Exact palette via tailwind.config custom colors: forest #0d1f17 (warmer base surface + body bg), forestDeep #0a1711 (deeper alternating band / footer / marquee), emerald #1f6f4f and emeraldSoft #2c8a63 (green accent pair for glows/washes/script accents/service icons), cream #f1ede3 (primary text), creamDim #b8b3a6 (secondary text + uppercase eyebrows), brass #c9a227 (the ONE metallic accent: all hairlines, bracketed labels, award diamonds, primary buttons, link underlines). Body is bg-forest text-cream font-sans antialiased with selection:bg-emerald selection:text-cream. Two font families: sans = Inter (system-ui fallback), serif = Fraunces (Georgia fallback). Define .display { font-family: Inter; font-weight: 700; letter-spacing: -0.045em; line-height: 0.92 } for the giant uppercase headlines, and .script { font-family: Fraunces; font-style: italic; font-weight: 400; letter-spacing: -0.01em } for the lyrical accents (usually colored text-emeraldSoft). Hairlines use .hairline { border-color: rgba(201,162,39,0.32) }. A brass gradient divider .brass-line { background: linear-gradient(90deg, rgba(201,162,39,0) 0%, rgba(201,162,39,0.55) 18%, rgba(201,162,39,0.55) 82%, rgba(201,162,39,0) 100%) }. Grain texture .grain::before is an absolutely-positioned inset-0 fractalNoise SVG data-URI at opacity 0.05. Imagery is forced into the palette: .work-img { filter: saturate(0.55) brightness(0.82) contrast(1.02) sepia(0.12); transition transform .7s + filter .7s } that eases to saturate(0.78) brightness(0.95) on .work-card:hover, plus a .tint::after emerald multiply overlay (linear-gradient(150deg, rgba(13,31,23,0.32), rgba(31,111,79,0.30)); mix-blend-mode multiply). Nav links use a .nav-link::after brass underline that grows from width 0 to 100% on hover. The trust strip uses .marquee { animation: marquee 32s linear infinite } translating -50%. Soft emerald glows are pointer-events-none absolute rounded-full bg-emerald/10-/20 with blur-[140px]+. Honor prefers-reduced-motion (disable marquee + smooth scroll). Icons are Iconify Phosphor (ph:) glyphs. html { scroll-behavior: smooth }.", "prompt_typography": "Two families only. Inter (Google Fonts weights 400;500;600;700) as font-sans with system-ui fallback, antialiased; Fraunces italic (opsz 9..144, weights 400;500, italic) as font-serif with Georgia fallback. Giant hero display: .display (Inter 700, -0.045em, line-height 0.92) at text-[clamp(3.2rem,13.5vw,12rem)] in cream, with an inline .script accent at text-[clamp(2.6rem,12vw,11rem)] leading-[0.8] in emeraldSoft. Section H2 display: text-[clamp(2.2rem,5.5vw,4.2rem)] -> [clamp(2.4rem,6vw,4.6rem)] .display cream with a normal-weight .script emeraldSoft accent word. CTA H2: text-[clamp(2.6rem,8vw,6.5rem)]. Editorial body: Fraunces serif at text-[clamp(1.6rem,3.4vw,2.7rem)] leading-[1.28] cream for the studio statement; stat numbers in font-serif text-[34px] cream with a brass +/%/0 suffix; award titles font-serif text-[26px]->[30px]. UI eyebrows: bracketed text-[12px] uppercase tracking-[0.22em] in brass (e.g. '[ The Studio ]'); other eyebrows text-[12px] tracking-[0.2em] uppercase creamDim. Nav links text-[13px] tracking-wide creamDim uppercase. Body copy text-[15px]->[18px] leading-relaxed creamDim with key phrases promoted to cream."}, "layout_and_structure": {"description": "A single-column, vertically stacked, frameless responsive marketing page that alternates between the two forest surfaces. Almost every section centers inside mx-auto max-w-[1240px] with px-6 -> lg:px-10 padding. Order top to bottom: a fixed glassy nav; a hero (a small meta row, a giant two-line display headline with an italic script accent, a 2-column studio-statement + scroll-cue row, then a full-bleed feature photo capped by a brass hairline with a script caption); an infinite-scroll trust marquee of award names on the deeper surface; a serif studio statement section (a 3/9 label + paragraph split, with a 4-up stat grid built from 1px brass gridlines); an asymmetric work grid (a tall col-span row + two square cards in a 2-col grid, then a full-width wide editorial card) with bottom-gradient captions; a thin numbered services list (4 hairline-divided rows on a 12-col grid, no cards); a recognition strip (a 3-up award-card grid built from brass gridlines + a centered wrapping press-logo row) on the deeper surface; a centered closing CTA over a grain wash with two pill CTAs + a social-icon row; and a dark 4-column footer with a hairline divider and a bottom legal row. Reflow: the hero statement row is lg:grid-cols-12 (paragraph col-span-6 + right-aligned scroll cue col-span-6) -> stacked; the studio split is lg:grid-cols-12 (3/9) and its stat grid grid-cols-2 -> md:grid-cols-4; the work grid is md:grid-cols-2 with the first card md:row-span-2 (tall) and the wide card full-width below; the services rows are grid-cols-12 with the description hidden below lg; the recognition cards are md:grid-cols-3; the footer is md:grid-cols-12 (5 / 3-at-7 / 3); the nav links + the desktop CTA hide below md and swap to a brass-bordered hamburger that opens a full-width mobile menu panel; everything collapses to one column on mobile.", "prompts": [{"part": "Sticky glass nav", "prompt": "A fixed top-0 inset-x-0 z-50 header. Inner bar = backdrop-blur-md bg-forestDeep/70 with a 1px bottom .hairline border. Inside: a nav mx-auto max-w-[1240px] px-6 -> lg:px-10 h-[68px] flex items-center justify-between. Left = brand lockup: an h-8 w-8 rounded-full border border-brass/60 circle holding a brass ph:leaf-fill (18px) + the wordmark 'Verdance' (text-[17px] font-semibold cream) with a tiny brass superscript registered mark. Center (hidden md:flex gap-9, text-[13px] tracking-wide creamDim uppercase): WORK / SERVICES / RECOGNITION / STUDIO, each a .nav-link that grows a brass underline on hover and goes text-cream. Right: a 'Start a project' pill (hidden sm:inline-flex, rounded-full border border-brass/60 px-5 py-2 text-[13px] cream + a ph:arrow-up-right, hover:bg-brass hover:text-forestDeep) and a md:hidden hamburger button (h-10 w-10 rounded-full border border-brass/60, ph:list icon) that toggles a mobile menu. Mobile menu panel = md:hidden hidden border-b .hairline backdrop-blur-md bg-forestDeep/95: a px-6 py-6 flex-col of the four nav links (each py-3 text-[15px] cream with a brass ph:arrow-up-right and a faint brass bottom border) + a solid brass 'Start a project' pill. JS toggles .hidden, swaps the ph:list/ph:x icon + aria-expanded, closes on link click / Escape / >=768px."}, {"part": "Hero", "prompt": "A relative .grain overflow-hidden bg-forest section, pt-[68px], with two pointer-events-none absolute emerald radial glows (bg-emerald/20 and /10, blur-[140px]+, top-right and left). Content z-10 mx-auto max-w-[1240px] px-6 -> lg:px-10. Top meta row (pt-8, flex justify-between, text-[12px] tracking-[0.2em] uppercase creamDim): left = an emeraldSoft dot + 'Studio est. 2019'; right (hidden sm) = 'Design - Strategy - Build'. Headline block (pt-10 -> lg:pt-16): an .display cream H1 'AGENCY' at text-[clamp(3.2rem,13.5vw,12rem)], then a second .display H1 'WEBSITES' (flex flex-wrap items-end) with an inline .script emeraldSoft accent 'that win' at text-[clamp(2.6rem,12vw,11rem)] leading-[0.8] tucked at the baseline (ml-1 -mb-2). Statement row (mt-12 -> lg:mt-16, grid lg:grid-cols-12 gap-8 items-end pb-16 -> lg:pb-24): a col-span-6 max-w-xl text-[16px]->[18px] leading-relaxed creamDim paragraph ('We are a design studio crafting grounded, high-craft websites for agencies and ambitious brands...') with the key phrase promoted to cream; a col-span-6 lg:justify-end scroll cue = an h-14 w-14 rounded-full border border-brass/60 circle with a ph:arrow-down (group-hover:bg-emerald + arrow nudges) beside a 'View selected work' text-[13px] tracking-[0.18em] uppercase label."}, {"part": "Hero feature image (full-bleed)", "prompt": "Directly under the hero copy, a relative z-10 w-full block. First a .brass-line h-px w-full divider, then a relative h-[340px] -> sm:h-[440px] -> lg:h-[560px] overflow-hidden image band: a full-cover .work-img Unsplash workspace photo with an inline filter:saturate(0.7) brightness(0.62), an absolute bg-gradient-to-t from-forest via-forest/20 to-forest/40 to anchor it into the page, plus an absolute bg-emerald/10 mix-blend-multiply tonal wash. Caption row absolute bottom-8 inset-x (left/right 6 -> lg:10), flex items-end justify-between: a .script cream/90 line 'Designed in the open.' at text-[22px]->[34px] on the left, and a 'No. 001 - The Workspace' text-[12px] tracking-[0.2em] uppercase creamDim label on the right."}, {"part": "Trust marquee", "prompt": "A border-y .hairline bg-forestDeep overflow-hidden strip. Inside a flex whitespace-nowrap py-5: a .marquee (animation: marquee 32s linear infinite, translateX -> -50%) flex gap-12 of award names at text-[13px] tracking-[0.22em] uppercase creamDim, each separated by a text-brass diamond glyph: Awwwards Honors / CSS Design Awards / FWA of the Day / Webby Nominee / Site Inspire Featured. Duplicate the run (aria-hidden) so the loop is seamless. Disable the animation under prefers-reduced-motion."}, {"part": "Studio statement + stat grid", "prompt": "Section id=studio, relative bg-forest py-24 -> lg:py-36. Content mx-auto max-w-[1240px] px-6 -> lg:px-10, grid lg:grid-cols-12 gap-10 -> lg:gap-16. Left col-span-3 = a bracketed brass eyebrow '[ The Studio ]' (text-[12px] tracking-[0.22em] uppercase). Right col-span-9 = a font-serif statement at text-[clamp(1.6rem,3.4vw,2.7rem)] leading-[1.28] cream with an inline .script emeraldSoft accent word ('considered'). Below it a stat grid (mt-12): grid grid-cols-2 -> md:grid-cols-4 gap-px on a bg-brass/20 base with a bounding border .hairline (so the 1px gaps read as brass gridlines), each cell bg-forest p-6 with a font-serif text-[34px] cream number carrying a brass + / % suffix and a text-[12px] tracking-[0.14em] uppercase creamDim label: 120+ Sites shipped / 7 Awards won / 14 Countries served / 98% Client return rate."}, {"part": "Work grid (asymmetric)", "prompt": "Section id=work, relative bg-forestDeep py-20 -> lg:py-28. Header (flex-col -> md:flex-row md:items-end justify-between, mb-12 -> lg:mb-16): a bracketed brass eyebrow '[ Selected Work ]' + a .display cream H2 'Recent' at text-[clamp(2.4rem,6vw,4.6rem)] with a normal-weight .script emeraldSoft accent 'projects'; and a md:max-w-xs creamDim sub-paragraph. Grid = grid md:grid-cols-2 gap-5 -> lg:gap-6: card 1 is a tall md:row-span-2 .work-card (a .tint aspect-[4/5]->md:h-full image), cards 2 and 3 are square .work-cards (aspect-[16/10] images). Each card = a group relative overflow-hidden rounded-2xl border .hairline bg-forest <a>, a .tint-wrapped .work-img photo, and an absolute inset-x-0 bottom-0 caption over a bg-gradient-to-t from-forestDeep: a brass text-[12px] tracking-[0.18em] uppercase category ('Brand - Web' / 'E-commerce' / 'SaaS - Marketing'), a font-serif cream title (Marrow Studio / Atlas Goods Co. / Fernway Labs), and a round border-cream/30 ph:arrow-up-right button that flips to bg-brass text-forestDeep on group-hover. Then a full-width wide editorial card (mt-5 -> lg:mt-6): a .work-card with a .tint .tint-soft h-[260px]->[360px] image, an absolute bg-forestDeep/45 floor + a bg-gradient-to-r from-forestDeep directional reinforcement, and a relative z-2 flex items-center justify-between p-8->p-12 row holding a max-w-md rounded-xl bg-forestDeep/55 backdrop-blur ring-1 ring-brass/15 caption card (brass category, a font-serif text-[32px]->[48px] title 'Heron & Field' with a .script emeraldSoft 'journal', a small cream/90 line) beside a large round arrow button (hidden sm)."}, {"part": "Services list (thin, numbered)", "prompt": "Section id=services, relative bg-forest py-20 -> lg:py-28. Header (grid lg:grid-cols-12 gap-10, mb-10 -> lg:mb-14): left col-span-5 = a bracketed brass eyebrow '[ What we do ]' + a .display cream H2 'Services,' at text-[clamp(2.2rem,5.5vw,4.2rem)] with a normal .script emeraldSoft 'end to end'; right col-span-7 lg:pt-12 = a creamDim sub-paragraph (lg:max-w-md lg:ml-auto). List = a border-t .hairline wrapper of four .svc-row rows, each a group grid grid-cols-12 items-center gap-4 px-2->lg:px-6 py-7->lg:py-9 border-b .hairline that lightens to bg-[rgba(31,111,79,0.10)] on hover: a col-span-2->lg:col-span-1 creamDim font-serif index (01-04); a col-span-8->lg:col-span-3 group of an emeraldSoft phosphor icon (ph:compass-tool / ph:pen-nib / ph:code / ph:cursor-click, 26px->30px) + a text-[20px]->[26px] font-semibold cream title (Strategy & Brand / Web Design / Development / Motion & Care); a hidden lg:block col-span-6 text-[14px] creamDim description; and a col-span-2 justify-end .svc-arrow brass ph:arrow-right (text-[24px], opacity .4) that slides translateX(6px) + goes opacity 1 on row hover."}, {"part": "Recognition strip", "prompt": "Section id=recognition, relative bg-forestDeep py-20 -> lg:py-28 border-y .hairline. Header (flex items-center gap-4 mb-12): a bracketed brass eyebrow '[ Recognition ]' + a .brass-line h-px flex-1 divider. Award cards = grid md:grid-cols-3 gap-px on a bg-brass/20 base with a bounding border .hairline (brass gridlines), each cell bg-forest p-8->lg:p-10: a brass phosphor icon (ph:trophy / ph:medal / ph:star, 28px), a font-serif text-[26px]->[30px] cream title (Site of the Day / Best UI, Gold / FWA of the Day), a text-[13px] tracking-[0.14em] uppercase creamDim attribution line (Awwwards - 2025 / CSS Design Awards - 2025 / The FWA - 2024), and a text-[14px] creamDim body line. Below (mt-12): a flex flex-wrap justify-center gap-x-10 gap-y-6 press-logo row in creamDim/70, mixing font-serif italic and tracked uppercase wordmarks (Communication Arts / SITEINSPIRE / The Webby Awards / LANDBOOK) separated by faint brass slashes."}, {"part": "Closing CTA", "prompt": "Section id=contact, relative .grain overflow-hidden bg-forest py-24 -> lg:py-36, with a large bottom-centered emerald radial glow (bg-emerald/15 blur-[150px]). Centered content z-10 mx-auto max-w-[1240px] px-6 -> lg:px-10 text-center: a bracketed brass eyebrow '[ Let's begin ]'; a .display cream H2 'Have a project' at text-[clamp(2.6rem,8vw,6.5rem)] with a normal .script emeraldSoft 'in mind?' on its own line; a mx-auto max-w-lg creamDim sub-paragraph; a CTA row (mt-11, flex-col -> sm:flex-row justify-center gap-4): a solid brass email pill (rounded-full bg-brass px-8 py-4 text-[15px] font-semibold text-forestDeep + a ph:paper-plane-tilt, hover:bg-emeraldSoft hover:text-cream) and a ghost 'Book a call' pill (rounded-full border border-brass/60 cream + a ph:calendar-blank, hover:bg-emerald); then a row of four social icon links (ph:x-logo / ph:instagram-logo / ph:linkedin-logo / ph:dribbble-logo, creamDim hover:text-brass)."}, {"part": "Footer (dark, 4-column)", "prompt": "A footer bg-forestDeep with a border-t .hairline. Inside mx-auto max-w-[1240px] px-6 -> lg:px-10 py-14: a grid md:grid-cols-12 gap-10. First block md:col-span-5 = the brand lockup (brass leaf circle + 'Verdance' cream wordmark with brass superscript mark), a max-w-sm creamDim blurb, and a 'Lisbon - Remote worldwide' line. Then md:col-span-3 md:col-start-7 'Navigate' column and md:col-span-3 'Elsewhere' column, each a text-[12px] tracking-[0.2em] uppercase brass heading + a space-y-2.5 list of text-[15px] creamDim links that hover:text-cream. Bottom: a mt-12 pt-7 border-t .hairline row, flex-col -> sm:flex-row justify-between, text-[13px] creamDim: a copyright line and a 'Crafted with care' line with an emeraldSoft ph:leaf."}]}, "special_ui_components": [{"component": "Giant display headline with italic serif script accent", "description": "The brand signature: a huge, tight, uppercase Inter display headline (AGENCY / WEBSITES) with a small italic Fraunces serif accent in emerald-soft green ('that win') tucked at the baseline, and the same display-vs-script pairing reused for every section H2 ('Recent projects', 'Services, end to end', 'Have a project in mind?').", "prompt": "Define .display { font-family: Inter; font-weight: 700; letter-spacing: -0.045em; line-height: 0.92 } and .script { font-family: Fraunces; font-style: italic; font-weight: 400; letter-spacing: -0.01em }. Hero H1 = two .display lines in cream at text-[clamp(3.2rem,13.5vw,12rem)], the second line flex flex-wrap items-end with an inline .script text-emeraldSoft accent at text-[clamp(2.6rem,12vw,11rem)] leading-[0.8] ml-1 -mb-2 so it sits on the baseline of the caps. Reuse the pattern on each section H2 (a .display cream phrase + a normal-tracking .script emeraldSoft accent word). Add a tiny text-shadow on .script.text-emeraldSoft for AA-large headroom on forest."}, {"component": "Brass-hairline grid system + brass-line divider", "description": "Instead of color blocks, the page is structured by a single brass metall…

---
"Verdance — Agency Website Design Studio (Dark Emerald)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/verdance-agency-website-design-studio-dark-emerald @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Verdance — Agency Website Design Studio (Dark Emerald). \"Verdance — Agency Website Design Studio (Dark Emerald)\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/verdance-agency-website-design-studio-dark-emerald @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-verdance-agency-website-design-studio-dark-emerald",
      "license": "CC0-1.0",
      "attribution": "\"Verdance — Agency Website Design Studio (Dark Emerald)\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/verdance-agency-website-design-studio-dark-emerald @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#f1ede3"
    },
    "foreground": {
      "$type": "color",
      "$value": "#0d1f17"
    },
    "card": {
      "$type": "color",
      "$value": "#f1ede3"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#0d1f17"
    },
    "primary": {
      "$type": "color",
      "$value": "#0d1f17"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#0a1711"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#0d1f17"
    },
    "accent": {
      "$type": "color",
      "$value": "#0a1711"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#e3dfd5"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#626d68"
    },
    "border": {
      "$type": "color",
      "$value": "#cfccc3"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#0d1f17"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.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)"
    }
  }
}

/* powered by Styledex — https://styledex.dev */
/* "Verdance — Agency Website Design Studio (Dark Emerald)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/verdance-agency-website-design-studio-dark-emerald @ 6c6090694520. */
:root {
  --background: #f1ede3;
  --foreground: #0d1f17;
  --card: #f1ede3;
  --card-foreground: #0d1f17;
  --primary: #0d1f17;
  --primary-foreground: #fafaf9;
  --secondary: #0a1711;
  --secondary-foreground: #0d1f17;
  --accent: #0a1711;
  --accent-foreground: #fafaf9;
  --muted: #e3dfd5;
  --muted-foreground: #626d68;
  --border: #cfccc3;
  --destructive: #dc2626;
  --ring: #0d1f17;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --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);
}

/* powered by Styledex — https://styledex.dev */
/* "Verdance — Agency Website Design Studio (Dark Emerald)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/verdance-agency-website-design-studio-dark-emerald @ 6c6090694520. */
/** Tailwind theme extend for Verdance — Agency Website Design Studio (Dark Emerald) (superdesign-verdance-agency-website-design-studio-dark-emerald) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#f1ede3",
        "foreground": "#0d1f17",
        "card": "#f1ede3",
        "primary": "#0d1f17",
        "primary-foreground": "#fafaf9",
        "secondary": "#0a1711",
        "accent": "#0a1711",
        "muted": "#e3dfd5",
        "border": "#cfccc3",
        "destructive": "#dc2626",
        "ring": "#0d1f17"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "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)"
      }
    }
  }
};

/* powered by Styledex — https://styledex.dev */
/* "Verdance — Agency Website Design Studio (Dark Emerald)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/verdance-agency-website-design-studio-dark-emerald @ 6c6090694520. */
@layer base {
:root {
  --background: #f1ede3;
  --foreground: #0d1f17;
  --card: #f1ede3;
  --card-foreground: #0d1f17;
  --primary: #0d1f17;
  --primary-foreground: #fafaf9;
  --secondary: #0a1711;
  --secondary-foreground: #0d1f17;
  --accent: #0a1711;
  --accent-foreground: #fafaf9;
  --muted: #e3dfd5;
  --muted-foreground: #626d68;
  --border: #cfccc3;
  --destructive: #dc2626;
  --ring: #0d1f17;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --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);
}
}