diff --git a/apps/docs/src/app/_components/footer/footer.tsx b/apps/docs/src/app/_components/footer/footer.tsx
index 3a42fafc..837fab4b 100644
--- a/apps/docs/src/app/_components/footer/footer.tsx
+++ b/apps/docs/src/app/_components/footer/footer.tsx
@@ -45,7 +45,7 @@ const footer = () => {
       <Paper background="b-3" as={Grid} p="6" gap="4" grid="repeat(4, minmax(1px, 1fr))" xs="1fr" lg="1fr 1fr">
         <div>
           <Logo width={100} />
-          <Text transform="first-letter-only" color="b" low>
+          <Text transform="capitalize-once" color="b" low>
             Your comprehensive solution for modern web development. Reusable UI components, React hooks, icons, and
             tools designed with accessibility and scalability in mind. Empower your web applications effortlessly
           </Text>
diff --git a/apps/stories/stories/IconButton.stories.tsx b/apps/stories/stories/IconButton.stories.tsx
index 9c25cfb2..e90fee73 100644
--- a/apps/stories/stories/IconButton.stories.tsx
+++ b/apps/stories/stories/IconButton.stories.tsx
@@ -84,7 +84,7 @@ export function ButtonCornerDefaults() {
         <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
       </Flex>
 
-      <Flex gap="4" style={{ '--button-rad': '5px' } as CSSProperties}>
+      <Flex gap="4" style={{ '--bu-rad': '5px' } as CSSProperties}>
         <Paper corner="0">
           <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
@@ -99,7 +99,7 @@ export function ButtonCornerDefaults() {
         </Paper>
         <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
       </Flex>
-      <Flex gap="4" style={{ '--button-rad': '10px' } as CSSProperties}>
+      <Flex gap="4" style={{ '--bu-rad': '10px' } as CSSProperties}>
         <Paper corner="0">
           <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
@@ -115,7 +115,7 @@ export function ButtonCornerDefaults() {
         <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
       </Flex>
 
-      <Flex gap="4" style={{ '--button-rad': '20px' } as CSSProperties}>
+      <Flex gap="4" style={{ '--bu-rad': '20px' } as CSSProperties}>
         <Paper corner="0">
           <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
diff --git a/apps/stories/stories/alert.stories.tsx b/apps/stories/stories/alert.stories.tsx
index 5ce5a177..3d94941b 100644
--- a/apps/stories/stories/alert.stories.tsx
+++ b/apps/stories/stories/alert.stories.tsx
@@ -202,7 +202,7 @@ export function AlertCornerDefaults() {
   return (
     <div className="Sf3">
       <Heading>Alert Corner 20px corner</Heading>
-      <Flex direction="col" gap="4" style={{ '--alert-rad': '20px' } as CSSProperties}>
+      <Flex direction="col" gap="4" style={{ '--al-rad': '20px' } as CSSProperties}>
         <AlertBase variant="solid" />
         <AlertBase variant="soft" />
         <AlertBase variant="outline" />
diff --git a/apps/stories/stories/badge.stories.tsx b/apps/stories/stories/badge.stories.tsx
index eeab3cd8..d8b09488 100644
--- a/apps/stories/stories/badge.stories.tsx
+++ b/apps/stories/stories/badge.stories.tsx
@@ -118,33 +118,11 @@ export const BadgeNumericColor = () => {
       <Badge type="numeric" number={15} max={15} color="p" />
       <Badge type="numeric" number={15} max={15} color="se" />
       <Badge type="numeric" number={15} max={15} color="b" />
+      <Badge type="numeric" number={15} max={15} color="i" />
     </Flex>
   )
 }
 
-export const BadgeHighContrastColor = () => {
-  return (
-    <div className="Sf3">
-      <Flex gap="4">
-        <Badge type="numeric" number={15} max={15} color="d" />
-        <Badge type="numeric" number={15} max={15} color="su" />
-        <Badge type="numeric" number={15} max={15} color="w" />
-        <Badge type="numeric" number={15} max={15} color="p" />
-        <Badge type="numeric" number={15} max={15} color="se" />
-        <Badge type="numeric" number={15} max={15} color="b" />
-      </Flex>
-      <Flex gap="4">
-        <Badge type="numeric" highContrast number={15} max={15} color="d" />
-        <Badge type="numeric" highContrast number={15} max={15} color="su" />
-        <Badge type="numeric" highContrast number={15} max={15} color="w" />
-        <Badge type="numeric" highContrast number={15} max={15} color="p" />
-        <Badge type="numeric" highContrast number={15} max={15} color="se" />
-        <Badge type="numeric" highContrast number={15} max={15} color="b" />
-      </Flex>
-    </div>
-  )
-}
-
 export const BadgeCorner = () => {
   return (
     <div className="Sf4">
diff --git a/apps/stories/stories/blockquote.stories.tsx b/apps/stories/stories/blockquote.stories.tsx
index ddac6b50..a71be64b 100644
--- a/apps/stories/stories/blockquote.stories.tsx
+++ b/apps/stories/stories/blockquote.stories.tsx
@@ -169,128 +169,30 @@ export const BlockquoteCustomStyle = () => {
 export function ButtonCornerDefaults() {
   return (
     <div className="Sf3">
-      <Flex gap="4">
-        <Paper corner="0">
-          <Blockquote size="1">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
-            fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
-          </Blockquote>
-        </Paper>
-        <Paper corner="2">
-          <Blockquote size="1">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
-            fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
-          </Blockquote>
-        </Paper>
-        <Paper corner="3">
-          <Blockquote size="1">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
-            fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
-          </Blockquote>
-        </Paper>
-        <Paper corner="4">
-          <Blockquote size="1">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
-            fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
-          </Blockquote>
-        </Paper>
-        <Blockquote size="1">
+      <Paper corner="0">
+        <Blockquote>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
           fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
         </Blockquote>
-      </Flex>
-
-      <Flex gap="4" style={{ '--blockquote-rad': '0' } as CSSProperties}>
-        <Paper corner="0">
-          <Blockquote size="1">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
-            fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
-          </Blockquote>
-        </Paper>
-        <Paper corner="2">
-          <Blockquote size="1">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
-            fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
-          </Blockquote>
-        </Paper>
-        <Paper corner="3">
-          <Blockquote size="1">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
-            fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
-          </Blockquote>
-        </Paper>
-        <Paper corner="4">
-          <Blockquote size="1">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
-            fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
-          </Blockquote>
-        </Paper>
-        <Blockquote size="1">
+      </Paper>
+      <Paper style={{ '--blockquote-rad': '0' } as CSSProperties}>
+        <Blockquote>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
           fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
         </Blockquote>
-      </Flex>
-      <Flex gap="4" style={{ '--blockquote-rad': '10px' } as CSSProperties}>
-        <Paper corner="0">
-          <Blockquote size="1">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
-            fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
-          </Blockquote>
-        </Paper>
-        <Paper corner="2">
-          <Blockquote size="1">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
-            fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
-          </Blockquote>
-        </Paper>
-        <Paper corner="3">
-          <Blockquote size="1">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
-            fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
-          </Blockquote>
-        </Paper>
-        <Paper corner="4">
-          <Blockquote size="1">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
-            fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
-          </Blockquote>
-        </Paper>
-        <Blockquote size="1">
+      </Paper>
+      <Paper style={{ '--blockquote-rad': '10px' } as CSSProperties}>
+        <Blockquote>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
           fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
         </Blockquote>
-      </Flex>
-
-      <Flex gap="4" style={{ '--blockquote-rad': '20px' } as CSSProperties}>
-        <Paper corner="0">
-          <Blockquote size="1">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
-            fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
-          </Blockquote>
-        </Paper>
-        <Paper corner="2">
-          <Blockquote size="1">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
-            fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
-          </Blockquote>
-        </Paper>
-        <Paper corner="3">
-          <Blockquote size="1">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
-            fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
-          </Blockquote>
-        </Paper>
-        <Paper corner="4">
-          <Blockquote size="1">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
-            fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
-          </Blockquote>
-        </Paper>
-        <Blockquote size="1">
+      </Paper>
+      <Paper style={{ '--blockquote-rad': '20px' } as CSSProperties}>
+        <Blockquote>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam beatae, iure, eligendi, quisquam unde tempore
           fugit numquam aut accusamus cupiditate sit iste facere excepturi consectetur debitis vel iusto eos quae!
         </Blockquote>
-      </Flex>
+      </Paper>
     </div>
   )
 }
diff --git a/apps/stories/stories/button.stories.tsx b/apps/stories/stories/button.stories.tsx
index 070b4f10..e5787931 100644
--- a/apps/stories/stories/button.stories.tsx
+++ b/apps/stories/stories/button.stories.tsx
@@ -39,6 +39,7 @@ export function ButtonsColors() {
       <Button color="se">Secondary</Button>
       <Button color="b">bg</Button>
       <Button color="p">Primary</Button>
+      <Button color="i">Info</Button>
     </Flex>
   )
 }
@@ -111,19 +112,19 @@ export function ButtonsTransforms() {
         </Button>
       </Flex>
       <h1>with Global Capitalize</h1>
-      <Flex gap="4" style={{ '--button-transform': 'capitalize' } as CSSProperties}>
+      <Flex gap="4" style={{ '--bu-transform': 'capitalize' } as CSSProperties}>
         <Button color="su">Green</Button>
         <Button color="w">Orange</Button>
         <Button color="d">Red</Button>
       </Flex>
       <h1>with Global lowercase</h1>
-      <Flex gap="4" style={{ '--button-transform': 'lowercase' } as CSSProperties}>
+      <Flex gap="4" style={{ '--bu-transform': 'lowercase' } as CSSProperties}>
         <Button color="su">Green</Button>
         <Button color="w">Orange</Button>
         <Button color="d">Red</Button>
       </Flex>
       <h1>with Global uppercase</h1>
-      <Flex gap="4" style={{ '--button-transform': 'uppercase' } as CSSProperties}>
+      <Flex gap="4" style={{ '--bu-transform': 'uppercase' } as CSSProperties}>
         <Button color="su">Green</Button>
         <Button color="w">Orange</Button>
         <Button color="d">Red</Button>
@@ -212,7 +213,7 @@ export function ButtonsCorners() {
       </Flex>
       <h1>Specify the button Corner circle</h1>
 
-      <Flex gap="4" style={{ '--button-rad': '1000px' } as CSSProperties}>
+      <Flex gap="4" style={{ '--bu-rad': '1000px' } as CSSProperties}>
         <Button color="su">Green</Button>
         <Button color="w">Orange</Button>
         <Button color="d">Red</Button>
@@ -223,7 +224,7 @@ export function ButtonsCorners() {
 
       <h1>Specify the button Corner Medium</h1>
 
-      <Flex gap="4" style={{ '--button-rad': 'var(--rad-md)' } as CSSProperties}>
+      <Flex gap="4" style={{ '--bu-rad': 'var(--rad-md)' } as CSSProperties}>
         <Button color="su">Green</Button>
         <Button color="w">Orange</Button>
         <Button color="d">Red</Button>
@@ -391,7 +392,7 @@ export function ButtonCornerDefaults() {
         <Button color="su">Green</Button>
       </Flex>
 
-      <Flex gap="4" style={{ '--button-rad': '5px' } as CSSProperties}>
+      <Flex gap="4" style={{ '--bu-rad': '5px' } as CSSProperties}>
         <Paper corner="0">
           <Button color="su">Green</Button>
         </Paper>
@@ -406,23 +407,15 @@ export function ButtonCornerDefaults() {
         </Paper>
         <Button color="su">Green</Button>
       </Flex>
-      <Flex gap="4" style={{ '--button-rad': '10px' } as CSSProperties}>
-        <Paper corner="0">
-          <Button color="su">Green</Button>
-        </Paper>
-        <Paper corner="2">
-          <Button color="su">Green</Button>
-        </Paper>
-        <Paper corner="3">
-          <Button color="su">Green</Button>
-        </Paper>
-        <Paper corner="4">
-          <Button color="su">Green</Button>
-        </Paper>
+      <Flex gap="4" style={{ '--bu-rad': '10px' } as CSSProperties}>
+        <Button color="su">Green</Button>
+        <Button color="su">Green</Button>
+        <Button color="su">Green</Button>
+        <Button color="su">Green</Button>
         <Button color="su">Green</Button>
       </Flex>
 
-      <Flex gap="4" style={{ '--button-rad': '20px' } as CSSProperties}>
+      <Flex gap="4" style={{ '--bu-rad': '50px' } as CSSProperties}>
         <Paper corner="0">
           <Button color="su">Green</Button>
         </Paper>
@@ -444,11 +437,11 @@ export function ButtonCornerDefaults() {
 export function ButtonTransformDefaults() {
   return (
     <div className="Sf3">
-      <Flex gap="4" style={{ '--button-transform': 'lowercase' } as CSSProperties}>
+      <Flex gap="4" style={{ '--bu-transform': 'lowercase' } as CSSProperties}>
         <Button transform="uppercase" color="su">
           green
         </Button>
-        <Button transform="first-letter-only" color="su">
+        <Button transform="capitalize-once" color="su">
           green
         </Button>
         <Button transform="lowercase" color="su">
@@ -463,7 +456,7 @@ export function ButtonTransformDefaults() {
 export function ButtonSizeDefaults() {
   return (
     <div className="Sf3">
-      <Flex gap="4" style={{ '--button-size': '8px' } as CSSProperties}>
+      <Flex gap="4" style={{ '--bu-size': '8px' } as CSSProperties}>
         <Button size="2" color="su">
           green
         </Button>
diff --git a/apps/stories/stories/checkbox.stories.tsx b/apps/stories/stories/checkbox.stories.tsx
index e7ac49b5..5b4720ec 100644
--- a/apps/stories/stories/checkbox.stories.tsx
+++ b/apps/stories/stories/checkbox.stories.tsx
@@ -48,7 +48,8 @@ export const CheckboxColor = () => {
       <Checkbox name="hello" label="Warning" color="w" />
       <Checkbox name="hello" label="Primary" color="p" />
       <Checkbox name="hello" label="Secondary" color="se" />
-      <Checkbox name="hello" label="b" color="b" />
+      <Checkbox name="hello" label="Background" color="b" />
+      <Checkbox name="hello" label="Info" color="i" />
     </Flex>
   )
 }
@@ -63,6 +64,7 @@ export const CheckboxDisabled = () => {
         <Checkbox disabled name="hello" label="Hello" color="p" />
         <Checkbox disabled name="hello" label="Hello" color="se" />
         <Checkbox disabled name="hello" label="Hello" color="b" />
+        <Checkbox disabled name="hello" label="Hello" color="i" />
       </Flex>
       <Flex gap="4" items="center">
         <Checkbox disabled defaultChecked name="hello" label="Hello" color="d" />
@@ -71,6 +73,7 @@ export const CheckboxDisabled = () => {
         <Checkbox disabled defaultChecked name="hello" label="Hello" color="p" />
         <Checkbox disabled defaultChecked name="hello" label="Hello" color="se" />
         <Checkbox disabled defaultChecked name="hello" label="Hello" color="b" />
+        <Checkbox disabled defaultChecked name="hello" label="Hello" color="i" />
       </Flex>
     </div>
   )
diff --git a/apps/stories/stories/chips.stories.tsx b/apps/stories/stories/chips.stories.tsx
index 33b3c4b6..4fd42f6d 100644
--- a/apps/stories/stories/chips.stories.tsx
+++ b/apps/stories/stories/chips.stories.tsx
@@ -12,7 +12,9 @@ const meta: Meta<typeof Chips> = {
 }
 
 export default meta
-export const Playground = {}
+export const Playground = {
+  children: 'Hello world',
+}
 
 export const ChipsColor = () => (
   <Flex gap="3">
@@ -36,6 +38,9 @@ export const ChipsColor = () => (
     <Chips color="b" variant="solid">
       Hello
     </Chips>
+    <Chips color="i" variant="solid">
+      Hello
+    </Chips>
   </Flex>
 )
 
@@ -64,6 +69,9 @@ export const ChipsVariants = () => (
         <Chips color="b" variant={variant}>
           Hello
         </Chips>
+        <Chips color="i" variant={variant}>
+          Hello
+        </Chips>
       </Flex>
     ))}
   </div>
@@ -301,18 +309,10 @@ export function ChipsCornerDefaults() {
       </Flex>
 
       <Flex gap="4" style={{ '--chip-rad': '20px' } as React.CSSProperties}>
-        <Paper corner="0">
-          <Chips>Hello</Chips>
-        </Paper>
-        <Paper corner="2">
-          <Chips>Hello</Chips>
-        </Paper>
-        <Paper corner="3">
-          <Chips>Hello</Chips>
-        </Paper>
-        <Paper corner="4">
-          <Chips>Hello</Chips>
-        </Paper>
+        <Chips>Hello</Chips>
+        <Chips>Hello</Chips>
+        <Chips>Hello</Chips>
+        <Chips>Hello</Chips>
         <Chips>Hello</Chips>
       </Flex>
     </div>
diff --git a/apps/stories/stories/code.stories.tsx b/apps/stories/stories/code.stories.tsx
index 1997b756..c77ab0d9 100644
--- a/apps/stories/stories/code.stories.tsx
+++ b/apps/stories/stories/code.stories.tsx
@@ -18,6 +18,7 @@ export const CodeColors = () => {
       <Code color="p">{`console.log('Hello world Every thing is OK')`}</Code>
       <Code color="b">{`console.log('Hello world Every thing is OK')`}</Code>
       <Code color="se">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code color="i">{`console.log('Hello world Every thing is OK')`}</Code>
     </Flex>
   )
 }
@@ -25,6 +26,7 @@ export const CodeColors = () => {
 export const CodeSizes = () => {
   return (
     <Flex gap="4" direction="col" justify="center">
+      <Code size="1">{`console.log('Hello world Every thing is OK')`}</Code>
       <Code size="2">{`console.log('Hello world Every thing is OK')`}</Code>
       <Code size="3">{`console.log('Hello world Every thing is OK')`}</Code>
       <Code size="4">{`console.log('Hello world Every thing is OK')`}</Code>
@@ -32,6 +34,7 @@ export const CodeSizes = () => {
       <Code size="6">{`console.log('Hello world Every thing is OK')`}</Code>
       <Code size="7">{`console.log('Hello world Every thing is OK')`}</Code>
       <Code size="8">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code size="9">{`console.log('Hello world Every thing is OK')`}</Code>
     </Flex>
   )
 }
diff --git a/apps/stories/stories/heading.stories.tsx b/apps/stories/stories/heading.stories.tsx
index 2f30ad66..689341bd 100644
--- a/apps/stories/stories/heading.stories.tsx
+++ b/apps/stories/stories/heading.stories.tsx
@@ -151,7 +151,7 @@ export function HeadingTrasforms() {
       <Heading transform="lowercase">Lorem ipsum dolor sit amet consectetur adipisicing elit.</Heading>
       <Heading transform="capitalize">Lorem ipsum dolor sit amet consectetur adipisicing elit.</Heading>
       <Heading transform="uppercase">Lorem ipsum dolor sit amet consectetur adipisicing elit.</Heading>
-      <Heading transform="first-letter-only">Lorem ipsum dolor sit amet consectetur adipisicing elit.</Heading>
+      <Heading transform="capitalize-once">Lorem ipsum dolor sit amet consectetur adipisicing elit.</Heading>
     </div>
   )
 }
diff --git a/apps/stories/stories/kbd.stories.tsx b/apps/stories/stories/kbd.stories.tsx
index 1ad65c2b..71272855 100644
--- a/apps/stories/stories/kbd.stories.tsx
+++ b/apps/stories/stories/kbd.stories.tsx
@@ -22,6 +22,7 @@ export const KbdColors = () => {
       <Kbd title="Esc" color="p" />
       <Kbd title="Esc" color="b" />
       <Kbd title="Esc" color="se" />
+      <Kbd title="Esc" color="i" />
     </Flex>
   )
 }
@@ -40,6 +41,7 @@ export const KbdVariants = () => {
           <Kbd title="Esc" variant={variant} color="p" />
           <Kbd title="Esc" variant={variant} color="b" />
           <Kbd title="Esc" variant={variant} color="se" />
+          <Kbd title="Esc" variant={variant} color="i" />
         </Flex>
       ))}
     </div>
@@ -57,6 +59,7 @@ export const KbdSizes = () => {
       <Kbd title="Esc" size="6" />
       <Kbd title="Esc" size="7" />
       <Kbd title="Esc" size="8" />
+      <Kbd title="Esc" size="9" />
     </Flex>
   )
 }
diff --git a/apps/stories/stories/link.stories.tsx b/apps/stories/stories/link.stories.tsx
index 22e1400e..a245ac10 100644
--- a/apps/stories/stories/link.stories.tsx
+++ b/apps/stories/stories/link.stories.tsx
@@ -116,7 +116,7 @@ export function LinkTrasforms() {
       <Link href="#" transform="uppercase">
         Lorem ipsum dolor sit amet consectetur adipisicing elit.
       </Link>
-      <Link href="#" transform="first-letter-only">
+      <Link href="#" transform="capitalize-once">
         Lorem ipsum dolor sit amet consectetur adipisicing elit.
       </Link>
     </div>
diff --git a/apps/stories/stories/radio.stories.tsx b/apps/stories/stories/radio.stories.tsx
index bbb1831f..e9659aba 100644
--- a/apps/stories/stories/radio.stories.tsx
+++ b/apps/stories/stories/radio.stories.tsx
@@ -27,8 +27,9 @@ export function RadioColors() {
         <Radio color="su" name="green" label="Green" />
         <Radio color="w" name="orange" label="Orange" />
         <Radio color="p" name="primary" label="Primary" />
-        <Radio color="b" name="b" label="b" />
+        <Radio color="b" name="b" label="Background" />
         <Radio color="se" name="se" label="Secondary" />
+        <Radio color="i" name="i" label="info" />
       </Flex>
     </div>
   )
@@ -44,6 +45,7 @@ export function RadioDefaultCheck() {
         <Radio defaultChecked color="p" name="solid.primary" label="Primary" />
         <Radio defaultChecked color="b" name="solid.bg" label="b" />
         <Radio defaultChecked color="se" name="solid.secondary" label="Secondary" />
+        <Radio defaultChecked color="i" name="solid.info" label="Info" />
       </Flex>
       <Flex gap="4" items="center">
         <Radio defaultChecked variant="outline" color="d" name="outline.red" label="Red" />
@@ -52,6 +54,7 @@ export function RadioDefaultCheck() {
         <Radio defaultChecked variant="outline" color="p" name="outline.primary" label="Primary" />
         <Radio defaultChecked variant="outline" color="b" name="outline.bg" label="b" />
         <Radio defaultChecked variant="outline" color="se" name="outline.secondary" label="Secondary" />
+        <Radio defaultChecked variant="outline" color="i" name="outline.info" label="Info" />
       </Flex>
       <Flex gap="4" items="center">
         <Radio defaultChecked variant="soft" color="d" name="soft.red" label="Red" />
@@ -60,6 +63,7 @@ export function RadioDefaultCheck() {
         <Radio defaultChecked variant="soft" color="p" name="soft.primary" label="Primary" />
         <Radio defaultChecked variant="soft" color="b" name="soft.bg" label="b" />
         <Radio defaultChecked variant="soft" color="se" name="soft.secondary" label="Secondary" />
+        <Radio defaultChecked variant="soft" color="i" name="soft.info" label="Info" />
       </Flex>
     </div>
   )
diff --git a/apps/stories/stories/text.stories.tsx b/apps/stories/stories/text.stories.tsx
index 949c7b2f..4c9e6894 100644
--- a/apps/stories/stories/text.stories.tsx
+++ b/apps/stories/stories/text.stories.tsx
@@ -151,7 +151,7 @@ export function TextTrasforms() {
       <Text transform="lowercase">Lorem ipsum dolor sit amet consectetur adipisicing elit.</Text>
       <Text transform="capitalize">Lorem ipsum dolor sit amet consectetur adipisicing elit.</Text>
       <Text transform="uppercase">Lorem ipsum dolor sit amet consectetur adipisicing elit.</Text>
-      <Text transform="first-letter-only">Lorem ipsum dolor sit amet consectetur adipisicing elit.</Text>
+      <Text transform="capitalize-once">Lorem ipsum dolor sit amet consectetur adipisicing elit.</Text>
     </div>
   )
 }
diff --git a/packages/pillar-core/src/core/@alert/_alert.css b/packages/pillar-core/src/core/@alert/_alert.css
index 3094d8fe..687f822b 100644
--- a/packages/pillar-core/src/core/@alert/_alert.css
+++ b/packages/pillar-core/src/core/@alert/_alert.css
@@ -7,8 +7,8 @@
     unavailable, these properties take priority. However, if specific props related to
     avatars are provided, they will override these properties.
   */
-  border-radius: var(--alert-rad, 0);
-  font-size: var(--alert-size, 1rem);
+  border-radius: var(--al-rad, 0);
+  font-size: var(--al-size, 1rem);
 }
 
 /*
diff --git a/packages/pillar-core/src/core/@alert/index.tsx b/packages/pillar-core/src/core/@alert/index.tsx
index 6437ba52..ba3675b8 100644
--- a/packages/pillar-core/src/core/@alert/index.tsx
+++ b/packages/pillar-core/src/core/@alert/index.tsx
@@ -48,7 +48,7 @@ export const Alert = forwardRef(
       <div ref={forwardedRef} className={classNames} role="alert" {...rest}>
         {icon && <span className="Swfit">{icon}</span>}
         <div className={cx(`a-l_cnt f-l`, { al_in: inline })}>
-          {title && <div className="u_t-capitalize u_t-md">{title}</div>}
+          {title && <div className="Ttcapitalize Fw5">{title}</div>}
           {message && <span>{message}</span>}
         </div>
         {closable && <IconButton size="2" onClick={handleToggle} icon={<Close />} title="close alert" color={color} />}
diff --git a/packages/pillar-core/src/core/@avatar/index.tsx b/packages/pillar-core/src/core/@avatar/index.tsx
index b4d138c8..c68edc71 100644
--- a/packages/pillar-core/src/core/@avatar/index.tsx
+++ b/packages/pillar-core/src/core/@avatar/index.tsx
@@ -78,7 +78,7 @@ export const Avatar = forwardRef((props, forwardRef) => {
   const [isError, setIsError] = useState(!image)
 
   const classNames = cx(`a-v a-v-${variant} C${color} u_s-equal Fc`, {
-    [`u_${animate}`]: animate,
+    [`A${animate}`]: animate,
     [`Fs${size}`]: size,
     [`R${corner}`]: corner,
     [className!]: className,
diff --git a/packages/pillar-core/src/core/@breadcrumb/index.tsx b/packages/pillar-core/src/core/@breadcrumb/index.tsx
index 35bb47db..88c1f737 100644
--- a/packages/pillar-core/src/core/@breadcrumb/index.tsx
+++ b/packages/pillar-core/src/core/@breadcrumb/index.tsx
@@ -21,7 +21,7 @@ export const BreadcrumbItem = forwardRef((props, forwardedRef) => {
   const classNames = cx(`b-r_lnk Sg2 Fc`, { [className!]: className })
 
   return (
-    <li className={`f-l Sgsm b-r_itm`}>
+    <li className={`f-l Sg4 b-r_itm`}>
       <Tag ref={forwardedRef} {...(current && { 'aria-current': 'page' })} className={classNames} {...rest}>
         {children}
       </Tag>
@@ -45,7 +45,7 @@ BreadcrumbItem.displayName = 'BreadcrumbItem'
 export const Breadcrumb = forwardRef(
   ({ children, separator, size, color = 'b', className, as: Tag = 'nav', ...rest }, ref) => {
     const breadcrumbContext = { separator }
-    const classNames = cx(`f-l fl-wrap Sgsm C${color}`, {
+    const classNames = cx(`f-l fl-wrap Sg4 C${color}`, {
       [`Fs${size}`]: size,
       [className!]: className,
     })
diff --git a/packages/pillar-core/src/core/@counterButton/index.tsx b/packages/pillar-core/src/core/@counterButton/index.tsx
index e61861c6..f852aa7d 100644
--- a/packages/pillar-core/src/core/@counterButton/index.tsx
+++ b/packages/pillar-core/src/core/@counterButton/index.tsx
@@ -6,11 +6,11 @@ import type { CounterButtonProps } from './counterButton.type'
 const shared = { type: 'button', className: 'c-b Fc' } as const
 
 export const CounterButton = ({ value = 1, min = 1, max = Infinity, step = 1 }: CounterButtonProps) => {
-  const init = { value, min, max, step }
-  const { count, setCount, increment, decrement } = useCounter(init)
+  const init = { min, max, step }
+  const { count, setCount, increment, decrement } = useCounter({ value, ...init })
 
   return (
-    <div className="f-l Sgsm c-b_cnt">
+    <div className="f-l Sg4 c-b_cnt">
       <button {...shared} onClick={() => decrement()} aria-label="Decrement value" disabled={count <= min}>
         <Minus width="1em" />
       </button>
@@ -18,6 +18,7 @@ export const CounterButton = ({ value = 1, min = 1, max = Infinity, step = 1 }:
       <input
         className="cb-f"
         type="number"
+        value={count}
         {...init}
         onChange={(e) => setCount(+e.target.value)}
         aria-label="Counter value"
diff --git a/packages/pillar-core/src/core/@pagination/_pagination.css b/packages/pillar-core/src/core/@pagination/_pagination.css
index 53ff5071..ddb3a823 100644
--- a/packages/pillar-core/src/core/@pagination/_pagination.css
+++ b/packages/pillar-core/src/core/@pagination/_pagination.css
@@ -28,6 +28,6 @@
 .p-a_lst {
   display: flex;
   align-items: center;
-  gap: var(--Ssm);
-  list-style: none;
+  /* list-style: none;
+   */
 }
diff --git a/packages/pillar-core/src/core/@pagination/index.tsx b/packages/pillar-core/src/core/@pagination/index.tsx
index bfc92941..5cbdb6c0 100644
--- a/packages/pillar-core/src/core/@pagination/index.tsx
+++ b/packages/pillar-core/src/core/@pagination/index.tsx
@@ -56,7 +56,7 @@ export const Pagination = ({ count = 10, ...rest }: PaginationProps) => {
   return (
     <nav className={`p-a C${rest.color}`} aria-label="Pagination">
       <PaginationProvider {...rest}>
-        <ul className="p-a_lst">
+        <ul className="p-a_lst Sg3">
           <Item disabled={isFirst} onClick={goToPrevious} active={step} number={step - 1}>
             <ChevronDown width="20" direction="left" />
           </Item>
diff --git a/packages/pillar-core/src/core/@radio/index.tsx b/packages/pillar-core/src/core/@radio/index.tsx
index 83c0b043..b49ed74f 100644
--- a/packages/pillar-core/src/core/@radio/index.tsx
+++ b/packages/pillar-core/src/core/@radio/index.tsx
@@ -48,7 +48,7 @@ export const CustomRadio = (props: CustomRadioProps) => {
 export const RadioGroup = ({ direction = 'col', children, label, showLabel, id, ...rest }: RadioGroupProps) => {
   /*TODO: ADD ERROR ACCESSIBILITY  */
 
-  const classnames = cx(`f-g f-l fl-wrap Sgsm Aai-start`, { [`fl-${direction}`]: !!direction })
+  const classnames = cx(`f-g f-l fl-wrap Sg4 Aai-start`, { [`fl-${direction}`]: !!direction })
 
   return (
     <fieldset role="radiogroup" className="ra-g">
diff --git a/packages/pillar-core/src/core/@tabs/index.tsx b/packages/pillar-core/src/core/@tabs/index.tsx
index f9c8ee13..fcff10d2 100644
--- a/packages/pillar-core/src/core/@tabs/index.tsx
+++ b/packages/pillar-core/src/core/@tabs/index.tsx
@@ -133,7 +133,7 @@ export const Tabs = forwardRef(
       <TabsProvider {...context}>
         <div
           ref={ref}
-          className={cx(`f-l Sgsm C${color} Fs${size}`, { ['fl-col']: orientation === 'vertical' })}
+          className={cx(`f-l Sg4 C${color} Fs${size}`, { ['fl-col']: orientation === 'vertical' })}
           {...rest}
         >
           {children}
diff --git a/packages/pillar-core/src/css/utilities/_text.css b/packages/pillar-core/src/css/utilities/_text.css
index 13180a41..c1395589 100644
--- a/packages/pillar-core/src/css/utilities/_text.css
+++ b/packages/pillar-core/src/css/utilities/_text.css
@@ -1,18 +1,18 @@
 /*text:  Tt, Ta, Td, Lh */
 
-.TtU {
+.Ttuppercase {
   text-transform: uppercase;
 }
 
-.TtL {
+.Ttlowercase {
   text-transform: lowercase;
 }
 
-.TtC {
+.Ttcapitalize {
   text-transform: capitalize;
 }
 
-.TtCf {
+.Ttcapitalize-once::first-letter {
   text-transform: uppercase;
 }
 
diff --git a/packages/pillar-core/src/types/index.ts b/packages/pillar-core/src/types/index.ts
index 661a8a7d..b62b6ea1 100644
--- a/packages/pillar-core/src/types/index.ts
+++ b/packages/pillar-core/src/types/index.ts
@@ -56,7 +56,7 @@ type Orientation = 'horizontal' | 'vertical' | undefined
  * @typedef {Direction} Direction
  */
 
-type Transform = 'uppercase' | 'lowercase' | 'capitalize' | 'first-letter-only'
+type Transform = 'uppercase' | 'lowercase' | 'capitalize' | 'capitalize-once'
 
 type Height = '25' | '50' | '75' | '100' | 'fit' | '24p' | '48p' | '96p' | '192p' | '384p' | 'screen'