diff --git a/packages/ui/src/lib/components/badge/badge.svelte b/packages/ui/src/lib/components/badge/badge.svelte
index 541f635..01efab1 100644
--- a/packages/ui/src/lib/components/badge/badge.svelte
+++ b/packages/ui/src/lib/components/badge/badge.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Color } from '$lib/types/colors';
 	import Text from '$ui/typography/text.svelte';
 	import { type VariantProps, cva } from 'class-variance-authority';
 	import type { HTMLAttributes } from 'svelte/elements';
@@ -26,48 +27,53 @@
 	/** Configuration object for badge colors */
 	interface ColorConfig {
 		/** Color of the dot indicator */
-		dot?: string;
+		dot?: Color;
 		/** Background color of the badge */
-		bg?: string;
+		bg?: Color;
 		/** Text color of the badge */
-		text?: string;
+		text?: Color;
+		/** Border color of the badge */
+		border?: Color;
 	}
 
 	interface $$Props extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badge> {
 		/** Text content of the badge */
 		text?: string;
-		/** Color configuration for the badge */
-		colors?: ColorConfig;
+		/** Color configuration for the badge or a string to be used for all colors except bg */
+		colors?: ColorConfig | Color;
 		/** Whether to hide the dot indicator */
 		'no-dot'?: boolean;
 		/** @deprecated Use colors.dot instead */
-		color?: string;
+		color?: Color;
 	}
 
 	/** Text content of the badge */
 	export let text = '';
 	/** Color configuration for the badge */
-	export let colors: ColorConfig = {};
+	export let colors: ColorConfig | Color = {};
 	/** @deprecated Use colors.dot instead */
-	export let color = '';
+	export let color: Color = 'currentColor';
 	/** Whether to show action buttons */
 	export let showActions = true;
 	/** Size of the badge: 'small' | 'medium' */
 	export let size: $$Props['size'] = 'medium';
 
-  const noDot = $$props['no-dot'];
+	const noDot = $$props['no-dot'];
 
-	// Handle deprecated color prop
-	$: if (color && !colors.dot) {
-		colors = { ...colors, dot: color };
+	// Handle deprecated color prop and string colors
+	$: colorConfig =
+		typeof colors === 'string' ? { dot: colors, text: colors, border: colors } : colors;
+	$: if (color && !colorConfig.dot) {
+		colorConfig = { ...colorConfig, dot: color };
 	}
 </script>
 
 <div class="fps-Badge-wrapper">
 	<div
 		class={badge({ hasActions: showActions, size, noDot, class: $$props.class })}
-		style:background-color={colors.bg}
-		style:color={colors.text}
+		style:background-color={colorConfig.bg}
+		style:color={colorConfig.text}
+		style:border-color={colorConfig.border}
 	>
 		{#if !$$props['no-dot']}
 			<svg
@@ -80,13 +86,13 @@
 			>
 				<path
 					d="M12 8C12 10.2091 10.2091 12 8 12C5.79086 12 4 10.2091 4 8C4 5.79086 5.79086 4 8 4C10.2091 4 12 5.79086 12 8Z"
-					fill={colors.dot || color}
+					fill={colorConfig.dot || color}
 				/>
 			</svg>
 		{/if}
-		<Text emphasis="secondary" size={size}>
-      <span style:color={colors.text}>{text}</span>
-    </Text>
+		<Text emphasis="secondary" {size}>
+			<span style:color={colorConfig.text}>{text}</span>
+		</Text>
 		{#if showActions}
 			<slot name="actions">
 				<slot />
diff --git a/packages/ui/src/lib/components/input/input.svelte b/packages/ui/src/lib/components/input/input.svelte
index 1292f8e..63e5b00 100644
--- a/packages/ui/src/lib/components/input/input.svelte
+++ b/packages/ui/src/lib/components/input/input.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Icon, type IconProps } from '$ui/icon';
+	import { Icon } from '$ui';
+	import type { IconProps } from '$ui/icon';
 	import { cva, type VariantProps } from 'class-variance-authority';
 	import { createEventDispatcher } from 'svelte';
 
@@ -29,7 +30,7 @@
 	type InputVariant = NonNullable<InputVariants['variant']>;
 	type InputState = NonNullable<InputVariants['state']>;
 
-	type $$Props = Partial<IconProps> & {
+	type $$Props = {
 		value?: string | null;
 		id?: string | null;
 		name?: string | null;
@@ -40,6 +41,12 @@
 		errorMessage?: string;
 		placeholder?: string;
 		quiet?: boolean;
+		icon?: IconProps['icon'];
+		iconText?: string;
+		spin?: boolean;
+		class?: string;
+		'aria-label'?: string;
+		'aria-describedby'?: string;
 	};
 
 	export let value: string | null = null;
@@ -52,6 +59,9 @@
 	export let errorMessage: string = 'Error message';
 	export let placeholder: string = 'Input something here...';
 	export let quiet: boolean = false;
+	export let icon: IconProps['icon'] = undefined;
+	export let iconText: string | undefined = undefined;
+	export let spin = false;
 
 	const dispatch = createEventDispatcher();
 
@@ -79,10 +89,6 @@
 		dispatch('blur', event);
 	}
 
-	const icon = $$props.icon;
-	const iconText = $$props.iconText;
-	const spin = $$props.spin;
-
 	$: variant = borders
 		? ('bordered' as InputVariant)
 		: quiet
@@ -100,56 +106,40 @@
 	});
 </script>
 
-{#if icon || iconText}
-	<div class="input-wrapper {$$props.class}">
+<div class="input-wrapper {$$props.class}">
+	{#if icon}
+		<div class="icon">
+			<Icon {icon} {spin} color="--figma-color-icon" />
+		</div>
+	{:else if iconText}
 		<div class="icon">
-			<Icon {icon} {iconText} {spin} color="--figma-color-icon" />
+			<Icon {iconText} {spin} color="--figma-color-icon" />
 		</div>
-		<input
-			use:typeAction
-			on:input={handleInput}
-			on:change={handleChange}
-			on:keydown={handleKeydown}
-			on:focus={handleFocus}
-			on:blur={handleBlur}
-			bind:value
-			{id}
-			{name}
-			{disabled}
-			{placeholder}
-			class={inputClass}
-			data-error-message={errorMessage}
-		/>
-		{#if invalid}
-			<div class="error">
-				{errorMessage}
-			</div>
-		{/if}
-	</div>
-{:else}
-	<div class="input-wrapper {$$props.class}">
-		<input
-			use:typeAction
-			on:input={handleInput}
-			on:change={handleChange}
-			on:keydown={handleKeydown}
-			on:focus={handleFocus}
-			on:blur={handleBlur}
-			bind:value
-			{id}
-			{name}
-			{disabled}
-			{placeholder}
-			class={inputClass}
-			data-error-message={errorMessage}
-		/>
-		{#if invalid}
-			<div class="error">
-				{errorMessage}
-			</div>
-		{/if}
-	</div>
-{/if}
+	{/if}
+	<input
+		use:typeAction
+		on:input={handleInput}
+		on:change={handleChange}
+		on:keydown={handleKeydown}
+		on:focus={handleFocus}
+		on:blur={handleBlur}
+		bind:value
+		{id}
+		{name}
+		{disabled}
+		{placeholder}
+		class={inputClass}
+		data-error-message={errorMessage}
+		aria-invalid={invalid}
+		aria-label={$$props['aria-label']}
+		aria-describedby={invalid ? `${id}-error` : $$props['aria-describedby']}
+	/>
+	{#if invalid}
+		<div class="error" id="{id}-error" role="alert">
+			{errorMessage}
+		</div>
+	{/if}
+</div>
 
 <style lang="scss">
 	.input-wrapper {
@@ -248,7 +238,7 @@
 	}
 
 	:global(.indent) {
-		padding-left: 32px;
+		padding-left: calc(32px + var(--spacer-2));
 	}
 
 	:global(.invalid),
@@ -259,11 +249,14 @@
 
 	.icon {
 		position: absolute;
-		top: -4px;
-		left: 0;
-		width: var(--spacer-5);
-		height: var(--spacer-5);
+		top: 50%;
+		left: var(--spacer-2);
+		transform: translateY(-50%);
 		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		pointer-events: none;
 	}
 
 	.error {
diff --git a/packages/ui/src/lib/components/layer-tree/layer-tree.svelte b/packages/ui/src/lib/components/layer-tree/layer-tree.svelte
index 0841f73..45baf91 100644
--- a/packages/ui/src/lib/components/layer-tree/layer-tree.svelte
+++ b/packages/ui/src/lib/components/layer-tree/layer-tree.svelte
@@ -90,7 +90,7 @@
 <div class="layerTree-wrapper">
 	<div class="search-container">
 		<Input
-			icon="SearchSvg"
+			icon="SearchSvg_32"
 			class="search-input"
 			bind:value={searchQuery}
 			placeholder="Search layers..."
diff --git a/packages/ui/src/lib/components/select-menu/select-menu.svelte b/packages/ui/src/lib/components/select-menu/select-menu.svelte
index b772e05..622d611 100644
--- a/packages/ui/src/lib/components/select-menu/select-menu.svelte
+++ b/packages/ui/src/lib/components/select-menu/select-menu.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { clickOutside } from '$actions/click-outside';
 	import type * as icons from '$icons';
-	import { Icon } from '$ui/icon';
+	import { Icon, Text } from '$ui';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import SelectDivider from './select-divider.svelte';
 	import SelectItem from './select-item.svelte';
@@ -174,10 +174,13 @@
 			}, i * interval);
 		}
 
-		setTimeout(() => {
-			menuList.classList.add('hidden');
-			menuButton.classList.remove('selected');
-		}, interval * blinkCount + 40);
+		setTimeout(
+			() => {
+				menuList.classList.add('hidden');
+				menuButton.classList.remove('selected');
+			},
+			interval * blinkCount + 40
+		);
 	}
 
 	function resetMenuProperties() {
@@ -205,9 +208,9 @@
 		{/if}
 
 		{#if value}
-			<span class="label">{value.label}</span>
+			<Text class="label">{value.label}</Text>
 		{:else}
-			<span class="placeholder">{placeholder}</span>
+			<Text emphasis="tertiary" class="placeholder">{placeholder}</Text>
 		{/if}
 
 		{#if !disabled}
diff --git a/packages/ui/src/lib/components/tabs/tabs-trigger.svelte b/packages/ui/src/lib/components/tabs/tabs-trigger.svelte
index dfe8920..aa50e5e 100644
--- a/packages/ui/src/lib/components/tabs/tabs-trigger.svelte
+++ b/packages/ui/src/lib/components/tabs/tabs-trigger.svelte
@@ -80,7 +80,7 @@
 		}
 
 		&:where(.fps-disabled) {
-			cursor: not-allowed;
+			cursor: default;
 			opacity: 0.5;
 		}
 
diff --git a/packages/ui/src/lib/components/tooltip/tooltip.svelte b/packages/ui/src/lib/components/tooltip/tooltip.svelte
index 0e5234a..3ee25d0 100644
--- a/packages/ui/src/lib/components/tooltip/tooltip.svelte
+++ b/packages/ui/src/lib/components/tooltip/tooltip.svelte
@@ -1,54 +1,54 @@
 <script lang="ts">
-import { createTooltip, melt } from "@melt-ui/svelte";
-import { createEventDispatcher } from "svelte";
-import type { TooltipPosition } from "./types";
+	import { createTooltip } from '@melt-ui/svelte';
+	import { createEventDispatcher } from 'svelte';
+	import type { TooltipPosition } from './types';
 
-export let content: string | HTMLElement;
-export const position: TooltipPosition = "top";
-export const className: string = "";
-export const openDelay: number = 1000;
-export const closeDelay: number = 500;
-export const disableHoverableContent: boolean = false;
-export const defaultOpen: boolean = false;
-export const forceVisible: boolean = false;
-export const closeOnPointerDown: boolean = true;
-export const arrowSize: number = 8;
-export const group: string | boolean = false;
+	export let content: string | HTMLElement;
+	export let position: TooltipPosition = 'top';
+	export let className: string = '';
+	export let openDelay: number = 1000;
+	export let closeDelay: number = 500;
+	export let disableHoverableContent: boolean = false;
+	export let defaultOpen: boolean = false;
+	export let forceVisible: boolean = false;
+	export let closeOnPointerDown: boolean = true;
+	export let arrowSize: number = 8;
+	export let group: string | boolean = false;
 
-const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 
-const {
-	elements: { trigger, content: tooltipContent, arrow },
-	states: { open: isOpen },
-} = createTooltip({
-	positioning: {
-		placement: position,
-		gutter: 8,
-		overflowPadding: 8,
-	},
-	arrowSize,
-	openDelay,
-	closeDelay,
-	disableHoverableContent,
-	closeOnPointerDown,
-	defaultOpen,
-	forceVisible,
-	group,
-	onOpenChange: ({ curr, next }) => {
-		dispatch("openChange", { open: next });
-		dispatch(next ? "show" : "hide");
-		return next;
-	},
-});
+	const {
+		elements: { trigger, content: tooltipContent, arrow },
+		states: { open: isOpen }
+	} = createTooltip({
+		positioning: {
+			placement: position,
+			gutter: 8,
+			overflowPadding: 8
+		},
+		arrowSize,
+		openDelay,
+		closeDelay,
+		disableHoverableContent,
+		closeOnPointerDown,
+		defaultOpen,
+		forceVisible,
+		group,
+		onOpenChange: ({ curr, next }) => {
+			dispatch('openChange', { open: next });
+			dispatch(next ? 'show' : 'hide');
+			return next;
+		}
+	});
 
-$: classes = [
-	"fps-tooltip",
-	position && `fps-tooltip--${position}`,
-	$isOpen ? "fps-tooltip--visible" : "",
-	className,
-]
-	.filter(Boolean)
-	.join(" ");
+	$: classes = [
+		'fps-tooltip',
+		position && `fps-tooltip--${position}`,
+		$isOpen ? 'fps-tooltip--visible' : '',
+		className
+	]
+		.filter(Boolean)
+		.join(' ');
 </script>
 
 <div class="fps-tooltip-wrapper" {...$trigger} use:$trigger.action>
diff --git a/packages/ui/src/lib/components/typography/heading.svelte b/packages/ui/src/lib/components/typography/heading.svelte
index 31db159..ef6e759 100644
--- a/packages/ui/src/lib/components/typography/heading.svelte
+++ b/packages/ui/src/lib/components/typography/heading.svelte
@@ -32,35 +32,35 @@
 		aria-disabled={disabled}
 	>
 		{text}
+		<slot />
 	</svelte:element>
 {/if}
 
 <style lang="scss">
-	.fps-Heading--level1 {
-		// padding-left: var(--spacer-2);
-		font-family: var(--text-body-large-strong-font-family);
-		font-size: var(--text-body-medium-strong-font-size);
-		font-weight: var(--text-body-large-strong-font-weight);
-		letter-spacing: var(--text-body-large-strong-letter-spacing);
-		// line-height: var(--text-body-large-strong-line-height);
-	}
+	.fps-Heading {
+		margin-top: 0;
+		color: var(--color-text);
+		outline: none;
 
-	.fps-Heading--level2 {
-		padding-left: var(--spacer-2);
-		font-family: var(--text-body-medium-strong-font-family);
-		font-size: var(--text-body-medium-strong-font-size);
-		font-weight: var(--text-body-medium-strong-font-weight);
-		letter-spacing: var(--text-body-medium-strong-letter-spacing);
-		line-height: var(--text-body-medium-strong-line-height);
-	}
+		&:where(.fps-Heading--level1) {
+			font-family: var(--text-body-large-strong-font-family);
+			font-size: var(--text-body-large-strong-font-size);
+			font-weight: var(--text-body-large-strong-font-weight);
+			letter-spacing: var(--text-body-large-strong-letter-spacing);
+			line-height: var(--text-body-large-strong-line-height);
+		}
 
-	.fps-Heading--level3 {
-		padding-left: var(--spacer-2);
-		font-family: var(--text-body-small-strong-font-family);
-		font-size: var(--text-body-small-strong-font-size);
-		font-weight: var(--text-body-small-strong-font-weight);
-		letter-spacing: var(--text-body-small-strong-letter-spacing);
-		line-height: var(--text-body-small-strong-line-height);
+		&:where(.fps-Heading--level2, .fps-Heading--level3) {
+			font-family: var(--text-body-medium-strong-font-family);
+			font-size: var(--text-body-medium-strong-font-size);
+			font-weight: var(--text-body-medium-strong-font-weight);
+			letter-spacing: var(--text-body-medium-strong-letter-spacing);
+			line-height: var(--text-body-medium-strong-line-height);
+		}
+
+		&:where(.fps-Heading--level3) {
+			color: var(--color-text-secondary);
+		}
 	}
 
 	.disabled {