DOCSEARCHbyAlgolia
Submit Docs

University of St Andrews Design System

website·Indexed 29 days ago

https://st-andrews-design-system-astro.vercel.app/

A collection of web design guidelines and standards for creating university websites. Built with Astro, the system includes core specifications for colors and typography, a library of components such as buttons, and developer documentation for adding components, pages, and customizing core styles.

Tokens
1.4K
Snippets
10
Records
13
Agent score
74%

What's inside University of St Andrews Design System

  2. Overview of the University of Saint Andrews Design System (Standards)

    The University of Saint Andrews 'Standards' is a collection of web design guidelines used for creating university websites. The 'Core' section of the system provides the fundamental design atoms, including approved colors and typography required for university-branded websites.

  3. Add new pages to the St Andrews Design System Astro site

    To create a new page, add an .astro or markdown (.md) file within the appropriate section of the pages directory, following the pattern src/pages/[section]/my-page.md. After creating the file, you must register the page in the navigation configuration file located at src/config.ts to ensure it appears in the left-hand side navigation menu.
    # Example file path
src/pages/documentation/my-new-page.md

# Then update navigation in:
src/config.ts

  4. Add and document components in an Astro design system

    Astro supports the integration of components from multiple frameworks, including React, Vue, and Svelte, making it suitable for design systems. To implement a new component and document it, you can import an existing component library or create custom components and reference them within Markdown files (e.g., .md files in the src/pages directory).
    <!-- Example: Referencing a component in a documentation page like src/pages/en/buttons.md -->
<MainButton>Click Me</MainButton>

  5. Follow usage rules for Buttons

    When implementing buttons in the St Andrews Design System, adhere to these constraints:

    1. Buttons must only be placed within the main body of a page; do not use them in asides.
    2. Buttons must not be placed mid-sentence. They must always appear on their own line, separated from written content.
    3. Use the icon button option specifically for buttons that link to downloadable content.

  6. Add new sections to the documentation sidebar navigation

    To create a new section in the documentation, create a corresponding folder for the content. To make this section visible in the left-side navigation menu, you must add the section and its associated pages to the SIDEBAR configuration array located in src/config.ts.
    export const SIDEBAR = [
    { text: "Core", header: true },
    { text: "Introduction", link: "/core/introduction" },
    // ... other entries
    { text: "Components", header: true },
    { text: "Buttons", link: "/components/buttons" },
    // ... other entries
    { text: "New section", header: true },
    { text: "New component", link: "/new-section/new-component.md" },
];

  8. Use St Andrews Design System additional brand colors

    Additional brand colors are provided for specific use cases, including Green, Purple, and Burgundy, each with corresponding tints and shades.
    {
  "green": {
    "primary": "#00853f",
    "tint-25": "#40a46f",
    "tint-50": "#80c29f",
    "shade-25": "#00642f"
  },
  "purple": {
    "primary": "#7b439a",
    "tint-25": "#9c72b3",
    "tint-50": "#bda1cd",
    "shade-25": "#5c3274"
  },
  "burgundy": {
    "primary": "#c60c46",
    "tint-25": "#d44974",
    "tint-50": "#e386a3",
    "shade-25": "#950935"
  }
}

  10. Apply primary typography styles for text elements

    The St Andrews Design System defines the following primary typography specifications for headings, body text, buttons, and captions to ensure visual consistency across the application.
    /* Primary Typography Specifications */

h1 {
  font-weight: 700;
  font-size: 2.0736em;
}

h2 {
  font-weight: 700;
  font-size: 1.728em;
}

h3 {
  font-weight: 700;
  font-size: 1.44em;
}

h4 {
  font-weight: 700;
  font-size: 1.2em;
}

body {
  font-weight: 400;
  font-size: 13pt;
}

button {
  font-weight: 400;
  font-size: 13pt;
}

caption {
  font-weight: 400;
  font-size: 10pt;
}

  11. Use St Andrews Design System main brand colors

    The main color palette includes primary brand colors (Blue, Light Blue, Red, Orange) and a range of neutral greys. Each primary color includes a 25% tint, 50% tint, and 25% shade for accessibility and UI depth.
    {
  "blue": {
    "primary": "#00539b",
    "tint-25": "#407eb4",
    "tint-50": "#80a9cd",
    "shade-25": "#003e74"
  },
  "light-blue": {
    "primary": "#0071b3",
    "tint-25": "#4095c6",
    "tint-50": "#80b8d9",
    "shade-25": "#005586"
  },
  "red": {
    "primary": "#ea1a13",
    "tint-25": "#ef534e",
    "tint-50": "#f58d89",
    "shade-25": "#b0140e"
  },
  "orange": {
    "primary": "#ffb400",
    "dark-orange": "#bf5909"
  },
  "greys": {
    "dark-grey-1": "#202024",
    "dark-grey-2": "#0f0f11",
    "grey": "#6a6a6b",
    "mid-grey-1": "#949494",
    "mid-grey-2": "#dedede",
    "light-grey-1": "#f0f0f0",
    "light-grey-2": "#fafafa",
    "white": "#ffffff"
  }
}