DESIGN.md · Analysis

Clever Clouds

cleverclouds.in · 30 Sept 2026 · 47 colors · Open Sans

Clever Clouds

A digital growth and creative agency blending bold cobalt branding with energetic orange accents, delivering strategy, content, video, and SEO through a confident, uppercase-driven visual language.

Colors

surface#eff3f6

surface-dim#e9ecef

surface-bright#ffffff

surface-container-lowest#f8f9fa

surface-container-low#f0f9fa

surface-container#e9ecef

surface-container-high#d0d0d0

surface-container-highest#c0c0c0

on-surface#151f27

on-surface-variant#505050

inverse-surface#151f27

inverse-on-surface#eff3f6

outline#666666

outline-variant#d0d0d0

surface-tint#0342d5

primary#0342d5

on-primary#eff3f6

primary-container#1a5ae8

on-primary-container#ffffff

inverse-primary#f9a825

secondary#f9a825

on-secondary#151f27

secondary-container#ffc857

on-secondary-container#000000

tertiary#ff6b35

on-tertiary#ffffff

tertiary-container#ffb399

on-tertiary-container#151f27

error#d32f2f

on-error#ffffff

error-container#ffcdd2

on-error-container#b71c1c

primary-fixed#1a5ae8

primary-fixed-dim#0342d5

on-primary-fixed#ffffff

on-primary-fixed-variant#eff3f6

secondary-fixed#ffc857

secondary-fixed-dim#f9a825

on-secondary-fixed#151f27

on-secondary-fixed-variant#505050

tertiary-fixed#ffb399

tertiary-fixed-dim#ff6b35

on-tertiary-fixed#151f27

on-tertiary-fixed-variant#ffffff

background#eff3f6

on-background#151f27

surface-variant#e9ecef

Typography

display: fontFamily: Open Sans · fontSize: 79px · fontWeight: 900 · lineHeight: 85px · letterSpacing: -0.055em
headline-lg: fontFamily: Open Sans · fontSize: 56px · fontWeight: 900 · lineHeight: 62px · letterSpacing: -0.04em
headline-md: fontFamily: Open Sans · fontSize: 40px · fontWeight: 900 · lineHeight: 44px · letterSpacing: -0.035em
title-lg: fontFamily: Open Sans · fontSize: 28px · fontWeight: 900 · lineHeight: 32px · letterSpacing: -0.03em
body-lg: fontFamily: Open Sans · fontSize: 20px · fontWeight: 600 · lineHeight: 28px · letterSpacing: 0em
body-md: fontFamily: Open Sans · fontSize: 16px · fontWeight: 500 · lineHeight: 24px · letterSpacing: 0em
label-md: fontFamily: Open Sans · fontSize: 14px · fontWeight: 800 · lineHeight: 20px · letterSpacing: 0.05em
label-sm: fontFamily: Open Sans · fontSize: 12px · fontWeight: 800 · lineHeight: 16px · letterSpacing: 0.08em

Design guidance

Overview

Clever Clouds is a digital growth and creative agency operating under a bold, confidence-driven aesthetic rooted in **Geometric Brutalism with Energetic Accents**. The brand personality channels a direct, no-nonsense approach to strategy, content, video, and SEO—delivered through uppercase typography, sharp 90-degree angles, and a striking cobalt-and-orange color collision. The UI evokes clarity and decisiveness: every element is intentional, every interaction is tactile (via 4–6px offset shadows), and every headline commands attention through weight (900) and scale (clamp 3rem–6.5rem). The emotional response is energetic yet grounded—users feel the agency's confidence without experiencing chaos. Voice: direct, action-oriented, never corporate. Example: 'Strategy, content, video, and search working together to turn attention into lasting brand growth.'

Colors

The color system operates on a **high-contrast, decision-driven model** where primary (#0342d5 cobalt) and secondary (#f9a825 orange) are never neutral—they are always active, always pushing the viewer toward action. Primary (rgb(3, 66, 213)) anchors headlines, CTAs, and structural elements; it appears in 79px display text, button backgrounds, and the 'About' section's full-bleed background. Secondary (rgb(249, 168, 37)) is the accent of emphasis: it highlights the word 'amazing' in the hero (with a 5px 5px 0 offset shadow in primary), runs the marquee strip with 3px top/bottom borders, and appears as the hover state for all primary buttons (transitioning via box-shadow: 6px 6px 0 rgb(3, 66, 213)). Surface (#eff3f6 cool white) provides breathing room; it is never pure white (#ffffff is res

Typography

The type system is **hierarchical and weight-driven**, using Open Sans exclusively across all scales. Display (79px, 900 weight, -0.055em tracking) is reserved for hero headlines and section titles; it commands the viewport and sets the tone for confidence. Headline-lg (56px, 900 weight, -0.04em) and headline-md (40px, 900 weight, -0.035em) are used for section headings and card titles, maintaining the uppercase aesthetic. Body-lg (20px, 600 weight) is used for intro paragraphs and supporting copy; body-md (16px, 500 weight, 24px line-height) is the standard reading size for all body text. Label-md (14px, 800 weight, 0.05em tracking) and label-sm (12px, 800 weight, 0.08em tracking) are used for buttons, badges, and metadata—always uppercase, always letter-spaced. The type pairing communica

Layout

The page rhythm follows a **12-column fluid grid** with a max-width of 1280px (1024px on tablet, 960px on mobile). Sections use semantic spacing: lg (40px) for section separation, md (24px) for component padding, and sm (12px) for internal element gaps. The hero section uses a two-column grid (1.4fr / 0.7fr on desktop, collapsing to single column on mobile) with clamp(2rem, 6vw, 7rem) gap, allowing the headline to breathe while the CTA and intro text sit alongside the 3D character. The about section spans full width with a blue background, using clamp(6rem, 9vw, 10rem) vertical padding and clamp(1.5rem, 5vw, 5rem) horizontal padding—this creates a responsive container that scales with viewport. Service items use a 3-column grid (auto / 1fr / auto) for number, copy, and icon, with clamp(2.5

Elevation & Depth

Depth is achieved through **offset shadows and border weight**, not blur or transparency. The primary elevation model uses four levels: (1) Flat surfaces (cards, buttons) sit on the base with no shadow; (2) Hover/active states introduce a 4px 4px 0 offset shadow in the secondary color (box-shadow: 4px 4px 0 rgb(249, 168, 37)), creating a tactile 'lift' effect; (3) Focus states add a 3px solid outline in the secondary color with 4px offset (outline: 3px solid rgb(249, 168, 37), outline-offset: 4px); (4) Expanded hover states (on buttons and list items) scale the shadow to 6px 6px 0 and translat

Shapes

The design system embraces **Geometric Brutalism with Zero Radius**—all components use border-radius: 0px, creating sharp, uncompromising edges that reinforce confidence and clarity. Buttons, cards, inputs, and badges are all rectangular with 2px solid borders. The only exception is the accent highlight (the orange box around 'amazing' in the hero), which uses a -1deg rotation and 5px 5px 0 offset shadow to introduce subtle organic movement—this rotation is applied via CSS transform: rotate(-1deg) and serves as a visual 'wink' that humanizes the otherwise rigid aesthetic. Service icons use 2px

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses a 56px height, 17.6px 32px padding, 2px solid border in primary (#0342d5), and a 4px 4px 0 offset shadow in secondary (#f9a825). Text is label-md (14px, 800 weight, 0.05em tracking, uppercase). On hover (via @media (hover: hover)), the background transitions to secondary, the border becomes secondary, the shadow expands to 6px 6px 0 in primary, and the element translates -2px -2px (transition: all 0.16s ease). Focus-visible adds a 3px solid outline in secondary with 4px offset. Active state applies transform: translateY(1px) scale(0.98) for tactile feedback. **button-secondary** is identical but with transparent background and primary text; on hover, it gains a surface-container-high background. All bu

---
version: alpha
name: Clever Clouds
description: >-
  A digital growth and creative agency blending bold cobalt branding with energetic orange accents, delivering strategy,
  content, video, and SEO through a confident, uppercase-driven visual language.
logo:
  src: https://cleverclouds.in/logo-white.svg
colors:
  surface: '#eff3f6'
  surface-dim: '#e9ecef'
  surface-bright: '#ffffff'
  surface-container-lowest: '#f8f9fa'
  surface-container-low: '#f0f9fa'
  surface-container: '#e9ecef'
  surface-container-high: '#d0d0d0'
  surface-container-highest: '#c0c0c0'
  on-surface: '#151f27'
  on-surface-variant: '#505050'
  inverse-surface: '#151f27'
  inverse-on-surface: '#eff3f6'
  outline: '#666666'
  outline-variant: '#d0d0d0'
  surface-tint: '#0342d5'
  primary: '#0342d5'
  on-primary: '#eff3f6'
  primary-container: '#1a5ae8'
  on-primary-container: '#ffffff'
  inverse-primary: '#f9a825'
  secondary: '#f9a825'
  on-secondary: '#151f27'
  secondary-container: '#ffc857'
  on-secondary-container: '#000000'
  tertiary: '#ff6b35'
  on-tertiary: '#ffffff'
  tertiary-container: '#ffb399'
  on-tertiary-container: '#151f27'
  error: '#d32f2f'
  on-error: '#ffffff'
  error-container: '#ffcdd2'
  on-error-container: '#b71c1c'
  primary-fixed: '#1a5ae8'
  primary-fixed-dim: '#0342d5'
  on-primary-fixed: '#ffffff'
  on-primary-fixed-variant: '#eff3f6'
  secondary-fixed: '#ffc857'
  secondary-fixed-dim: '#f9a825'
  on-secondary-fixed: '#151f27'
  on-secondary-fixed-variant: '#505050'
  tertiary-fixed: '#ffb399'
  tertiary-fixed-dim: '#ff6b35'
  on-tertiary-fixed: '#151f27'
  on-tertiary-fixed-variant: '#ffffff'
  background: '#eff3f6'
  on-background: '#151f27'
  surface-variant: '#e9ecef'
typography:
  display:
    fontFamily: Open Sans
    fontSize: 79px
    fontWeight: '900'
    lineHeight: 85px
    letterSpacing: '-0.055em'
  headline-lg:
    fontFamily: Open Sans
    fontSize: 56px
    fontWeight: '900'
    lineHeight: 62px
    letterSpacing: '-0.04em'
  headline-md:
    fontFamily: Open Sans
    fontSize: 40px
    fontWeight: '900'
    lineHeight: 44px
    letterSpacing: '-0.035em'
  title-lg:
    fontFamily: Open Sans
    fontSize: 28px
    fontWeight: '900'
    lineHeight: 32px
    letterSpacing: '-0.03em'
  body-lg:
    fontFamily: Open Sans
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
    letterSpacing: 0em
  body-md:
    fontFamily: Open Sans
    fontSize: 16px
    fontWeight: '500'
    lineHeight: 24px
    letterSpacing: 0em
  label-md:
    fontFamily: Open Sans
    fontSize: 14px
    fontWeight: '800'
    lineHeight: 20px
    letterSpacing: 0.05em
  label-sm:
    fontFamily: Open Sans
    fontSize: 12px
    fontWeight: '800'
    lineHeight: 16px
    letterSpacing: 0.08em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1280px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.06)
  md: 0 3px 8px rgba(0, 0, 0, 0.15)
  lg: 4px 4px 0 rgba(3, 66, 213, 0.8)
layout:
  containerMaxWidth: 1280px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: 0px
    padding: 17.6px 32px
    height: 56px
    border: 2px solid {colors.primary}
    boxShadow: 4px 4px 0 {colors.secondary}
  button-primary-hover:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-secondary}'
    border: 2px solid {colors.secondary}
    boxShadow: 6px 6px 0 {colors.primary}
    transform: translate(-2px, -2px)
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.primary}'
    typography: '{typography.label-md}'
    rounded: 0px
    padding: 14.4px 20px
    height: 48px
    border: 2px solid {colors.primary}
    boxShadow: none
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
    border: 2px solid {colors.primary}
  card:
    backgroundColor: '{colors.surface}'
    rounded: 0px
    padding: 48px 24px
    border: none
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
    boxShadow: '{elevation.md}'
  input-field:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: 0px
    padding: 24px 8px
    borderBottom: 2px solid {colors.primary}
    border: none
  input-field-focus:
    borderBottom: 2px solid {colors.secondary}
    outline: 3px solid {colors.secondary}
    outlineOffset: 4px
  badge:
    backgroundColor: rgba(249, 168, 37, 0.15)
    textColor: '{colors.secondary}'
    typography: '{typography.label-sm}'
    rounded: 0px
    padding: 7.2px 17.6px
    border: 2px solid {colors.secondary}
  list-item:
    backgroundColor: '{colors.surface}'
    rounded: 0px
    padding: 40px 32px
    border: 2px solid {colors.primary}
    borderTop: 2px solid {colors.primary}
  list-item-hover:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    transform: none
    boxShadow: '{elevation.md}'
  marquee-strip:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-secondary}'
    typography: '{typography.headline-md}'
    padding: 20px 0
    borderTop: 3px solid {colors.on-secondary}
    borderBottom: 3px solid {colors.on-secondary}
  accent-highlight:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-secondary}'
    padding: 0.08em 0.22em
    transform: rotate(-1deg)
    boxShadow: 5px 5px 0 {colors.primary}
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Buttons are the primary interaction pattern. **button-primary** uses a 56px height, 17.6px 32px padding, 2px solid border in primary (#0342d5), and a 4px 4px 0 offset shadow in secondary (#f9a825). Text is label-md (14px, 800 weight, 0.05em tracking, uppercase). On hover (via @media (hover: hover)), the background transitions to secondary, the border becomes secondary, the shadow expands to 6px 6px 0 in primary, and the element translates -2px -2px (transition: all 0.16s ease). Focus-visible adds a 3px solid outline in secondary with 4px offset. Active state applies transform: translateY(1px) scale(0.98) for tactile feedback. **button-secondary** is identical but with transparent background and primary text; on hover, it gains a surface-container-high background. All bu

Edit, then copy or download.