sleekui — Brand Identity

Design Concept

The Mark

top bar → design layer bottom bar → system layer AI node

A Z-shaped angular mark built from three straight lines at sharp angles — two horizontal bars connected by a diagonal slash. No curves, no flourish. Pure geometry.

The top bar represents the design layer — intent, tokens, decisions. The diagonal is the transformation: design flowing through an AI agent into code. The bottom bar is the system layer — rendered components, live UI.

The neon green node sits at the midpoint of the diagonal — the AI agent, precise and always present, mediating between design and implementation.

Square stroke caps and hard angles convey technical precision, reliability, and the structured nature of design systems.

Logo Variants

All Formats

Full Logo — Dark Background

logo-full.svg

White Version — Dark Background

logo-white.svg

Mark Only

logo-mark.svg

App Icon

logo-icon.svg

Wordmark

logo-wordmark.svg

Favicon — 16px

64px preview

favicon.svg

Black Version — Light Background

logo-black.svg

Brand Colors

Color Palette

#00FF41

Neon Green

Primary accent, AI node, "ui" text

#FAFAFA

Off-White

Mark strokes, primary text on dark

#0A0A0A

Near Black

App icon background, hero background

#1A1A1A

Dark

Black logo, secondary dark surfaces

#F5F5F5

Light Gray

Light card backgrounds

#00AA28

Deep Green

"ui" text on light backgrounds

Typography

Inter — Primary Typeface

Inter 700 / 56px / -2px tracking

sleekui

Inter 600 / 28px / -0.5px tracking

The Unsplash of Design Systems

Inter 500 / 16px

Apply professional design systems to any project — in seconds.

Inter 400 / 14px — Body

sleek-ui provides a catalog of pre-designed, accessible UI design systems that can be applied to any web project via AI agents.

Developer Reference

Integration

      // tailwind.config.js — brand colors

      module.exports = {

        theme: {

          extend: {

            colors: {

              brand: {

                primary: '#00FF41',  // Neon Green

                dark:    '#1A1A1A',  // Near Black

                light:   '#FAFAFA',  // Off-White

                muted:   '#00AA28',  // Deep Green

              },

            },

          },

        },

      };

public/logo/
├── logo-full.svg       # Mark + wordmark (horizontal)
├── logo-mark.svg      # Symbol/icon only
├── logo-wordmark.svg  # Text only
├── logo-icon.svg      # App icon (512×512, rounded)
├── favicon.svg        # 16×16 optimized
├── logo-white.svg     # White version for dark backgrounds
├── logo-black.svg     # Black version for light backgrounds
└── brand-showcase.html # This file