diff --git a/front/src/components/ui/Alert.vue b/front/src/components/ui/Alert.vue
index 5aa406f06..8924702a6 100644
--- a/front/src/components/ui/Alert.vue
+++ b/front/src/components/ui/Alert.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type PastelProps, propsToColor } from '~/composables/colors'
+import { type PastelProps, color } from '~/composables/colors'
 
 type Props = PastelProps
 
@@ -9,7 +9,7 @@ const props = defineProps<Props>()
 <template>
   <div
     class="funkwhale is-colored solid alert"
-    v-bind="propsToColor(props)"
+    v-bind="color(props)"
   >
     <slot />
 
diff --git a/front/src/components/ui/Button.vue b/front/src/components/ui/Button.vue
index 46d4d9199..52505d806 100644
--- a/front/src/components/ui/Button.vue
+++ b/front/src/components/ui/Button.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { ref, computed, useSlots, onMounted } from 'vue'
-import { type ColorProps, type VariantProps, type DefaultProps, type RaisedProps, propsToColor } from '~/composables/colors';
+
+import { type ColorProps, type VariantProps, type DefaultProps, type RaisedProps, color } from '~/composables/colors';
+import { type WidthProps, width } from '~/composables/widths'
 
 import Loader from '~/components/ui/Loader.vue'
 
 const props = defineProps<{
-  width?: 'standard' | 'auto' | 'full'
   alignText?: 'left' | 'center' | 'right'
-  alignSelf?: 'start' | 'center' | 'end'
+  alignSelf?: 'start' | 'center' | 'end' | 'baseline'
   thin?: true
 
   isActive?: boolean
@@ -21,7 +22,14 @@ const props = defineProps<{
 
   autofocus? : boolean
   ariaPressed? : true
-} & (ColorProps | DefaultProps) & VariantProps & RaisedProps>()
+} & (ColorProps | DefaultProps)
+  & VariantProps
+  & RaisedProps
+  & WidthProps>()
+
+if ('minContent' in props) {
+  console.log("MIN CONTENT")
+}
 
 const slots = useSlots()
 const isIconOnly = computed(() => !!props.icon && !slots.default)
@@ -33,6 +41,11 @@ const fontWeight = props.thin ? 400 : 900
 
 const button = ref()
 
+const attributes = computed(() => ({
+  ...color(props, ['interactive']),
+  ...width(props, [isIconOnly.value ? 'minContent' : 'buttonWidth'])
+}))
+
 const click = async (...args: any[]) => {
   internalLoader.value = true
 
@@ -50,10 +63,9 @@ onMounted(() => {
 <template>
   <button ref="button"
     :aria-pressed="props.ariaPressed"
-    v-bind="propsToColor({...props, interactive:true})"
+    v-bind="attributes"
     class="funkwhale button"
     :class="[
-      'is-' + width,
       'is-text-aligned-' + (alignText ?? 'center'),
       'is-self-aligned-' + (alignSelf ?? 'center'),
       {
@@ -79,6 +91,8 @@ onMounted(() => {
 <style lang="scss">
 .funkwhale {
   &.button {
+    --padding: 10px;
+
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -86,11 +100,11 @@ onMounted(() => {
 
     font-family: $font-main;
     font-weight: v-bind(fontWeight);
-    font-size: 0.875em;
+    font-size: 14px;
 
     line-height: 1em;
 
-    padding: 9px 10px 11px 10px;
+    padding: 9px var(--padding) 11px var(--padding);
     &.is-icon-only {
       padding: 10px;
     }
@@ -117,10 +131,6 @@ onMounted(() => {
       box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
     }
 
-    &:not(.is-icon-only):not(.is-auto), &.is-standard {
-      min-width: 8.5rem;
-    }
-
     align-self: start;
 
     &.is-self-aligned-start {
@@ -135,6 +145,10 @@ onMounted(() => {
       align-self: flex-end;
     }
 
+    &.is-self-aligned-baseline {
+      align-self: baseline;
+    }
+
     &.is-full {
       align-self: stretch;
     }
@@ -157,16 +171,16 @@ onMounted(() => {
     }
 
     i.bi {
-      font-size: 1.2rem;
+      font-size: 1.2rem;/* Must not increase the height of the button */
+      margin: -0.1rem;
       &.large {
         font-size:2rem;
+        margin: -0.1rem;
       }
-      /* Must not increase the height of the button */
-      margin: -0.5rem 0;
     }
 
     i.bi + span:not(:empty) {
-      margin-left: 1ch;
+      margin-left: 10px;
     }
   }
 }
diff --git a/front/src/components/ui/Card.vue b/front/src/components/ui/Card.vue
index 15956d194..c0f206cff 100644
--- a/front/src/components/ui/Card.vue
+++ b/front/src/components/ui/Card.vue
@@ -2,7 +2,8 @@
 import { computed } from 'vue'
 
 import { type RouterLinkProps, RouterLink } from 'vue-router';
-import { type ColorProps, type DefaultProps, type PastelProps, type RaisedProps, type VariantProps, propsToColor } from '~/composables/colors'
+import { type ColorProps, type DefaultProps, type PastelProps, type RaisedProps, type VariantProps, color } from '~/composables/colors'
+import { type WidthProps, width } from '~/composables/widths'
 
 import Pill from './Pill.vue'
 import Alert from './Alert.vue'
@@ -16,36 +17,29 @@ const props = defineProps<{
   tags?: string[]
   image?: string | { src: string, style?: "withPadding" }
   icon?: string
-} & (
-  { [Width in 'large' | 'medium' | 'small' | 'auto']?: true } | { width?: string }
-) & Partial<RouterLinkProps> & (PastelProps | ColorProps | DefaultProps) & RaisedProps & VariantProps>()
+} & Partial<RouterLinkProps>
+  & (PastelProps | ColorProps | DefaultProps)
+  & RaisedProps
+  & VariantProps
+  & WidthProps
+  >()
 
 const image = typeof props.image === 'string' ? { src: props.image } : props.image
 
-const width =
-  'width' in props && props.width
-    ? props.width
-    : 'auto' in props && props.auto
-      ? 'auto'
-      : 'large' in props && props.large ?
-        '304px'
-      : 'medium' in props && props.medium ?
-        '208px'
-      : 'small' in props && props.small ?
-        'min-content'
-        : '304px'
-
-console.log("WIDTH", width, props)
-
 const isExternalLink = computed(() => {
   return typeof props.to === 'string' && props.to.startsWith('http')
 })
+
+const attributes = computed(() => ({
+  ...color(props, props.to ? ['interactive', 'solid'] : []),
+  ...width(props, ['medium'])
+}))
 </script>
 
 <template>
   <Layout stack no-gap
     :class="{ [$style.card]: true, [$style['is-category']]: category }"
-    v-bind="propsToColor({...(props.to? { interactive: true, solid: true, default: true } : {}), ...props})"
+    v-bind="attributes"
   >
 
     <!-- Link -->
@@ -68,7 +62,11 @@ const isExternalLink = computed(() => {
 
     <!-- Title -->
 
-    <component :class="$style.title" :is="typeof category === 'string' ? category : 'h6'">{{ title }}</component>
+    <component :is="typeof category === 'string' ? category : 'h6'"
+       :class="$style.title"
+    >
+      {{ title }}
+    </component>
 
     <!-- Content -->
 
@@ -86,9 +84,10 @@ const isExternalLink = computed(() => {
       <slot />
     </Layout>
 
-    <Spacer grow :size="0" />
+    <Spacer grow :size=0 />
 
     <!-- Footer and Action -->
+
     <div v-if="$slots.footer" :class="$style.footer">
       <slot name="footer" />
     </div>
@@ -104,7 +103,6 @@ const isExternalLink = computed(() => {
 
 <style module>
 .card {
-  --fw-card-width: v-bind(width);
   --fw-card-padding: v-bind("props.small ? '16px' : '24px'");
 
   position: relative;
@@ -116,8 +114,6 @@ const isExternalLink = computed(() => {
   border-radius: var(--fw-border-radius);
   font-size: 1rem;
 
-  width: var(--fw-card-width);
-
   >.covering {
     position: absolute;
     inset: 0;
@@ -125,7 +121,6 @@ const isExternalLink = computed(() => {
     &~:is(.title, .content) {
       pointer-events:none;
     }
-
     &:hover~:is(.content) {
       text-decoration: underline
     }
@@ -151,10 +146,12 @@ const isExternalLink = computed(() => {
 
   >.icon {
     position: absolute;
-    top: 22px;
-    right: 22px;
+    top: 20px;
+    right: 20px;
 
     font-size: 1rem;
+
+    pointer-events: none;
   }
   &:has(>.image)>.icon {
     top: var(--fw-card-padding);
@@ -175,7 +172,7 @@ const isExternalLink = computed(() => {
     overflow: hidden;
     flex-shrink: 0;
   }
-  &:has(>.icon)>.title {
+  &:has(>.icon):not(:has(.image))>.title {
     padding-right:calc(var(--fw-card-padding) + 22px);
   }
   &.is-category>.title {
@@ -189,6 +186,7 @@ const isExternalLink = computed(() => {
   >.alert {
     padding-left: var(--fw-card-padding);
     padding-right: var(--fw-card-padding);
+    margin-top: 8px;
   }
 
   >.tags {
@@ -229,12 +227,9 @@ const isExternalLink = computed(() => {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
       border: 8px solid transparent;
-
       &:not(:first-child) {
         border-bottom-left-radius: 0;
-
       }
-
       &:not(:last-child) {
         border-bottom-right-radius: 0;
       }
diff --git a/front/src/components/ui/Layout.vue b/front/src/components/ui/Layout.vue
index 4d7ab47ac..57e0fb5e7 100644
--- a/front/src/components/ui/Layout.vue
+++ b/front/src/components/ui/Layout.vue
@@ -6,13 +6,13 @@ const props = defineProps<{
   noWrap?:true
 }
   & { [P in "stack" | "grid" | "flex" | "columns"]?: true | string }
-  & { [C in "nav" | "aside" | "header" | "footer" | "main"]?:true }>()
-const columnWidth = props.columnWidth ?? 320
+  & { [C in "nav" | "aside" | "header" | "footer" | "main" | "h1" | "h2" | "h3" | "h4" | "h5"]?:true }>()
+const columnWidth = props.columnWidth ?? 46
 </script>
 
 <template>
   <component
-    :is="props.nav ? 'nav' : props.aside ? 'aside' : props.header ? 'header' : props.footer ? 'footer' : props.main ? 'main' : 'div'"
+    :is="props.nav ? 'nav' : props.aside ? 'aside' : props.header ? 'header' : props.footer ? 'footer' : props.main ? 'main' : props.h1? 'h1' : props.h2? 'h2' : props.h3? 'h3' : props.h4? 'h4' : props.h5? 'h5' : 'div'"
     :class="[
     $style.layout,
     noGap || $style.gap,
@@ -59,7 +59,7 @@ const columnWidth = props.columnWidth ?? 320
   &.grid {
     display: grid;
     grid-template-columns:
-      repeat(auto-fit, minmax(min-content, calc(v-bind(columnWidth) * 1px)));
+      repeat(auto-fit, calc(v-bind(columnWidth) * 1px));
     grid-auto-flow: row dense;
     place-content: center; /* If the grid has a fixed size smaller than its container, center it */
   }
diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index 8b8c3ec51..82340cabf 100644
--- a/front/src/components/ui/Link.vue
+++ b/front/src/components/ui/Link.vue
@@ -1,31 +1,42 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+
 import { type RouterLinkProps, RouterLink } from 'vue-router'
-import { type ColorProps, type DefaultProps, type VariantProps, propsToColor } from '~/composables/colors';
+import { type ColorProps, type DefaultProps, type VariantProps, color, isNoColors } from '~/composables/colors';
+import { type WidthProps, width } from '~/composables/widths'
 
-const { to, icon, thickWhenActive, round, ...colorProps } = defineProps<{
-    width?: 'standard' | 'auto' | 'full'
-    alignText?: 'left' | 'center' | 'right' | 'stretch'
-    alignSelf?: 'start' | 'center' | 'end'
-    thickWhenActive?: true
+const props = defineProps<{
+  alignText?: 'left' | 'center' | 'right' | 'stretch'
+  alignSelf?: 'start' | 'center' | 'end'
+  thickWhenActive?: true
 
-    icon?: string;
-    round?: true;
-  } & RouterLinkProps & (ColorProps | DefaultProps) & VariantProps>()
+  thin?: true
+
+  icon?: string;
+  round?: true;
+} & RouterLinkProps
+  & (ColorProps | DefaultProps)
+  & VariantProps
+  & WidthProps>()
 
 const isExternalLink = computed(() => {
-  return typeof to === 'string' && to.startsWith('http')
+  return typeof props.to === 'string' && props.to.startsWith('http')
 })
 
-const [fontWeight, activeFontWeight] = thickWhenActive ? [600, 900] : [400, 400]
+const [fontWeight, activeFontWeight] = props.thickWhenActive ? [600, 900] : [400, 400]
 
-const isIconOnly = computed(() => !!icon)
-const isSimple = propsToColor(colorProps).class === ''
+const isIconOnly = computed(() => !!props.icon)
+const isSimple = isNoColors(props)
+
+const attributes = computed(() => ({
+  ...color(props, ['interactive']),
+  ...width(props, ['auto'])
+}))
 </script>
 
 <template>
   <a v-if="isExternalLink"
-    v-bind="propsToColor({ ...colorProps, interactive: true })"
+    v-bind="attributes"
     :class="[
       $style.link,
       $style['is-' + width],
@@ -46,7 +57,7 @@ const isSimple = propsToColor(colorProps).class === ''
   </a>
   <RouterLink v-else
     :to="to"
-    v-bind="propsToColor({ ...colorProps, interactive: true })"
+    v-bind="color(props, ['interactive'])"
     :class="[
       $style.link,
       $style['is-' + width],
diff --git a/front/src/components/ui/Modal.vue b/front/src/components/ui/Modal.vue
index bd99748e5..2041af104 100644
--- a/front/src/components/ui/Modal.vue
+++ b/front/src/components/ui/Modal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type ColorProps, type DefaultProps, propsToColor } from '~/composables/colors';
+import { type ColorProps, type DefaultProps, color } from '~/composables/colors';
 import { watchEffect } from 'vue';
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut';
 
@@ -34,7 +34,7 @@ onKeyboardShortcut('escape', () => isOpen.value = false)
         <div @click.stop
           class="funkwhale modal raised"
           :class="[$slots.alert && 'has-alert', overPopover && 'over-popover']"
-          v-bind="propsToColor(colorProps)"
+          v-bind="color(colorProps)"
         >
           <h2>
             {{ title }}
diff --git a/front/src/components/ui/Pill.vue b/front/src/components/ui/Pill.vue
index 862ae2d89..114e78c6c 100644
--- a/front/src/components/ui/Pill.vue
+++ b/front/src/components/ui/Pill.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type ColorProps, type PastelProps, propsToColor } from '~/composables/colors'
+import { type ColorProps, type PastelProps, color } from '~/composables/colors'
 
 const emit = defineEmits<{
   click: [event: MouseEvent]
@@ -13,7 +13,7 @@ const props = defineProps<PastelProps | ColorProps>()
 <template>
   <button
     class="funkwhale pill outline"
-    v-bind="propsToColor({...props, interactive:true})"
+    v-bind="color(props, ['interactive'])"
     @click.stop="handleClick"
   >
     <div v-if="!!$slots.image" class="pill-image">
diff --git a/front/src/components/ui/Popover.vue b/front/src/components/ui/Popover.vue
index 2cb0196b5..5a66b9fc3 100644
--- a/front/src/components/ui/Popover.vue
+++ b/front/src/components/ui/Popover.vue
@@ -4,7 +4,7 @@ import { whenever, useElementBounding, onClickOutside } from '@vueuse/core'
 
 import { isMobileView, useScreenSize } from '~/composables/screen'
 import { POPOVER_INJECTION_KEY, POPOVER_CONTEXT_INJECTION_KEY } from '~/injection-keys'
-import { type ColorProps, type DefaultProps, type RaisedProps, propsToColor } from '~/composables/colors';
+import { type ColorProps, type DefaultProps, type RaisedProps, color } from '~/composables/colors';
 
 /* TODO: Basic accessibility
 
@@ -144,7 +144,7 @@ watch(open, (isOpen) => {
         :style="position"
         :class="{ 'is-mobile': isMobile }"
         class="funkwhale popover"
-        v-bind="propsToColor(colorProps)"
+        v-bind="color(colorProps)"
         style="display:flex; flex-direction:column;"
       >
         <slot name="items" />
diff --git a/front/src/components/ui/activity.scss b/front/src/components/ui/activity.scss
index a42a5ef29..36e6b6abb 100644
--- a/front/src/components/ui/activity.scss
+++ b/front/src/components/ui/activity.scss
@@ -67,6 +67,8 @@
     grid-template-columns: auto 1fr auto;
     gap: 12px;
 
+    grid-column: span 4;
+
     > .activity-image {
       position: relative;
       width: 40px;
diff --git a/front/src/composables/colors.ts b/front/src/composables/colors.ts
index 460549037..5e24ff4a6 100644
--- a/front/src/composables/colors.ts
+++ b/front/src/composables/colors.ts
@@ -5,55 +5,98 @@ export type DefaultProps =
 export type Default = KeysOfUnion<DefaultProps>
 
 export type ColorProps =
-  | { primary?: true}
+  | { primary?: true }
   | { secondary?: true }
   | { destructive?: true }
 export type Color = KeysOfUnion<ColorProps>
 
 export type PastelProps =
-  | { red?:true }
-  | { blue?:true }
-  | { purple?:true }
+  | { red?: true }
+  | { blue?: true }
+  | { purple?: true }
   | { green?: true }
-  | { yellow?:true }
+  | { yellow?: true }
 export type Pastel = KeysOfUnion<PastelProps>
 
 export type VariantProps =
-  | { solid?:true }
-  | { outline?:true }
-  | { ghost?:true }
+  | { solid?: true }
+  | { outline?: true }
+  | { ghost?: true }
 export type Variant = KeysOfUnion<VariantProps>
 
 export type InteractiveProps =
-| { interactive?: true }
+  | { interactive?: true }
 export type Interactive = KeysOfUnion<DefaultProps>
 
 export type RaisedProps =
-| { raised?: true }
+  | { raised?: true }
 export type Raised = KeysOfUnion<RaisedProps>
 
-export type Props =
-  DefaultProps & ColorProps & PastelProps & VariantProps & InteractiveProps & RaisedProps
+/* Props to Classes */
 
-export type ColorSelector =
-  `${Color | Pastel | Default}${'' | ` ${Variant}${'' | ' interactive'}${'' | ' raised'}`}`
+export type Props =
+  (DefaultProps | ColorProps | PastelProps) & VariantProps & InteractiveProps & RaisedProps
+
+export type Key =
+  KeysOfUnion<Props>
+
+// You can only have one color
+const conflicts: Set<Key>[] = [
+  new Set(['default', 'primary', 'secondary', 'destructive', 'red', 'blue', 'purple', 'green', 'yellow']),
+  new Set(['solid', 'outline', 'ghost'])
+]
+
+const classes = {
+  default: "default",
+  primary: "primary",
+  secondary: "secondary",
+  destructive: "destructive",
+  red: "red",
+  blue: "blue",
+  purple: "purple",
+  green: "green",
+  yellow: "yellow",
+  solid: "solid",
+  outline: "outline",
+  ghost: "ghost",
+  raised: "raised",
+  interactive: "interactive"
+} satisfies Record<Key, string>
 
 /**
- * Apply a color class for setting `color`, `background-color` and `border` styles.
- * You can override it with `style="..."`.
- *
- * @param color Choose a semantic color or the default page background.
- * This will affect the text color.
- * To add an outline or filled background, add a `Variant`: `'solid' | 'outline'`.
- * If the surface should stand out, add `raised`.
- * If the surface reacts to mouse input, add `interactive`.
- * @returns the corresponding `class` object
- *
- * Note: Make sure to implement the necessary classes in `colors.scss`!
+ * @param props A superset of `{ Key? : true }`
+ * @returns the number of actually applied classes (if there are no defaults)
  */
-export const color = (color: ColorSelector) =>
-  ({ class: color })
+export const isNoColors = (props: Partial<Props>) =>
+  color(props).class===''
 
-// Color from Props
-export const propsToColor = (props: Partial<Props>) =>
-  ({ class: Object.entries(props).filter(([key, value])=>value && key).map(([key,_])=>key).join(" ") })
+/**
+ * Add color classes to your component.
+ * Color classes are defined in `colors.scss`. Make sure to implement the correct style there!
+ *
+ * (1) Add a subset of `& (DefaultProps | ColorProps | PastelProps) & VariantProps & InteractiveProps & RaisedProps` to your `Props` type
+ * (2) Call `v-bind="propsToColor(props)"` on your component template
+ * (3) Now your component accepts color props such as `secondary outline raised`.
+ *
+ * @param props Your component's props (or ...rest props if you have destructured them already)
+ * @returns the corresponding `class` object
+ */
+export const color = (props: Partial<Props>, defaults?: Key[]) => ({
+  class:
+    Object.entries(props).reduce(
+      ((acc, [key, value]) =>
+        value && key in classes ?
+          acc.filter(accKey => !conflicts.find(set => set.has(accKey) && set.has(key as Key)))
+            .concat([key as Key])
+          : acc
+      ),
+      defaults || []
+    ).join(' ')
+})
+
+type ColorSelector =
+  `${Color | Pastel | Default}${'' | ` ${Variant}${'' | ' interactive'}${'' | ' raised'}`}`
+
+// Convenience function for applying default colors. Prefer using `color`
+export const setColors = (color: ColorSelector) =>
+  ({ class: color })
diff --git a/front/src/composables/widths.ts b/front/src/composables/widths.ts
new file mode 100644
index 000000000..a59232a27
--- /dev/null
+++ b/front/src/composables/widths.ts
@@ -0,0 +1,51 @@
+import type { KeysOfUnion } from "type-fest"
+
+export type WidthProps =
+  | { minContent?: true }
+  | { tiny?: true }
+  | { buttonWidth?: true }
+  | { small?: true }
+  | { medium?: true }
+  | { auto?: true }
+  | { full?: true }
+export type Key = KeysOfUnion<WidthProps>
+
+const styles : Record<Key, string> = {
+  minContent: 'width: min-content;',
+  tiny: "width: 124px; grid-column: span 2;",
+  buttonWidth: "width: 136px; grid-column: span 2; flex-grow:0;",
+  small: "width: 202px; grid-column: span 3;",
+  medium: "width: 280px; grid-column: span 4;",
+  auto: "width: auto;",
+  full: "width: auto; grid-column: 1 / -1; align-self: auto;",
+};
+
+// All keys are exclusive
+const conflicts: Set<Key>[] = [
+  new Set(Object.keys(styles) as Key[])
+]
+
+/**
+ * Add a width style to your component.
+ * Widths are designed to work both in a page-grid context and in a flex or normal context.
+ *
+ * (1) Add `& WidthProps` to your `Props` type
+ * (2) Call `v-bind="propsToWidth(props)"` on your component template
+ * (3) Now your component accepts width props such as `small`, `medium`, `stretch`.
+ *
+ * @param props Your component's props (or ...rest props if you have destructured them already)
+ * @returns the corresponding `style` object
+ */
+export const width = (props: Partial<WidthProps>, defaults: Key[] = []) => ({
+  style:
+    Object.entries(props).reduce(
+      ((acc, [key, value]) =>
+        value && key in styles ?
+          acc.filter(accKey => !conflicts.find(set => set.has(accKey) && set.has(key as Key)))
+            .concat([key as Key])
+          : acc
+      ),
+      defaults
+    ).map(key => styles[key])
+     .join(' ')
+})
diff --git a/front/src/ui/App.vue b/front/src/ui/App.vue
index 7ec1d82c5..f2e314133 100644
--- a/front/src/ui/App.vue
+++ b/front/src/ui/App.vue
@@ -17,7 +17,7 @@ onMounted(async () => {
 <template>
   <div class="funkwhale grid">
     <Sidebar/>
-    <RouterView v-bind="color('default solid')" />
+    <RouterView v-bind="color({}, ['default', 'solid'])" />
     <LanguagesModal />
     <ShortcutsModal />
   </div>
diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index 014c01c71..a4028b461 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -33,7 +33,7 @@ const uploads = useUploadsStore()
 </script>
 
 <template>
-  <Layout aside :class="[$style.sidebar, $style['sticky-content']]" v-bind="color('default solid raised')">
+  <Layout aside :class="[$style.sidebar, $style['sticky-content']]" v-bind="color({}, ['default', 'solid', 'raised'])">
     <Layout flex no-gap header style="justify-content:space-between; padding-right:8px;">
       <Link to="/"
         :class="$style['logo']"
diff --git a/front/src/ui/components/UserMenu.vue b/front/src/ui/components/UserMenu.vue
index c375ef822..4986396f5 100644
--- a/front/src/ui/components/UserMenu.vue
+++ b/front/src/ui/components/UserMenu.vue
@@ -45,13 +45,12 @@ const labels = computed(() => ({
 <template>
   <Popover raised v-model:open="isOpen">
     <Button
+      min-content
       @click="isOpen = !isOpen"
       round
       default
       raised
-      icon=""
       ghost
-      class="is-icon-only"
       :ariaPressed="isOpen ? true : undefined"
     >
       <img
diff --git a/front/src/ui/modals/Languages.vue b/front/src/ui/modals/Languages.vue
index 83dc9f43c..5391bda15 100644
--- a/front/src/ui/modals/Languages.vue
+++ b/front/src/ui/modals/Languages.vue
@@ -29,12 +29,11 @@ const isOpen = computed({
     :title="t('components.common.UserMenu.label.language')"
     v-model="isOpen"
   >
-    <Layout columns :column-width="140">
-      <Button ghost thin
+    <Layout columns :column-width="200">
+      <Button ghost thin small
         v-for="(language, key) in SUPPORTED_LOCALES"
-        width="full"
         align-text="left"
-        :aria-pressed="key===locale"
+        :aria-pressed="key===locale || undefined"
         :key="key"
         @click="setI18nLanguage(key)"
       >
diff --git a/front/ui-docs/components/ui/button.md b/front/ui-docs/components/ui/button.md
index 7b1bac40c..4a09d6853 100644
--- a/front/ui-docs/components/ui/button.md
+++ b/front/ui-docs/components/ui/button.md
@@ -10,15 +10,28 @@ const click = () => new Promise(resolve => setTimeout(resolve, 1000))
 
 Buttons are UI elements that users can interact with to perform actions. Funkwhale uses buttons in many contexts.
 
-| Prop           | Data type | Required? | Default | Description                                    |
-| -------------- | --------- | --------- | ------- | ---------------------------------------------- |
-| `shadow`       | Boolean   | No        | `false` | Whether to render the button with a shadow     |
-| `round`        | Boolean   | No        | `false` | Whether to render the button as a round button |
-| `icon`         | String    | No        |         | The icon attached to the button                |
-| `aria-pressed` | Boolean   | No        | `false` | Whether the button is in an active state       |
-| `is-loading`   | Boolean   | No        | `false` | Whether the button is in a loading state       |
+```ts
+{
+  alignText?: 'left' | 'center' | 'right'
+  alignSelf?: 'start' | 'center' | 'end'
+  thin?: true
 
-In addition, use [Colors] and [Variants]
+  isActive?: boolean
+  isLoading?: boolean
+
+  shadow?: boolean
+  round?: boolean
+  icon?: string
+
+  onClick?: (...args: any[]) => void | Promise<void>
+
+  autofocus? : boolean
+  ariaPressed? : true
+} & (ColorProps | DefaultProps)
+  & VariantProps
+  & RaisedProps
+  & WidthProps
+```
 
 ## Button colors
 
@@ -307,27 +320,31 @@ Icon buttons shrink down to the icon size if you don't pass any content. If you
 ```vue-html
 <Button icon="bi-three-dots-vertical" />
 <Button round icon="bi-x" />
-<Button primary icon="bi-save" width="standard" />
+<Button primary icon="bi-save" buttonWidth/>
 <Button destructive icon="bi-trash">
   Delete
 </Button>
 ```
 
+<Layout flex>
 <Button icon="bi-three-dots-vertical" />
-<Button round icon="bi-x" />
-<Button primary icon="bi-save" width="standard" />
+<Button round secondary icon="bi-x large" />
+<Button primary icon="bi-save" buttonWidth/>
 <Button destructive icon="bi-trash">
   Delete
 </Button>
+</Layout>
 
 ## Width and alignment
 
 <Layout flex>
 
 ```vue-html
-    <Button width="auto">·</Button>
-    <Button width="standard">·</Button>
-    <Button width="full">·</Button>
+    <Button min-content>·</Button>
+    <Button small>·</Button>
+    <Button buttonWidth>·</Button>
+    <Button medium>·</Button>
+    <Button auto>·</Button>
 
     <hr />
 
@@ -342,10 +359,12 @@ Icon buttons shrink down to the icon size if you don't pass any content. If you
     <Button alignText="right">·</Button>
 ```
 
-  <Layout class="preview solid secondary" stack no-gap>
-    <Button width="auto">·</Button>
-    <Button width="standard">·</Button>
-    <Button width="full">·</Button>
+  <Layout class="preview solid primary" stack no-gap>
+    <Button min-content>·</Button>
+    <Button tiny>·</Button>
+    <Button buttonWidth>·</Button>
+    <Button small>·</Button>
+    <Button auto>·</Button>
     <hr />
     <Button alignSelf="start">·</Button>
     <Button alignSelf="center">·</Button>
@@ -354,6 +373,5 @@ Icon buttons shrink down to the icon size if you don't pass any content. If you
     <Button alignText="left">·</Button>
     <Button alignText="center">·</Button>
     <Button alignText="right">·</Button>
-    (Text to stretch the column)
   </Layout>
 </Layout>
diff --git a/front/ui-docs/components/ui/card.md b/front/ui-docs/components/ui/card.md
index f736bfb43..db3e50ea8 100644
--- a/front/ui-docs/components/ui/card.md
+++ b/front/ui-docs/components/ui/card.md
@@ -14,32 +14,33 @@
 
 Funkwhale cards are used to contain textual information, links, and interactive buttons. You can use these to create visually pleasing links to content or to present information.
 
-::: details Parameters
-
-#### Props
+::: details Props
 
 ```ts
-interface Props extends Partial<RouterLinkProps> {
-  title: string;
-  category?: true | "h1" | "h2" | "h3" | "h4" | "h5";
-  color?: Pastel;
-  image?: string | { src: string; style?: "withPadding" };
-  tags?: string[];
-}
+{
+  title: string
+  category?: true | "h1" | "h2" | "h3" | "h4" | "h5"
+
+  tags?: string[]
+  image?: string | { src: string, style?: "withPadding" }
+  icon?: string
+} & Partial<RouterLinkProps>
+  & (PastelProps | ColorProps | DefaultProps)
+  & RaisedProps
+  & VariantProps
+  & WidthProps
 ```
 
-You have to set a title for the card by passing a `title` prop.
-
-#### Style
-
-- Set `--width` on the element to override the default Card width.
-
 :::
 
-<Layout grid :column-width=290>
+<Layout grid class="preview">
+
+<div style="grid-column: span 5; grid-row: span 2;">
 
 ```vue-html
-<Card title="For music lovers">
+<Card large
+  title="For music lovers"
+>
   Access your personal music
   collection from anywhere.
   Funkwhale gives you access to
@@ -49,11 +50,11 @@ You have to set a title for the card by passing a `title` prop.
 </Card>
 ```
 
-<div class="preview">
-<Card title="For music lovers">
+</div>
+
+<Card medium title="For music lovers">
   Access your personal music collection from anywhere. Funkwhale gives you access to publication and sharing tools that you can use to promote your content across the web.
 </Card>
-</div>
 
 </Layout>
 
@@ -61,56 +62,60 @@ You have to set a title for the card by passing a `title` prop.
 
 Add a `:to` prop, either containing an external link (`"https://..."`) or a Vue Router destination:
 
-<Layout flex>
+<Layout flex class="preview">
 
 ```ts
-<Card small title="Link"
+<Card min-content title="Link"
   :to="{name: 'library.albums.detail', params: {id: album.id}}"
 />
 ```
 
-<Layout class="preview">
-<Card small title="Link"
+<Card min-content title="Link"
   :to="{name: 'library.albums.detail', params: {id: 1}}"
 />
 </Layout>
-</Layout>
 
 ## Card as a Category header
 
 Category cards are basic cards that contain only a title. To create a category card, pass a `category` prop.
 
-<Layout flex>
+<Layout flex class="preview">
+
+```vue-html{1,5}
+<Card category min-content
+  title="Good Translations"
+/>
 
-```vue-html{1}
 <Card category
-  title="Example Translations"
+  title="Bad Translations"
 />
 ```
 
-<div class="preview">
-  <Card category
-  title="Example Translations"
+<Layout stack>
+  <Card category min-content
+  title="Good Translations"
   />
-</div>
+  <Card category
+  title="Bad Translations"
+  />
+</Layout>
 </Layout>
 
 ## Add an Image
 
 Pass an image source to the `image` prop or set both `image.src` and `image.style` by passing an object.
 
-<Layout grid>
+<Layout grid class="preview">
 
-<div style="max-width: 320px;">
+<div style="grid-column: span 5; grid-row: span 2">
 
-```vue-html{4,11-12}
-<Card medium
+```vue-html{3,8-9}
+<Card
   title="For music lovers"
   image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb">
 />
 
-
-<Card medium
+<Card
   title="For music lovers"
   :image="{ src:'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
             style:'withPadding' }"
@@ -118,40 +123,57 @@ Pass an image source to the `image` prop or set both `image.src` and `image.styl
 ```
 
 </div>
+<Card
+  title="For music lovers"
+  image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
+/>
 
-<Layout stack class="preview">
-  <Card medium
-    title="For music lovers"
-    image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
-  />
-
-<Card medium
+<Card
     title="For music lovers"
     :image="{ src:'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
               style:'withPadding' }"
   />
 </Layout>
-</Layout>
 
 ## Add an Icon
 
-<Layout columns>
+<Layout grid class="preview">
 
-```vue-html{4}
-<Card
+<div style="grid-column: span 5; grid-row: span 2;">
+
+```vue-html{4,10}
+<Card large
   title="Uploading..."
   image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
   icon="bi-cloud-arrow-up-fill"
 />
+
+
+<Card large
+  to="./"
+  title="Find out more"
+  icon="bi-box-arrow-up-right"
+>
+Visit the Docs and learn more about developing Funkwhale
+</Card>
 ```
 
-<Layout class="preview">
-<Card
+</div>
+
+<Card medium
   title="Uploading..."
   image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
   icon="bi-cloud-arrow-up-fill"
 />
-</Layout>
+
+<Card medium
+  to="./"
+  title="Find out more"
+  icon="bi-box-arrow-up-right">
+
+Visit the Docs and learn more about developing Funkwhale
+
+</Card>
 </Layout>
 
 You can combine this prop with any other prop configuration. If you combine it with an image, keep an eye on the contrast ratio between the icon color and the image.
@@ -177,10 +199,10 @@ You can combine this prop with any other prop configuration. If you combine it w
 Items in this region are secondary and will be displayed smaller than the main content.
 
 ```vue-html{3-9}
-<Card title="My items">
+<Card large title="My items">
   <template #alert> There are no items in this list </template>
   <template #footer>
-    <Button variant="outline" icon="bi-upload" @click="alert('Uploaded. Press OK!')">
+    <Button outline icon="bi-upload" @click="alert('Uploaded. Press OK!')">
       Upload
     </Button>
     <Spacer style="flex-grow: 1" />
@@ -190,13 +212,13 @@ Items in this region are secondary and will be displayed smaller than the main c
 ```
 
 <div class="preview">
-<Card title="My items">
+<Card medium title="My items">
 
 <template #alert>There are no items in this list
 </template>
 
 <template #footer>
-<Button variant="outline" icon="bi-upload" @click="alert('Uploaded. Press OK!')">Upload</Button>
+<Button outline icon="bi-upload" @click="alert('Uploaded. Press OK!')">Upload</Button>
 <Spacer style="flex-grow: 1" />
 <OptionsButton />
 </template>
@@ -209,20 +231,24 @@ Items in this region are secondary and will be displayed smaller than the main c
 Large Buttons or links at the bottom edge of the card serve as Call-to-Actions (CTA).
 
 ```vue-html{3-6}
-<Card title="Join an existing pod">
+<Card large
+  title="Join an existing pod"
+>
   The easiest way to get started with Funkwhale is to register an account on a public pod.
   <template #action>
-    <Button secondary @click="alert('Open the pod picker')">Action!
+    <Button secondary full @click="alert('Open the pod picker')">Action!
     </Button>
   </template>
 </Card>
 ```
 
 <div class="preview">
-  <Card title="Join an existing pod">
+  <Card medium
+    title="Join an existing pod"
+  >
     The easiest way to get started with Funkwhale is to register an account on a public pod.
     <template #action>
-      <Button secondary @click="alert('Open the pod picker')">Action!
+      <Button secondary full @click="alert('Open the pod picker')">Action!
       </Button>
     </template>
   </Card>
@@ -245,14 +271,21 @@ If there are multiple actions, they will be presented in a row:
 ```
 
 <div class="preview">
-  <Card title="Creating a new playlist...">
+  <Card full  title="Creating a new playlist...">
     All items have been assimilated. Ready to go!
     <template #action>
-      <Button secondary ghost style="width:50%; justify-content: flex-start;" icon="bi-chevron-left">
-        Back
+      <Button secondary ghost min-content
+        alignText="left"
+        icon="bi-chevron-left"
+      >
+        Items
       </Button>
-      <Button style="width:50%" primary @click="alert('Yay')">
-        Next: Pick a color
+      <Spacer h />
+      <Button primary @click="alert('Yay')">
+        OK
+      </Button>
+      <Button destructive  @click="alert('Yay')">
+        Cancel
       </Button>
     </template>
   </Card>
@@ -272,8 +305,12 @@ You can include tags on a card by adding a list of `tags`. These are rendered as
 ```
 
 <div class="preview">
-<Card
+<Card medium
 title="For music lovers"
 :tags="['rock', 'folk', 'punk']">
 Access your personal music collection from anywhere. Funkwhale gives you access to publication and sharing tools that you can use to promote your content across the web.
 </Card></div>
+
+### Sizes
+
+`large` (304px), `medium` (208px), `auto`, `small`
diff --git a/front/ui-docs/components/ui/layout.md b/front/ui-docs/components/ui/layout.md
index 82a825f9c..51a983a0d 100644
--- a/front/ui-docs/components/ui/layout.md
+++ b/front/ui-docs/components/ui/layout.md
@@ -76,10 +76,10 @@ const noGap = ref(true);
 ---
 
   <Layout flex :no-gap="noGap || undefined">
-    <Card title="A" small />
-    <Card title="B" small />
-    <Card title="C" small />
-    <Card title="D" small />
+    <Card title="A" tiny />
+    <Card title="B" tiny />
+    <Card title="C" tiny />
+    <Card title="D" tiny />
   </Layout>
 </div>
 
diff --git a/front/ui-docs/components/ui/layout/columns.md b/front/ui-docs/components/ui/layout/columns.md
index 3b6a84faf..ead5c4c76 100644
--- a/front/ui-docs/components/ui/layout/columns.md
+++ b/front/ui-docs/components/ui/layout/columns.md
@@ -30,7 +30,7 @@ Let items flow like words on a printed newspaper, Great for very long lists of b
 
 Normal paragraph. Text flows like in a newspaper. Set the column width in px. Columns will be equally distributed over the width of the container.
 
-  <Card small title="Cards...">...break over columns...</Card>
+  <Card min-content title="Cards...">...break over columns...</Card>
 
   <Button icon="bi-star"/>
   <Button icon="bi-star"/>
@@ -50,7 +50,7 @@ Normal paragraph. Text flows like in a newspaper. Set the column width in px. Co
 
 ---
 
-<Card small title="Cards...">...break over columns...</Card>
+<Card min-content title="Cards...">...break over columns...</Card>
 
 ---
 
diff --git a/front/ui-docs/components/ui/layout/grid.md b/front/ui-docs/components/ui/layout/grid.md
index 67dc8c851..da9032935 100644
--- a/front/ui-docs/components/ui/layout/grid.md
+++ b/front/ui-docs/components/ui/layout/grid.md
@@ -30,14 +30,14 @@ You can either specify the column width (default: 320px) or set the desired num
   :style="`width:${2 * 90 + 32}px`"
 >
   <Alert yellow />
-  <Card small title="brown" />
+  <Card min-content title="brown" />
   <Alert blue />
 </Layout>
 ```
 
 <Layout grid :column-width="90" class="preview" :style="`width:${2 * 90 + 32}px`">
   <Alert yellow />
-  <Card small title="brown" />
+  <Card min-content title="brown" />
   <Alert blue />
 </Layout>
 
diff --git a/front/ui-docs/components/ui/layout/spacer.md b/front/ui-docs/components/ui/layout/spacer.md
index 20e2255db..d3b4ae3d8 100644
--- a/front/ui-docs/components/ui/layout/spacer.md
+++ b/front/ui-docs/components/ui/layout/spacer.md
@@ -159,10 +159,10 @@ const size = ref(1);
 
 <Layout flex style="align-items:flex-start">
 <Input v-model="size" type="range" />
-<Card small title="h">
+<Card min-content title="h">
   <Spacer h :size="size * 4" style="border:5px dashed;" />
 </Card>
-<Card small title="v">
+<Card min-content title="v">
   <Spacer v :size="size * 4" style="border:5px dashed;" />
 </Card>
 </Layout>
diff --git a/front/ui-docs/image-1.png b/front/ui-docs/image-1.png
new file mode 100644
index 000000000..5efd25aa5
Binary files /dev/null and b/front/ui-docs/image-1.png differ
diff --git a/front/ui-docs/using-color.md b/front/ui-docs/using-color.md
index 0ca33f20d..b5ed0dfe3 100644
--- a/front/ui-docs/using-color.md
+++ b/front/ui-docs/using-color.md
@@ -1,5 +1,5 @@
 <script setup>
-import { color } from "~/composables/colors.ts"
+import { color, setColors } from "~/composables/colors.ts"
 import { useRoute } from "vue-router"
 
 import Button from "~/components/ui/Button.vue"
@@ -59,16 +59,37 @@ import { color } from "~/composables/colors.ts";
 </script>
 
 <template>
-  <div v-bind="color('primary solid interactive raised')" />
+  <div v-bind="setColors('primary solid interactive raised')" />
 </template>
 ```
 
 <div class="preview">
-  <div :class="$style.swatch" v-bind="color('primary solid interactive raised')" />
+  <div :class="$style.swatch" v-bind="setColors('primary solid interactive raised')" />
 </div>
 
 </Layout>
 
+## Make your component accept color props
+
+`color` accepts two parameters. The first is your props object, the second is a list of defaults.
+
+In this case, if the user of your component doesn't specify any color, it will be 'primary'.
+Since the user cannot specify the variant, it will always be 'default'.
+
+```vue
+<script setup>
+import { type ColorProps, color } from "~/composables/colors.ts";
+
+const props = defineProps<{
+  ...
+  } & ColorProps>()
+</script>
+
+<template>
+  <div v-bind="color(props, ['primary', 'solid'])" />
+</template>
+```
+
 ## Base colors
 
 Keep most of the screen neutral. Secondary surfaces indicate actionability. Use them sparingly. Primary and destructive surfaces immediately catch the eye. Use them only once or twice per screen.
@@ -79,22 +100,22 @@ Use neutral colors for non-interactive surfaces
 
 <Layout flex>
   <div class="force-dark-theme">
-    <div v-bind="color('default solid')">
-      <div :class="$style.swatch" v-bind="color('default solid')" />
-      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('default solid interactive')" />
-    </div><div v-bind="color('default solid raised')">
-      <div :class="$style.swatch" v-bind="color('default solid raised')" />
-      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('default solid raised interactive')" />
+    <div v-bind="setColors('default solid')">
+      <div :class="$style.swatch" v-bind="setColors('default solid')" />
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('default solid interactive')" />
+    </div><div v-bind="setColors('default solid raised')">
+      <div :class="$style.swatch" v-bind="setColors('default solid raised')" />
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('default solid raised interactive')" />
     </div>
   </div>
 
   <div class="force-light-theme">
-    <div v-bind="color('default solid')">
-      <div :class="$style.swatch" v-bind="color('default solid')" />
-      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('default solid interactive')" />
-    </div><div v-bind="color('default solid raised')">
-      <div :class="$style.swatch" v-bind="color('default solid raised')" />
-      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('default solid raised interactive')" />
+    <div v-bind="setColors('default solid')">
+      <div :class="$style.swatch" v-bind="setColors('default solid')" />
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('default solid interactive')" />
+    </div><div v-bind="setColors('default solid raised')">
+      <div :class="$style.swatch" v-bind="setColors('default solid raised')" />
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('default solid raised interactive')" />
     </div>
   </div>
 </Layout>
@@ -107,22 +128,22 @@ Only use for at most one call-to-action on a screen
 
 <Layout flex>
   <div class="force-dark-theme">
-    <div v-bind="color('default solid')">
-      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('primary solid')" />
-      <div :class="[$style.swatch]" v-bind="color('primary solid interactive')" />
-    </div><div v-bind="color('default solid raised')">
-      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('primary solid raised')" />
-      <div :class="[$style.swatch]" v-bind="color('primary solid raised interactive')" />
+    <div v-bind="setColors('default solid')">
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('primary solid')" />
+      <div :class="[$style.swatch]" v-bind="setColors('primary solid interactive')" />
+    </div><div v-bind="setColors('default solid raised')">
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('primary solid raised')" />
+      <div :class="[$style.swatch]" v-bind="setColors('primary solid raised interactive')" />
     </div>
   </div>
 
   <div class="force-light-theme">
-    <div v-bind="color('default solid')">
-      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('primary solid')" />
-      <div :class="[$style.swatch]" v-bind="color('primary solid interactive')" />
-    </div><div v-bind="color('default solid raised')">
-      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('primary solid raised')" />
-      <div :class="[$style.swatch]" v-bind="color('primary solid raised interactive')" />
+    <div v-bind="setColors('default solid')">
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('primary solid')" />
+      <div :class="[$style.swatch]" v-bind="setColors('primary solid interactive')" />
+    </div><div v-bind="setColors('default solid raised')">
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('primary solid raised')" />
+      <div :class="[$style.swatch]" v-bind="setColors('primary solid raised interactive')" />
     </div>
   </div>
 </Layout>
@@ -133,22 +154,22 @@ Use for interactive items and non-permanent surfaces such as menus and modals
 
 <Layout flex>
   <div class="force-dark-theme">
-    <div v-bind="color('default solid')">
-      <div :class="$style.swatch" v-bind="color('secondary solid')" />
-      <div :class="[$style.swatch]" v-bind="color('secondary solid interactive')" />
-    </div><div v-bind="color('default solid raised')">
-      <div :class="$style.swatch" v-bind="color('secondary solid raised')" />
-      <div :class="[$style.swatch]" v-bind="color('secondary solid raised interactive')" />
+    <div v-bind="setColors('default solid')">
+      <div :class="$style.swatch" v-bind="setColors('secondary solid')" />
+      <div :class="[$style.swatch]" v-bind="setColors('secondary solid interactive')" />
+    </div><div v-bind="setColors('default solid raised')">
+      <div :class="$style.swatch" v-bind="setColors('secondary solid raised')" />
+      <div :class="[$style.swatch]" v-bind="setColors('secondary solid raised interactive')" />
     </div>
   </div>
 
   <div class="force-light-theme">
-    <div v-bind="color('default solid')">
-      <div :class="$style.swatch" v-bind="color('secondary solid')" />
-      <div :class="[$style.swatch]" v-bind="color('secondary solid interactive')" />
-    </div><div v-bind="color('default solid raised')">
-      <div :class="$style.swatch" v-bind="color('secondary solid raised')" />
-      <div :class="[$style.swatch]" v-bind="color('secondary solid raised interactive')" />
+    <div v-bind="setColors('default solid')">
+      <div :class="$style.swatch" v-bind="setColors('secondary solid')" />
+      <div :class="[$style.swatch]" v-bind="setColors('secondary solid interactive')" />
+    </div><div v-bind="setColors('default solid raised')">
+      <div :class="$style.swatch" v-bind="setColors('secondary solid raised')" />
+      <div :class="[$style.swatch]" v-bind="setColors('secondary solid raised interactive')" />
     </div>
   </div>
 </Layout>
@@ -159,22 +180,22 @@ Use for dangerous actions
 
 <Layout flex>
   <div class="force-dark-theme">
-    <div v-bind="color('default solid')">
-      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('destructive solid')" />
-      <div :class="[$style.swatch]" v-bind="color('destructive solid interactive')" />
-    </div><div v-bind="color('default solid raised')">
-      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('destructive solid raised')" />
-      <div :class="[$style.swatch]" v-bind="color('destructive solid raised interactive')" />
+    <div v-bind="setColors('default solid')">
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('destructive solid')" />
+      <div :class="[$style.swatch]" v-bind="setColors('destructive solid interactive')" />
+    </div><div v-bind="setColors('default solid raised')">
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('destructive solid raised')" />
+      <div :class="[$style.swatch]" v-bind="setColors('destructive solid raised interactive')" />
     </div>
   </div>
 
   <div class="force-light-theme">
-    <div v-bind="color('default solid')">
-      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('destructive solid')" />
-      <div :class="[$style.swatch]" v-bind="color('destructive solid interactive')" />
-    </div><div v-bind="color('default solid raised')">
-      <div :class="[$style.swatch, $style.deemphasized]" v-bind="color('destructive solid raised')" />
-      <div :class="[$style.swatch]" v-bind="color('destructive solid raised interactive')" />
+    <div v-bind="setColors('default solid')">
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('destructive solid')" />
+      <div :class="[$style.swatch]" v-bind="setColors('destructive solid interactive')" />
+    </div><div v-bind="setColors('default solid raised')">
+      <div :class="[$style.swatch, $style.deemphasized]" v-bind="setColors('destructive solid raised')" />
+      <div :class="[$style.swatch]" v-bind="setColors('destructive solid raised interactive')" />
     </div>
   </div>
 </Layout>
@@ -184,11 +205,11 @@ Use for dangerous actions
 Use `Blue`, `Red`, `Purple`, `Green`, `Yellow` for user-defined tags and for friendly messages such as
 Alerts
 
-<div :class="$style.swatch" v-bind="color('blue solid interactive')" />
-<div :class="$style.swatch" v-bind="color('red solid interactive')" />
-<div :class="$style.swatch" v-bind="color('purple solid interactive')" />
-<div :class="$style.swatch" v-bind="color('green solid interactive')" />
-<div :class="$style.swatch" v-bind="color('yellow solid interactive')" />
+<div :class="$style.swatch" v-bind="setColors('blue solid interactive')" />
+<div :class="$style.swatch" v-bind="setColors('red solid interactive')" />
+<div :class="$style.swatch" v-bind="setColors('purple solid interactive')" />
+<div :class="$style.swatch" v-bind="setColors('green solid interactive')" />
+<div :class="$style.swatch" v-bind="setColors('yellow solid interactive')" />
 
 ### Variant
 
@@ -198,7 +219,7 @@ You can de-emphasize interactive elements by hiding their background and/or outl
 
 <Button round shadow icon="bi-x" solid />
 
-<div :class="$style.swatch" v-bind="color('solid raised')">
+<div :class="$style.swatch" v-bind="setColors('solid raised')">
   <Button round icon="bi-x" ghost />
   <Spacer />
   <Button round icon="bi-x" outline />
@@ -208,7 +229,7 @@ You can de-emphasize interactive elements by hiding their background and/or outl
 
 <Button round shadow icon="bi-x" primary solid />
 
-<div :class="$style.swatch" v-bind="color('primary solid')">
+<div :class="$style.swatch" v-bind="setColors('primary solid')">
   <Button round icon="bi-x" primary ghost />
   <Spacer />
   <Button round icon="bi-x" primary outline />
@@ -223,91 +244,88 @@ Space out interactive surfaces.
 <Layout>
 
 <div class="force-light-theme">
-
 <Layout flex>
   <div>
-    <div v-bind="color('default solid')">
-      <div :class="[$style.swatch]" v-bind="color('solid')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
-      <div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
+    <div v-bind="setColors('default solid')">
+      <div :class="[$style.swatch]" v-bind="setColors('solid')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive')" disabled/>
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive')" aria-pressed />
     </div>
-    <div v-bind="color('secondary solid')">
-      <div :class="[$style.swatch]" v-bind="color('solid')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
-      <div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
+    <div v-bind="setColors('secondary solid')">
+      <div :class="[$style.swatch]" v-bind="setColors('solid')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive')" disabled/>
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive')" aria-pressed />
     </div>
-    <div v-bind="color('primary solid')">
-      <div :class="[$style.swatch]" v-bind="color('solid')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
-      <div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
+    <div v-bind="setColors('primary solid')">
+      <div :class="[$style.swatch]" v-bind="setColors('solid')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive')" disabled/>
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive')" aria-pressed />
     </div>
   </div><div>
-    <div v-bind="color('default raised solid')">
-      <div :class="[$style.swatch]" v-bind="color('solid raised')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
-      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
+    <div v-bind="setColors('default raised solid')">
+      <div :class="[$style.swatch]" v-bind="setColors('solid raised')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" disabled/>
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" aria-pressed />
     </div>
-    <div v-bind="color('secondary raised solid')">
-      <div :class="[$style.swatch]" v-bind="color('solid raised')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
-      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
+    <div v-bind="setColors('secondary raised solid')">
+      <div :class="[$style.swatch]" v-bind="setColors('solid raised')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" disabled/>
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" aria-pressed />
     </div>
-    <div v-bind="color('primary raised solid')">
-      <div :class="[$style.swatch]" v-bind="color('solid raised')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
-      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
+    <div v-bind="setColors('primary raised solid')">
+      <div :class="[$style.swatch]" v-bind="setColors('solid raised')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" disabled/>
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" aria-pressed />
     </div>
   </div>
 </Layout>
-
 </div>
 
 <div class="force-dark-theme">
-
 <Layout flex>
   <div>
-    <div v-bind="color('default solid')">
-      <div :class="[$style.swatch]" v-bind="color('solid')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
-      <div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
+    <div v-bind="setColors('default solid')">
+      <div :class="[$style.swatch]" v-bind="setColors('solid')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive')" disabled/>
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive')" aria-pressed />
     </div>
-    <div v-bind="color('secondary solid')">
-      <div :class="[$style.swatch]" v-bind="color('solid')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
-      <div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
+    <div v-bind="setColors('secondary solid')">
+      <div :class="[$style.swatch]" v-bind="setColors('solid')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive')" disabled/>
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive')" aria-pressed />
     </div>
-    <div v-bind="color('primary solid')">
-      <div :class="[$style.swatch]" v-bind="color('solid')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
-      <div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
+    <div v-bind="setColors('primary solid')">
+      <div :class="[$style.swatch]" v-bind="setColors('solid')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive')" disabled/>
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive')" aria-pressed />
     </div><br/>Normal
   </div><div>
-    <div v-bind="color('default raised solid')">
-      <div :class="[$style.swatch]" v-bind="color('solid raised')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
-      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
+    <div v-bind="setColors('default raised solid')">
+      <div :class="[$style.swatch]" v-bind="setColors('solid raised')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" disabled/>
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" aria-pressed />
     </div>
-    <div v-bind="color('secondary raised solid')">
-      <div :class="[$style.swatch]" v-bind="color('solid raised')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
-      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
+    <div v-bind="setColors('secondary raised solid')">
+      <div :class="[$style.swatch]" v-bind="setColors('solid raised')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" disabled/>
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" aria-pressed />
     </div>
-    <div v-bind="color('primary raised solid')">
-      <div :class="[$style.swatch]" v-bind="color('solid raised')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
-      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
-      <div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
+    <div v-bind="setColors('primary raised solid')">
+      <div :class="[$style.swatch]" v-bind="setColors('solid raised')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" />
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" disabled/>
+      <div :class="[$style.swatch]" v-bind="setColors('solid interactive raised')" aria-pressed />
     </div><br/><strong>Raised</strong>
   </div>
 </Layout>
@@ -604,7 +622,7 @@ Here is the meaning the styles should convey:
 
 <Layout flex>
 
-<Card small title="Default" solid default>
+<Card min-content title="Default" solid default>
   <span>
     Inline <Link to=""> Link </Link> and <Link to=""> Link </Link>
   </span>
@@ -642,11 +660,11 @@ Here is the meaning the styles should convey:
 <Button raised ghost> Button raised ghost </Button>
 <Button raised outline> Button raised outline </Button>
 <Button raised solid> Button raised solid </Button>
-<Button raised aria-pressed="true"> Button active </Button>
+<Button raised aria-pressed > Button active </Button>
 <Button raised disabled> Button disabled </Button>
 </Card>
 
-<Card small title="Default raised" solid default raised>
+<Card min-content title="Default raised" solid default raised>
   <span>
     Inline <Link to=""> Link </Link> and <Link to=""> Link </Link>
   </span>
@@ -684,11 +702,11 @@ Here is the meaning the styles should convey:
 <Button raised ghost> Button raised ghost </Button>
 <Button raised outline> Button raised outline </Button>
 <Button raised solid> Button raised solid </Button>
-<Button raised aria-pressed="true"> Button active </Button>
+<Button raised aria-pressed > Button active </Button>
 <Button raised disabled> Button disabled </Button>
 </Card>
 
-<Card small title="Secondary" solid secondary>
+<Card min-content title="Secondary" solid secondary>
   <span>
     Inline <Link to=""> Link </Link> and <Link to=""> Link </Link>
   </span>
@@ -726,11 +744,11 @@ Here is the meaning the styles should convey:
 <Button raised ghost> Button raised ghost </Button>
 <Button raised outline> Button raised outline </Button>
 <Button raised solid> Button raised solid </Button>
-<Button raised aria-pressed="true"> Button raised active </Button>
+<Button raised aria-pressed > Button raised active </Button>
 <Button raised disabled> Button raised disabled </Button>
 </Card>
 
-<Card small title="Secondary raised" solid secondary raised>
+<Card min-content title="Secondary raised" solid secondary raised>
   <span>
     Inline <Link to=""> Link </Link> and <Link to=""> Link </Link>
   </span>