diff --git a/src/components/recommendation-tag/recommendation-tag.stories.tsx b/src/components/featured-tag/featured-tag.stories.tsx
similarity index 78%
rename from src/components/recommendation-tag/recommendation-tag.stories.tsx
rename to src/components/featured-tag/featured-tag.stories.tsx
index ee216287..5700c838 100644
--- a/src/components/recommendation-tag/recommendation-tag.stories.tsx
+++ b/src/components/featured-tag/featured-tag.stories.tsx
@@ -1,17 +1,17 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
-import { RecommendationTag } from "./recommendation-tag";
+import { FeaturedTag } from "./featured-tag";
 import { Panel } from "../panel";
 import { FormField } from "../form-field";
 
-const meta: Meta<typeof RecommendationTag> = {
-    title: "Input/RecommendationTag",
-    component: RecommendationTag,
+const meta: Meta<typeof FeaturedTag> = {
+    title: "Input/FeaturedTag",
+    component: FeaturedTag,
 };
 
 export default meta;
 
-type Story = StoryObj<typeof RecommendationTag>;
+type Story = StoryObj<typeof FeaturedTag>;
 
 const RadioBoxWithRecommendationTag = () => {
     const [value, setValue] = useState("value_1");
@@ -27,7 +27,7 @@ const RadioBoxWithRecommendationTag = () => {
                     id="value"
                 >
                     <FormField.RadioBox.Option value="option_1">
-                        Option 1<RecommendationTag>Recommended!</RecommendationTag>
+                        Option 1<FeaturedTag>Recommended!</FeaturedTag>
                     </FormField.RadioBox.Option>
 
                     <FormField.RadioBox.Option value="option_2">Option 2</FormField.RadioBox.Option>
@@ -50,7 +50,7 @@ export const PanelExample: Story = {
         <div className="w-96">
             <Panel className="relative">
                 <p>This example uses a Panel component</p>
-                <RecommendationTag>Recommended!</RecommendationTag>
+                <FeaturedTag>Recommended!</FeaturedTag>
             </Panel>
         </div>
     ),
diff --git a/src/components/recommendation-tag/recommendation-tag.tsx b/src/components/featured-tag/featured-tag.tsx
similarity index 51%
rename from src/components/recommendation-tag/recommendation-tag.tsx
rename to src/components/featured-tag/featured-tag.tsx
index ac77efdf..5fbb81ee 100644
--- a/src/components/recommendation-tag/recommendation-tag.tsx
+++ b/src/components/featured-tag/featured-tag.tsx
@@ -1,16 +1,16 @@
 import React, { ReactNode } from "react";
 import { classNames } from "../../util/class-names";
 
-interface RecommendationTagProps {
+interface FeaturedTagProps {
     children: ReactNode;
     className?: string;
 }
 
-export const RecommendationTag = ({ children, className }: RecommendationTagProps) => {
+export const FeaturedTag = ({ children, className }: FeaturedTagProps) => {
     return (
         <span
             className={classNames(
-                "absolute right-6 top-0 z-10 -translate-y-1/2 rounded border border-primary-500 bg-primary-100 px-1 text-xs uppercase tracking-wide text-primary-500",
+                "absolute right-4 top-0 z-10 -translate-y-1/2 rounded border border-primary-600 bg-primary-50 px-1 text-xs font-medium uppercase tracking-wide text-primary-600",
                 className
             )}
         >
diff --git a/src/components/form-field/radio-box/radio-box-option.tsx b/src/components/form-field/radio-box/radio-box-option.tsx
index f81d8cab..2fb94acc 100644
--- a/src/components/form-field/radio-box/radio-box-option.tsx
+++ b/src/components/form-field/radio-box/radio-box-option.tsx
@@ -1,83 +1,78 @@
 import { RadioGroup } from "@headlessui/react";
-import React from "react";
+import React, { Fragment } from "react";
 import { classNames } from "../../../util/class-names";
-import { RecommendationTag } from "../../recommendation-tag/recommendation-tag";
 
 export interface RadioBoxOptionProps {
     children: React.ReactNode;
     value: string;
     disabled?: boolean;
-    recommendationText?: string;
     className?: string;
 }
 
-export const radioBoxContainerStyles = {
-    base: "group relative flex items-center gap-3 rounded-lg bg-neutral-0 border p-4 border-neutral-300 hover:border-primary-500 hover:bg-primary-50",
-    checked: "border-primary-500 bg-primary-500 hover:bg-primary-500 hover:text-neutral-0",
+const radioBoxContainerStyles = {
+    base: "group relative flex items-center gap-3 rounded-lg bg-neutral-0 border p-4 border-neutral-300 hover:border-primary-600 hover:bg-primary-50 cursor-pointer focus:outline-none",
+    checked: "border-primary-600 bg-primary-600 hover:bg-primary-600 hover:text-neutral-0",
     disabled:
-        "border-neutral-400 bg-neutral-100 group-hover:border-neutral-400 group-hover:bg-neutral-100 hover:border-neutral-400 hover:bg-neutral-100",
+        "border-neutral-400 bg-neutral-100 group-hover:border-neutral-400 group-hover:bg-neutral-100 hover:border-neutral-400 hover:bg-neutral-100 cursor-not-allowed",
+    active: "ring-2 ring-primary-200",
 };
 
-export const radioBoxCircleStyles = {
+const radioBoxCircleStyles = {
     base: "relative inline-block h-4 w-4 shrink-0 rounded-full bg-neutral-0 border border-neutral-400",
-    unchecked: "group-hover:border-primary-500 group-hover:bg-neutral-0",
+    unchecked: "group-hover:border-primary-600 group-hover:bg-neutral-0",
+    checked: "border-transparent",
     disabled: "bg-neutral-100 group-hover:border-neutral-400 group-hover:bg-neutral-100",
 };
 
-export const RadioBoxOption = ({
-    children,
-    value,
-    disabled,
-    recommendationText,
-    className,
-}: RadioBoxOptionProps) => {
+const Title = ({ children }: { children: React.ReactNode }) => (
+    <h2 className="headline-500 text-neutral-900 group-[.is-checked]:text-neutral-0 group-[.is-disabled]:text-neutral-500">
+        {children}
+    </h2>
+);
+
+const Description = ({ children }: { children: React.ReactNode }) => (
+    <p className="paragraph-200 text-neutral-800 group-[.is-checked]:text-primary-100 group-[.is-disabled]:text-neutral-500">
+        {children}
+    </p>
+);
+
+export const RadioBoxOption = ({ children, value, disabled, className }: RadioBoxOptionProps) => {
     return (
-        <RadioGroup.Option
-            value={value}
-            className="w-full cursor-pointer focus:outline-none"
-            disabled={disabled}
-        >
-            {({ checked, disabled: optionDisabled }) => (
+        <RadioGroup.Option value={value} disabled={disabled} as={Fragment}>
+            {({ checked, disabled: optionDisabled, active }) => (
                 <div
                     className={classNames(
                         radioBoxContainerStyles.base,
-                        checked && radioBoxContainerStyles.checked,
-                        optionDisabled && radioBoxContainerStyles.disabled
+                        checked && classNames("is-checked", radioBoxContainerStyles.checked),
+                        optionDisabled &&
+                            classNames("is-disabled", radioBoxContainerStyles.disabled),
+                        active && radioBoxContainerStyles.active
                     )}
                 >
-                    {recommendationText && (
-                        <RecommendationTag>{recommendationText}</RecommendationTag>
-                    )}
-
                     <div
                         className={classNames(
                             radioBoxCircleStyles.base,
                             !checked && radioBoxCircleStyles.unchecked,
+                            checked && radioBoxCircleStyles.checked,
                             optionDisabled && radioBoxCircleStyles.disabled
                         )}
                     >
                         {checked && (
                             <div
                                 className={classNames(
-                                    "absolute inset-0 m-auto block h-2 w-2 rounded-full bg-primary-500",
+                                    "absolute inset-0 m-auto block h-2 w-2 rounded-full bg-primary-600",
                                     optionDisabled && "bg-neutral-500"
                                 )}
                             />
                         )}
                     </div>
 
-                    <div
-                        className={classNames(
-                            "flex flex-col gap-2",
-                            checked && "text-neutral-0",
-                            optionDisabled && "text-neutral-600",
-                            className
-                        )}
-                    >
-                        {children}
-                    </div>
+                    <div className={classNames("flex flex-col gap-2", className)}>{children}</div>
                 </div>
             )}
         </RadioGroup.Option>
     );
 };
+
+RadioBoxOption.Title = Title;
+RadioBoxOption.Description = Description;
diff --git a/src/components/form-field/radio-box/radio-box.stories.tsx b/src/components/form-field/radio-box/radio-box.stories.tsx
index 68315901..ce4203fe 100644
--- a/src/components/form-field/radio-box/radio-box.stories.tsx
+++ b/src/components/form-field/radio-box/radio-box.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
 import { FormField } from "../form-field";
 import { RadioBox } from "./radio-box";
+import { FeaturedTag } from "../../featured-tag/featured-tag";
 
 const meta: Meta<typeof RadioBox> = {
     title: "Input/RadioBox",
@@ -18,34 +19,33 @@ const RadioBoxWithHooks = () => {
     return (
         <FormField>
             <FormField.RadioBox id="value" value={value} onChange={setValue}>
-                <FormField.RadioBox.Option value="value_1" recommendationText="Recommended">
-                    <div className="flex flex-col gap-2">
-                        <h2 className="headline-500">Option 1</h2>
-                        <p className="paragraph-200">
-                            To be, or not to be, that is the question: Whether ’tis nobler in the
-                            mind to suffer The slings and arrows of outrageous fortune, …
-                        </p>
-                    </div>
+                <FormField.RadioBox.Option value="value_1">
+                    <FeaturedTag>Recommended</FeaturedTag>
+
+                    <FormField.RadioBox.Option.Title>Option 1</FormField.RadioBox.Option.Title>
+
+                    <FormField.RadioBox.Option.Description>
+                        To be, or not to be, that is the question: Whether ’tis nobler in the mind
+                        to suffer The slings and arrows of outrageous fortune, …
+                    </FormField.RadioBox.Option.Description>
                 </FormField.RadioBox.Option>
 
                 <FormField.RadioBox.Option value="value_2">
-                    <div className="flex flex-col gap-2">
-                        <h2 className="headline-500">Option 2</h2>
-                        <p className="paragraph-200">
-                            To be, or not to be, that is the question: Whether ’tis nobler in the
-                            mind to suffer The slings and arrows of outrageous fortune, …
-                        </p>
-                    </div>
+                    <FormField.RadioBox.Option.Title>Option 2</FormField.RadioBox.Option.Title>
+
+                    <FormField.RadioBox.Option.Description>
+                        To be, or not to be, that is the question: Whether ’tis nobler in the mind
+                        to suffer The slings and arrows of outrageous fortune, …
+                    </FormField.RadioBox.Option.Description>
                 </FormField.RadioBox.Option>
 
                 <FormField.RadioBox.Option value="value_3" disabled>
-                    <div className="flex flex-col gap-2">
-                        <h2 className="headline-500">Option 3</h2>
-                        <p className="paragraph-200">
-                            To be, or not to be, that is the question: Whether ’tis nobler in the
-                            mind to suffer The slings and arrows of outrageous fortune, …
-                        </p>
-                    </div>
+                    <FormField.RadioBox.Option.Title>Option 3</FormField.RadioBox.Option.Title>
+
+                    <FormField.RadioBox.Option.Description>
+                        To be, or not to be, that is the question: Whether ’tis nobler in the mind
+                        to suffer The slings and arrows of outrageous fortune, …
+                    </FormField.RadioBox.Option.Description>
                 </FormField.RadioBox.Option>
             </FormField.RadioBox>
         </FormField>
diff --git a/src/styles/global-styles.stories.tsx b/src/styles/global-styles.stories.tsx
new file mode 100644
index 00000000..56840911
--- /dev/null
+++ b/src/styles/global-styles.stories.tsx
@@ -0,0 +1,196 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { TableUnvirtualized } from "../components/table-unvirtualized/table-unvirtualized";
+
+const meta: Meta = {
+    title: "Global CSS Style Classes",
+};
+
+export default meta;
+type Story = StoryObj<object>;
+
+export const Headlines: Story = {
+    render: () => (
+        <div className="flex flex-col gap-4">
+            <h3 className="headline-700">Headline Styles</h3>
+
+            <TableUnvirtualized>
+                <TableUnvirtualized.Header>
+                    <TableUnvirtualized.Header.Row>
+                        <TableUnvirtualized.Header.Cell>ClassName</TableUnvirtualized.Header.Cell>
+                        <TableUnvirtualized.Header.Cell>Example</TableUnvirtualized.Header.Cell>
+                    </TableUnvirtualized.Header.Row>
+                </TableUnvirtualized.Header>
+
+                <TableUnvirtualized.Body>
+                    <TableUnvirtualized.Body.Row>
+                        <TableUnvirtualized.Body.Cell>
+                            <pre>headline-100</pre>
+                        </TableUnvirtualized.Body.Cell>
+                        <TableUnvirtualized.Body.Cell>
+                            <h1 className="headline-100">
+                                The quick brown fox jumps over the lazy dog
+                            </h1>
+                        </TableUnvirtualized.Body.Cell>
+                    </TableUnvirtualized.Body.Row>
+
+                    <TableUnvirtualized.Body.Row>
+                        <TableUnvirtualized.Body.Cell>
+                            <pre>headline-200</pre>
+                        </TableUnvirtualized.Body.Cell>
+                        <TableUnvirtualized.Body.Cell>
+                            <h1 className="headline-200">
+                                The quick brown fox jumps over the lazy dog
+                            </h1>
+                        </TableUnvirtualized.Body.Cell>
+                    </TableUnvirtualized.Body.Row>
+
+                    <TableUnvirtualized.Body.Row>
+                        <TableUnvirtualized.Body.Cell>
+                            <pre>headline-300</pre>
+                        </TableUnvirtualized.Body.Cell>
+                        <TableUnvirtualized.Body.Cell>
+                            <h1 className="headline-300">
+                                The quick brown fox jumps over the lazy dog
+                            </h1>
+                        </TableUnvirtualized.Body.Cell>
+                    </TableUnvirtualized.Body.Row>
+
+                    <TableUnvirtualized.Body.Row>
+                        <TableUnvirtualized.Body.Cell>
+                            <pre>headline-400</pre>
+                        </TableUnvirtualized.Body.Cell>
+                        <TableUnvirtualized.Body.Cell>
+                            <h1 className="headline-400">
+                                The quick brown fox jumps over the lazy dog
+                            </h1>
+                        </TableUnvirtualized.Body.Cell>
+                    </TableUnvirtualized.Body.Row>
+
+                    <TableUnvirtualized.Body.Row>
+                        <TableUnvirtualized.Body.Cell>
+                            <pre>headline-500</pre>
+                        </TableUnvirtualized.Body.Cell>
+                        <TableUnvirtualized.Body.Cell>
+                            <h1 className="headline-500">
+                                The quick brown fox jumps over the lazy dog
+                            </h1>
+                        </TableUnvirtualized.Body.Cell>
+                    </TableUnvirtualized.Body.Row>
+
+                    <TableUnvirtualized.Body.Row>
+                        <TableUnvirtualized.Body.Cell>
+                            <pre>headline-600</pre>
+                        </TableUnvirtualized.Body.Cell>
+                        <TableUnvirtualized.Body.Cell>
+                            <h1 className="headline-600">
+                                The quick brown fox jumps over the lazy dog
+                            </h1>
+                        </TableUnvirtualized.Body.Cell>
+                    </TableUnvirtualized.Body.Row>
+
+                    <TableUnvirtualized.Body.Row>
+                        <TableUnvirtualized.Body.Cell>
+                            <pre>headline-700</pre>
+                        </TableUnvirtualized.Body.Cell>
+                        <TableUnvirtualized.Body.Cell>
+                            <h1 className="headline-700">
+                                The quick brown fox jumps over the lazy dog
+                            </h1>
+                        </TableUnvirtualized.Body.Cell>
+                    </TableUnvirtualized.Body.Row>
+
+                    <TableUnvirtualized.Body.Row>
+                        <TableUnvirtualized.Body.Cell>
+                            <pre>headline-800</pre>
+                        </TableUnvirtualized.Body.Cell>
+                        <TableUnvirtualized.Body.Cell>
+                            <h1 className="headline-800">
+                                The quick brown fox jumps over the lazy dog
+                            </h1>
+                        </TableUnvirtualized.Body.Cell>
+                    </TableUnvirtualized.Body.Row>
+
+                    <TableUnvirtualized.Body.Row>
+                        <TableUnvirtualized.Body.Cell>
+                            <pre>headline-900</pre>
+                        </TableUnvirtualized.Body.Cell>
+                        <TableUnvirtualized.Body.Cell>
+                            <h1 className="headline-900">
+                                The quick brown fox jumps over the lazy dog
+                            </h1>
+                        </TableUnvirtualized.Body.Cell>
+                    </TableUnvirtualized.Body.Row>
+                </TableUnvirtualized.Body>
+            </TableUnvirtualized>
+        </div>
+    ),
+};
+
+export const Paragraphs: Story = {
+    render: () => (
+        <div className="flex flex-col gap-4">
+            <h3 className="headline-700">Paragraph Styles</h3>
+
+            <TableUnvirtualized>
+                <TableUnvirtualized.Header>
+                    <TableUnvirtualized.Header.Row>
+                        <TableUnvirtualized.Header.Cell>ClassName</TableUnvirtualized.Header.Cell>
+                        <TableUnvirtualized.Header.Cell>Example</TableUnvirtualized.Header.Cell>
+                    </TableUnvirtualized.Header.Row>
+                </TableUnvirtualized.Header>
+
+                <TableUnvirtualized.Body>
+                    <TableUnvirtualized.Body.Row>
+                        <TableUnvirtualized.Body.Cell>
+                            <pre>paragraph-100</pre>
+                        </TableUnvirtualized.Body.Cell>
+                        <TableUnvirtualized.Body.Cell>
+                            <p className="paragraph-100">
+                                The quick brown fox jumps over the lazy dog
+                            </p>
+                        </TableUnvirtualized.Body.Cell>
+                    </TableUnvirtualized.Body.Row>
+
+                    <TableUnvirtualized.Body.Row>
+                        <TableUnvirtualized.Body.Cell>
+                            <pre>paragraph-200</pre>
+                        </TableUnvirtualized.Body.Cell>
+                        <TableUnvirtualized.Body.Cell>
+                            <p className="paragraph-200">
+                                The quick brown fox jumps over the lazy dog
+                            </p>
+                        </TableUnvirtualized.Body.Cell>
+                    </TableUnvirtualized.Body.Row>
+
+                    <TableUnvirtualized.Body.Row>
+                        <TableUnvirtualized.Body.Cell>
+                            <pre>paragraph-300</pre>
+                        </TableUnvirtualized.Body.Cell>
+                        <TableUnvirtualized.Body.Cell>
+                            <p className="paragraph-300">
+                                The quick brown fox jumps over the lazy dog
+                            </p>
+                        </TableUnvirtualized.Body.Cell>
+                    </TableUnvirtualized.Body.Row>
+                </TableUnvirtualized.Body>
+            </TableUnvirtualized>
+        </div>
+    ),
+};
+
+export const InlineLink: Story = {
+    render: () => (
+        <div className="flex flex-col gap-4">
+            <h3 className="headline-700 font-mono">inline-link</h3>
+
+            <p className="paragraph-200">
+                <a href="https://abusix.com" className="inline-link">
+                    Be or not to be,
+                </a>{" "}
+                that is the question: Whether ’tis nobler in the mind to suffer The slings and
+                arrows of outrageous fortune, …
+            </p>
+        </div>
+    ),
+};
diff --git a/src/styles/index.css b/src/styles/index.css
index de1a102d..c48163d0 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -51,7 +51,7 @@
 }
 
 .inline-link {
-    @apply text-primary-600 underline hover:text-primary-900;
+    @apply text-primary-500 underline hover:text-primary-600;
 }
 
 /* Tailwind checkbox needs it to change styles of the check */
diff --git a/src/styles/styles.scoped.css b/src/styles/styles.scoped.css
index 9d0722aa..0b6fe083 100644
--- a/src/styles/styles.scoped.css
+++ b/src/styles/styles.scoped.css
@@ -52,7 +52,7 @@
     }
 
     .inline-link {
-        @apply text-primary-600 underline hover:text-primary-900;
+        @apply text-primary-500 underline hover:text-primary-600;
     }
 
     /* Tailwind checkbox needs it to change styles of the check */
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index fcaf06fb..5174e4c4 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -101,6 +101,7 @@ export default {
             fontFamily: {
                 display: ["Fabriga", "serif"],
                 sans: ["Inter", "sans-serif"],
+                mono: ["ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"]
             },
             maxWidth: {
                 285: "71.25rem",