fix: links to current brand guide

City-of-Helsinki · Nov 19, 2024 · 6f1b156 · 6f1b156
1 parent a5dca85
commit 6f1b156
Show file tree

Hide file tree

Showing 11 changed files with 16 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -150,6 +150,7 @@ Changes that are not related to specific components
 #### Fixed
 
 - [Component] What bugs/typos are fixed?
+- Links to old brand guide have been corrected with the new ones
 
 ### Figma
 

diff --git a/site/src/docs/about/resources.mdx b/site/src/docs/about/resources.mdx
@@ -13,11 +13,11 @@ import InternalLink from '../../components/InternalLink';
 
 ## Downloads
 - <ExternalLink href="https://github.com/City-of-Helsinki/helsinki-design-system/releases">Design kit (Sketch libraries)</ExternalLink>
-- <ExternalLink href="https://brand.hel.fi/en/logo/">Helsinki logos</ExternalLink>
+- <ExternalLink href="https://www.hel.fi/en/decision-making/information-on-helsinki/design-and-digitalisation/helsinki-brand-and-visual-identity/visual-identity-guidelines/download-elements#helsinki-framed-logos--helsinki-logos-">Helsinki logos</ExternalLink>
 - Helsinki Grotesk font, see <InternalLink href="/foundation/design-tokens/typography">Typography.</InternalLink>
 
 ## Links & guidelines
-- <ExternalLink href="https://brand.hel.fi/en/">Helsinki Visual Identity guidelines</ExternalLink>
+- <ExternalLink href="https://www.hel.fi/en/decision-making/information-on-helsinki/design-and-digitalisation/helsinki-brand-and-visual-identity/visual-identity-guidelines">Helsinki Visual Identity guidelines</ExternalLink>
 - <ExternalLink href="https://www.hel.fi/static/liitteet/kanslia/TPR/opas_saavutettavaan_sisaltoon_EN.pdf">Helsinki content accessibility guidelines</ExternalLink>
 - <ExternalLink href="https://saavutettavuusmalli.hel.fi"> Helsinki Accessibility Model (in Finnish mostly) </ExternalLink>
 - <ExternalLink href="https://pelikirja.hel.fi"> Helsinki Digital Service Playbook (Pelikirja) (in Finnish) </ExternalLink>

diff --git a/site/src/docs/components/koros/index.mdx b/site/src/docs/components/koros/index.mdx
@@ -36,7 +36,7 @@ export default ({ children, pageContext }) => <TabsLayout pageContext={pageConte
 #### Default
 
 There are six Koro styles. An added visual interest is brought to the identity by means of the Koros. Using Koros adds high visual impact and makes the user interface recognisable as part of Helsinki city services.
-You can read more about using Koros in <ExternalLink href="https://brand.hel.fi/en/wave-motifs/">Helsinki Visual Identity Guidelines - Wave motifs</ExternalLink>.
+You can read more about using Koros in <ExternalLink href="https://www.hel.fi/en/decision-making/information-on-helsinki/design-and-digitalisation/helsinki-brand-and-visual-identity/visual-identity-guidelines/use-basic-elements#wave-motifs">Helsinki Visual Identity Guidelines - Wave motifs</ExternalLink>.
 
 <PlaygroundPreview>
   <div role="img" aria-label="Wave motif, shape examples">

diff --git a/site/src/docs/foundation/design-tokens/colour/index.mdx b/site/src/docs/foundation/design-tokens/colour/index.mdx
@@ -16,7 +16,7 @@ export default ({ children, pageContext }) => <TabsLayout pageContext={pageConte
 
 Colour can be used for branding, providing visual hierarchy and giving visual cues for action.
 
-The Helsinki Design system colour tokens are based on the City of Helsinki brand colour palette. More information on using and combining the brand colours in the <ExternalLink href="https://brand.hel.fi/en/colours/">City of Helsinki Visual Identity Guidelines - Colours</ExternalLink>.
+The Helsinki Design system colour tokens are based on the City of Helsinki brand colour palette. More information on using and combining the brand colours in the <ExternalLink href="https://www.hel.fi/en/decision-making/information-on-helsinki/design-and-digitalisation/helsinki-brand-and-visual-identity/visual-identity-guidelines/use-basic-elements#colours">City of Helsinki Visual Identity Guidelines - Colours</ExternalLink>.
 
 Also see visual "Do and Don't" example images in the <ExternalLink href="https://share.goabstract.com/30c40134-681b-4f96-9dfc-ee6d32c2f1eb">Colour usage examples - Abstract collection</ExternalLink>. These images will help you understand where brand colours and their variants can be used.
 
@@ -47,7 +47,7 @@ Colours are defined as <ExternalLink href="https://developer.mozilla.org/en-US/d
 
 **When customising colours always check that:**
 
-1. the colour combination follows the <ExternalLink href="https://brand.hel.fi/en/colours/#safe-color-combinations">City of Helsinki Visual Identity Guidelines - Safe color combinations</ExternalLink>
+1. the colour combination follows the <ExternalLink href="https://www.hel.fi/en/decision-making/information-on-helsinki/design-and-digitalisation/helsinki-brand-and-visual-identity/visual-identity-guidelines/use-basic-elements#good-colour-combinations-for-digital-applications">City of Helsinki Visual Identity Guidelines - Safe color combinations</ExternalLink>
 2. the colour contrast is compliant with <ExternalLink href="https://www.w3.org/TR/WCAG21/#contrast-minimum">WCAG 2.1 Standard at AA Level contrast ratios</ExternalLink>. Note that font size affects the contrast criteria of text elements. You can find tools for checking contrast accessibility in the <InternalLink size="M" href="/about/resources"> Resources page</InternalLink>
 
 ### HDS colours

diff --git a/site/src/docs/foundation/guidelines/inclusivity.mdx b/site/src/docs/foundation/guidelines/inclusivity.mdx
@@ -62,7 +62,7 @@ If you are using photographs, make sure you intentionally diversify your images.
 <p>
   Using abstract images is another way of improving the inclusiveness of your images. Instead of using realistic and
   detailed photographs, your project can use more conceptual illustrations.
-  <ExternalLink href="https://brand.hel.fi/kuvitusohjeisto/"> The Helsinki Visual identity guideline</ExternalLink> has a
+  <ExternalLink href="https://www.hel.fi/en/decision-making/information-on-helsinki/design-and-digitalisation/helsinki-brand-and-visual-identity/visual-identity-guidelines/visual-storytelling"> The Helsinki Visual identity guideline</ExternalLink> has a
   wide array of abstract image materials to be used in your project.
 </p>
 

diff --git a/site/src/docs/foundation/guidelines/photography.mdx b/site/src/docs/foundation/guidelines/photography.mdx
@@ -21,4 +21,4 @@ The City of Helsinki’s pictorial narrative is built around four themes:
 
 In user interfaces, photographs can be used for example in hero elements, text/photo modules or card components.
 
-See the <ExternalLink href="https://brand.hel.fi/en/photograph-guidelines/">Visual Identity Guidelines - Photograph guidelines</ExternalLink> for more information on using photographs.
+See the <ExternalLink href="https://www.hel.fi/en/decision-making/information-on-helsinki/design-and-digitalisation/helsinki-brand-and-visual-identity/visual-identity-guidelines/visual-storytelling#photographs">Visual Identity Guidelines - Photograph guidelines</ExternalLink> for more information on using photographs.
diff --git a/site/src/docs/foundation/index.mdx b/site/src/docs/foundation/index.mdx
@@ -11,7 +11,7 @@ import Image from '../../components/Image';
 
 <LeadParagraph>Foundation is a guide for applying the visual guidelines to digital experiences.</LeadParagraph>
 
-Helsinki Design System foundations describe how the <ExternalLink href="https://brand.hel.fi/en/">Helsinki Visual Identity</ExternalLink> is applied to digital world. Foundation varies from detailed practical guides to broader principles that needs to be addressed when designing and developing a service.
+Helsinki Design System foundations describe how the <ExternalLink href="https://www.hel.fi/en/decision-making/information-on-helsinki/design-and-digitalisation/helsinki-brand-and-visual-identity/visual-identity-guidelines">Helsinki Visual Identity</ExternalLink> is applied to digital world. Foundation varies from detailed practical guides to broader principles that needs to be addressed when designing and developing a service.
 
 **Design tokens** are the smallest building blocks of the design system. They are used across all Helsinki products to ensure matching visual identity.
 

diff --git a/site/src/docs/foundation/visual-assets/favicon.mdx b/site/src/docs/foundation/visual-assets/favicon.mdx
@@ -11,7 +11,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 
 <LeadParagraph>The City of Helsinki favicon is used in digital services to identify the site window, tab or web app.</LeadParagraph>
 
-The favicon consists of the letter H framed by the shape derived from the city crest. The favicon should only be used for the site window, tab or web app. For general use the <ExternalLink href="https://brand.hel.fi/en/logo">Logo</ExternalLink> should be used instead.
+The favicon consists of the letter H framed by the shape derived from the city crest. The favicon should only be used for the site window, tab or web app. For general use the <ExternalLink href="https://www.hel.fi/en/decision-making/information-on-helsinki/design-and-digitalisation/helsinki-brand-and-visual-identity/visual-identity-guidelines/download-elements#helsinki-framed-logos--helsinki-logos-">Logo</ExternalLink> should be used instead.
 
 **Do not attempt to recreate the favicon!**
 Always use the original files found in the Favicon kit included in HDS releases.
@@ -29,7 +29,7 @@ Official City of Helsinki services must always show the City of Helsinki favicon
 ### Contrast
 The Helsinki framed favicon is primarily used in with a transparent background. On modern browsers the icon changes color automatically according to web browser theme.
 - Check that the colour contrast of the favicon and its background is compliant with <ExternalLink href="https://www.w3.org/TR/WCAG21/#contrast-minimum">AA Level contrast ratios</ExternalLink>.
-- For more information, see the <ExternalLink href="https://brand.hel.fi/en/colours/">Visual Identity Guidelines - Colours</ExternalLink>.
+- For more information, see the <ExternalLink href="https://www.hel.fi/en/decision-making/information-on-helsinki/design-and-digitalisation/helsinki-brand-and-visual-identity/visual-identity-guidelines/use-basic-elements#colours">Visual Identity Guidelines - Colours</ExternalLink>.
 
 ## Variants
 

diff --git a/site/src/docs/foundation/visual-assets/icons/index.mdx b/site/src/docs/foundation/visual-assets/icons/index.mdx
@@ -31,7 +31,7 @@ The HDS icon library is categorised into four types of icons designed to be used
 2. **SoMe icons** are logos of Helsinki city social media channels and digital services as ways of logging in.
 
 ### Illustrative icons and pictograms
-The icon set of HDS only features user interface and social media icons. If you need illustrative icons or pictograms, please refer to the <ExternalLink href="https://brand.hel.fi/kuvitusohjeisto/">Helsinki Visual Identity Guidelines - Imagery guidelines (in Finnish)</ExternalLink>.
+The icon set of HDS only features user interface and social media icons. If you need illustrative icons or pictograms, please refer to the <ExternalLink href="https://www.hel.fi/en/decision-making/information-on-helsinki/design-and-digitalisation/helsinki-brand-and-visual-identity/visual-identity-guidelines/visual-storytelling">Helsinki Visual Identity Guidelines - Visual storytelling</ExternalLink>.
 
 ### Size
 The default size of the HDS icons is 24×24px.

diff --git a/site/src/docs/foundation/visual-assets/logo.mdx b/site/src/docs/foundation/visual-assets/logo.mdx
@@ -13,7 +13,7 @@ import InternalLink from '../../../components/InternalLink';
 
 <LeadParagraph>The City of Helsinki logo is used in digital services for identifying the site as an official City of Helsinki service.</LeadParagraph>
 
-The City of Helsinki logo consists of the text *Helsinki* framed by the shape derived from the city crest. The logo must be used in accordance with the <ExternalLink href="https://brand.hel.fi/en/logo">Visual Identity Guidelines - Logo</ExternalLink>. See the <InternalLink href="/components/logo">Logo component documentation</InternalLink> for instructions on using Logo in implementation.
+The City of Helsinki logo consists of the text *Helsinki* framed by the shape derived from the city crest. The logo must be used in accordance with the <ExternalLink href="https://www.hel.fi/en/decision-making/information-on-helsinki/design-and-digitalisation/helsinki-brand-and-visual-identity/visual-identity-guidelines/download-elements#helsinki-framed-logos--helsinki-logos-">Visual Identity Guidelines - Logo</ExternalLink>. See the <InternalLink href="/components/logo">Logo component documentation</InternalLink> for instructions on using Logo in implementation.
 
 **Please do not attempt to recreate the logo!** Always use the appropriate original file. The City of Helsinki logo is a registered trademark.
 
@@ -36,7 +36,7 @@ Size
 [Table 1:Available logo sizes]|
 
 ### Download
-<p>You can <ExternalLink href="https://brand.hel.fi/wp-content/uploads/2018/11/helsinki_tunnus_paketti.zip">download the logo package</ExternalLink> provided by the Visual guidelines. The logos are also available in design library for Sketch and as a logo component.</p>
+<p>You can <ExternalLink href="https://www.hel.fi/en/decision-making/information-on-helsinki/design-and-digitalisation/helsinki-brand-and-visual-identity/visual-identity-guidelines/download-elements#helsinki-framed-logos--helsinki-logos-">download the logo package</ExternalLink> provided by the Visual guidelines. The logos are also available in design library for Sketch and as a logo component.</p>
 
 ### Language versions
 There are three language versions available in HDS (you may download the logo files by clicking their images below).
@@ -51,4 +51,4 @@ Language version
 ### Colour
 The Helsinki framed logo is primarily used in black or white, depending on the background, but using it in other brand colours is also allowed.
 - Check that the colour contrast of the logo and its background is compliant with <ExternalLink href="https://www.w3.org/TR/WCAG21/#contrast-minimum">AA Level contrast ratios</ExternalLink>.
-- For more information, see the <ExternalLink href="https://brand.hel.fi/en/colours/">Visual Identity Guidelines - Colours</ExternalLink>.
+- For more information, see the <ExternalLink href="https://www.hel.fi/en/decision-making/information-on-helsinki/design-and-digitalisation/helsinki-brand-and-visual-identity/visual-identity-guidelines/use-basic-elements#colours">Visual Identity Guidelines - Colours</ExternalLink>.
diff --git a/site/src/docs/getting-started/designer.mdx b/site/src/docs/getting-started/designer.mdx
@@ -22,7 +22,7 @@ Always keep these core principles in mind when making design decisions:
 - **Accessibility baked-in:** Accessibility is part of the process from start to end. It is designed to be accessible to all, regardless of ability or situation.
 
 ## Getting started
-1. Explore the City of Helsinki <ExternalLink href="https://brand.hel.fi/">Visual Identity Guidelines</ExternalLink> to learn the design principles of the brand.
+1. Explore the City of Helsinki <ExternalLink href="https://www.hel.fi/en/decision-making/information-on-helsinki/design-and-digitalisation/helsinki-brand-and-visual-identity/visual-identity-guidelines">Visual Identity Guidelines</ExternalLink> to learn the design principles of the brand.
 2. Take a look at the <InternalLink href="/components">Components documentation</InternalLink> to see what is available and how you can incorporate those into your designs.
 3. The design assets are available either via direct design kit download or via the City of Helsinki Figma. To access HDS libraries, you will need to use Figma. See more on downloading and setting up the libraries below.
 4. If you have an idea for improvements or a component that could be a useful addition to the Design System, see the <InternalLink href="/getting-started/contributing/how-to-contribute">Contributing</InternalLink> page for more information.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -21,4 +21,4 @@ The City of Helsinki’s pictorial narrative is built around four themes:

		In user interfaces, photographs can be used for example in hero elements, text/photo modules or card components.

		See the <ExternalLink href="https://brand.hel.fi/en/photograph-guidelines/">Visual Identity Guidelines - Photograph guidelines</ExternalLink> for more information on using photographs.
		See the <ExternalLink href="https://www.hel.fi/en/decision-making/information-on-helsinki/design-and-digitalisation/helsinki-brand-and-visual-identity/visual-identity-guidelines/visual-storytelling#photographs">Visual Identity Guidelines - Photograph guidelines</ExternalLink> for more information on using photographs.