Fonts
Two typefaces: Google Sans for all text and Edu TAS Beginner as a handwritten accent.
Google Sans
Headings, body text, buttons and navigation. Weights: Regular 400, Bold 700.
Edu TAS Beginner
Eyebrows, accent words in headlines and quotes. Weight: SemiBold 600.
Headings
Use the tags h1 to h6 or the matching classes. Wrap a word in a span with text-accent to get the handwritten accent.
class h1 + text-accent (the page title is the only h1 tag)
Heading 1 with an accent
h2 + text-accent
Heading 2 with an accent
h3
Heading 3
h4
Heading 4
h5
Heading 5
h6
Heading 6
Paragraphs
Four text sizes for intros, features, body copy and small print. The eyebrow sits above section headlines.
Paragraph XL. Used for intros below section headings. Occupational therapy helps people take their everyday lives back into their own hands.
Paragraph LG. Used for feature texts and short descriptions in cards and lists.
Body text with a text link, bold text and italic text. Body text is used in rich text, forms and the footer.
Paragraph SM. Used for card texts, captions, form hints and small print such as opening hours or legal notes. It stays readable on every screen size.
Eyebrow above a headline
Lists
Lists use the body text style. They work on their own and inside rich text.
- First unordered list item
- Second unordered list item
- Third unordered list item
- First ordered list item
- Second ordered list item
- Third ordered list item
Quote
The blockquote uses the handwritten accent font with a sage line on the left.
blockquote
The goal is not just a healthy shoulder, but an everyday life that feels easy again.
Buttons
In the Button component, pick a Variant: Primary, Secondary, or a Small or Tiny size for compact spots.
Primary · Secondary
Primary Small · Secondary Small
Secondary Tiny
Rich text
Blog posts use one rich text element. Every style below applies automatically inside rich-text.
rich-text
Rich text heading 2
This rich text block shows every element you can use in blog posts and on service or method pages. Use bold text for key terms, italic text for gentle emphasis and text links to point readers to related articles.
Short paragraphs with clear headings make long articles easy to read on any screen. Each paragraph should focus on one idea.
Rich text heading 3
Use a third-level heading to split a section into smaller topics, for example the steps of a therapy plan.
- Unordered list item for short, equal points
- Keep each item to one line where possible
- Use bold text inside a list item for key words
Rich text heading 4
Ordered lists work well for sequences that readers should follow in order:
- Book your first appointment
- Talk about your goals and everyday life
- Start your personal therapy plan
Rich text quote for highlighted statements, for example a sentence from a patient or a key message of the article.
Rich text heading 5
Technical terms or short instructions can be marked as inline code, for example a form field name.
Rich text heading 6
The smallest heading is useful for notes, sources or small print at the end of an article.
Colors
All colors are variables in the Color collection. Change a variable once and every element that uses it updates.
Plum
#462255 · Headings, buttons, lines
Violet
#7a3f94 · Quotes, accent words
Orchid
#9a4bbb · Accent gradient
Lilac
#ece3f0 · Hover on light buttons, code
Sage
#589069 · Eyebrows, icons, arrows
Mint
#dfeae2 · Hover on arrow buttons
Slate
#4b5465 · Body text
Cream
#f7f4eb · Section background
Ivory
#fbfaf5 · Alternating section background
Sand
#f0ebdc · Tabs, menu hover
White
#ffffff · Cards, navigation
Layout grid
The template uses a 12-column grid. Put columns inside a row and give each column a width per breakpoint: lg for desktop, md for tablet (991px and below), sm for mobile landscape (767px and below) and xs for mobile portrait (479px and below). Smaller breakpoints inherit from larger ones, so you only set what changes.
Four columns on desktop, two on tablet, one on mobile portrait. Resize the window to see it.
with
three lines
Lets a column run past the container to the edge of the browser window while the opposite column stays aligned with the grid. Used for images next to text.
Spacing utilities
Margin utilities follow the same fluid spacing scale as the template. Use u-mt for space above and u-mb for space below an element, or 0 and auto to reset or push.
Also available: u-mt-xs, u-mt-sm, u-mt-md, u-mt-lg, u-mt-0, u-mt-auto, u-mb-0, u-mb-auto, u-pt-0, u-pb-0.
Utility classes
Every utility class of the template appears below at least once, so the Style Manager keeps them when you run Clean up. Each example is labelled with its class.
u-bg-primary
u-bg-black
u-bg-midgray-2
u-bg-darkgray
u-bg-blue
u-text-left: Occupational therapy that fits into everyday life.
u-text-center: Occupational therapy that fits into everyday life.
u-text-right: Occupational therapy that fits into everyday life.
u-text-balance: Occupational therapy that fits into everyday life.
u-text-pretty: Occupational therapy that fits into everyday life.
u-text-primary: Occupational therapy that fits into everyday life.
u-text-black: Occupational therapy that fits into everyday life.
u-text-midgray-1: Occupational therapy that fits into everyday life.
u-text-white
u-text-clamp-1: Long text is cut off after the given number of lines. Occupational therapy supports people of all ages to take part in everyday life again, at home, at school and at work, with exercises that fit their goals.
u-text-clamp-2: Long text is cut off after the given number of lines. Occupational therapy supports people of all ages to take part in everyday life again, at home, at school and at work, with exercises that fit their goals.
u-text-clamp-3: Long text is cut off after the given number of lines. Occupational therapy supports people of all ages to take part in everyday life again, at home, at school and at work, with exercises that fit their goals.
u-border