bradoctech · begnini · Aug 4, 2026 · Aug 4, 2026 · Aug 4, 2026 · Aug 4, 2026
diff --git a/frontend/src/metabase-types/api/mocks/settings.ts b/frontend/src/metabase-types/api/mocks/settings.ts
@@ -173,7 +173,7 @@ export const createMockSettings = (
   "allowed-iframe-hosts": "*",
   "anon-tracking-enabled": false,
   "application-colors": {},
-  "application-font": "Lato",
+  "application-font": "Rawline",
   "application-font-files": [],
   // eslint-disable-next-line metabase/no-literal-metabase-strings -- This is a mock
   "application-name": "Metabase",

diff --git a/frontend/src/metabase/common/components/TabButton/TabButton.styled.tsx b/frontend/src/metabase/common/components/TabButton/TabButton.styled.tsx
@@ -18,6 +18,7 @@ export const TabButtonInputWrapper = styled.span<TabButtonProps>`
   border: 1px solid transparent;
   border-radius: 6px;
   line-height: 1.5;
+  font-weight: ${(props) => (props.isSelected && !props.disabled ? 700 : 500)};
 `;
 
 export const TabButtonInputResizer = styled.span`
@@ -38,7 +39,7 @@ export const TabButtonInput = styled.input<TabButtonProps & { value: string }>`
   background-color: transparent;
   color: inherit;
   font-size: inherit;
-  font-weight: bold;
+  font-weight: inherit;
   text-align: center;
 
   ${(props) =>
@@ -55,10 +56,9 @@ export const TabButtonRoot = styled.div<TabButtonProps>`
   color: ${(props) =>
     props.isSelected && !props.disabled
       ? "var(--mb-color-text-primary)"
-      : "var(--mb-color-text-primary)"};
+      : "var(--mb-color-sp-gray)"};
   opacity: ${(props) => (props.disabled ? 0.3 : 1)};
   font-size: var(--mantine-font-size-md);
-  font-weight: 700;
   cursor: ${(props) => (props.disabled ? "default" : "pointer")};
   border-bottom: 0.125rem solid transparent;
 

diff --git a/frontend/src/metabase/data-grid/constants.ts b/frontend/src/metabase/data-grid/constants.ts
@@ -3,7 +3,7 @@ export const HEADER_BASE_HEIGHT = 36;
 export const HEADER_BORDER_SIZE = 1;
 export const HEADER_HEIGHT = HEADER_BASE_HEIGHT + HEADER_BORDER_SIZE;
 export const ADD_COLUMN_BUTTON_WIDTH = 36;
-export const GRID_HORIZONTAL_PADDING = 8;
+export const GRID_HORIZONTAL_PADDING = 0; // 8 estava gerando barra de rolagem horizontal nos cards
 export const MIN_COLUMN_WIDTH = 60;
 export const ROW_ID_COLUMN_ID = `\0_INDEX`;
 export const TRUNCATE_LONG_CELL_WIDTH = 780;

diff --git a/frontend/src/metabase/query_builder/components/view/ViewHeader/ViewTitleHeader.module.css b/frontend/src/metabase/query_builder/components/view/ViewHeader/ViewTitleHeader.module.css
@@ -144,7 +144,7 @@
 }
 
 .SaveButton {
-  border-radius: 8px;
+  border-radius: 100px;
 
   &[data-disabled="true"] {
     pointer-events: all;
@@ -160,12 +160,18 @@
 }
 
 .ViewHeaderActionPanel {
+  --button-radius: 100px;
+
   display: flex;
   align-items: center;
   margin-left: auto;
   gap: 0.5rem;
   position: relative;
 
+  :global(button) {
+    border-radius: 100px;
+  }
+
   @container query-builder (max-width: 70em) {
     margin-left: 0;
     width: 100%;

diff --git a/...der/components/view/ViewHeader/components/AdHocQuestionLeftSide/AdHocQuestionLeftSide.tsx b/...der/components/view/ViewHeader/components/AdHocQuestionLeftSide/AdHocQuestionLeftSide.tsx
@@ -53,7 +53,7 @@ export function AdHocQuestionLeftSide(
         />
         <ViewHeading
           className={ViewTitleHeaderS.AdHocViewHeading}
-          c="text-secondary"
+          c="text-primary"
         >
           {isNative ? (
             t`New question`

diff --git a/frontend/src/metabase/static-viz/components/FunnelChart/utils/funnel.ts b/frontend/src/metabase/static-viz/components/FunnelChart/utils/funnel.ts
@@ -46,7 +46,7 @@ export const getFormattedStep = (
   const fontStyle = {
     size: stepFontSize,
     weight: CHAR_SIZES_FONT_WEIGHT,
-    family: "Lato",
+    family: "Rawline",
   };
 
   const stepName = truncateText(

diff --git a/frontend/src/metabase/static-viz/components/Gauge/Gauge.tsx b/frontend/src/metabase/static-viz/components/Gauge/Gauge.tsx
@@ -74,7 +74,7 @@ export default function Gauge({
       xmlns="http://www.w3.org/2000/svg"
       width={CHART_WIDTH}
       height={CHART_HEIGHT}
-      fontFamily="Lato"
+      fontFamily="Rawline"
     >
       <g transform={`translate(${CHART_WIDTH / 2}, ${CHART_HEIGHT / 2})`}>
         {/* `transform-origin: center` doesn't work when rendered with Batik.

diff --git a/frontend/src/metabase/static-viz/components/Gauge/GaugeContainer.tsx b/frontend/src/metabase/static-viz/components/Gauge/GaugeContainer.tsx
@@ -134,7 +134,7 @@ export default function GaugeContainer({
             measureTextWidth(text, Number(style.size), Number(style.weight)),
           {
             size: SEGMENT_LABEL_FONT_SIZE,
-            family: "Lato",
+            family: "Rawline",
             weight: CHAR_SIZES_FONT_WEIGHT,
           },
         ),

diff --git a/frontend/src/metabase/static-viz/components/Legend/Legend.tsx b/frontend/src/metabase/static-viz/components/Legend/Legend.tsx
@@ -56,7 +56,7 @@ export const Legend = ({
                     Number(style.size),
                     Number(style.weight),
                   ),
-                { size: fontSize, weight: fontWeight, family: "Lato" },
+                { size: fontSize, weight: fontWeight, family: "Rawline" },
               )
             : originalName;
 

diff --git a/frontend/src/metabase/static-viz/components/Legend/utils.ts b/frontend/src/metabase/static-viz/components/Legend/utils.ts
@@ -111,7 +111,7 @@ export const calculateLegendRows = ({
           {
             size: fontSize,
             weight: fontWeight,
-            family: "Lato",
+            family: "Rawline",
           },
         ),
         left: horizontalPadding,

diff --git a/frontend/src/metabase/static-viz/components/RowChart/RowChart.tsx b/frontend/src/metabase/static-viz/components/RowChart/RowChart.tsx
@@ -110,7 +110,7 @@ export const StaticRowChart = ({
       xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={fullChartHeight}
-      fontFamily="Lato"
+      fontFamily="Rawline"
     >
       {legend.items.length > 0 && (
         <Legend

diff --git a/frontend/src/metabase/static-viz/components/RowChart/theme.ts b/frontend/src/metabase/static-viz/components/RowChart/theme.ts
@@ -3,7 +3,7 @@ import type { RowChartTheme } from "metabase/visualizations/shared/components/Ro
 
 export const getStaticChartTheme = (
   getColor: ColorGetter,
-  fontFamily = "Lato",
+  fontFamily = "Rawline",
 ): RowChartTheme => {
   return {
     axis: {

diff --git a/frontend/src/metabase/static-viz/components/Text/Text.tsx b/frontend/src/metabase/static-viz/components/Text/Text.tsx
@@ -9,5 +9,5 @@ type Props = Omit<TextProps, "color"> & {
 
 export const Text = (props: Props) => {
   // eslint-disable-next-line metabase/no-color-literals
-  return <VText fontFamily="Lato" fontSize="13" fill="#4C5773" {...props} />;
+  return <VText fontFamily="Rawline" fontSize="13" fill="#4C5773" {...props} />;
 };
diff --git a/frontend/src/metabase/static-viz/lib/rendering-context.ts b/frontend/src/metabase/static-viz/lib/rendering-context.ts
@@ -34,7 +34,7 @@ export const createStaticRenderingContext = (
       measureTextHeight(
         typeof style.size === "number" ? style.size : parseInt(style.size),
       ),
-    fontFamily: "Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif",
+    fontFamily: "Rawline, 'Helvetica Neue', Helvetica, Arial, sans-serif",
     theme: DEFAULT_VISUALIZATION_THEME,
   };
 };
diff --git a/frontend/src/metabase/styled-components/selectors.ts b/frontend/src/metabase/styled-components/selectors.ts
@@ -12,7 +12,8 @@ export const getFont = createSelector(
     } else if (!_.isEmpty(settings["application-font-files"])) {
       return "Custom";
     } else {
-      return settings["application-font"];
+      // SP: keep charts/labels aligned with GlobalStyles (--mb-default-font-family)
+      return "Rawline";
     }
   },
 );

diff --git a/frontend/src/metabase/ui/colors/constants/themes/light.ts b/frontend/src/metabase/ui/colors/constants/themes/light.ts
@@ -43,7 +43,7 @@ export const METABASE_LIGHT_THEME: MetabaseThemeV2 = {
     "brand-hover": "color-mix(in srgb, #FF161F, white 12%)", // SP Paleta Primaria: sp-red
     danger: spColors.redDark.base, // SP Paleta Secundaria: sp-red-dark
     error: spColors.status.error.base, // utiliza spColors.status.error
-    filter: baseColors.octopus[50], // original sem roxo na paleta SP
+    filter: spColors.blueMedium.base, // azul medio na paleta SP
     focus: spColors.grayLight.base, // SP Paleta Prim?ria: sp-gray-light
     "icon-brand": spColors.red[30], // SP Paleta Primaria: sp-red
     "icon-primary": spColors.black.alpha80, // SP Paleta Primaria: sp-black

diff --git a/frontend/src/metabase/ui/components/navigation/Tabs/Tab.module.css b/frontend/src/metabase/ui/components/navigation/Tabs/Tab.module.css
@@ -17,7 +17,7 @@
 }
 
 .tab {
-  color: var(--mb-color-text-primary);
+  color: var(--mb-color-sp-gray);
   max-width: 100%;
   justify-content: start;
 
@@ -36,14 +36,18 @@
   }
 
   &[data-active="true"] {
-    color: var(--mb-color-text-brand);
+    color: var(--mb-color-text-primary);
     border-color: var(--mb-color-brand);
+
+    .tabLabel {
+      font-weight: 700;
+    }
   }
 }
 
 .tabLabel {
   font-size: var(--mantine-font-size-md);
-  font-weight: bold;
+  font-weight: 500;
   line-height: 1.15; /* consistent w/ mantine v6 spacing */
   white-space: nowrap;
   text-overflow: ellipsis;

diff --git a/frontend/src/metabase/visualizations/components/ScalarValue/ScalarValue.tsx b/frontend/src/metabase/visualizations/components/ScalarValue/ScalarValue.tsx
@@ -49,7 +49,7 @@ export const ScalarValue = ({
       text: value,
       targetHeight: height,
       targetWidth: width,
-      fontFamily: fontFamily ?? "Lato",
+      fontFamily: fontFamily ?? "Rawline",
       fontWeight: 700,
       unit: "rem",
       step: 0.2,

diff --git a/frontend/src/metabase/visualizations/lib/exports-branding-utils.tsx b/frontend/src/metabase/visualizations/lib/exports-branding-utils.tsx
@@ -96,7 +96,7 @@ export const createBrandingElement = (size: BrandingSize) => {
     const brandingCopy = document.createElement("span");
     brandingCopy.textContent = t`Made with`;
     brandingCopy.style.cssText = `
-      font-family: "Lato", sans-serif;
+      font-family: "Rawline", sans-serif;
       font-size: ${fz}px;
       color: var(--mb-color-text-secondary);
       display: inline-block;

diff --git a/frontend/src/metabase/visualizations/lib/save-dashboard-pdf.ts b/frontend/src/metabase/visualizations/lib/save-dashboard-pdf.ts
@@ -137,7 +137,7 @@ export const getPageBreaks = (
 const createHeaderElement = (dashboardName: string, marginBottom: number) => {
   const header = document.createElement("div");
   header.style.cssText = `
-    font-family: "Lato", sans-serif;
+    font-family: "Rawline", sans-serif;
     font-size: 24px;
     font-weight: 700;
     color: var(--mb-color-text-primary);

diff --git a/frontend/src/metabase/visualizations/shared/components/RowChart/utils/layout.ts b/frontend/src/metabase/visualizations/shared/components/RowChart/utils/layout.ts
@@ -24,7 +24,7 @@ export const getMaxWidth = (
     ...formattedYTicks.map((tick) =>
       measureTextWidth(tick, {
         size: `${ticksFont.size}px`,
-        family: "Lato",
+        family: "Rawline",
         weight: String(ticksFont.weight ?? 400),
       }),
     ),

diff --git a/frontend/src/metabase/visualizations/visualizations/RowChart/utils/theme.ts b/frontend/src/metabase/visualizations/visualizations/RowChart/utils/theme.ts
@@ -6,7 +6,7 @@ import type { RowChartTheme } from "metabase/visualizations/shared/components/Ro
 import { getVisualizationTheme } from "metabase/visualizations/shared/utils/theme";
 
 export const useRowChartTheme = (
-  fontFamily: string = "Lato",
+  fontFamily: string = "Rawline",
   isDashboard: boolean,
 ): RowChartTheme => {
   const theme = useMantineTheme();

diff --git a/src/metabase/appearance/settings.clj b/src/metabase/appearance/settings.clj
@@ -136,7 +136,7 @@ To change the chart colors:
   :visibility :public
   :export?    true
   :type       :string
-  :default    "Lato"
+  :default    "Rawline"
   :feature    :whitelabel
   :audit      :getter
   :setter     (fn [new-value]

diff --git a/src/metabase/channel/render/body.clj b/src/metabase/channel/render/body.clj
@@ -695,7 +695,7 @@
   (let [filesize-limit (:max-size-human-readable data "10.0 mb")]
     {:attachments nil,
      :content [:div
-               {:style "font-family: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif; margin: 0px 0;"}
+               {:style "font-family: Rawline, \"Helvetica Neue\", Helvetica, Arial, sans-serif; margin: 0px 0;"}
                [:div
                 {:style "background-color: #F9FBFC; border: 1px solid #DCE1E4; border-radius: 8px; padding: 16px;"}
                 [:p

diff --git a/src/metabase/channel/render/png.clj b/src/metabase/channel/render/png.clj
@@ -78,37 +78,38 @@
   [^Font font s]
   (neg? (.canDisplayUpTo font s)))
 
-(def ^:private get-lato
-  (letfn [(get-lato* []
-            (let [lato-names #{"Lato Regular" "Lato-Regular" "lato" "lato-regular"}
+(def ^:private get-app-font
+  (letfn [(get-app-font* []
+            (let [font-names #{"Rawline" "Rawline Regular" "Rawline-Regular" "rawline" "rawline-regular"
+                               "Lato Regular" "Lato-Regular" "lato" "lato-regular"}
                   env        (GraphicsEnvironment/getLocalGraphicsEnvironment)
                   fonts      (.getAllFonts env)
-                  font       ^Font (some #(when (lato-names (.getName ^Font %)) %) fonts)]
+                  font       ^Font (some #(when (font-names (.getName ^Font %)) %) fonts)]
               font))]
-    (memoize get-lato*)))
+    (memoize get-app-font*)))
 
-(defn- lato-can-render?
+(defn- app-font-can-render?
   [s]
-  (let [lato (get-lato)]
-    (when lato
-      (font-can-fully-render? lato s))))
+  (let [font (get-app-font)]
+    (when font
+      (font-can-fully-render? font s))))
 
-(defn- wrap-non-lato-chars
-  "Wrap characters not supported by the installed Lato font in a span so that we can explicitly set the font to sans-serif.
+(defn- wrap-non-app-font-chars
+  "Wrap characters not supported by the installed app font in a span so that we can explicitly set the font to sans-serif.
   We do this to work around unexpected font-fallback behaviours in CSSBox.
 
-  Lato is properly loaded/registered in `metabase.channel.render.style/regiter-fonts!`, which means the
-  java.awt GraphicsEnvironment has Lato available as a Physical font. The loaded physical font does not contain
+  Rawline is properly loaded/registered in `metabase.channel.render.style/register-fonts!`, which means the
+  java.awt GraphicsEnvironment has Rawline available as a Physical font. The loaded physical font does not contain
   glyphs to properly render many international characters, and instead of falling back to another font on a per-glyph basis,
   it simply renders a '[?]', which is no good.
 
-  If a given string, inside a `transformable-element` contains any character that isn't Lato-compatible, replace the entire string.
+  If a given string, inside a `transformable-element` contains any character that isn't font-compatible, replace the entire string.
   This is done to make the string as consistent as possible (no mixing fonts in a single string)."
   [content]
   (let [transformable-els #{:div :span :td :th :tr :table :p :tbody :thead}
         string-wrapper    (fn [part]
                             (if (and (string? part)
-                                     (not (lato-can-render? part)))
+                                     (not (app-font-can-render? part)))
                               [:span {:style (style/style {:font-family "sans-serif"})} part]
                               part))]
     (walk/postwalk
@@ -143,11 +144,11 @@
                             content)
            html (html [:html
                        [:body {:style (style/style
-                                       {:font-family      "Lato, 'Helvetica Neue', 'Lucida Grande', sans-serif"
+                                       {:font-family      "Rawline, 'Helvetica Neue', 'Lucida Grande', sans-serif"
                                         :margin           0
                                         :padding          0
                                         :background-color :white})}
-                        (wrap-non-lato-chars padded-content)]])]
+                        (wrap-non-app-font-chars padded-content)]])]
        (with-open [os (ByteArrayOutputStream.)]
          (-> (render-to-png html width)
              (write-image! "png" os))

diff --git a/src/metabase/channel/render/preview.clj b/src/metabase/channel/render/preview.clj
@@ -68,7 +68,7 @@
       [:tr
        (cellfn nil)
        (cellfn
-        [:div {:style (style/style {:font-family             "Lato"
+        [:div {:style (style/style {:font-family             "Rawline"
                                     :font-size               "13px" #_"0.875em"
                                     :font-weight             "400"
                                     :font-style              "normal"

diff --git a/src/metabase/channel/render/style.clj b/src/metabase/channel/render/style.clj
@@ -90,7 +90,7 @@
 (defn font-style
   "Font family to use in rendered Pulses."
   []
-  {:font-family "Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif"})
+  {:font-family "Rawline, \"Helvetica Neue\", Helvetica, Arial, sans-serif"})
 
 (defn section-style
   "CSS style for a Pulse section."
@@ -124,9 +124,9 @@
 
 (defn- register-fonts! []
   (try
-    (register-font! "frontend_client/app/fonts/Lato/Lato-Regular.ttf")
+    (register-font! "frontend_client/app/fonts/Rawline/rawline-400.ttf")
     (doseq [weight ["700" "900"]]
-      (register-font! (format "frontend_client/app/fonts/Lato/lato-v16-latin-%s.ttf" weight)))
+      (register-font! (format "frontend_client/app/fonts/Rawline/rawline-%s.ttf" weight)))
     (catch Throwable e
       (let [message (str (trs "Error registering fonts: Metabase will not be able to send Pulses.")
                          " "