Aslan-Gabriel Moran

Design System Services

00:00

Jump to Define Your Scope >>

Velocity & Scale Series >>
Technical architecture for scaling B2B SaaS. Eliminate UI debt, synchronize design systems across Web, iOS, & Android, and accelerate developer velocity.

✩ or scroll down to learn more ✩

You have components, but you don't have a language.

This isn't a design problem; it's a communication failure. Without a shared language, every developer is forced to guess.

Team01-interaction-logic.css

html

/* Team 1 */
/* Light Mode */

--text-color:

#0f192e;

--blue-50:

#eff6ff;

html.dark

/* Team 1 */
/* Dark Mode */

--text-color:

#d6eefa;

--blue-50:

#33455c;

.btn-1 {

background-color:

var(--blue-50);

color:

var(--text-color-bttn);

border-radius:

border-radius: 24px;

}

Team02-interaction-logic.css

html

/* Team 2 */
/* Light Mode */

--Text-color-one:

#0f192e;

--blue-50:

#dbeafe;

html.dark

/* Team 2 */
/* Dark Mode */

--Text-color-one:

#d6eefa;

--blue-50:

#062752;

.btn-002 {

background-color:

var(--blue-50);

color:

var(--Text-color-one);

}

Team03-interaction-logic.css

html

/* Team 3 */
/* Light Mode */

--Color-Text-Btn:

#0f192e;

--blue-200:

#bfdbfe;

html.dark

/* Team 3 */
/* Dark Mode */

--Text-color-one:

#d6eefa;

--blue-200:

#031c3b;

.btn-main-on {

background-color:

var(--blue-200);

color:

var(--Color-Text-Btn);

border-radius:

border-radius: 60px;

}

Team04-interaction-logic.css

html

/* Team 4 */
/* Light Mode */

--Text-button:

#0f192e;

--blue-50:

#93c5fd;

html.dark

/* Team 4 */
/* Dark Mode */

--Text-button:

#d6eefa;

--blue-50:

#2a486b;

.simplebutton {

background-color:

var(--blue-300);

color:

var(--Text-button);

}

Team05-interaction-logic.css

html

/* Team 5 */
/* Light Mode */

--Button-TEXT:

#0f192e;

--blue-400:

#60a5fa;

html.dark

/* Team 5 */
/* Dark Mode */

--Button-TEXT:

#d6eefa;

--blue-400:

#0c213b;

.simplebutton {

background-color:

var(--blue-400);

color:

var(--Button-TEXT);

}

Team06-interaction-logic.css

html

/* Team 6 */
/* Light Mode */

--For-button-text:

#0f192e;

--blue-500:

#6798e6;

html.dark

/* Team 6 */
/* Dark Mode */

--For-button-text:

#d6eefa;

--blue-500:

#092b61;

.ThisMainButton {

background-color:

var(--blue-500);

color:

var(--For-button-text);

}

Team07-interaction-logic.css

html

/* Team 7 */
/* Light Mode */

--ImTextforButton:

#0f192e;

--blue-600:

#6993ec;

html.dark

/* Team 7 */
/* Dark Mode */

--ImTextforButton:

#d6eefa;

--blue-600:

#03143a;

.ThisMainButton {

background-color:

var(--blue-600);

color:

var(--ImTextforButton);

}

Team07-interaction-logic.css

html

/* Team 7 */
/* Light Mode */br

--TextForButtons:

#0f192e;

--blue-700:

#9cb6ff;

html.dark

/* Team 7 */
/* Dark Mode */

--TextForButtons:

#d6eefa;

--blue-700:

#090c14;

.ButtonActiveMain {

background-color:

var(--blue-600);

color:

var(--TextForButtons);

}

Moving from pages to patterns.

One decision. Three platforms. Zero translation errors.

Code Variable

color-primary-600: #0052FF

Web

.btn { background: var(--color-primary-600); }

Android

color = ColorTokens.Primary600

iOS

backgroundColor = .primary600

Elimination of Design Debt.

We don't deliver layouts; we deliver the logic that builds them. This reduces onboarding from weeks to hours.

Team02-interaction-logic.css

/* COLORS?? WHO KNOWS */
.red { color: red; } .red2 { color: #ff0000; } .text-danger { color: rgb(255, 0, 0); } .primary { color: blue; } .primary-btn-text { color: white; } .btn-primary-text { color: #fff; } .blue { color: #0000ff; } .mainBlue { color: #1e90ff; }

/* BACKGROUNDS BUT NOT REALLY CONSISTENT */ .bg-blue { background: blue; } .bgBlue { background-color: #0000ff; } .backgroundPrimary { background: #1e90ff; } .primaryBackground { background: dodgerblue !important; }

/* BUTTONS (GOOD LUCK) */ .btn { padding: 10px; border-radius: 4px; }

.button { padding: 12px 20px; border-radius: 2px; }

.btn-primary { background: blue; color: white; }

.primary-btn { background-color: #0000ff; color: #fff; border: none; }

button.primary { background: dodgerblue; padding: 8px; }

.btnPrimaryLargeBig { padding: 18px 40px; font-size: 20px; }

/* RANDOM OVERRIDES */ .btn-primary { background: red; /* WHY?? */ }

.primary-btn { background: green; /* EVEN WORSE */ }

/* TYPOGRAPHY?? KIND OF?? */ .h1 { font-size: 32px; }

.title { font-size: 30px; }

.heading-big { font-size: 36px; }

h1 { font-size: 28px !important; }

/* SPACING CHAOS */ .mt-10 { margin-top: 10px; } .mt10 { margin-top: 10px; } .marginTop10 { margin-top: 12px; } .m-t-10 { margin-top: 8px; }

/* GRID?? NOPE */ .row { display: flex; }

.flex-row { display: flex; }

.row-flex { display: flex; }

.container { width: 1200px; }

.wrapper { width: 100%; max-width: 1180px; }

.main-container { width: 95%; }

/* RESPONSIVE? LOL */ @media (max-width: 768px) { .container { width: 100%; }

.wrapper { width: 90%; }

.btnPrimaryLargeBig { font-size: 12px; padding: 5px; } } /* STATES??? */ .btn:hover { background: purple; }

.btn-primary:hover { background: orange; } .primary-btn:hover { background: pink; }

/* DISABLED?? */ .btn:disabled { opacity: 0.5; } .disabled-btn { opacity: 0.3; pointer-events: none; }

/* RANDOM ONE-OFF COMPONENT */ .cardSpecialThingy { padding: 13px; border: 1px solid #ccc; background: white; }

.card { padding: 20px; border: none; background: #fafafa; }

/* Z-INDEX WARS */ .modal { z-index: 1000; }

.dropdown { z-index: 2000; }

.tooltip { z-index: 999999; }

/* HARDCODED WIDTHS EVERYWHERE */ .input { width: 200px; }

.input-large { width: 350px; }

.inputBig { width: 300px; }

YourDesign.css

========================= 1. DESIGN TOKENS =========================

root

/* Colors */

--color-primary:

#1e90ff;

--color-primary-hover:

#1c86ee;

--color-danger:

#e53935;

--color-text:

#222;

--color-background:

#0f192e;

--TextForButtons:

#ffffff;

/* Typography */

--font-family-base:

Arial, sans-serif;

--font-size-sm:

14px;

--font-size-md:

16px;

--font-size-lg:

20px;

/* Spacing */

--space-xs

4px;

--space-sm:

8px;

--space-md:

16px;

--space-lg:

24px;

/* Radius */

--radius-sm:

4px;

--radius-md:

8px;

========================= 2. DESIGN TOKENS =========================

body {

font-family:

var(--font-family-base);

font-size:

var(--font-size-md);

color:

var(--color-text);

background:

var(--color-background);

}

========================= 3. TYPOGRAPHY =========================

.text-sm

{

font-size:

var(--font-size-sm);

}

.text-md

{

font-size:

var(--font-size-md);

}

.text-lg

{

font-size:

var(--font-size-lg);

}

.heading {

font-size:

var(--font-size-lg)

font-weight:

bold;

}

========================= 4. LAYOUT UTILITIES =========================

.container {

max-width:

1200px;

margin:

0 auto;

padding:

var(--space-md);

}

.flex {

display:

flex;

}

.flex-row {

flex-direction:

row;

}

.gap-md {

gap:

var(--space-md);

}

========================= 5. COMPONENT: BUTTON =========================

.btn {

display:

inline-block;

padding:

var(--space-sm) var(--space-md);

border-radius:

var(--radius-sm);

font-size:

var(--font-size-md);

border:

none;

cursor:

pointer

transition:

background 0.2s ease;

}

/* Variants */

.btn {

background:

var(--color-primary-hover);

}

.btn--primary {

background:

var(--color-primary);

}

.btn--primary:hover {

background:

var(--color-primary-hover);

}

.btn--danger {

background:

var(--color-danger);

color:

#fff;

}

/* States */

.btn:disabled {

opacity:

0.5;

cursor:

not-allowed;

}

/* Sizes */

.btn--lg {

padding:

var(--space-md) var(--space-lg);

font-size:

var(--font-size-lg);

}

========================= 6. COMPONENT: CARD =========================

.card {

padding:

var(--space-md);

border-radius:

var(--radius-md);

background:

#fafafa;

border:

1px solid #eee;

}

Who this is for

This is NOT for

2-week MVPs, "Vibe-based" design, teams without developers.

This is for

Scalable SaaS, Multi-platform products, teams valuing long-term maintainability.

Aslan-Gabriel Moran

Design System Services

00:00

Jump to Define Your Scope >>

Velocity & Scale Series >>
Technical architecture for scaling B2B SaaS. Eliminate UI debt, synchronize design systems across Web, iOS, & Android, and accelerate developer velocity.

✩ or scroll down to learn more ✩

You have components, but you don't have a language.

Moving from pages to patterns.

One decision. Three platforms. Zero translation errors.

Elimination of Design Debt.

Who this is for

This is NOT for

This is for

The first step to a system is a diagnosis. Tell us about your technical constraints

Choose Theme

Aslan-Gabriel Moran

Design System Services Play 00:00 Jump to Define Your Scope >> Velocity & Scale Series >> Technical architecture for scaling B2B SaaS. Eliminate UI debt, synchronize design systems across Web, iOS, & Android, and accelerate developer velocity. ✩ or scroll down to learn more ✩

Jump to Define Your Scope >> Velocity & Scale Series >> Technical architecture for scaling B2B SaaS. Eliminate UI debt, synchronize design systems across Web, iOS, & Android, and accelerate developer velocity.

✩ or scroll down to learn more ✩

You have components, but you don't have a language.

Moving from pages to patterns.

One decision. Three platforms. Zero translation errors.

Elimination of Design Debt.

Who this is for

This is NOT for

This is for

The first step to a system is a diagnosis. Tell us about your technical constraints

Choose Theme

Design System Services

00:00

Jump to Define Your Scope >>

Velocity & Scale Series >>
Technical architecture for scaling B2B SaaS. Eliminate UI debt, synchronize design systems across Web, iOS, & Android, and accelerate developer velocity.

✩ or scroll down to learn more ✩

Jump to Define Your Scope >>

Velocity & Scale Series >>
Technical architecture for scaling B2B SaaS. Eliminate UI debt, synchronize design systems across Web, iOS, & Android, and accelerate developer velocity.