Cartly / brand / SPEC

Cartly Corporate Identity — Technical Specification

Overview

Cartly is an AI-native ERP+POS SaaS for fashion retailers (1–5 stores). The CI reflects this: modern, clean, professional — premium but accessible. No gimmicks, no clutter.

Color Palette

All colors via CSS Custom Properties. Dark/Light mode via [data-theme] attribute on <html>.

Light Mode (default)

Token Hex Usage
--cartly-primary #1A1A2E Brand/nav/headings (deep navy-black)
--cartly-secondary #16213E Secondary headings, cards
--cartly-accent #E94560 CTAs, highlights, badges (coral-red)
--cartly-accent-hover #D63850 Accent hover state
--cartly-muted #533483 Muted accent (purple)
--cartly-background #F8F9FA Page background
--cartly-surface #FFFFFF Cards, modals
--cartly-surface-elevated #F1F3F8 Elevated surfaces
--cartly-border #E2E8F0 Borders, dividers
--cartly-border-strong #CBD5E1 Strong borders
--cartly-text-primary #1A1A2E Primary text
--cartly-text-secondary #64748B Secondary text
--cartly-text-muted #94A3B8 Muted/placeholder text
--cartly-text-inverse #FFFFFF Text on dark backgrounds
--cartly-success #10B981 Success states
--cartly-warning #F59E0B Warning states
--cartly-error #EF4444 Error states
--cartly-info #3B82F6 Info states

Dark Mode

Token Hex Usage
--cartly-primary #E8EAF0 Lighter for dark bg
--cartly-secondary #C9D1E0 Secondary text
--cartly-accent #E94560 Same accent
--cartly-accent-hover #F05A73 Lighter hover
--cartly-muted #7C5CBF Muted purple
--cartly-background #0F0F1A Deep dark bg
--cartly-surface #1A1A2E Card surfaces
--cartly-surface-elevated #232340 Elevated surfaces
--cartly-border #2D2D4A Borders
--cartly-border-strong #3D3D5C Strong borders
--cartly-text-primary #E8EAF0 Primary text
--cartly-text-secondary #94A3B8 Secondary text
--cartly-text-muted #64748B Muted text
--cartly-text-inverse #1A1A2E Text on light accents

Typography

Google Fonts

Primary: Outfit (headings + body) — geometric sans, modern, clean, fashion-forward
Mono: JetBrains Mono — for code, prices, SKU

Type Scale

Token Size Line-height Weight Usage
--cartly-text-xs 0.75rem / 12px 1.5 400 Captions, labels
--cartly-text-sm 0.875rem / 14px 1.5 400 Small text
--cartly-text-base 1rem / 16px 1.6 400 Body
--cartly-text-lg 1.125rem / 18px 1.5 400 Large body
--cartly-text-xl 1.25rem / 20px 1.4 600 H4
--cartly-text-2xl 1.5rem / 24px 1.3 700 H3
--cartly-text-3xl 1.875rem / 30px 1.2 700 H2
--cartly-text-4xl 2.25rem / 36px 1.1 800 H1
--cartly-text-5xl 3rem / 48px 1.1 800 Display
--cartly-text-6xl 3.75rem / 60px 1.0 800 Hero

Font Weights

Spacing System

Base unit: 4px. Scale: 0.25 / 0.5 / 0.75 / 1 / 1.5 / 2 / 3 / 4 / 6 / 8 / 12 / 16

Token Value
--cartly-space-1 0.25rem (4px)
--cartly-space-2 0.5rem (8px)
--cartly-space-3 0.75rem (12px)
--cartly-space-4 1rem (16px)
--cartly-space-6 1.5rem (24px)
--cartly-space-8 2rem (32px)
--cartly-space-12 3rem (48px)
--cartly-space-16 4rem (64px)
--cartly-space-24 6rem (96px)

Border Radius

Token Value
--cartly-radius-sm 0.25rem (4px)
--cartly-radius-md 0.5rem (8px)
--cartly-radius-lg 0.75rem (12px)
--cartly-radius-xl 1rem (16px)
--cartly-radius-2xl 1.5rem (24px)
--cartly-radius-full 9999px

Shadows

Token Value
--cartly-shadow-sm 0 1px 2px rgba(26,26,46,0.06)
--cartly-shadow-md 0 4px 6px rgba(26,26,46,0.08)
--cartly-shadow-lg 0 10px 15px rgba(26,26,46,0.10)
--cartly-shadow-xl 0 20px 25px rgba(26,26,46,0.12)

Logo

The Cartly wordmark is text-based using Outfit ExtraBold with a stylized "C" icon.

Icon: abstract shopping cart / tag hybrid in --cartly-accent color.

SVG favicon: 32×32, icon only.

Motion

Token Value Usage
--cartly-transition-fast 150ms ease Micro-interactions
--cartly-transition-base 250ms ease Standard transitions
--cartly-transition-slow 400ms ease Page transitions

Avoid animation on prefers-reduced-motion.

Implementation Files

File Purpose
cartly-theme.css All CSS Custom Properties + base resets
index.html Landing page starter (PWA-ready)
manifest.json PWA manifest
sw.js Service worker stub

Dark Mode Implementation

:root {
  /* Light mode defaults */
  --cartly-primary: #1A1A2E;
  ...
}

[data-theme="dark"] {
  --cartly-primary: #E8EAF0;
  --cartly-background: #0F0F1A;
  ...
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* System dark mode */
  }
}
← Cartly Internal Portal