Flamel brand style

Skill flamel-ai/skills/skills/flamel-brand-style

Apply, document, or review Flamel brand styling across the product app, public website, docs, landing pages, UI mocks, screenshots, OG images, and branded visual assets. Use when working on Flamel typography, fonts, color tokens, Tailwind v4 colors, solution colors, logos, flame gradients, roundedness, shadows, spacing, cards, buttons, dark mode, hero gradients, or when merging app and website design conventions into a clear brand system.From its SKILL.md

Install

npx -y skills add flamel-ai/skills --skill flamel-brand-style

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

26 days oldThe repository was created 26 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

28.4 KB, ~9.6k tokens by cl100k_base, as published. Nobody here has run it

Flamel Brand Style

Use this skill as a standalone Flamel brand and UI style guide. It already consolidates the product app, current website, and legacy website visual references into one working system. Do not re-read source files just to apply the brand. Only inspect source files when editing those files directly or when checking whether a local implementation has drifted.

Brand Direction

Flamel is a warm, modern, product-led brand for multi-location marketing. The shared visual system is:

Typography: Bricolage Grotesque for display and headings, Figtree for UI and body.
Palette: cool taupe/navy neutrals with warm orange as the primary Flamel accent.
Product app feel: quiet, dense, operational, token-driven, dark-mode safe.
Website feel: expressive, polished, sales-facing, rounded, visual, and product-led.
Solution system: each module gets a distinct Tailwind color family and gradient.
Logo: flame mark plus lowercase flamel wordmark, with module or solution gradients where appropriate.

Typography

Role	Family	Usage
Display and headings	`Bricolage Grotesque`, sans-serif	Brand wordmark, website H1/H2, app headings, OG headlines, hero display
Body and UI	`Figtree`, sans-serif	Product UI, website body, navigation, labels, dense dashboards, controls
Customer brand fonts	Dynamic custom fonts	Brand-specific creative/editor previews only

Implementation names:

Product app: --font-heading: "Bricolage Grotesque", sans-serif; --font-body: "Figtree", sans-serif.
Website Tailwind v4: --font-display: 'Bricolage Grotesque', sans-serif; --font-sans: 'Figtree', sans-serif.
Website loads Google Fonts weights 300, 400, 500, 600, and 700 for both families.
App base html font size is 17px; current website frontend base is 18px.
Logo wordmark uses Bricolage Grotesque, lowercase, bold, tight tracking, and no added letter spacing.

Type scale patterns:

Surface	Pattern
Website H1	`font-display text-3xl/10 tracking-tight sm:text-5xl/12 md:text-[5rem]/20`
Website H2/Subheading	`font-display text-[2rem]/10 tracking-tight sm:text-5xl/14`
Website body	`text-base/7`, with `sm:text-lg/8` for larger supporting copy
Product card title	`font-semibold text-2xl leading-none tracking-tight`
Product controls	`text-[clamp(0.75rem,1vw,0.875rem)]`, medium weight

Core Color System

Brand Orange

Token	Value	Use
`flamel`	`oklch(70.5% 0.213 47.604)`	Website primary orange accent
`flamel-light`	`oklch(93% 0.06 60)`	Light orange backgrounds
`flamel-dark`	`oklch(60% 0.19 48)`	Website orange hover and stronger accent
`flamel-deep`	`oklch(48% 0.19 48)`	Text-safe orange on light backgrounds
`fl-firebush`	`#f97316`, Tailwind `orange-500` when OKLCH supported	Product app brand orange
`fl-cinnabar`	`#ea580c`, Tailwind `orange-600` when OKLCH supported	Strong product app orange
`fl-mandy`	`#f43f5e`, Tailwind `rose-500` when OKLCH supported	Warm rose accent

Use orange as the main brand signal. Do not make every surface orange. In product UI, prefer semantic tokens and use orange for module identity, focus, links, highlights, or intentional brand moments.

Website Taupe Scale

The website uses Tailwind v4 custom colors for a cool slate/navy neutral palette:

Token	OKLCH
`taupe-50`	`oklch(98.5% 0.003 248)`
`taupe-100`	`oklch(97.8% 0.004 250)`
`taupe-200`	`oklch(93.2% 0.010 252)`
`taupe-300`	`oklch(87.5% 0.014 253)`
`taupe-400`	`oklch(71% 0.018 256)`
`taupe-500`	`oklch(55.5% 0.023 257)`
`taupe-600`	`oklch(45% 0.020 257)`
`taupe-700`	`oklch(37.5% 0.018 258)`
`taupe-800`	`oklch(25% 0.020 261)`
`taupe-900`	`oklch(19% 0.018 264)`
`taupe-950`	`oklch(15.5% 0.025 260)`

Website usage:

Light page background: taupe-50.
Dark page background: taupe-950.
Primary light text: text-taupe-950.
Secondary light text: text-taupe-700 or text-taupe-600.
Muted light text: text-taupe-500.
Dark primary text: dark:text-white.
Dark secondary text: dark:text-taupe-400.
Subtle section background: bg-taupe-950/2.5 or dark:bg-white/5.

Product App Semantic Tokens

In the product app, use shadcn semantic tokens rather than website taupe-* classes.

Light mode:

Token	HSL
`background`	`0 0% 100%`
`foreground`	`222 42% 14%`
`card`	`0 0% 98%`
`card-foreground`	`222.2 84% 4.9%`
`popover`	`0 0% 100%`
`primary`	`222 42% 14%`
`primary-foreground`	`210 40% 98%`
`secondary`	`210 50% 90%`
`secondary-foreground`	`210 70% 35%`
`muted`	`223 37% 96%`
`muted-foreground`	`0 0% 52%`
`accent`	`210 40% 96.1%`
`border`	`214.3 31.8% 91.4%`
`input`	`214 32% 92%`
`ring`	`222.2 84% 4.9%`

Dark mode:

Token	HSL
`background`	`220 10% 12%`
`foreground`	`210 20% 98%`
`card`	`220 9% 18%`
`card-foreground`	`210 20% 98%`
`popover`	`220 9% 20%`
`primary`	`210 20% 98%`
`primary-foreground`	`220 10% 12%`
`secondary`	`215 15% 28%`
`secondary-foreground`	`215 25% 90%`
`muted`	`220 9% 16%`
`muted-foreground`	`215 12% 55%`
`accent`	`220 9% 22%`
`border`	`220 8% 26%`
`input`	`220 10% 26%`
`ring`	`215 20% 65%`

State tokens:

State	Light	Dark	Typical classes
Destructive	`0 74% 45%`	`0 84% 60%`	`bg-destructive/10 text-destructive border-destructive/30`
Warning	`43 96% 50%`	`43 96% 56%`	`bg-warning/10 text-warning border-warning/30`
Info	`212 92% 42%`	`210 100% 55%`	`bg-info/10 text-info border-info/30`
Success	`160 84% 32%`	`160 84% 45%`	`bg-success/10 text-success border-success/30`

Product UI defaults:

Containers: bg-background, bg-card, bg-muted.
Main text: text-foreground.
Supporting text: text-muted-foreground.
Borders: border-border.
Primary actions: bg-primary text-primary-foreground.
Secondary actions: bg-secondary text-secondary-foreground.

Tailwind v4 Solution Colors

Flamel solutions use Tailwind v4 color families. Use 500 as the primary, 300 as the light gradient stop, and 700 as the dark gradient stop.

Solution	Primary	Gradient A	Gradient B	Hero gradient
Organic	`orange-500`	`orange-300`	`orange-700`	`from-orange-500 to-orange-700`
Paid	`emerald-500`	`emerald-300`	`emerald-700`	`from-emerald-500 to-emerald-700`
Blog	`violet-500`	`violet-300`	`violet-700`	`from-violet-500 to-violet-700`
Google Reviews	`amber-500`	`amber-300`	`amber-700`	`from-amber-500 to-amber-700`
Google Business Profile	`red-500`	`red-300`	`red-700`	`from-red-500 to-red-700`
Google Ads	`blue-500`	`blue-300`	`blue-700`	`from-blue-500 to-blue-700`
NPS	`teal-500`	`teal-300`	`teal-700`	`from-teal-500 to-teal-700`
Email	`pink-500`	`pink-300`	`pink-700`	`from-pink-500 to-pink-700`
File Management	`sky-500`	`sky-300`	`sky-700`	`from-sky-500 to-sky-700`
ChatGPT Ads	`neutral-600`	`neutral-300`	`neutral-700` or `neutral-800`	`from-neutral-600 to-neutral-800`
Billing	`lime-600`	`lime-300`	`lime-700`	Product app module accent
Documents	`sky-600` in app tokens	`sky-300`	`sky-700`	Check existing local surface

Website bento card accents:

Solution	Border	Background gradient	Icon background	Text
Organic	`border-orange-200 dark:border-orange-500/20`	`from-orange-50 to-orange-100/50 dark:from-orange-950/30 dark:to-orange-900/20`	`bg-orange-500/15`	`text-orange-600 dark:text-orange-400`
Paid	`border-emerald-200 dark:border-emerald-500/20`	`from-emerald-50 to-emerald-100/50 dark:from-emerald-950/30 dark:to-emerald-900/20`	`bg-emerald-500/15`	`text-emerald-600 dark:text-emerald-400`
Blog	`border-violet-200 dark:border-violet-500/20`	`from-violet-50 to-violet-100/50 dark:from-violet-950/30 dark:to-violet-900/20`	`bg-violet-500/15`	`text-violet-600 dark:text-violet-400`
Google Reviews	`border-amber-200 dark:border-amber-500/20`	`from-amber-50 to-amber-100/50 dark:from-amber-950/30 dark:to-amber-900/20`	`bg-amber-500/15`	`text-amber-600 dark:text-amber-400`
Google Business Profile	`border-red-200 dark:border-red-500/20`	`from-red-50 to-red-100/50 dark:from-red-950/30 dark:to-red-900/20`	`bg-red-500/15`	`text-red-600 dark:text-red-400`
Google Ads	`border-blue-200 dark:border-blue-500/20`	`from-blue-50 to-blue-100/50 dark:from-blue-950/30 dark:to-blue-900/20`	`bg-blue-500/15`	`text-blue-600 dark:text-blue-400`
NPS	`border-teal-200 dark:border-teal-500/20`	`from-teal-50 to-teal-100/50 dark:from-teal-950/30 dark:to-teal-900/20`	`bg-teal-500/15`	`text-teal-600 dark:text-teal-400`
Email	`border-pink-200 dark:border-pink-500/20`	`from-pink-50 to-pink-100/50 dark:from-pink-950/30 dark:to-pink-900/20`	`bg-pink-500/15`	`text-pink-600 dark:text-pink-400`
File Management	`border-sky-200 dark:border-sky-500/20`	`from-sky-50 to-sky-100/50 dark:from-sky-950/30 dark:to-sky-900/20`	`bg-sky-500/15`	`text-sky-600 dark:text-sky-400`
ChatGPT Ads	`border-neutral-200 dark:border-neutral-500/20`	`from-neutral-50 to-neutral-100/50 dark:from-neutral-950/30 dark:to-neutral-900/20`	`bg-neutral-500/15`	`text-neutral-600 dark:text-neutral-400`

Logo System

Use inline SVG logo components where possible. Prefer raster logos only for existing static assets, exported images, emails, or customer logo overrides.

Logo construction:

Mark: two-path Flamel flame SVG.
Wordmark: lowercase flamel.
Wordmark font: Bricolage Grotesque, bold, tight tracking.
Standard lockup: flame on the left, wordmark on the right, gap-1 or gap-1.5.
Preserve the flame path geometry. Do not redraw, simplify, or approximate it.
Use unique gradient IDs when rendering inline SVG in React.

Canonical logo pattern:

Use the normalized 28 x 40 two-path flame shown below for new brand work.
Do not use oversized exported flame assets with a 500 500 viewBox, hardcoded legacy orange/red/pink gradients, non-unique SVG IDs, or untyped any props as the pattern for new work.
For full product branding, use the flame plus lowercase flamel wordmark lockup shown below.
For flame-only marks, use the normalized two-path flame with unique gradient IDs and module or solution gradient stops.

Product app logo behavior:

Light mode: module-colored wordmark plus module-specific gradient flame.
Dark mode: solid foreground/white for both flame and wordmark.
Default size: flame h-[2.4rem], wordmark text-[2.4rem].
Medium size: flame h-8, wordmark text-3xl.
Small size: flame h-6, wordmark text-2xl.
User logo overrides may replace the default logo with an image. Preserve this behavior.

Website logo behavior:

Flame height: h-10.
Wordmark: font-display text-[2.5rem] leading-none font-bold tracking-tight.
Default gradient: Organic orange.
Solution pages may tint the flame with that solution's gradient.

Logo usage rules:

Use full lockup for brand moments, nav, marketing pages, onboarding, and empty states.
Use flame alone only when space is constrained or the Flamel name is already visible nearby.
Keep clear space around the logo. Do not trap it inside busy cards.
Over complex or dark backgrounds, use solid white/foreground or add enough contrast.
Do not apply generic shadows, outlines, glows, or filters to the logo unless matching an existing component treatment.

Module Logo Colors

Product app logo module colors:

Module	Text color token
Organic	`var(--color-fl-solution-organic)`
Paid	`var(--color-fl-solution-paid)`
Email	`var(--color-fl-solution-email)`
Blog	`var(--color-fl-solution-blog)`
Google Business Profile	`var(--color-fl-solution-gbp)`
Google Reviews	`var(--color-fl-solution-googlereviews)`
Google Ads	`var(--color-fl-solution-googleads)`
ChatGPT Ads	`var(--color-fl-solution-chatgptads)`
NPS	`var(--color-fl-solution-nps)`
Billing	`var(--color-fl-solution-billing)`
Documents	currently `var(--color-fl-solution-billing)` in app logo mapping

Product app gradient stop pattern:

type LogoGradient = { start: string; mid: string; end: string };

const organicGradient: LogoGradient = {
  start: "var(--color-fl-solution-organic-gradient-A)",
  mid: "var(--color-fl-solution-organic)",
  end: "var(--color-fl-solution-organic-gradient-B)",
};

Every module follows that pattern: gradient-A for the first stop, the module primary color for the middle stop, and gradient-B for the final stop.

Clean Flame SVG

Use this normalized flame for new standalone SVG work. This raw SVG uses the Organic orange module gradient. Change the three stop colors for other modules.

<svg width="28" height="40" viewBox="0 0 28 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
  <path
    d="M3.95886 10.1069C3.63089 11.1335 3.48103 12.1226 3.51871 13.1339C3.54097 13.9071 3.65315 14.6658 3.9443 15.3869C4.39986 16.5023 5.17568 17.3054 6.33257 17.6775C7.9296 18.198 9.52663 18.1537 11.0714 17.5136C12.8474 16.7848 13.8998 15.3716 14.4445 13.5794C15.2357 10.991 15.0268 8.41032 14.3177 5.84498C13.8099 4.00077 13.0264 2.28286 11.7805 0.803055C11.5415 0.520578 11.2581 0.290158 11.0269 0C11.6614 0.170681 12.2061 0.50607 12.7584 0.818416C14.4976 1.81519 16.1314 2.96729 17.5572 4.38053C20.0277 6.81957 21.6992 9.68275 22.2061 13.1561C22.5341 15.4168 22.2661 17.6331 21.6093 19.7973C20.699 22.7945 19.2433 25.5092 17.2737 27.9559C16.3112 29.1532 15.4301 30.4171 14.8033 31.838C14.3109 32.9457 14.0343 34.0987 13.9375 35.3182C13.8253 36.7903 14.0865 38.2036 14.4821 39.6023C14.5121 39.7141 14.6166 39.8481 14.5121 39.9522C14.4076 40.0563 14.2732 39.9667 14.161 39.93C10.8925 38.8146 7.83284 37.3049 5.15342 35.1032C3.84754 34.0244 2.72062 32.7751 1.82491 31.3251C0.854706 29.7634 0.370031 28.0455 0.153382 26.2457C-0.406649 21.5451 0.615794 17.1134 2.48171 12.8293C2.8328 12.0185 3.22756 11.2377 3.66857 10.4721C3.72851 10.3604 3.77304 10.2264 3.95971 10.1077L3.95886 10.1069Z"
    fill="url(#flamel-flame-1)"
  />
  <path
    d="M23.9212 15.4167C24.4136 15.9672 24.7647 16.6064 25.1149 17.2465C26.2718 19.3288 27.1376 21.5229 27.4878 23.8953C28.0547 27.7775 26.98 31.1015 24.1225 33.8162C23.1 34.7908 21.8986 35.5264 20.764 36.3371C19.3613 37.3408 17.9056 38.2778 16.6297 39.4384C16.4353 39.6168 16.3985 39.505 16.3385 39.3343C15.7417 37.6241 15.6518 35.9062 16.2195 34.1584C16.884 32.1136 18.0109 30.336 19.3691 28.7222C21.324 26.4018 22.4963 23.7093 23.3244 20.8393C23.7423 19.3962 24.0557 17.9317 24.018 16.4144C24.0103 16.0875 23.9512 15.7598 23.9212 15.4176V15.4167Z"
    fill="url(#flamel-flame-2)"
  />
  <defs>
    <linearGradient id="flamel-flame-1" x1="11.1733" y1="0" x2="11.1733" y2="40.0009" gradientUnits="userSpaceOnUse">
      <stop stop-color="var(--color-fl-solution-organic-gradient-A)" />
      <stop offset="0.755" stop-color="var(--color-fl-solution-organic)" />
      <stop offset="1" stop-color="var(--color-fl-solution-organic-gradient-B)" />
    </linearGradient>
    <linearGradient id="flamel-flame-2" x1="21.7364" y1="15.4167" x2="21.7364" y2="39.529" gradientUnits="userSpaceOnUse">
      <stop stop-color="var(--color-fl-solution-organic-gradient-A)" />
      <stop offset="0.755" stop-color="var(--color-fl-solution-organic)" />
      <stop offset="1" stop-color="var(--color-fl-solution-organic-gradient-B)" />
    </linearGradient>
  </defs>
</svg>

In React, replace static IDs with useId()-based IDs if more than one logo can render on the same page.

function FlamelFlameMark({
  className,
  gradient = {
    start: "var(--color-fl-solution-organic-gradient-A)",
    mid: "var(--color-fl-solution-organic)",
    end: "var(--color-fl-solution-organic-gradient-B)",
  },
}: {
  className?: string;
  gradient?: { start: string; mid: string; end: string };
}) {
  const id = React.useId();
  const gradientId1 = `flamel-gradient-1-${id}`;
  const gradientId2 = `flamel-gradient-2-${id}`;

  return (
    <svg
      width="28"
      height="40"
      viewBox="0 0 28 40"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      aria-hidden="true"
    >
      <path
        d="M3.95886 10.1069C3.63089 11.1335 3.48103 12.1226 3.51871 13.1339C3.54097 13.9071 3.65315 14.6658 3.9443 15.3869C4.39986 16.5023 5.17568 17.3054 6.33257 17.6775C7.9296 18.198 9.52663 18.1537 11.0714 17.5136C12.8474 16.7848 13.8998 15.3716 14.4445 13.5794C15.2357 10.991 15.0268 8.41032 14.3177 5.84498C13.8099 4.00077 13.0264 2.28286 11.7805 0.803055C11.5415 0.520578 11.2581 0.290158 11.0269 0C11.6614 0.170681 12.2061 0.50607 12.7584 0.818416C14.4976 1.81519 16.1314 2.96729 17.5572 4.38053C20.0277 6.81957 21.6992 9.68275 22.2061 13.1561C22.5341 15.4168 22.2661 17.6331 21.6093 19.7973C20.699 22.7945 19.2433 25.5092 17.2737 27.9559C16.3112 29.1532 15.4301 30.4171 14.8033 31.838C14.3109 32.9457 14.0343 34.0987 13.9375 35.3182C13.8253 36.7903 14.0865 38.2036 14.4821 39.6023C14.5121 39.7141 14.6166 39.8481 14.5121 39.9522C14.4076 40.0563 14.2732 39.9667 14.161 39.93C10.8925 38.8146 7.83284 37.3049 5.15342 35.1032C3.84754 34.0244 2.72062 32.7751 1.82491 31.3251C0.854706 29.7634 0.370031 28.0455 0.153382 26.2457C-0.406649 21.5451 0.615794 17.1134 2.48171 12.8293C2.8328 12.0185 3.22756 11.2377 3.66857 10.4721C3.72851 10.3604 3.77304 10.2264 3.95971 10.1077L3.95886 10.1069Z"
        fill={`url(#${gradientId1})`}
      />
      <path
        d="M23.9212 15.4167C24.4136 15.9672 24.7647 16.6064 25.1149 17.2465C26.2718 19.3288 27.1376 21.5229 27.4878 23.8953C28.0547 27.7775 26.98 31.1015 24.1225 33.8162C23.1 34.7908 21.8986 35.5264 20.764 36.3371C19.3613 37.3408 17.9056 38.2778 16.6297 39.4384C16.4353 39.6168 16.3985 39.505 16.3385 39.3343C15.7417 37.6241 15.6518 35.9062 16.2195 34.1584C16.884 32.1136 18.0109 30.336 19.3691 28.7222C21.324 26.4018 22.4963 23.7093 23.3244 20.8393C23.7423 19.3962 24.0557 17.9317 24.018 16.4144C24.0103 16.0875 23.9512 15.7598 23.9212 15.4176V15.4167Z"
        fill={`url(#${gradientId2})`}
      />
      <defs>
        <linearGradient id={gradientId1} x1="11.1733" y1="0" x2="11.1733" y2="40.0009" gradientUnits="userSpaceOnUse">
          <stop stopColor={gradient.start} />
          <stop offset="0.755" stopColor={gradient.mid} />
          <stop offset="1" stopColor={gradient.end} />
        </linearGradient>
        <linearGradient id={gradientId2} x1="21.7364" y1="15.4167" x2="21.7364" y2="39.529" gradientUnits="userSpaceOnUse">
          <stop stopColor={gradient.start} />
          <stop offset="0.755" stopColor={gradient.mid} />
          <stop offset="1" stopColor={gradient.end} />
        </linearGradient>
      </defs>
    </svg>
  );
}

Clean Wordmark Lockup

Use this structure for a standalone full logo. It includes the normalized inline flame plus the lowercase Bricolage Grotesque wordmark.

function FlamelLogoLockup({
  className,
  textColor = "var(--color-fl-solution-organic)",
  gradient,
}: {
  className?: string;
  textColor?: string;
  gradient?: { start: string; mid: string; end: string };
}) {
  return (
    <div className={cn("flex flex-row items-center gap-1.5", className)}>
      <FlamelFlameMark className="h-[2.4rem] w-fit shrink-0" gradient={gradient} />
      <span
        className="whitespace-nowrap font-bold font-heading text-[2.4rem] leading-none tracking-tight antialiased"
        style={{ color: textColor }}
      >
        flamel
      </span>
    </div>
  );
}

Product App UI Rules

Use this when building Flamel product surfaces: dashboards, dialogs, tables, command center, analytics, billing, playbooks, media library, settings, and internal tools.

Required:

Use shadcn dynamic color tokens, not website taupe classes.
Support light and dark mode.
Use flex plus gap-* for spacing.
Use padding for internal spacing.
Do not use margin utilities (m-*, mt-*, mb-*, ml-*, mr-*, mx-*, my-*).
Do not use space-x-* or space-y-*.
Use the product's shared primitive components.
Use Lucide icons where available.
Use native overflow-x-auto or overflow-y-auto; do not use ScrollArea.
Use DialogContent size="full" for large dialogs.

Product shape and depth:

Element	Default
Global radius	`--radius: 0.6rem`
Card	`rounded-lg border bg-card text-card-foreground shadow-fl`
Button	`inline-flex items-center justify-center gap-2 rounded-lg font-medium`
Badge	`rounded-full border`, tiny badges may use `rounded`
Icon button	square, `rounded-lg`, stable `h-* w-*`
Soft card shadow	`shadow-fl` = `0px 0px 20px 0px rgba(21, 30, 51, 0.05)`
Hairline shadow	`shadow-xs` = `0 1px 0 0 rgb(0 0 0 / 0.05)`

Product button variants:

Variant	Classes
Default	`bg-primary text-primary-foreground hover:bg-primary/80`
Destructive	`bg-destructive text-destructive-foreground hover:bg-destructive/80`
Outline	`border border-input bg-background text-accent-foreground hover:bg-background/80`
Secondary	`bg-secondary text-secondary-foreground hover:bg-secondary/80`
Warning	`bg-warning text-warning-foreground hover:bg-warning/80`
Ghost	`hover:bg-accent hover:text-accent-foreground`
Link	`text-primary underline-offset-4 hover:underline`

Product card pattern:

<Card className="flex flex-col gap-4 border-border bg-card p-4 text-card-foreground shadow-fl">
  <div className="flex items-center justify-between gap-3">
    <h3 className="font-semibold text-foreground">Title</h3>
    <Badge variant="secondary">Status</Badge>
  </div>
  <p className="text-muted-foreground text-sm">Supporting detail.</p>
</Card>

Website UI Rules

Use this when building Flamel public website surfaces: homepage, landing pages, solution pages, pricing, blog, case studies, docs marketing sections, and visual sales assets.

Required:

Use Tailwind v4 tokens: font-display, font-sans, taupe-*, flamel, flamel-light, flamel-dark, flamel-deep.
Use font-display for H1/H2/brand display text and font-sans for body.
Use rounded pill CTAs (rounded-full).
Use rounded-2xl for hero shells, bento cards, screenshots, and large panels.
Use rounded-lg for smaller media, wallpaper panels, and compact cards.
Use product screenshots, real UI visuals, generated bitmaps, or meaningful media. Avoid decorative SVG-only compositions.
Use dark variants for every taupe or solution color.

Website component patterns:

Element	Pattern
Button	`inline-flex shrink-0 items-center justify-center gap-1 rounded-full text-sm/7 font-medium`
Primary dark/light button	`bg-taupe-950 text-white hover:bg-taupe-800 dark:bg-taupe-300 dark:text-taupe-950`
Accent button	`bg-flamel text-white hover:bg-flamel-dark`
Soft button	`bg-taupe-950/10 text-taupe-950 hover:bg-taupe-950/15 dark:bg-white/10 dark:text-white`
Section	`py-24 sm:py-32`
Container	`w-full max-w-2xl px-6 md:max-w-3xl lg:max-w-7xl lg:px-10`
Badge	`inline-flex w-fit items-center gap-2 rounded-full border border-taupe-200 bg-white px-4 py-1.5 text-sm font-medium text-taupe-700 dark:border-taupe-700 dark:bg-taupe-900 dark:text-taupe-300`
Feature card	`rounded-2xl border border-taupe-200/80 bg-white shadow-sm hover:shadow-lg dark:border-white/5 dark:bg-taupe-900`

Website section composition:

Start with usable content, not marketing filler.
Keep the brand/product/place/object visible in the first viewport.
Let the next section peek below a hero on mobile and desktop.
Use full-width bands or constrained unframed layouts. Do not put cards inside cards.
Keep body copy readable and concise. Use text-pretty or text-balance where helpful.

Gradients And Backgrounds

Use gradients deliberately for brand moments, hero fields, module identity, logo flame fills, metric emphasis, and website marketing visuals. Do not use gradients as generic decoration in product UI.

Website mesh hero:

.flamel-mesh {
  --flamel-mesh-bg:
    radial-gradient(ellipse 70% 50% at 65% 30%, rgba(249, 115, 22, 0.28), transparent 70%),
    radial-gradient(ellipse 50% 60% at 25% 75%, rgba(244, 114, 182, 0.10), transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 80%, rgba(251, 146, 60, 0.16), transparent 60%),
    linear-gradient(180deg, var(--color-taupe-950) 0%, var(--color-taupe-900) 50%, var(--color-taupe-950) 100%);
}

Mobile mesh boosts orange and pink:

@media (max-width: 639px) {
  .flamel-mesh {
    --flamel-mesh-bg:
      radial-gradient(ellipse 80% 50% at 60% 25%, rgba(249, 115, 22, 0.38), transparent 70%),
      radial-gradient(ellipse 60% 60% at 30% 70%, rgba(244, 114, 182, 0.13), transparent 70%),
      radial-gradient(ellipse 50% 50% at 80% 80%, rgba(251, 146, 60, 0.24), transparent 60%),
      linear-gradient(180deg, var(--color-taupe-950) 0%, var(--color-taupe-900) 50%, var(--color-taupe-950) 100%);
  }
}

Gradient rules:

Pair hero gradients with subtle noise overlays.
Use bg-gradient-to-b for solution hero backgrounds.
Use module gradients on logo flame fills and large metric emphasis.
Use text gradients sparingly and only for large display/metric text.
Avoid generic orbs, bokeh blobs, and decorative gradient fields that do not carry brand meaning.

Shadows, Borders, And Roundedness

Product app:

Prefer borders and subtle shadows over heavy depth.
Use shadow-fl for soft cards.
Use shadow-xs for sticky bars, compact rows, and hairline separation.
Use shadow-md or stronger only for popovers, menus, drag overlays, or selected/raised interactive states.
Default radius: rounded-lg; pills: rounded-full.

Website:

CTAs and badges: rounded-full.
Hero shells, bento cards, media frames: rounded-2xl.
Smaller media and compact cards: rounded-lg.
Default card depth: shadow-sm.
Interactive card hover: hover:shadow-lg and optionally a very slight translate.
Use ring-1 ring-inset ring-white/10 on dark hero shells when needed.

Motion

Use motion as a quiet affordance, not a spectacle.

Allowed patterns:

Accordion/collapsible transitions around 0.2s ease-out.
Hover color transitions on buttons and cards.
Website marquee motion for logo/solution rows.
Gentle float for visual objects.
Subtle loading shimmer where the product already uses it.

Avoid:

Long decorative animations in dense product UI.
Animations that change layout dimensions after load.
Motion that makes operational dashboards harder to scan.

Accessibility And Contrast

Use flamel-deep for small orange text on light backgrounds.
Use semantic app state tokens for error, warning, info, and success.
Preserve dark variants on website taupe and solution classes.
Avoid white text on light gradient endpoints unless a darker overlay or deep stop is present.
Prefer solid white or foreground logo treatment on dark/complex backgrounds.
Check focus states. Product controls should use visible focus rings.
Text must fit in buttons, cards, tabs, nav items, and badges at mobile and desktop widths.

Common Decisions

Task	Do
Product dashboard card	Use semantic tokens, `rounded-lg`, `border`, `bg-card`, `shadow-fl`, compact spacing
Product warning	Use `bg-warning/10`, `text-warning`, `border-warning/30`
Product destructive state	Use `bg-destructive/10`, `text-destructive`, `border-destructive/30`
Product dialog	Use primitive dialog sizing, especially `size="full"` for large flows
Website CTA	Use rounded-full website button variants with taupe or flamel colors
Website hero	Use product visuals, mesh or solution gradient, white display text, noise overlay
Website neutral section	Use taupe backgrounds and `text-taupe-*` with dark variants
Module-specific marketing	Use solution Tailwind v4 color family and gradient stops
App logo	Use module gradient in light mode, solid foreground in dark mode
Website logo	Use solution-aware flame gradient when route-specific, Organic orange otherwise

What ships with it: 1 file

246 B alongside SKILL.md

agents/

openai.yaml246 B