diff --git a/ui/components/src/ui/components/tailwind/ComponentContext.scala b/ui/components/src/ui/components/tailwind/ComponentContext.scala
index 627656c..d0c324e 100644
--- a/ui/components/src/ui/components/tailwind/ComponentContext.scala
+++ b/ui/components/src/ui/components/tailwind/ComponentContext.scala
@@ -5,3 +5,4 @@
 
 trait ComponentContext:
   def messages: MessageCatalogue
+  def style: StyleGuide

diff --git a/ui/components/src/ui/components/tailwind/ComponentContext.scala b/ui/components/src/ui/components/tailwind/ComponentContext.scala
index 627656c..d0c324e 100644
--- a/ui/components/src/ui/components/tailwind/ComponentContext.scala
+++ b/ui/components/src/ui/components/tailwind/ComponentContext.scala
@@ -5,3 +5,4 @@
 
 trait ComponentContext:
   def messages: MessageCatalogue
+  def style: StyleGuide
diff --git a/ui/components/src/ui/components/tailwind/Layout.scala b/ui/components/src/ui/components/tailwind/Layout.scala
index 7362917..7d8a4ff 100644
--- a/ui/components/src/ui/components/tailwind/Layout.scala
+++ b/ui/components/src/ui/components/tailwind/Layout.scala
@@ -4,5 +4,5 @@
 import com.raquo.laminar.api.L.{*, given}
 
 object Layout:
-  def card(content: Modifier[HtmlElement]*): Div =
-    div(cls("bg-white shadow overflow-hidden sm:rounded-md"), content)
+  def card(content: Modifier[HtmlElement]*)(using cctx: ComponentContext): Div =
+    div(cctx.style.card, content)

diff --git a/ui/components/src/ui/components/tailwind/ComponentContext.scala b/ui/components/src/ui/components/tailwind/ComponentContext.scala
index 627656c..d0c324e 100644
--- a/ui/components/src/ui/components/tailwind/ComponentContext.scala
+++ b/ui/components/src/ui/components/tailwind/ComponentContext.scala
@@ -5,3 +5,4 @@
 
 trait ComponentContext:
   def messages: MessageCatalogue
+  def style: StyleGuide
diff --git a/ui/components/src/ui/components/tailwind/Layout.scala b/ui/components/src/ui/components/tailwind/Layout.scala
index 7362917..7d8a4ff 100644
--- a/ui/components/src/ui/components/tailwind/Layout.scala
+++ b/ui/components/src/ui/components/tailwind/Layout.scala
@@ -4,5 +4,5 @@
 import com.raquo.laminar.api.L.{*, given}
 
 object Layout:
-  def card(content: Modifier[HtmlElement]*): Div =
-    div(cls("bg-white shadow overflow-hidden sm:rounded-md"), content)
+  def card(content: Modifier[HtmlElement]*)(using cctx: ComponentContext): Div =
+    div(cctx.style.card, content)
diff --git a/ui/components/src/ui/components/tailwind/StyleGuide.scala b/ui/components/src/ui/components/tailwind/StyleGuide.scala
new file mode 100644
index 0000000..805cf80
--- /dev/null
+++ b/ui/components/src/ui/components/tailwind/StyleGuide.scala
@@ -0,0 +1,13 @@
+package works.iterative
+package ui.components.tailwind
+
+import com.raquo.laminar.api.L.{*, given}
+
+trait StyleGuide:
+  def card: Setter[HtmlElement]
+
+object StyleGuide:
+  object default extends StyleGuide:
+    override def card: Setter[HtmlElement] = cls(
+      "bg-white shadow px-4 py-5 sm:rounded-md sm:p-6 overflow-hidden"
+    )