Stop styling blocks one by one. Design System applies your brand colors, fonts, and button styles globally — every block on every page updates automatically when you change your theme.
Manually styling each block to match your brand is tedious and inconsistent. You change the button color on one block and forget to update three others. A few weeks later, your profile is a patchwork of slightly different shades of blue. Design System solves this by letting you define your brand style once in a central panel. Every block that uses those design tokens — colors, fonts, button shapes — picks them up automatically, so your profile always looks cohesive.
What Design System Does
Design System is the global style configuration for your UniLink profile. It defines the design tokens — colors, typography, button shapes, backgrounds — that blocks across your entire profile inherit by default. When you change a token in Design System, every block that uses that token updates instantly. You never have to edit each block individually to maintain a consistent look.
The system ships with a set of pre-built theme presets — curated combinations of colors, fonts, and styles that work well together. You can apply a preset as a starting point and then customize it, or start from scratch and build your own theme. Both dark and light mode variants are supported, and you can switch between them with a single toggle — useful when your brand has both a dark and a light version, or when you want to offer visitors a mode toggle on your profile.
For advanced users, Design System exposes a custom CSS panel. This lets you override any style that the token system doesn't cover — adjusting animation speeds, adding hover states, fine-tuning spacing — without losing the foundation that Design System provides. Custom CSS lives alongside the token system rather than replacing it, so you get the best of both: manageable global tokens and the full power of CSS when you need it.
How to Get Started With Design System
- Open your profile editor — log in to UniLink, go to your dashboard, and click Edit Profile to open the block editor.
- Find Design System — look for the Design or Theme panel in the editor sidebar, or find a Design System option in the editor's top toolbar. Click it to open the global style panel.
- Browse theme presets — scroll through the preset gallery. Each preset shows a preview of how your profile will look with that color and font combination. Click any preset to apply it instantly — your profile updates live in the preview.
- Pick your primary color — in the Colors section, click Primary Color and use the color picker to enter your brand's hex code or pick visually. This color is used for buttons, links, and accent elements throughout your profile.
- Choose your fonts — in the Typography section, select a heading font and a body font from the available font list. If your plan supports custom fonts, you can upload a font file here.
- Set the background — choose a solid color, a gradient, or an image background for your profile. For image backgrounds, pick from Media Library or upload a new file.
- Save your theme — click Save or Apply. The design settings are now active across all blocks on all your pages.
How to Use Design System
- Customize button styles — in the Buttons section, set the shape (rounded, pill, square), weight (filled, outlined, ghost), and font size. These defaults apply to every button block on your profile; individual blocks can override them if needed.
- Toggle dark or light mode — find the Mode toggle in Design System and switch between Dark and Light. Your color palette shifts to a dark-background or light-background version automatically based on the active preset.
- Save a custom theme as a preset — once you've built a theme you're happy with, look for a Save as Preset or Save Theme option. This lets you restore your exact configuration quickly if you experiment and want to revert.
- Add custom CSS — scroll to the Custom CSS panel at the bottom of Design System. Write standard CSS here. Styles apply on top of the token-based theme. Use browser DevTools to inspect element class names before writing overrides.
- Override per block — if one block needs a different color or font than the global theme, open that block's own settings. Block-level overrides take priority over Design System tokens without affecting any other block.
- Reset to default — if your customization gets out of hand, use Reset to Default to restore the base theme settings. This clears custom colors and fonts but preserves any custom CSS you've written.
- Preview on mobile — after any theme change, switch the editor preview to mobile view to verify that fonts are legible and buttons are large enough to tap at smaller sizes.
Key Settings Explained
| Setting | What it controls | Best practice |
|---|---|---|
| Primary color | The main accent color used for buttons, links, and highlighted elements throughout the profile | Use your exact brand hex code — even a slightly off color looks unprofessional to visitors familiar with your brand |
| Heading font / Body font | The typefaces used for all headings and all body text globally across blocks | Pair a distinctive heading font with a highly readable body font; avoid using the same decorative font for both |
| Button shape | Controls whether buttons appear as squares, rounded rectangles, or full pill shapes globally | Match button shape to your brand personality — pill shapes feel friendly and modern, square shapes feel more corporate or editorial |
| Dark / Light mode | Switches the entire profile between a dark-background and light-background color scheme | Choose based on your audience and content type; dark mode suits music, gaming, and tech; light mode suits e-commerce, wellness, and lifestyle brands |
| Custom CSS | A freeform CSS override layer that applies on top of all token-based styles | Use sparingly for adjustments the token system can't handle; comment your CSS so future-you knows why each rule exists |
How to Get the Most Out of Design System
Consistency is the main value Design System delivers. The temptation when styling a profile is to tweak individual blocks — make this heading slightly bigger, make that button slightly darker. Those micro-decisions accumulate into a visual mess over time. Instead, get Design System right first and resist block-level overrides except for truly exceptional cases. A profile where every block inherits the same font, colors, and button style looks intentional and professional, even if the individual block content is simple.
Typography choice has a disproportionate impact on how your brand reads emotionally. A rounded, friendly font communicates approachability. A sharp, high-contrast serif communicates authority and expertise. A geometric sans-serif communicates modern minimalism. Browse the preset gallery not to find a theme you like, but to understand how fonts change the feel of your content — then choose deliberately based on what emotion you want visitors to associate with your brand.
Custom CSS is powerful but can create fragile overrides that break after UniLink updates its base styles. Keep custom CSS minimal and prefer fixing issues through the token system when possible. Document what each CSS rule does with a comment — this saves significant debugging time six months later when something looks wrong and you've forgotten you added a custom style.
When launching a new campaign or rebranding, use Design System's preset save feature to snapshot your current theme before making changes. Campaign themes — special colors, seasonal fonts, limited-edition button styles — can be applied and reversed quickly if you've saved presets for both the campaign look and your default brand look. This makes seasonal updates a 30-second task rather than a full redesign exercise.
Troubleshooting Common Issues
| Problem | Likely cause | Fix |
|---|---|---|
| Color changes not appearing on the live page | Browser is showing a cached version of the page | Hard-refresh the page (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or open your profile in a private/incognito window to see the updated theme |
| Custom CSS not taking effect | CSS specificity conflict — the global styles have higher specificity than your custom rule | Inspect the element in browser DevTools to see which rule is winning. Increase specificity by adding the parent element selector, or use !important as a last resort |
| Font not displaying correctly on mobile | The selected font is too decorative or thin to be legible at small sizes | Switch to the mobile preview in the editor and check at 375px width. If illegible, increase the base font size in Typography settings or switch to a more readable font for body text |
| Block-level color overrides after theme change | Individual blocks have manual color overrides that take priority over the Design System tokens | Open each affected block's settings and look for a Reset to Theme or Clear Override option to make it inherit from Design System again |
Pros
- Change a color or font once in Design System and every block on every page updates automatically
- Theme presets give a professional starting point in seconds without requiring design skills
- Dark and light mode support lets you match your content to your audience's preferences or your brand identity
- Custom CSS provides an escape hatch for advanced styling without breaking the global token system
Cons
- Block-level overrides can get out of sync with the Design System and require manual cleanup after a theme change
- Custom CSS overrides may break after UniLink updates its base styles — requires periodic review
- Custom font upload (your own typeface files) may be restricted to paid plans
Frequently Asked Questions
Will changing my Design System break blocks I've already styled?
Blocks that have block-level style overrides will keep their overrides — Design System only affects blocks that are inheriting the default token values. If you want a block to reflect the updated Design System, clear its overrides in the block settings.
Can I have different themes on different pages?
Design System is account-wide and applies to all pages by default. Individual blocks on any page can have local overrides, but there's no built-in way to assign a completely different theme to a single page. Use block-level overrides for page-specific adjustments.
How many colors can I set in Design System?
Design System typically includes slots for a primary color, secondary color, text color, background color, and link color. The exact number of configurable tokens depends on your plan and which preset you're using as a base.
Can I import my Figma brand tokens into Design System?
Not directly. You'll need to manually enter your hex color values and font names into Design System. If you have a brand guide with exact hex codes and font names, the process is straightforward — open Design System and enter each value from your brand guide.
Does custom CSS slow down my page?
No. Custom CSS is injected inline as part of the page and adds negligible load time. The bigger performance concern with CSS is blocking large external font files — if you're adding custom fonts via @font-face in your CSS, self-host the font files or use a fast CDN.
Key Takeaways
- Design System is a global style layer — set colors, fonts, and button styles once and every block inherits them automatically.
- Use theme presets as a starting point, then customize to match your exact brand hex codes and typefaces.
- Save your working theme as a preset before experimenting, so you can restore it instantly if needed.
- Block-level overrides take priority over Design System — clear them when you want a block to return to the global theme.
- Keep custom CSS minimal, documented, and reviewed periodically to avoid fragile overrides that break after updates.
Ready to give your UniLink profile a consistent brand look?
Create your free account and use Design System to set your brand colors, fonts, and style — then watch every block on your profile update automatically to match.
Get Started Free