`inherited.colors` are part of `fastn` design system. If you use custom / hardcoded colors then switching color schemes will not affect your component, and website maintainers using your component will have a great experience.

Not recommended

-- ftd.column:
background.solid: white

-- colms:
$color-value: #b4ccba

-- ftd.text: Campaign Summary
color: #7D8180

Lang:

ftd

Recommended

-- ftd.column:
background.solid: $inherited.colors.background.base

-- colms:
$color-value: $inherited.colors.custom.one

-- ftd.text: Campaign Summary
color: $inherited.colors.text

Lang:

ftd

`role-inheritance`: Prefer using `inherited.types` to give a role

Specific values for `typography` requires additional code for responsive design. Meanwhile,`role-inheritance` allows for flexibility in using different typography, while maintaining consistency across the design system.

Not recommended

-- ftd.type dtype:
size.px: 40
weight: 900
font-family: cursive
line-height.px: 65
letter-spacing.px: 5

-- ftd.type mtype:
size.px: 20
weight: 100
font-family: fantasy
line-height.px: 35
letter-spacing.px: 3

-- ftd.responsive-type rtype:
desktop: $dtype
mobile: $mtype

-- ftd.text: Hello World
role: $rtype

Lang:

ftd

Recommended

-- ftd.text: Hello World
role: $inherited.types.copy-regular

Lang:

ftd

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!

[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!

[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today. We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.