Sufio uses style variables to store values such as colors, fonts, and sizes, allowing you to reuse these values throughout your document. Variables make it easy to update your template, as changing a variable’s value automatically updates all instances where that variable is used.
Style variables in Sufio are defined using the $ symbol followed by the variable name.
The color of the document background. The default background color for all templates is white (#ffffff).
The text direction of the document language.
For most languages, this value is ltr (left-to-right). Languages such as Arabic and Hebrew use the value rtl (right-to-left).
The name of the primary font.
You can change the font on the Design → Typoghraphy page in your Sufio account.
The name of the secondary font, used for document headings—if supported by the selected document template.
You can change the font on the Design → Typoghraphy page in your Sufio account.
The text size zoom applied to all text in the document.
In most templates, this style is applied to the .document root element, ensuring that all text elements in the document are resized proportionally.
You can adjust the Font Size setting on the Design → Typography page in your Sufio account. The default setting of 100% corresponds to a $font-zoom value of 1.0.