diff --git a/apps/for-everyone-website/README.md b/apps/for-everyone-website/README.md index e507a2146c..0d945b91be 100644 --- a/apps/for-everyone-website/README.md +++ b/apps/for-everyone-website/README.md @@ -1,4 +1,4 @@ -# Origami For Everyone +# Origami A new, in progress Origami website. It will: @@ -8,7 +8,7 @@ A new, in progress Origami website. It will: ## Project Structure -The Origami For Everyone website is [![built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build). The project structure looks like the following: +The Origami website is [![built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build). The project structure looks like the following: ``` . @@ -25,7 +25,7 @@ The Origami For Everyone website is [![built with Starlight](https://astro.badg. └── tsconfig.json ``` -Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name. We use [Starlight's internationalisation features](https://starlight.astro.build/guides/i18n/) to present tailored content dependent on the selected brand. Brand specific content e.g. `src/content/docs/professional` takes precedence over content at `src/content/docs/`. +Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name. We use [Starlight's internationalisation features](https://starlight.astro.build/guides/i18n/) to present tailored content dependent on the selected brand. Brand specific content e.g. `src/content/docs/professional` takes precedence over content at `src/content/docs/`. Images can be added to `src/assets/` and embedded in Markdown with a relative link. diff --git a/apps/for-everyone-website/astro.config.mjs b/apps/for-everyone-website/astro.config.mjs index 1375e9457b..d8ad3b0e5c 100644 --- a/apps/for-everyone-website/astro.config.mjs +++ b/apps/for-everyone-website/astro.config.mjs @@ -12,7 +12,7 @@ export default defineConfig({ integrations: [ react(), starlight({ - title: 'Origami For Everyone', + title: 'Origami Design System', locales: { root: { label: 'core', diff --git a/apps/for-everyone-website/src/content/docs/about/faq.md b/apps/for-everyone-website/src/content/docs/about/faq.md index 5a188148a7..5d8564699c 100644 --- a/apps/for-everyone-website/src/content/docs/about/faq.md +++ b/apps/for-everyone-website/src/content/docs/about/faq.md @@ -5,22 +5,28 @@ description: Frequently asked questions
- What is Origami For Everyone? + What is Origami – o3? - Origami For Everyone reimagines Origami with a renewed focus on: Design guidelines; aligned designer and engineering tooling; and multi-brand support. This includes all new components. Learn more on the about page. + "o3" refers to our new components, built from the ground up with new design guidelines, aligned designer and engineering tooling, and improved multi-brand support.
- What is o2/o3? + What is Origami – o2? - "o2" refers to our legacy components, these are widely used and will be maintained for the foreseeable future. "o3" refers to our new components, built from the ground up with new design guidelines, aligned designer and engineering tooling, and improved multi-brand support. Going forward we are moving away from o2/o3 language in favour of legacy/new Origami. + "o2" refers to our legacy components, these are widely used and will be maintained for the foreseeable future as we gradually move to new "o3" components and patterns. "o2" components lack meaningful design guidelines and design tools. We recommend designers use Storybook to explore what components are available and what variants they support.
- Can I use new guidelines / components / patterns? + Can I use o3 guidelines / components / patterns today? - Absolutely! We'd love you to. Please reach out to the Origami team (#origami-support), so we can support you through early adoption. We expect adoption to pick up more freely in Q2, after we have published Origami's new figma libraries and improved technical documentation for our new components. + Absolutely! We'd love you to. Teams across the FT Group have begun to use "o3" in production. Please reach out to the Origami team (#origami-support), so we can support you through early adoption as we refine "o3" and improve our documentation.
+
+ + What is Origami For Everyone? + + Origami For Everyone referred to our proposal to reimagine Origami with a renewed focus on design guidelines; aligned designer and engineering tooling; and enhanced multi-brand support. As we begin to realise that vision with "o3" components and patterns, we no longer need to refer to Origami For Everyone. +
diff --git a/apps/for-everyone-website/src/content/docs/about/index.md b/apps/for-everyone-website/src/content/docs/about/index.md index 47ae98e218..682d89a3c1 100644 --- a/apps/for-everyone-website/src/content/docs/about/index.md +++ b/apps/for-everyone-website/src/content/docs/about/index.md @@ -13,9 +13,9 @@ Origami is the FT's design system. This includes design guidelines, components, Today, Origami is used to create ft.com, our apps, as well as internal tools, and increasingly other FT Group brands. -## Origami For Everyone +## Origami "o3" -Origami For Everyone reimagines Origami with a renewed focus on: +Origami "o3" delivers a reimagined Origami with a renewed focus on: 1. Design guidelines, to support designers to prototype new products or features consistently, building on tried and tested approaches. 2. Aligned designer and engineering tooling, for improved efficiency and alignment during handover from prototype to build. diff --git a/apps/for-everyone-website/src/content/docs/index.mdx b/apps/for-everyone-website/src/content/docs/index.mdx index 4ace014d50..fc97568638 100644 --- a/apps/for-everyone-website/src/content/docs/index.mdx +++ b/apps/for-everyone-website/src/content/docs/index.mdx @@ -1,13 +1,13 @@ --- -title: Origami For Everyone -description: The new Origami. Origami For Everyone will support the FT to create differentiated products, targeting different audiences, by scaling Origami to support more brands and platforms. +title: Origami Design System +description: The new Origami. Origami will support the FT to create differentiated products, targeting different audiences, by scaling Origami to support more brands and platforms. template: splash hero: - tagline: New Origami components. Rethought from the ground up, with aligned Figma libraries, design guidelines, and brand support powered by design tokens. + tagline: Origami helps us design & build digital products for brands across the FT Group. Explore our new user interface components and patterns. Rethought from the ground up, with aligned Figma libraries, design guidelines, and multi-brand support powered by design tokens. image: file: ../../assets/origami-logo.svg actions: - - text: Get started + - text: Components link: ./components/buttons icon: right-arrow variant: primary @@ -16,22 +16,21 @@ hero: icon: external --- -import { Card, CardGrid } from '@astrojs/starlight/components'; - -## Product Delivery Superpowers +import {Card, CardGrid} from '@astrojs/starlight/components'; - - A fully featured Figma library of all our components, with thorough documentation for patterns and design guidelines. - Mock-up prototypes quickly, saving time to focus on where you can add unique value. - - - Designers ❤️ engineers. New Figma and Origami integrations allow a designer to see a live, interactive component preview instantly. Integrations with Figma's Dev Mode mean a much smoother handover process, with fewer mistakes, and less back-and-fourth. - - - No more Sass, or accidental Doom Scrolling from engineers as they wait for it to compile. Build times for Origami For Everyone are significantly reduced allowing engineers to quickly see the affect of their change and iterate. - - - Origami For Everyone improves support for brand and platform variations. We're working with the Specialist team to introduce a new brand, so we can collaborate together on shared components across groups. + + Unify and document the style and experience across the digital + products of every FT brand, leveraging the web platform to provide an + implementation of brand guidelines. + + Origami is a shared project, built by teams across the FT. The core Origami team and our community of collaborators are here to help if you have questions or feedback: + + + + diff --git a/components/o3-typography/package.json b/components/o3-typography/package.json index 67ab7b3679..67da9b9b43 100644 --- a/components/o3-typography/package.json +++ b/components/o3-typography/package.json @@ -12,7 +12,8 @@ "email": "origami.support@ft.com" }, "license": "MIT", - "type": "module", + "main": "./cjs/index.js", + "module": "./esm/index.js", "files": [ "cjs", "esm", @@ -21,9 +22,6 @@ "package.json", "README.md" ], - "main": "./cjs/index.js", - "module": "./esm/index.js", - "types": "./build/types/index.d.ts", "scripts": { "build": "bash ../../scripts/component/build-o3.bash o3-typography" },