# Smartclick Design System

> Deep space canvas anchored by high-contrast white typography and vibrant neon-spectrum accents.

**Source:** https://smartclick.ai | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Smartclick utilizes a "Deep Space" aesthetic, characterized by a dark indigo background `#1d113c` (tokenized as `{--bg_color}`) that serves as a high-contrast stage for pure white `#ffffff` typography and UI elements. The system is fundamentally monochrome in its functional UI, relying on `#000000` and `#ffffff` for core surfaces and text, while deploying a broad spectrum of neon accents (orange `#ee4625`, green `#65bc7b`, purple `#a425b0`) for iconography and interactive highlights. Typography is strictly **Roboto**, ranging from 14px body text to 45px display headings, maintaining a clean, technical feel against the atmospheric background.

## Signature DNA
1. **Deep Space Canvas** (The primary background is a dark, saturated indigo `#1d113c`, creating a cosmic atmosphere that makes white text and neon accents pop with high luminosity.)
2. **Neon Spectrum Accents** (A diverse palette of high-saturation colors—orange, cyan, purple, and green—are used exclusively for icons and hover states, signaling "intelligence" and "energy" without overwhelming the dark mode foundation.)
3. **Ghost UI Patterns** (Primary interactive elements like "Let's talk" buttons use transparent backgrounds with white borders, maintaining the visual depth of the background.)

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{--bg_color}` | `#1d113c` | Primary page background (Deep Indigo) | 2 | 1.0 | Computed Style |
| `{--content_bg_color}` | `#ffffff` | Primary text and icon color | 103 | 1.0 | CSS Variable |
| `{--wp--preset--color--black}` | `#000000` | Surface backgrounds and high-contrast text | 2 | 1.0 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{--wp--preset--color--awb-color-6}` | `#ee4625` | Primary brand orange; buttons and hover states | 7 | 0.6 | Declared Token |
| `{--wp--preset--color--awb-color-custom-10}` | `#65bc7b` | Success green; checklist circles and icon hovers | 3 | 0.6 | Declared Token |
| `{--a425b0}` | `#a425b0` | Accent purple; decorative borders and text | 6 | 0.6 | Computed Style |
| `{--338eb8}` | `#338eb8` | Accent blue; card borders and surface backgrounds | 8 | 0.6 | Computed Style |
| `{--feca09}` | `#feca09` | Accent yellow; decorative text and borders | 6 | 0.6 | Computed Style |

### Semantic
| Token | Hex | Role |
| :--- | :--- | :--- |
| `{--h6_typography-color}` | `#f44336` | Error / Warning (Red) |
| `{--accordian_active_color}` | `#65bc7b` | Success / Active (Green) |

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Roboto | 400, 500, 600, 700, 900 | All UI, Headings, and Body | Roboto (Google Fonts) | Apache 2.0 |
| awb-icons | 400 | UI Icons and Navigation arrows | FontAwesome | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{typography.display}` | 45px | 54px | normal | 500 | Main Hero H1 | `h1` |
| `{typography.h2}` | 40px | 60px | normal | 500 | Section Headings | `h2` |
| `{typography.h3}` | 34px | 51px | normal | 500 | Sub-section Headings | `h3` |
| `{typography.h4}` | 26px | 39px | normal | 500 | Small Headings | `h4` |
| `{typography.h5}` | 20px | 30px | normal | 500 | Feature Titles | `h5` |
| `{typography.body-lg}` | 18px | 30.6px | normal | 400 | CTA Button Text | `a.orange-btn` |
| `{typography.body}` | 17px | 28.9px | normal | 400 | Default Body Text | `section#content` |
| `{typography.caption}` | 14px | 30px | normal | 400 | Navigation / Small | `a.flex-prev` |

### Principles
1. **High Contrast Readability**: All body text is `#ffffff` on `#1d113c`, ensuring maximum legibility in a dark environment.
2. **Medium Weight Hierarchy**: Headings consistently use weight 500 (Medium) rather than Bold (700) to maintain a modern, tech-focused aesthetic.
3. **Generous Line Height**: Body text uses a 1.7x line height (28.9px for 17px font) to prevent text blocks from feeling dense against the dark background.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{spacing.xs}` | 8px | 3 |
| `{spacing.sm}` | 16px | 6 |
| `{spacing.md}` | 20px | 22 |
| `{spacing.lg}` | 48px | 8 |
| `{spacing.section}` | 110px | 5 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sharp}` | 0px | Default containers and sections | 95 occurrences |
| `{radius.card}` | 20px | Content cards and feature blocks | `radius: 20px` |
| `{radius.pill}` | 50px | Buttons and circular icon containers | `radius: 50%` |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.inset}` | `rgb(51, 142, 184) 0px 0px 1px 1px inset` | Card depth and internal borders | Observed on About page cards |

## Components

### Tier 1: Foundational

#### Ghost Button
**Role:** Primary and Secondary Actions
**Pages observed:** https://smartclick.ai, https://smartclick.ai/about
**Spec:** Background: transparent / Text: `#ffffff` / Border: 1px solid `#ffffff` / Radius: 0px / Typography: 18px Roboto
**States observed:** Default | Hover (Background: `#ee4625`, Border: `#ee4625`) | Focus: not captured

#### Icon Circle
**Role:** Feature representation
**Pages observed:** https://smartclick.ai
**Spec:** Background: transparent / Border: 1px solid `{accent-color}` / Radius: 50% / Padding: 20px
**States observed:** Default | Hover: `{--icon_circle_color_hover}` (#65bc7b)

### Tier 2: Patterns

#### Feature Card
**Role:** Service and Mission descriptions
**Pages observed:** https://smartclick.ai/about
**Spec:** Background: transparent / Text: `#ffffff` / Border: 1px solid `#ffffff` / Radius: 20px / Shadow: `{shadow.inset}`
**States observed:** Default: captured

#### Section Header
**Role:** Page structure
**Pages observed:** https://smartclick.ai, https://smartclick.ai/about
**Spec:** Text: `#ffffff` / Typography: 40px Roboto / Margin-bottom: 48px
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Smartah Bot Bubble
**Role:** Brand mascot / Chat entry
**Pages observed:** https://smartclick.ai
**Spec:** Background: `#eef0f2` / Text: `#000000` / Radius: 12px (inferred from image)
**States observed:** Default: captured

#### Social Link
**Role:** Footer navigation
**Pages observed:** https://smartclick.ai, https://smartclick.ai/about
**Spec:** Background: transparent / Border: 1px solid `#ffffff` / Radius: 50% / Icon: `#ffffff`
**States observed:** Default: captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1200px (inferred) |
| Section Padding (Vertical) | 110px |
| Column Gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; H1 reduces to 32px (estimated); padding-inline: 20px |
| Desktop | 1440px | Horizontal navigation; multi-column feature grids (3-up) |

## Do's
- Use `#ffffff` for all primary body text on dark backgrounds.
- Apply weight 500 to all headings to maintain the "Smartclick" technical voice.
- Use the neon accent palette (`#ee4625`, `#65bc7b`) exclusively for interactive signals.
- Maintain 110px vertical spacing between major homepage sections.
- Ensure all ghost buttons have a 1px solid white border in their default state.

## Don'ts
- **Wrong:** Using `#ee4625` (Orange) as the primary page background. **Right:** Use `#1d113c`. **Reason:** Orange is a functional accent, not a foundational surface.
- **Wrong:** Using black text on the deep indigo background. **Right:** Use `#ffffff`. **Reason:** Contrast ratio falls below 2:1.
- **Wrong:** Mixing serif fonts into the UI. **Right:** Stick to Roboto.
- **Wrong:** Using rounded corners on main section containers. **Right:** Keep section borders at 0px radius.

## Similar brands
- Cloudflare (Dark mode / technical aesthetic)
- Vercel (Monochrome foundation with high-voltage accents)
- DeepMind (Scientific AI aesthetic)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --bg-color: #1d113c;
  --text-primary: #ffffff;
  --accent-orange: #ee4625;
  --accent-green: #65bc7b;
  --font-main: 'Roboto', sans-serif;
  --radius-card: 20px;
  --shadow-inset: inset 0 0 1px 1px rgb(51, 142, 184);
}
```

## Agent prompt examples
- "Create a ghost button using Roboto 18px with a 1px white border on a #1d113c background."
- "Design a feature card with a 20px border radius and an inset shadow of rgb(51, 142, 184)."
- "Generate a section header using Roboto 40px weight 500 in pure white."

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://smartclick.ai | Desktop 1440px | 2026-06-06 |
| About | https://smartclick.ai/about | Desktop 1440px | 2026-06-06 |
| Mobile Home | https://smartclick.ai | Mobile 390px | 2026-06-06 |