Smilewanted — Reverse Engineered Design System

1. Brand Overview

Smilewanted doesn’t feel like a brand trying to be everything to everyone. The site has a clear, commercial energy — this is a digital advertising player, and the design language is unapologetically functional. You can tell they want to be perceived as competent, modern, and a little playful without tipping into childishness.

The vibe: grounded in dark neutrals, accented with sharp, high-energy orange (#ff8b00) and a bold yellow (#ffbd00). This orange is not just a highlight; it’s the heartbeat of interaction — buttons, CTAs, brand marks. It’s confident and saturated, which makes sense for a brand in a competitive, fast-moving industry where attention is currency.

Typography is unified under a single family — DM Sans — with weights and sizes doing all the heavy lifting for hierarchy. There’s no secondary serif for “storytelling” — this brand keeps things minimal and consistent. That decision works: it simplifies development and reinforces the sense of focus.

Layout-wise, they run an 8px spacing grid, but with a willingness to break for irregular values (3px, 5px, 7.5px). That’s a sign of a team that’s balancing strict system thinking with practical adjustments for visual balance.

Rounded corners are everywhere, but they’re not shy about variety: pill-shaped CTAs (50px radius), softly rounded cards (15px), and micro-radius badges (2px). This mix feels intentional — different corner radii map to different interaction levels.

This isn’t a flat design system. Shadows are used sparingly but strategically — mostly soft, low-opacity black for depth without distraction. Borders are subtle and neutral, often in very light grays (#f4f4f4, #ebebeb) to separate without heavy lines.

If you’re building for Smilewanted, your mental model should be: neutral foundation + vibrant action color + clean sans-serif type + consistent grid + strategic curves. Everything else flows from that.

2. Color System

2.1 Primary Colors

The undisputed primary is Orange #ff8b00. It’s everywhere actions happen: primary buttons, brand highlights, active states. Orange is high-energy and attention-seeking, but here it’s balanced by a dark neutral (#212529) and white space to avoid visual fatigue.

Secondary is Yellow #ffbd00. It’s used for alternative CTAs and accent states, less dominant but still loud. Where orange says “click me,” yellow says “notice me.”

Primary Neutral is Dark Gray #212529 — used for header backgrounds, main text in dark areas, and as the grounding tone.

2.2 Complete Palette

2.3 Color Relationships

The orange (#ff8b00) and yellow (#ffbd00) are both warm, high-chroma, and easily overpower neutrals. That’s why they’re used sparingly against large fields of #ffffff or #212529. Blue (#1863dc) appears only in interactive states (hover/focus), giving a cool counterpoint to the warm palette.

Accessibility: Orange on white passes for large text but can fail for small text in WCAG AA. The brand mitigates this by using orange as background with white text for CTAs, which has better contrast. The blue focus outline is strong against both white and dark backgrounds.

Dark mode: The palette is light-on-dark ready (#212529 base), but not fully tuned for full inversion — some neutrals would need adjusting for a true dark mode.

2.4 Usage Guide

Works:

• Orange (#ff8b00) background + white text for CTAs.
• Dark gray (#212529) text over cream (#fff6eb) backgrounds.
• Yellow (#ffbd00) for secondary CTAs where orange is already in use.

Avoid:

• Orange text on yellow — poor contrast.
• Blue focus outline on cream — low contrast.
• Using more than two warm accent colors in a single viewport — they compete.

3. Typography

3.1 Font Families

• Primary: DM Sans, fallback Arial.
  Source: Google Fonts.
  Variable font support: Yes.

• Icon font: swicon (custom icon set).

DM Sans is geometric, clean, and versatile. Weight range is used heavily — from light (400) body to bold (700) headings. No italics observed.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is built with size + weight + case. Uppercase is reserved for small navigational labels and CTAs, which makes them pop without extra color. Large headings sit in the 30–46px range, bold, with tight line heights (~1.2). Body text is comfortable at 16px/1.5, ensuring readability.

The uniform family keeps things cohesive. The risk is sameness, but they mitigate with weight and color shifts.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid, with deviations for fine-tuning.

Common values (px / rem):

• 3px (0.19rem) — hairline spacing
• 5px (0.31rem) — micro gaps
• 8px (0.50rem) — small padding
• 12px (0.75rem) — standard small
• 15px (0.94rem) — between text and icon
• 20px (1.25rem) — medium gap
• 24px (1.50rem) — primary padding
• 36px (2.25rem) — section padding
• 48px (3rem) — large section gap
• 96px (6rem) — hero spacing

4.2 Layout

Framework: Bootstrap + Vuetify.
Breakpoints (px): 576, 768, 992, 1200, 1400 (plus many fine-grain points like 425, 750).

This is a responsive system with content containers adjusting at standard Bootstrap breakpoints. Vuetify’s v- components suggest grid and spacing are handled with their spacing utilities.

5. Visual Elements

Border Radius

Variety is the theme:

• 2px — micro buttons, badges
• 5px — common for links, small divs
• 7.5px — form elements
• 10px — cards, modals
• 15px — larger cards
• 30px — top corners of sections
• 50px — pill buttons
• 80px — round icon buttons
• 150px–180px — large round containers

Mapping: small radius for utility elements, large/pill for CTAs.

Shadows

Light, diffuse shadows:

• rgba(19, 19, 19, 0.05) 0 0 20px — subtle lift
• rgba(19, 19, 19, 0.07) 0 5px 20px — slightly stronger
• Rare strong shadow: rgba(0, 0, 0, 0.3) 0 32px 68px — likely modal.

Borders

Thin, light grays (#f4f4f4, #ebebeb) for separation. Accent borders in orange for emphasis (buttons). Borders are not decorative; they’re functional.

6. Components

6.1 Buttons

Primary CTA (orange):

• Default: bg #ff8b00, text #fff, padding 8px, radius 2px, border 2px solid #ff8b00.
• Hover: text #1863dc, bg #f0f0f0, no border.
• Focus: outline 2px solid #1863dc.

Secondary CTA (white):

• Default: bg #fff, text #ff8b00, padding 9px 25px, radius 50px, border none.
• Hover: opacity 0.3, bg #f0f0f0, scale up.
• Focus: outline #1863dc, bg #bebebf.

Yellow CTA:

• Default: bg #ffbd00, text #fff, padding 14px 35px, radius 50px.
• Hover: same as white CTA.

Tab Button:

• bg #fff6eb, text #212529, padding 24px.

Quote Slider Nav:

• bg rgba(255, 139, 0, 0.1), radius 80px.

6.2 Links

• Blue (#1863dc) → orange hover.
• Black (#000) → orange hover.
• White (#fff) → orange hover.
• Gray (#bfbfbf) → orange hover.
• Orange (#ff8b00) strong — no hover color shift.

No underlines.

6.3 Forms

No text input styles in extract — likely default Vuetify/Bootstrap with 7.5px radius, 1px borders in light gray.

6.4 Cards

Radii: 10px–15px, subtle shadows, light borders. Padding aligns to 24px scale.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-gray: #212529;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-light-gray-alpha: #595959;
  --color-orange: #ff8b00;
  --color-cream: #fff6eb;
  --color-near-black: #131313;
  --color-yellow: #ffbd00;
  --color-off-white: #f5f5f7;
  --color-mid-gray: #ebebeb;
  --color-gray: #bfbfbf;
  --color-blue: #1863dc;

  /* Typography */
  --font-primary: 'DM Sans', Arial, sans-serif;
  --font-size-h1: 46.4px;
  --font-size-h1-alt: 36.8px;
  --font-size-body: 16px;
  --line-height-tight: 1.21;
  --line-height-body: 1.5;

  /* Spacing */
  --space-3: 3px;
  --space-5: 5px;
  --space-8: 8px;
  --space-12: 12px;
  --space-15: 15px;
  --space-20: 20px;
  --space-24: 24px;
  --space-36: 36px;
  --space-48: 48px;
  --space-96: 96px;

  /* Radius */
  --radius-2: 2px;
  --radius-5: 5px;
  --radius-7-5: 7.5px;
  --radius-10: 10px;
  --radius-15: 15px;
  --radius-30: 30px;
  --radius-50: 50px;
  --radius-80: 80px;

  /* Shadows */
  --shadow-soft: rgba(19, 19, 19, 0.05) 0 0 20px;
  --shadow-medium: rgba(19, 19, 19, 0.07) 0 5px 20px;
}

8. AI Coding Assistant Prompt

# Smilewanted Design System Specification

You are a Smilewanted design expert. Build UIs matching their visual language exactly.

## Brand Context
Smilewanted's design is clean, functional, and bold. Neutral darks and whites form the base, with high-energy orange and yellow accents for actions. Typography is unified under DM Sans, with a strict grid and varied corner radii mapping to component types.

## Color Palette
- Dark Gray: #212529 — Base neutral, headers, dark text
- White: #ffffff — Background, text on dark
- Black: #000000 — Icons, branding
- Light Gray Alpha: #595959 — Dividers, overlays
- Orange: #ff8b00 — Primary CTA, brand
- Cream: #fff6eb — Tab backgrounds
- Near-Black: #131313 — Hero background
- Yellow: #ffbd00 — Secondary CTA
- Off-White: #f5f5f7 — Nav link backgrounds
- Mid Gray: #ebebeb — Dividers
- Gray: #bfbfbf — Disabled text
- Blue: #1863dc — Hover/focus states

## Typography
Font family: "DM Sans", Arial, sans-serif

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 46.4px | 700 | 1.21 | Page titles |
| H1-alt | 36.8px | 700 | 1.22 | Large headings |
| Body | 16px | 400 | 1.5 | Paragraphs |
| Link uppercase | 14.4px | 700 | 1.44 | Nav labels |
| Caption | 12px | 700 | 1.6 | Small labels |

## Spacing & Grid
Base: 8px grid
Scale: 3px, 5px, 8px, 12px, 15px, 20px, 24px, 36px, 48px, 96px
Map: 24px = card padding, 48px = section gap, 8px = button padding

## Border Radius
- 2px — badges, small buttons
- 5px — small containers
- 7.5px — inputs
- 10px — cards
- 15px — larger cards
- 50px — pill CTAs
- 80px — icon buttons

## Shadows & Depth
- Soft: rgba(19, 19, 19, 0.05) 0 0 20px
- Medium: rgba(19, 19, 19, 0.07) 0 5px 20px
Use sparingly; rely on borders for separation.

## Component Specifications

### Primary Button (Orange)
Default: bg #ff8b00, color #fff, padding 8px, radius 2px, border 2px solid #ff8b00
Hover: color #1863dc, bg #f0f0f0, border none
Focus: outline 2px solid #1863dc
Active: color #1863dc, bg transparent

### Secondary Button (White)
Default: bg #fff, color #ff8b00, padding 9px 25px, radius 50px
Hover: opacity 0.3, bg #f0f0f0, scale 1.1
Focus: outline 2px solid #1863dc, bg #bebebf

### Navigation Links
Default: blue or black text, no underline
Hover: orange text

### Input Fields
Border: 1px solid #ebebeb, radius 7.5px
Focus: border-color #1863dc

### Card
Padding: 24px
Radius: 10px–15px
Shadow: soft or medium

## Layout & Responsive Rules
Max content width: Bootstrap container defaults
Breakpoints: 576, 768, 992, 1200, 1400
Mobile padding: 16px, Desktop padding: 24px

## Interaction Rules
Transition: 150ms ease for hover/focus
Focus indicator: 2px solid #1863dc

## DO
- Use only palette colors
- Maintain 8px grid
- Use DM Sans for all text
- Map radius to component type
- Keep shadows subtle

## DON'T
- Mix warm accents in same component
- Add custom colors
- Overuse shadows
- Use inconsistent corner radii

## Code Examples

### Primary Button
.btn-primary {
  background: #ff8b00;
  color: #fff;
  padding: 8px;
  border-radius: 2px;
  border: 2px solid #ff8b00;
  font-weight: 500;
  font-size: 14px;
  transition: all 150ms ease;
}
.btn-primary:hover { color: #1863dc; background: #f0f0f0; border: none; }
.btn-primary:focus { outline: 2px solid #1863dc; }

### Card
.card {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  box-shadow: rgba(19, 19, 19, 0.05) 0 0 20px;
}

### Input
.input {
  border: 1px solid #ebebeb;
  border-radius: 7.5px;
  padding: 8px;
  font-size: 16px;
}
.input:focus { border-color: #1863dc; outline: none; }

9. Summary

TL;DR — Smilewanted’s design is built on a neutral dark/white base, with high-energy orange as the primary action color, yellow as secondary. DM Sans runs the typography show, and an 8px grid keeps spacing consistent. Corner radii map to component type, and shadows are subtle.

Brand Keywords:

• bold-functional
• warm-accented
• grid-disciplined
• curve-conscious