Soft UI Design#

Soft UI Design System represents a modern approach to interface design, emphasizing soft shadows, subtle gradients, and light/dark contrasts to create a neumorphic appearance. This design system, created by Creative Tim, focuses on creating depth and dimensionality through careful use of shadows and highlights rather than traditional material elevation.

πŸ‘‰ New to App-Generator? SignIN with GitHub or Download a PRO Starter for only $19.99/mo

Soft UI Design - open-source UI Kit template provided by Creative-Tim

Project Architecture#

soft-ui-design/
    β”œβ”€β”€ dist/                   # Production files
    β”œβ”€β”€ src/
    β”‚   β”œβ”€β”€ assets/
    β”‚   β”‚   β”œβ”€β”€ css/
    β”‚   β”‚   β”‚   β”œβ”€β”€ soft-ui-design.css
    β”‚   β”‚   β”‚   └── soft-design.min.css
    β”‚   β”‚   β”œβ”€β”€ scss/
    β”‚   β”‚   β”‚   β”œβ”€β”€ soft-ui/
    β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ components/
    β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ mixins/
    β”‚   β”‚   β”‚   β”‚   └── variables/
    β”‚   β”‚   β”‚   └── soft-ui.scss
    β”‚   β”‚   β”œβ”€β”€ js/
    β”‚   β”‚   β”‚   β”œβ”€β”€ core/
    β”‚   β”‚   β”‚   β”œβ”€β”€ plugins/
    β”‚   β”‚   β”‚   └── soft-ui.js
    β”‚   β”‚   └── img/
    β”‚   β”œβ”€β”€ pages/
    β”‚   └── sections/
    β”œβ”€β”€ docs/
    └── gulpfile.js

Soft UI Components#

Neumorphic Cards#

The signature component of Soft UI Design System:

<div class="card card-background shadow-soft border-radius-xl">
    <div class="full-background" style="background-image: url('path/to/img')"></div>
    <div class="card-body text-start p-3 w-100">
        <div class="row">
            <div class="col-12">
                <div class="blur shadow-blur bg-white border-radius-lg p-3">
                    <h4 class="mb-0">Soft UI Component</h4>
                    <p class="text-sm mb-0">
                        This is an example of a neumorphic card component
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Soft Buttons#

Implementation of neumorphic buttons:

<!-- Primary soft button -->
<button class="btn bg-gradient-primary shadow-soft-md">
    Primary Button
</button>

<!-- Secondary soft button -->
<button class="btn btn-outline-primary shadow-soft">
    Secondary Button
</button>

<!-- Icon button -->
<button class="btn btn-icon-only shadow-soft-lg">
    <i class="fas fa-heart"></i>
</button>

Resources#

  • Official Documentation: Creative Tim website

  • Support: Through Creative Tim’s support system

  • Updates: Regular through npm

  • Community: Creative Tim forums

Remember to keep your Soft UI Design System installation updated for the latest features and improvements.