`, etc.).
+- `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs).
+
+You can check passed props to renderized components on hover `level / typography`;
+
+
+### Using typography IDs
+
+There are typography ID definitions you can use in your code rather than typing the
+typography ID by hand.
+
+**Using these IDs is recommended**.
+
+Assuming the namespace of the typography is required as `t`:
+
+```clj
+(ns app.main.ui.foo
+ (:require
+ [app.main.ui.ds.foundations.heading :refer [heading*]]
+ [app.main.ui.ds.foundations.typography :as t]))
+```
+
+You can now use the typography IDs defined in the namespace:
+
+```clj
+[:> heading* {:typography t/title-large} "Welcome to Penpot"]
+```
+
+## Accesibility
+
+There should only be one level 1 heading `
` per page.
+
+Headings are used to navigate the page and must follow the `
` → `
` → `
` → `
` → `
` → `
` hierarchy.
+For example, do not skip levels in the `
` → `
` hierarchy if there is no `
` in between.
+
+We should not choose the heading level by its visual aspect.
diff --git a/frontend/src/app/main/ui/ds/foundations/heading.scss b/frontend/src/app/main/ui/ds/foundations/heading.scss
new file mode 100644
index 000000000..1cd69b7bc
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/foundations/heading.scss
@@ -0,0 +1,50 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+@use "../typography.scss" as t;
+
+.display-typography {
+ @include t.use-typography("display");
+}
+
+.title-large-typography {
+ @include t.use-typography("title-large");
+}
+
+.title-medium-typography {
+ @include t.use-typography("title-medium");
+}
+
+.title-small-typography {
+ @include t.use-typography("title-small");
+}
+
+.headline-large-typography {
+ @include t.use-typography("headline-large");
+}
+
+.headline-medium-typography {
+ @include t.use-typography("headline-medium");
+}
+
+.headline-small-typography {
+ @include t.use-typography("headline-small");
+}
+
+.body-large-typography {
+ @include t.use-typography("body-large");
+}
+
+.body-medium-typography {
+ @include t.use-typography("body-medium");
+}
+
+.body-small-typography {
+ @include t.use-typography("body-small");
+}
+
+.code-font-typography {
+ @include t.use-typography("code-font");
+}
diff --git a/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx b/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx
new file mode 100644
index 000000000..ac017b79f
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx
@@ -0,0 +1,54 @@
+import * as React from "react";
+import Components from "@target/components";
+
+const { Heading } = Components;
+const { StoryWrapper, StoryGridRow } = Components.storybook;
+
+export default {
+ title: "Foundations/Heading",
+ component: Components.Heading,
+};
+
+export const Levels = {
+ render: () => (
+
+
+
+ h1 / display
+
+
+
+
+ h2 / display
+
+
+
+
+ h3 / display
+
+
+
+ ),
+};
+
+export const HeadingTypography = {
+ render: () => (
+
+
+
+ h1 / title-large
+
+
+
+
+ h1 / title-medium
+
+
+
+
+ h1 / code-font
+
+
+
+ ),
+};
diff --git a/frontend/src/app/main/ui/ds/foundations/icon.scss b/frontend/src/app/main/ui/ds/foundations/icon.scss
index f1113c410..7430a0c31 100644
--- a/frontend/src/app/main/ui/ds/foundations/icon.scss
+++ b/frontend/src/app/main/ui/ds/foundations/icon.scss
@@ -1,3 +1,9 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
.icon {
fill: none;
stroke: currentColor;
diff --git a/frontend/src/app/main/ui/ds/foundations/text.cljs b/frontend/src/app/main/ui/ds/foundations/text.cljs
new file mode 100644
index 000000000..3b74ba853
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/foundations/text.cljs
@@ -0,0 +1,37 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.ds.foundations.text
+ (:require-macros
+ [app.common.data.macros :as dm]
+ [app.main.style :as stl])
+ (:require
+ [app.main.ui.ds.foundations.typography :refer [typography-list]]
+ [rumext.v2 :as mf]))
+
+(defn- valid-typography? [value]
+ (contains? typography-list value))
+
+(mf/defc text*
+ {::mf/props :obj}
+ [{:keys [tag typography children] :rest props}]
+
+ (assert (valid-typography? (dm/str typography))
+ (dm/str typography " is an unknown typography"))
+
+ (let [props (mf/spread-props props {:class (stl/css-case :display-typography (= typography "display")
+ :title-large-typography (= typography "title-large")
+ :title-medium-typography (= typography "title-medium")
+ :title-small-typography (= typography "title-small")
+ :headline-large-typography (= typography "headline-large")
+ :headline-medium-typography (= typography "headline-medium")
+ :headline-small-typography (= typography "headline-small")
+ :body-large-typography (= typography "body-large")
+ :body-medium-typography (= typography "body-medium")
+ :body-small-typography (= typography "body-small")
+ :code-font-typography (= typography "code-font"))})]
+ [:> tag props
+ children]))
diff --git a/frontend/src/app/main/ui/ds/foundations/typography.cljs b/frontend/src/app/main/ui/ds/foundations/typography.cljs
new file mode 100644
index 000000000..1a211b110
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/foundations/typography.cljs
@@ -0,0 +1,32 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.ds.foundations.typography)
+
+(def ^:typography-id display "display")
+(def ^:typography-id title-large "title-large")
+(def ^:typography-id title-medium "title-medium")
+(def ^:typography-id title-small "title-small")
+(def ^:typography-id headline-large "headline-large")
+(def ^:typography-id headline-medium "headline-medium")
+(def ^:typography-id headline-small "headline-small")
+(def ^:typography-id body-large "body-large")
+(def ^:typography-id body-medium "body-medium")
+(def ^:typography-id body-small "body-small")
+(def ^:typography-id code-font "code-font")
+
+
+(def typography-list #{display
+ title-large
+ title-medium
+ title-small
+ headline-large
+ headline-medium
+ headline-small
+ body-large
+ body-medium
+ body-small
+ code-font})
\ No newline at end of file
diff --git a/frontend/src/app/main/ui/ds/foundations/typography.mdx b/frontend/src/app/main/ui/ds/foundations/typography.mdx
new file mode 100644
index 000000000..e36d29271
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/foundations/typography.mdx
@@ -0,0 +1,153 @@
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as TypographyStories from "./typography.stories";
+import Components from "@target/components";
+
+
+
+# Typography
+
+We currently work with 3 scales depending on whether the typography
+is applied in the workspace, in the dashboard and access areas
+and in the communication modalities.
+
+This situation is something to be corrected in future improvements.
+
+## Usage
+
+### Standard text colours
+
+Typographic colours are used in text elements such as headers
+and body and in the various components that make up the tool...
+
+The colours used in typography are the Foreground colours such
+`--color-foreground-primary` or `--color-foreground-secondary`
+but different colours can be applied in specific component
+applications with their own styles, such as buttons.
+
+As far as possible and as long as accessibility is not affected,
+we will use colour in typography as a way of hierarchising
+the content displayed using tone, built in luminance changes and
+size as differentiating elements between main and secondary text.
+
+### Status text colous
+
+Another possible application of colour is semantic, when we use text to convey some system state.
+
+Use the tokens:
+
+`--color-accent-success` - Use as text colour to indicate success.
+
+`--color-accent-warning` - Use as text colour to indicate a warning or caution.
+
+`--color-accent-error` - Use as text colour to indicate an error.
+
+
+## Accesibility
+
+Typefaces should be sized for legibility and accessibility.
+The minimum size for texts in Penpot will be 14px except
+for exceptions based on the size of the components.
+
+## Title
+
+### Display `display`
+
+Hero style text for transitional pages (Login). If too large use large title in narrow windows.
+
+
+
+### Title large `title-large`
+
+Page headers for main pages (dashboard, Profiles...). If too big use title
+(medium) in narrow windows.
+
+
+
+### Title medium `title-medium`
+
+Default page title. Equivalent line height of 32px matches the height
+of buttons and other medium controls. Ideal for page header layout.
+
+
+
+### Title small `title-small`
+
+Uses the same size as body (large).
+
+
+
+## Headline
+
+Page sections/subtitles, or names of less important objects in
+page titles (automated action titles, for example). Same line height as title (medium).
+
+### Headline large `headline-large`
+
+
+
+### Headline medium `headline-medium`
+
+
+
+
+### Headline small `headline-small`
+
+
+
+## Body
+
+### Body large `body-large`
+
+Generic content.
+
+
+
+### Body medium `body-medium`
+
+Default UI font. Most commonly used for body text.
+
+
+
+
+### Body small `body-small`
+
+Small compact font with a line height of less than 16px.
+Use for single line scenarios, as the small size does not meet accessibility requirements.
+
+
+
+## Code font `code-font`
+
+Default style for rendering code blocks.
+
+
+
+## Fonts
+
+We are using 3 fonts
+
+- The default font family is `Work Sans`. It was chosen for its efficiency and legibility.
+- In case of having the interface in Farsi or Arabic this font will be replaced by `Vazirmatn`.
+- For code blocks we are useng `Roboto Mono`.
diff --git a/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx
new file mode 100644
index 000000000..761a7076a
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx
@@ -0,0 +1,135 @@
+import * as React from "react";
+import Components from "@target/components";
+
+const { Heading } = Components;
+const { StoryWrapper, StoryHeader, StoryGridRow } = Components.storybook;
+
+const typographyList = {
+ display: {
+ name: "Display",
+ id: "display",
+ size: "36px",
+ weight: "400",
+ line: "1.4",
+ uppercase: false,
+ font: "Work Sans",
+ },
+ titleLarge: {
+ name: "Title large",
+ id: "title-large",
+ size: "24px",
+ weight: "400",
+ line: "1.4",
+ uppercase: false,
+ font: "Work Sans",
+ },
+ titleMedium: {
+ name: "Title medium",
+ id: "title-medium",
+ size: "20px",
+ weight: "400",
+ line: "1.4",
+ uppercase: false,
+ font: "Work Sans",
+ },
+ titleSmall: {
+ name: "Title small",
+ id: "title-small",
+ size: "14px",
+ weight: "400",
+ line: "1.2",
+ uppercase: false,
+ font: "Work Sans",
+ },
+ headlineLarge: {
+ name: "Headline large",
+ id: "headline-large",
+ size: "18px",
+ weight: "400",
+ line: "1.4",
+ uppercase: true,
+ font: "Work Sans",
+ },
+ headlineMedium: {
+ name: "Headline medium",
+ id: "headline-medium",
+ size: "16px",
+ weight: "400",
+ line: "1.4",
+ uppercase: true,
+ font: "Work Sans",
+ },
+ headlineSmall: {
+ name: "Headline small",
+ id: "headline-small",
+ size: "12px",
+ weight: "500",
+ line: "1.2",
+ uppercase: true,
+ font: "Work Sans",
+ },
+ bodyLarge: {
+ name: "Body large",
+ id: "body-large",
+ size: "16px",
+ weight: "400",
+ line: "1.4",
+ uppercase: false,
+ font: "Work Sans",
+ },
+ bodyMedium: {
+ name: "Body medium",
+ id: "body-medium",
+ size: "14px",
+ weight: "400",
+ line: "1.3",
+ uppercase: false,
+ font: "Work Sans",
+ },
+ bodySmall: {
+ name: "Body small",
+ id: "body-small",
+ size: "12px",
+ weight: "400",
+ line: "1.3",
+ uppercase: false,
+ font: "Work Sans",
+ },
+ codeFont: {
+ name: "Code font",
+ id: "code-font",
+ size: "12px",
+ weight: "400",
+ line: "1.2",
+ uppercase: false,
+ font: "Roboto Mono",
+ },
+};
+
+export default {
+ title: "Foundations/Typography",
+ component: Components.StoryHeader,
+};
+
+export const AllTypography = {
+ render: () => (
+
+
+