Skip to content

Add concorde design tokens and html overview documentation pages #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DeolaJ merged 1 commit into from
Apr 10, 2025
Merged

Add concorde design tokens and html overview documentation pages #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 6 additions & 14 deletions docs/journeys/custom-css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Custom CSS gives you the power to:

**Note:** This feature is part of our new Concorde design migration. Custom CSS applies only to journeys, and not the End Customer Portal. We’re continuously improving support for this feature, so please refer to the latest documentation for updates – release notes will include updates.

**Pricing:** This feature is only available from the Professional pricing tier.
**Pricing:** This feature is only available from the Professional pricing plan.

## Styling Structure

Expand All @@ -33,13 +33,13 @@ The new journey design (Concorde Journey) consists of the following building blo

Specific HTML Classes and IDs have been added and prefixed with `Concorde` for consistency to aid with targeting HTML elements properly through custom CSS.

The HTML structure of the journey based on these building blocks will be maintained using this guide: _Custom CSS: Maintained HTML Classes & HTML ID format_.
The HTML structure of the journey based on these building blocks will be maintained using this guide: [Concorde HTML Layout Overview](/docs/ui-design/concorde-html-structure).

### Concorde Design Tokens

Since custom CSS is scoped to the new design, we have created a list of design tokens (CSS variables) that can be modified to create the desired effect.

The design tokens that are supported for the journey building blocks (mentioned above) can be found in this guide: _Concorde Design tokens: CSS variables_. This guide will be kept up to date to account for changes that could improve the usage of custom CSS.
The design tokens that are supported for the journey building blocks (mentioned above) can be found in this guide: [Concorde Design tokens](/docs/ui-design/concorde-design-tokens). This guide will be kept up to date to account for changes that could improve the usage of custom CSS.

## How Custom CSS Works

Expand Down Expand Up @@ -74,8 +74,8 @@ When you add custom CSS, the system generates a single stylesheet that’s appli

As seen above, there are some things to note:

- The use of **Concorde design tokens** is mentioned above. To view the full list: _Concorde Design tokens: CSS variables_.
- The use of maintained **HTML classes and IDs** is also mentioned above. To view the full list: _Custom CSS: Maintained HTML Classes & HTML ID format_.
- The use of **Concorde design tokens** is mentioned above. To view the full list: [Concorde Design tokens](/docs/ui-design/concorde-design-tokens).
- The use of maintained **HTML classes and IDs** is also mentioned above. To view the full list: [Concorde HTML Layout Overview](/docs/ui-design/concorde-html-structure).
- The final CSS is inserted into your journey’s `<head>` as a `<style>` tag with a unique ID (e.g., `custom-css-journey123`).

## Unsupported Rules
Expand Down Expand Up @@ -104,8 +104,6 @@ In the Design Builder:
3. **Preview and Save:** As you type, a live preview shows how the styles affect your journeys. Once satisfied, save your changes.
4. **Test your live journey:** After saving your changes, you can check if your journey looks as expected by opening it in a new tab.

---

## Guidelines and Best Practices

### Use Supported Classes
Expand All @@ -116,7 +114,7 @@ _Custom CSS: Maintained HTML Classes & HTML ID format_
### Design Tokens (CSS Variables)

Leverage our design tokens (CSS variables) to keep your custom styles consistent with your global theme. (e.g., `var(--concorde-primary-color)`)
_Concorde Design tokens: CSS variables_
[Concorde Design tokens](/docs/ui-design/concorde-design-tokens)

### Avoid Overriding Core Layouts

Expand All @@ -130,8 +128,6 @@ This helps maintain performance and manageability.

Use the live preview feature to ensure that your CSS does not conflict with the core design. Errors will be highlighted so you can correct them before saving.

---

## FAQs

**Q: Will my custom CSS changes be maintained with future updates?**
Expand All @@ -146,16 +142,12 @@ Use the live preview feature to ensure that your CSS does not conflict with the
**Q: Can I get help if my CSS isn’t working as expected?**
**A:** Yes! Our support documentation is available to help you troubleshoot and optimize your custom CSS.

---

## Conclusion

Custom CSS in Project Concorde provides a powerful way to create unique, branded experiences. With the ability to apply global, journey, step, and block-level styles, you have the flexibility to fully control your design without compromising the integrity of the base system.

For further questions or feedback, please reach out to our support team or visit our community forum.

---

## Examples

### Increase Text Sizes
Expand Down
Loading
Loading