The shared language of the interface.

A living design system for building AcunSoft products faster, more consistently and more accessibly.

Stable release Last updated · October 7, 2026

Clarity comes first

Every element should make the user's next decision easier; decoration never gets in front of content.

Rhythm is consistent

A 4-pixel scale keeps the same visual rhythm from dense screens to long-form pages.

Feedback is visible

Hover, focus and state changes make interaction safe with calm but clear cues.

Typography

A balanced scale that makes the information hierarchy quick to scan.

Public Sans · DM MonoHeadings − 600Body − 400Labels − 600

32 Display24 Heading16 Body14 Interface

Spacing

Spacing is not random; it is a rhythm that relates components to each other.

14px

28px

416px

624px

832px

1248px

Colors and borders

Thin lines that separate surfaces, and restrained color that highlights decisions.

Primary#696BFE · brand-600

Accent#EC4899 · accent-500

Success#42D697 · emerald-500

Info#45B8F4 · sky-500

Warning#F9C74F · amber-500

Danger#FE696A · red-500

Secondary#8592A3 · secondary-500

Dark#2B2C40 · dark

Light#F5F5F9 · light

Ink#16162A · gray-900

Navigation

Makes the location clear, keeps the focus and makes movement predictable.

Cards

Breaks information into actionable pieces without losing its context.

Hover and focus

Every interaction stays clear with a mouse, a keyboard or touch.

Code and examples

The preview and the code sit side by side, without unnecessary noise.

            
            acun:button
        
            <acun:button size="lg">
    Create project
    <acun:icon name="arrow-right" size="4" />
</acun:button>