Skip to content
DesignMunkDesignMunk Submit a site

Dixa

dixa.com
One platform for every part of your CS operation.
AI Software Webflow Homepage IBM Plex Sans
Share Visit site
dixa.com DESKTOP · 1440
Dixa

AI Breakdown

Design export

# Design brief: the Dixa design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/02093213/dixa-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/02093213/dixa-com-featured.webp
- On DesignMunk: https://designmunk.com/dixa/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Dixa: Painted-Canvas Hero With Saffron CTAs

## Overview

Dixa's UI is calm, functional, and sales-forward. Light typography, warm accents, and generous white space support a clear narrative: one platform, faster resolution. Aim for serious, efficient, and human—not playful. Layouts should feel spacious with measured density where screenshots, stats, or FAQs need scannability.

## Colors

- **primary (#171512):** Core text and headline ink; use for body copy, headings, and icons on light surfaces.
- **secondary (#7c7c78):** Muted supporting text such as timestamps, captions, and helper labels.
- **tertiary (#ffb840):** Action accent for primary buttons, badges, and key highlights.
- **neutral (#ffffff):** Base canvas for sections, cards, and inverse text on dark imagery when required.
- **border (#39342d):** Subtle dividers and input outlines; keep to 1px for a quiet, structured feel.
- **surface (#ffffff):** Default surface color for cards and panels.
- **on-surface (#171512):** Default text color when placed on the surface/background.

## Typography

IBM Plex Sans is the sole family across headings and body. It is freely available from Google Fonts and safe to load directly. Headings use light weight (300) to keep tone confident without aggression. Roles:
- headline-lg 40px/1.5/300 for hero statements and key section leads.
- headline-md 32px/1.19/300 for major section headings and big metrics.
- headline-sm 25px/1.2/300 for feature titles and card headers.
- headline-xs 20px/1.5/300 for subheads and FAQ triggers.
- body-md 16px/1.5/300 for paragraphs, lists, and UI labels.
Close substitutes if Google is unavailable: Inter, Public Sans, or Source Sans 3 (regular to light weights) — all freely obtainable and metrically close enough to preserve rhythm.

## Layout

Spacing scales in clear steps: 2, 10, 20, 34, 48px. Treat md (20px) as your base gutter and inner padding; step up to lg (34px) and xl (48px) for section padding on tablet/desktop. Cards follow their own token padding (16px 16px 22px). Compose sections as roomy bands on neutral surfaces with consistent vertical rhythm: title, short lead, action or media. Keep lists and metric grids tight with md gaps for scanability.

## Elevation & Depth

Depth is restrained. Use shadows sparingly: sm (rgba(16,24,40,0.03) 0 4px 6px -2px) for small floating UI; md (rgba(0,0,0,0.08) 0 0 15px 0) for cards and device frames; lg (rgba(19,34,68,0.08) 0 8px 32px 0) for hero overlays or modals. xl and inner are none—hierarchy often comes from whitespace, borders (#39342d at 1px), and tonal contrast instead of heavy shading.

## Shapes

Corners are friendly but professional: sm 16px for interactive controls (buttons, inputs); md 20px for cards and prominent panels. Use consistent radii to signal clickability (16px) versus containers (20px). Avoid mixing other radii to keep the language coherent.

## Components

Buttons
- Primary: background #ffb840, text #171512, 16px radius, 46px height, 14px 20px padding. Use for core CTAs like "Book a demo".
- Secondary: background #ffe6c1, text #171512, 16px radius, 46px height, same padding. Use for secondary actions beside the primary.
- Link: text #5644d8, radius 0. Use inline or as quiet tertiary CTAs.

Card
- Background #ffffff, text #171512, radius 20px, padding 16px 16px 22px. Pair with md shadow for lift when over imagery.

Distinctive components on this page

### Hero Canvas
- Full-bleed image banner with inverse text in #ffffff. Headline uses headline-lg (40px/300). Two CTAs: primary (#ffb840) and secondary (#ffe6c1), both 46px tall with 16px corners. Section padding: xl (48px) top/bottom.

### Product UI Mockup Frame
- A wide card overlapping the hero's bottom edge. Radius 20px, shadow md (0 0 15px, 8%). Background #ffffff; internal gutters md (20px).

### Logo Wall
- Grid of brand marks on #ffffff with generous spacing (md to lg gaps). Keep logos grayscale; no shadows or borders to maintain quiet credibility.

### Testimonial Card
- Quote block inside a card. Use headline-xs (20px) for author, body-md for quote and role. Apply md shadow and 20px radius; vertical spacing md (20px).

### KPI Stat Grid
- Numbers in headline-md (32px/300) with labels in body-md (16px). Grid gaps md (20px); use secondary (#7c7c78) for labels to keep the numbers prominent.

### Feature Rows (Channels, Automation, Team Hub, Discover, Mim, Co-Pilot)
- Each row: heading in headline-sm (25px), short lead (body-md), optional bulleted list. Right-aligned media or icon. Use link style (#5644d8) for "Learn more". Section padding lg–xl.

### FAQ Accordion
- Triggers in headline-xs (20px). Content in body-md. Separate items with a 1px border using #39342d; internal padding md (20px).

### Newsletter Signup
- Single-line form with input corners 16px to match buttons. Submit uses primary button. Horizontal spacing sm–md to keep compact in footer.

## Do's and Don'ts

- Do reserve #ffb840 for the most important CTAs and summary badges; pair with #171512 text for WCAG-safe contrast.
- Do keep headings at weight 300; increase size (not weight) to signal hierarchy.
- Do space sections using md (20px) internal gaps and lg/xl (34/48px) outer padding for calm rhythm.
- Don't introduce new corner radii; stick to 16px for controls and 20px for containers.
- Don't place link-blue (#5644d8) on similarly saturated backgrounds; keep it on #ffffff.
- Don't rely on heavy shadows—use borders (#39342d at 1px) and whitespace for grouping.

## Agent Prompt Guide

Quick color reference
- Text: #171512
- Background: #ffffff
- Border: #39342d
- Accent (primary action): #ffb840
- Link accent: #5644d8

1) Build a hero with two CTAs
- Container: full-width section on #ffffff with a background image. Padding: 48px top/bottom.
- H1: IBM Plex Sans, 40px, weight 300, line-height 1.5, color #ffffff (inverse over image).
- Body: IBM Plex Sans, 16px/1.5, color #ffffff at 90%.
- Buttons: Primary (#ffb840 text #171512) and Secondary (#ffe6c1 text #171512), 46px height, 14px 20px padding, 16px radius, 20px gap.

2) KPI stat grid (6 items)
- Section background #ffffff; padding 34px.
- Each stat: Number in IBM Plex Sans 32px/1.19 weight 300 color #171512; label in 16px/1.5 color #7c7c78.
- Grid: responsive columns with 20px gaps; no borders.

3) Feature row with "Learn more"
- Two-column layout; 20px gutter.
- Heading: 25px/1.2 weight 300 color #171512.
- Copy: 16px/1.5 color #171512.
- Link CTA: color #5644d8; underline on hover; no radius.
- Section padding: 34–48px.

4) Testimonial card
- Card background #ffffff, 20px radius, padding 16px 16px 22px, shadow md (0 0 15px 0 rgba(0,0,0,0.08)).
- Quote: 16px/1.5 color #171512.
- Author: 20px/1.5 weight 300 color #171512.

5) FAQ accordion
- Item header: 20px/1.5 weight 300 color #171512; 20px vertical padding.
- Divider: 1px solid #39342d.
- Body: 16px/1.5 color #171512; 20px top padding.

## Similar Brands

- Zendesk — similar spacious layouts and stats; Dixa uses warmer CTAs and lighter heading weight.
- Intercom — conversational product story; Dixa leans more into AI agent autonomy and a calmer type scale.
- Freshdesk — comparable feature grid; Dixa's saffron CTA and painted hero are more distinctive.
- Gladly — customer-centric messaging and unified view; Dixa's typography is lighter and shadows subtler.
- Gorgias — ecommerce focus and metrics; Dixa's navigation and FAQ are deeper out of the box.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #171512;
  --color-secondary: #7c7c78;
  --color-tertiary: #ffb840;
  --color-neutral: #ffffff;
  --color-border: #39342d;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 40px;
  --text-headline-lg-weight: 300;
  --text-headline-lg-leading: 1.5;
  --text-headline-md-size: 32px;
  --text-headline-md-weight: 300;
  --text-headline-md-leading: 1.19;
  --text-headline-sm-size: 25px;
  --text-headline-sm-weight: 300;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 20px;
  --text-headline-xs-weight: 300;
  --text-headline-xs-leading: 1.5;
  --text-body-md-size: 16px;
  --text-body-md-weight: 300;
  --text-body-md-leading: 1.5;
  --font-ibm-plex-sans: "IBM Plex Sans";

  /* Rounded */
  --radius-sm: 16px;
  --radius-md: 20px;

  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 34px;
  --spacing-xl: 48px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 14px 20px;
  --button-primary-height: 46px;
  --button-secondary-background-color: #ffe6c1;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 14px 20px;
  --button-secondary-height: 46px;
  --button-link-text-color: #5644d8;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 16px 16px 22px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #171512;
  --color-secondary: #7c7c78;
  --color-tertiary: #ffb840;
  --color-neutral: #ffffff;
  --color-border: #39342d;
  --color-surface: #ffffff;
  --color-on-surface: #171512;
  --font-headline-lg: "IBM Plex Sans";
  --font-headline-md: "IBM Plex Sans";
  --font-headline-sm: "IBM Plex Sans";
  --font-headline-xs: "IBM Plex Sans";
  --font-body-md: "IBM Plex Sans";
  --text-headline-lg: 40px;
  --text-headline-md: 32px;
  --text-headline-sm: 25px;
  --text-headline-xs: 20px;
  --text-body-md: 16px;
  --font-weight-headline-lg: 300;
  --font-weight-headline-md: 300;
  --font-weight-headline-sm: 300;
  --font-weight-headline-xs: 300;
  --font-weight-body-md: 300;
  --radius-sm: 16px;
  --radius-md: 20px;
  --spacing-xs: 2px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 34px;
  --spacing-xl: 48px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.09,
                    0.082,
                    0.071
                ],
                "hex": "#171512"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.486,
                    0.471
                ],
                "hex": "#7c7c78"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    0.722,
                    0.251
                ],
                "hex": "#ffb840"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.224,
                    0.204,
                    0.176
                ],
                "hex": "#39342d"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.09,
                    0.082,
                    0.071
                ],
                "hex": "#171512"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 2,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 34,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 48,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "IBM Plex Sans",
                "fontSize": {
                    "value": 40,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "IBM Plex Sans",
                "fontSize": {
                    "value": 32,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "IBM Plex Sans",
                "fontSize": {
                    "value": 25,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "IBM Plex Sans",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "IBM Plex Sans",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Dixa**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
capsulecrm.com
Capsule Productivity
Capsule
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
gogallery.online
Gogallery Creative
Gogallery