Cosmoe UI
docs
Customization and design
Using design systems
Learn how to customize the design systems.
Can I customize the design systems?
You can customize the color and typography styles from the design systems.
Customizing color styles
While you can edit the color and text styles easily, you need to be careful with color styles because they are part of a color palette and changing one will make it break out of that particular palette. If you want a new color, you can do so with the Tailwind CSS Color Generator from UI Colors. The same was used to create all the colors currently in the kit.
Customizing text styles
You can change a text style from the Assets panel under Text styles. Click on the style and you will be taken to the text property panel. You can then set whatever font and font settings you want.
You should also set breakpoint sizes for your text styles which you will see in the same text property panel towards the bottom under Breakpoints. Click on 'Add breakpoints' and set the font sizes for each breakpoints (a good practice is going 8px down for each breakpoint). You just need to do this once for each style.
Using shadows
You will find two types of Shadows in the kit: Outer and Inner shadows.
Both of these are self explanatory. Outer shadows are depth effects that are added to the outside of an element. Inner shadows is the opposite.
In the kit you will 9 variations of shadows from low to high strength.
For outer shadows, click on the shadow container, then on the right in the properties panel, under Styles you will find Shadows at the bottom. Right click on the Shadows text, then select Copy all. You can then paste it on any framer or stack you want. If you don't see the Shadows property visible on your frame or stack, click the + icon on the top right of the Styles properties. You will see Shadows at the bottom, just select it.
You can do the same for the inner shadows, just copy the shadows from the outer container. Also add an outer shadow to the inner container for a more realistic look.
Using blurs
There are four blur styles available in the kit.
You can copy the blur effect just like you do for Shadows and paste it in your project. To add the blur property, click the + icon on the top right of the Styles properties and you will find Blur in the Filters tab.
It is advisable to keep the blur amount under 10 in Framer for best performance.