OLMO - Startup, SaaS, Software & Mobile App Tailwind CSS Template

Design Specification — OLMO - Startup, SaaS, Software & Mobile App Tailwind CSS Template

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#212529), a vivid accent (#DC3545). All type is set in 'Rubik'. Detected font weights: 300, 400, 500, 700, 900. Detected style signatures: technical / mono accents.

Logo asset(s): https://dsathemes.com/html/olmo_tlwd/assests/images/logo.webp

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))

Typography

Primary typeface: Rubik — stack: 'Rubik'

Font stacks (most used first)

• 'Rubik'
• var(--bs-font-sans-serif)
• var(--bs-body-font-family)
• var(--bs-font-monospace)
• inherit
• ``
• var(--bs-btn-font-family)
• 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif
• 'Rubik', sans-serif
• "Google Sans", Helvetica, Arial, sans-serif

Web font sources

• fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 500, 700, 900

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 2px 3px rgba(96, 96, 96, .1)
• 0 0 2px rgba(50, 50, 50, 0.4)
• 0px 5px 10px 0 rgba(10, 10, 10, .05)
• 0 0.5rem 1rem rgba(0, 0, 0, 0.15)
• inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075)
• 0 0 0 0.25rem rgba(, .5)

Layout

Container max-width: 1140px

Breakpoints

• 576px
• 768px
• 991px
• 992px
• 1162px
• 1199.95px
• 1200px
• 1400px

Animation & Motion

Transitions

• color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
• none
• opacity .15s linear
• width 0.6s ease
• transform 0.3s ease-in-out
• all 450ms ease-in-out
• all 0.25s ease-in-out
• all 300ms ease-in-out
• all 400ms ease-in-out

Easing curves

• cubic-bezier(0.215, 0.61, 0.355, 1)
• cubic-bezier(0.755, 0.05, 0.855, 0.06)
• cubic-bezier(0.215, 0.61, 0.355, 1)
• ease-out
• ease-in
• ease-in-out
• cubic-bezier(0.55, 0.055, 0.675, 0.19)
• cubic-bezier(0.175, 0.885, 0.32, 1)

Keyframes

@keyframes progress-bar-stripes { 0%{background-position-x:var(--bs-progress-height)} }
@keyframes spinner-border { to{transform:rotate(360deg)} }
@keyframes spinner-grow { 0%{transform:scale(0)}50%{opacity:1;transform:none} }
@keyframes placeholder-glow { 50%{opacity:.2} }
@keyframes placeholder-wave { 100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%} }
@keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } }
@keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1 }
@keyframes shakeX { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } }
@keyframes shakeY { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } }
@keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-tran }
@keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } }
@keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, }
@keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg }
@keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } }
@keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(0.7); transform: translateY(1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } }

Animations

• loading-center-absolute 1s infinite
• object_one 1s infinite
• object_two 1s infinite
• object_three 1s infinite
• object_four 1s infinite

CTA labels found on page

• Check Demos
• See OLMO In Action
• Purchase Now

Source Design Tokens (CSS custom properties)

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13,110,253;
  --bs-secondary-rgb: 108,117,125;
  --bs-success-rgb: 25,135,84;
  --bs-info-rgb: 13,202,240;
  --bs-warning-rgb: 255,193,7;
  --bs-danger-rgb: 220,53,69;
  --bs-light-rgb: 248,249,250;
  --bs-dark-rgb: 33,37,41;
  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
}

Do's and Don'ts

Do

• Do reserve the accent #DC3545 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 300, 400, 500, 700, 900.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #FFFFFF;
  --color-text-primary: #212529;
  --color-primary: #0D6EFD;
  --color-accent: #DC3545;
  --color-surface: #F8F9FA;
  --color-secondary: #000000;
  --color-text-secondary: #DEE2E6;
  --color-border: #343A40;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F8F9FA;
  --color-surface-container: #E9ECEF;
  --color-surface-container-high: #E2E3E5;
  --color-surface-container-highest: #DEE2E6;
  --font-sans: 'Rubik';
  --font-size-display: 192px;
  --font-size-headline-lg: 37.6px;
  --font-size-headline-md: 24px;
  --font-size-title-lg: 21.6px;
  --font-size-body-lg: 18.4px;
  --font-size-body-md: 16.8px;
  --font-size-label-md: 14px;
  --radius-sm: 4px;
  --radius-pill: 50%;
  --shadow-sm: 0 2px 3px rgba(96, 96, 96, .1);
  --shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
  --shadow-lg: 0px 5px 10px 0 rgba(10, 10, 10, .05);
  --space-xs: 3px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 40px;
  --tracking-display: -16px;
  --tracking-label: 0.5px;
  --container-max: 1140px;
}