diff --git a/thaw/src/input/input.css b/thaw/src/input/input.css
index 64e8539..d45f1c7 100644
--- a/thaw/src/input/input.css
+++ b/thaw/src/input/input.css
@@ -1,17 +1,77 @@
 .thaw-input {
     display: inline-flex;
-    width: 100%;
+    align-items: center;
+    flex-wrap: nowrap;
+    position: relative;
     box-sizing: border-box;
-    padding: 0 10px;
-    background-color: var(--thaw-background-color);
-    font-size: 14px;
-    color: var(--thaw-font-color);
-    border: 1px solid var(--thaw-border-color);
-    border-radius: var(--thaw-border-radius);
+    min-height: 32px;
+
+    background-color: var(--colorNeutralBackground1);
+
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase300);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase300);
+
+    border: 1px solid var(--colorNeutralStroke1);
+    border-bottom-color: var(--colorNeutralStrokeAccessible);
+    border-radius: var(--borderRadiusMedium);
+
     cursor: text;
     transition: all 0.3s;
 }
 
+.thaw-input:hover {
+    border-color: var(--colorNeutralStroke1Hover);
+    border-bottom-color: var(--colorNeutralStrokeAccessibleHover);
+}
+
+.thaw-input:active .thaw-input:focus-within {
+    border-color: var(--colorNeutralStroke1Pressed);
+    border-bottom-color: var(--colorNeutralStrokeAccessiblePressed);
+}
+
+.thaw-input::after {
+    box-sizing: border-box;
+    content: "";
+    position: absolute;
+    left: -1px;
+    bottom: -1px;
+    right: -1px;
+    height: max(2px, var(--borderRadiusMedium));
+    border-bottom-left-radius: var(--borderRadiusMedium);
+    border-bottom-right-radius: var(--borderRadiusMedium);
+    border-bottom: 2px solid var(--colorCompoundBrandStroke);
+    clip-path: inset(calc(100% - 2px) 0px 0px);
+    transform: scaleX(0);
+    transition-property: transform;
+    transition-duration: var(--durationUltraFast);
+    transition-delay: var(--curveAccelerateMid);
+}
+
+.thaw-input:focus-within::after {
+    transform: scaleX(1);
+    transition-property: transform;
+    transition-duration: var(--durationNormal);
+    transition-delay: var(--curveDecelerateMid);
+}
+
+.thaw-input__input-el {
+    align-self: stretch;
+    box-sizing: border-box;
+    flex-grow: 1;
+    min-width: 0px;
+    border-style: none;
+    padding: 0 var(--spacingHorizontalM);
+    color: var(--colorNeutralForeground1);
+    background-color: transparent;
+    outline-style: none;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+}
+
 .thaw-input--focus,
 .thaw-input:hover:not(.thaw-input--disabled, .thaw-input--invalid) {
     border-color: var(--thaw-border-color-hover);
@@ -36,17 +96,6 @@
     box-shadow: 0 0 0 2px var(--thaw-box-shadow-color-invalid);
 }
 
-.thaw-input__input-el {
-    width: 100%;
-    height: 30px;
-    background-color: transparent !important;
-    color: var(--thaw-font-color);
-    line-height: 30px;
-    font-size: inherit;
-    border: none;
-    outline: none;
-}
-
 .thaw-input__input-el::placeholder {
     color: var(--thaw-placeholder-color);
 }
diff --git a/thaw/src/theme/color.rs b/thaw/src/theme/color.rs
index 408f0c7..3de796f 100644
--- a/thaw/src/theme/color.rs
+++ b/thaw/src/theme/color.rs
@@ -22,6 +22,10 @@ pub struct ColorTheme {
     pub color_neutral_stroke_1: String,
     pub color_neutral_stroke_1_hover: String,
     pub color_neutral_stroke_1_pressed: String,
+    pub color_neutral_stroke_accessible: String,
+
+    pub color_compound_brand_stroke: String,
+
     pub color_brand_background: String,
     pub color_brand_background_hover: String,
     pub color_brand_background_pressed: String,
@@ -55,6 +59,10 @@ impl ColorTheme {
             color_neutral_stroke_1: "#d1d1d1".into(),
             color_neutral_stroke_1_hover: "#c7c7c7".into(),
             color_neutral_stroke_1_pressed: "#b3b3b3".into(),
+            color_neutral_stroke_accessible: "#616161".into(),
+
+            color_compound_brand_stroke: "#0f6cbd".into(),
+
             color_brand_background: "#0f6cbd".into(),
             color_brand_background_hover: "#115ea3".into(),
             color_brand_background_pressed: "#0c3b5e".into(),
@@ -88,6 +96,10 @@ impl ColorTheme {
             color_neutral_stroke_1: "#666666".into(),
             color_neutral_stroke_1_hover: "#757575".into(),
             color_neutral_stroke_1_pressed: "#6b6b6b".into(),
+            color_neutral_stroke_accessible: "#adadad".into(),
+
+            color_compound_brand_stroke: "#479ef5".into(),
+
             color_brand_background: "#115ea3".into(),
             color_brand_background_hover: "#0f6cbd".into(),
             color_brand_background_pressed: "#0c3b5e".into(),
diff --git a/thaw/src/theme/common.rs b/thaw/src/theme/common.rs
index 51127dd..9762af6 100644
--- a/thaw/src/theme/common.rs
+++ b/thaw/src/theme/common.rs
@@ -43,7 +43,9 @@ pub struct CommonTheme {
     pub spacing_horizontal_m: String,
     pub spacing_horizontal_l: String,
 
+    pub duration_ultra_fast: String,
     pub duration_faster: String,
+    pub curve_accelerate_mid: String,
     pub curve_easy_ease: String,
 
     pub height_tiny: String,
@@ -98,7 +100,9 @@ impl CommonTheme {
             spacing_horizontal_m: "12px".into(),
             spacing_horizontal_l: "16px".into(),
 
+            duration_ultra_fast: "50ms".into(),
             duration_faster: "100ms".into(),
+            curve_accelerate_mid: "cubic-bezier(1,0,1,1)".into(),
             curve_easy_ease: "cubic-bezier(0.33,0,0.67,1)".into(),
 
             height_tiny: "22px".into(),