Mobile apps feel more polished when color, spacing, typography and state feedback agree with each other. DedrisFramework keeps that work approachable by exposing the important values as CSS variables.

Start with brand color and contrast

Change the primary and accent colors first, then check buttons, links, selected tabs and alerts. If those still read clearly, the rest of the interface usually falls into place faster.

css
:root {
  --dx-primary: #2457ff;
  --dx-accent: #00b894;
  --dx-radius: 14px;
}

Theme the product, not every component

A good theme should let components remain predictable. Avoid one-off overrides inside individual screens unless the screen has a real product reason to behave differently.

Quick test:

Open a list, a form, a primary button and a navigation view. If they look like one app, the token set is doing its job.

Remember dark mode

DedrisFramework already supports a site-wide dark theme pattern. For apps, define a second token set and test real content, not only empty states.

← PreviousNext article →