Tali.ai Design system

Style guidelines

Canonical tokens, typography, buttons, forms, and layout patterns for Tali product surfaces. Use class names shown here for new work.

Last updated: May 20, 2026

1.0 Brand

Logo lockup on light-beige and plum brand surfaces. Alt text should stay meaningful wherever the asset is reused.

Light surface (light-beige token)

Plum surface (plum token)

2.0 Color palette

Existing Base collection color variables. Swatches use sg-token-bg-* helpers plus sg-swatch chrome only on this page.

3.0 Typography

Headings use font-display and Design System type tokens. Weights follow the editorial scale used on marketing and case study pages.

4.0 Buttons

Use native Button elements with button-primary button-secondary or button-tertiary for actions in layouts and forms.
- Design Rule:
1. Apply all|300ms|ease transition effects on hover states.
2. For primary buttons, slightly brighten the background colour on hover. For secondary buttons, use the adjacent primary button’s default background colour as the hover fill.
3. For secondary buttons, the border is omitted, and the "effects > outline > apply negative value on Offset" method is employed. This approach maintains consistent height and size with primary buttons, as Webflow's border placement outside the element would otherwise increase the button dimensions.

5.0 Forms

Native Webflow form primitives with canonical field classes. Submit labels on FormButton may need manual copy in Designer after generation.

6.0 Spacing scale

Design System space tokens drive vertical rhythm padding and component density. Bar width equals the token value.

7.0 Layout primitives

container-large centers content with max width and horizontal padding from Design System space-6.

8.0 Cards

card-large owns surface and fluid width inside its parent. layout-card-narrow reproduces the legacy centered editorial column when needed on the parent.

9.0 Components showcase

Hand-built DS Case Study components use canonical classes only inside their roots so instances stay portable to real pages without sg chrome.

DS Case Study Hero

Mushkiki clinic redesign

Anishnawbe Mushkiki · 2025

DS Case Study Article

Project overview

The clinic network needed a bilingual intake journey that respected low bandwidth environments while staying compliant with regional health data rules.

"Patients can complete intake without paper forms."

A second body block keeps vertical rhythm between quote blocks and supporting metrics further down the page.

DS Case Study CTA

Ready to plan your rollout?

Short supporting line that frames the primary action without duplicating global footer marketing modules.

Talk with us

DS Case Study CTA

It’s not just about getting the notes done.
It’s about being fully present with the patient.

DS Case Study Metrics - 3 Items

95%

Reduction in administrative burden

90%

Reduction in cognitive load

90%

Reporting more present with patients

Stats based on 2025 Canada Health Infoway clinician surveys.

DS Case Study Metrics - 2 Items

95%

Reduction in administrative burden

90%

Reduction in cognitive load

Stats based on 2025 Canada Health Infoway clinician surveys.

DS Case Study Metrics - 1 Item

95%

Reduction in administrative burden

Stats based on 2025 Canada Health Infoway clinician surveys.

10.0 Effects

Radius tokens map to corner radii on surfaces and pills. Shadows use shadow-elevation-1 through shadow-elevation-3 for layered interfaces. Honor prefers-reduced-motion by keeping entrance animations under 200ms and avoiding large parallax shifts on essential flows.

11.0 Breakpoints

Designer breakpoints align with Webflow defaults. Validate layouts at each tier before shipping responsive grids and typography.

12.0 Case Study Rich-Text Style

Modify the Rich Text style below to apply styling to all the case studies. These definitions are independent of the styles above.

13.0 Blog Post Rich-Text Style

Modify the Rich Text style below to apply styling to all the blog posts. These definitions are independent of the styles above.