DEV Community

Cover image for # Introducing Conté UI - A Dynamic CSS System for Advanced Styling
Contè UI
Contè UI

Posted on

# Introducing Conté UI - A Dynamic CSS System for Advanced Styling

When CSS Frameworks Become Limiting — Meet Conté UI

Traditional frameworks often lock you into predefined scales. Conté UI breaks these limits with a breakthrough approach to building modern UIs with fully dynamic values and intuitive class conventions. Faster, lighter, and more flexible than traditional frameworks.


Released: May 1, 2026
Version: v0.1.0-beta
Open Source:
https://github.com/Conte-UI/ConteUI


Core Features

Truly Dynamic Values that adapt intelligently to your design needs.

A powerful Grid and Flexbox foundation for building complex, responsive layouts with ease.

An advanced color system, featuring a robust engine powered by Google Material Design palettes.

A flexible theming system that lets you create, customize, and switch color schemes effortlessly.

Native support for light-dark(), enabling seamless and automatic dark‑mode integration.

A complete Typography System with streamlined access to Google Fonts and versatile font‑management options.

Fluid adaptability across responsive, fixed, or hybrid layout structures.

Full pseudo‑state support for interactive and state‑driven styling.

Writing‑mode support for vertical and non‑traditional text flows.

Physical and logical properties, ensuring modern, internationalized layout behavior.

Built‑in RTL support for right‑to‑left languages.

The system works perfectly as a standalone solution or alongside other frameworks, thanks to a carefully crafted naming convention that stays close to native CSS while minimizing conflicts.

You can apply styles instantly online, making experimentation fast, intuitive, and practical.

More advanced components and utilities for complex design systems are on the way, along with developer tools for layout debugging and generating optimized CSS bundles tailored to your project.


Getting Started

You can start using Conté UI by including the compiled CSS file:

<link rel="stylesheet" href="dist/conte-ui-v0.1.0-beta.min.css">

---

Or clone the repository:

git clone https://github.com/Conte-UI/ConteUI.git
Enter fullscreen mode Exit fullscreen mode

Example

<div class="d-flex gap:8px p:6px bg:conic-gradient(#f69d3c, #3f87a6) text-color:rgb(225,225,255)">
  <h1 class="text-size:0.7rem font-playfair">Hello Conté UI</h1>
  <p class="text-size:1rem">Dynamic values make styling effortless.</p>
</div>
Enter fullscreen mode Exit fullscreen mode

🧪 In Progress

Conté UI is just getting started.

New utilities are currently in development, expanding the system’s capabilities over time.

A powerful DevTool is also on the way — focused on testing, color generation, and exporting tailored CSS output.

Stay tuned.


License

Conté UI is licensed under the Apache License 2.0. See the LICENSE file for details.


This article assumes you are familiar with modern CSS and utility-based frameworks.

Top comments (0)