Gdemoideti Design System Deep Dive

1. Brand Overview

Gdemoideti (gdemoideti.ru) is clearly built for parents, families, and community-minded audiences. The name translates roughly to “Where to go with children” in Russian — so the purpose is obvious: discover events, activities, and places suitable for kids. The design reflects that intent: clean, friendly, but not overly playful. This isn’t a cartoonish, primary-color overload — instead, it’s a restrained palette with a confident primary blue, crisp typography, and consistent, rounded UI elements.

The vibe: functional friendliness. They’ve avoided babyish pastels and opted for a modern web aesthetic — something that respects adults as the primary users while still feeling approachable. The primary blue (#0085ff) is energetic without being aggressive. It feels like a “trust me” color — common in tech and informational services — but here, balanced by plenty of white (#ffffff) and a deep neutral (#1b1b1b) for text. Small touches — like the hover/focus blue (#0278e4) — keep the UI feeling responsive and alive.

This is not a brand chasing visual trends — no glassmorphism, no overblown gradients. It’s a flat, clear interface. The rounded corners (12px everywhere) soften the grid, making it approachable. Buttons and links use familiar hover cues, so there’s zero learning curve. Accessibility isn’t perfect — some secondary text colors like #5d6974 might be borderline for contrast — but the main action colors are strong and clear.

Audience-wise: tech-comfortable parents, maybe in cities, who want a quick “what’s happening” dashboard. The design is structured for speed — typography is readable, spacing is generous but not wasteful, and breakpoints cover everything from 320px mobile widths up to 1768px widescreens.

Philosophy: clarity over flair. Every token in the system is functional, and there’s a tight reuse of values — evident in the consistent border radius, strict spacing multiples, and limited palette. It’s the kind of system that developers love because it’s predictable. As a designer, you’ll appreciate that nothing here feels accidental.

2. Color System

2.1 Primary Colors

The primary brand color is #0085ff (rgb(0, 133, 255)) — a vivid, mid-tone blue. This is the CTA color. It’s used for primary buttons, active states, and most interactive elements. Blue communicates trust, reliability, and clarity — ideal for a service directory. Compared to competitors in family events, which often lean yellow or red for “fun,” Gdemoideti’s blue feels more like an information platform than a toy store.

The hover/focus variant #0278e4 (rgb(2, 120, 228)) is slightly darker — keeping interaction feedback obvious without drifting too far from brand identity.

2.2 Complete Palette

(Some colors like Light Blue BG, CTA Medium Blue, etc., are embedded in component states and not listed in the top-level palette but extracted from button definitions.)

2.3 Color Relationships

Contrast-wise, #0085ff on #ffffff is WCAG AA-compliant for normal text and AAA for large text. White text on #0085ff also passes AA. The secondary gray #5d6974 on white is borderline — passes AA for large text but fails for body text (contrast ratio ~4.0:1). This is fine for captions but risky for critical info.

Dark mode? Not implemented — the palette is clearly tuned for light backgrounds. #1b1b1b is the deepest tone; there’s no near-black or extended dark palette.

2.4 Usage Guide

• Primary Blue (#0085ff): Interactive elements only — buttons, links, outlines. Don’t use for large areas or backgrounds; it’s meant to pop.
• Hover Blue (#0278e4): Interaction feedback. Keep usage to hover/focus — don’t mix into static UI.
• Deep Neutral (#1b1b1b): Main text. Keep paragraphs in this color for legibility.
• Secondary Gray (#5d6974): Use sparingly for secondary info — avoid for body text unless paired with large size.
• Avoid combining #5d6974 with #d6ebff — too low-contrast for text.

3. Typography

3.1 Font Families

Two families: Mulish for large headings, Roboto for everything else. No fallbacks declared in the extract, but typical stacks would be Mulish, sans-serif and Roboto, sans-serif. No variable fonts, no Adobe licensing — likely Google Fonts.

Mulish is a clean sans-serif with slightly rounded terminals — fits the approachable-but-modern tone. Roboto is utilitarian — perfect for UI text, labels, and paragraphs.

3.2 Type Scale

3.3 Hierarchy

Mulish at 40px is the hero title — big, tight line height for drama. The step down to 36px and 28px maintains boldness. Roboto takes over for functional text, starting at 20px for subheadings, down to 12px for captions. The hierarchy is clear: Mulish = big headings, Roboto = everything else. Line heights are tight on headings for compact blocks, looser on body for readability.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. Every value is a multiple or near-multiple of 8px, except a few odd decimals (likely from font size-based calc).

4.2 Layout

Breakpoints: 320, 330, 340, 360, 440, 600, 768, 960, 1024, 1280, 1512, 1768px. This is a granular mobile-first approach. Expect container widths to adapt fluidly — no fixed max width in extract, but 1280px+ is likely the desktop content max.

5. Visual Elements

• Border Radius: Core radius is 12px — on buttons, divs, inputs, images. This is the brand’s “corner DNA.” Secondary values: 24px (links), 25px (some div), 100% (circles/avatars).
• Shadows: None in base styles. Focus states simulate depth with box-shadow, but otherwise, it’s flat design.
• Borders: Rare — 2px solid #0085ff on inputs.

6. Components

6.1 Buttons

Primary Button (style_button__s9YDM)

• Default: bg #0085ff, text #ffffff, padding 1px 6px, radius 12px, no border.
• Hover: bg #f7fbff, text #0085ff.
• Active: bg #f2f9ff, text #0085ff, transform scale(0.98).
• Focus: box-shadow rgba(0,0,0,0.1) 0 4px 12px, rgba(0,0,0,0.2) 0 0 0 2px.

Secondary Button (style_button__i6yKP)

• Default: bg #d6ebff, text #0085ff, padding 1px 6px, radius 12px.
• Hover: bg #f7fbff, text #0085ff.
• Active: bg #f2f9ff, text #0085ff, scale(0.98).
• Focus: same shadow as primary.

Tertiary Button (style_button__t78FQ)

• Default: bg #5bb0ff, text #ffffff, radius 12px, padding 0.
• Hover: bg #41a3ff, opacity 0.8.
• Active: bg #2b99ff.
• Focus: none.

6.2 Links

Four link styles:

1. Blue (#0085ff) underlined, hover removes underline and darkens to #0278e4.
2. Neutral (#1b1b1b) no underline, hover changes to #0278e4.
3. White (#ffffff) underlined, hover removes underline and turns #0278e4.
4. Gray (#5d6974) no underline, hover changes to #0278e4.

6.3 Forms

Inputs: 2px solid #0085ff border on focus (from extracted border combo). Rounded corners (12px). No shadows.

6.4 Cards

No explicit card component extracted — likely divs with 12px radius and padding from spacing scale.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-deep-neutral: #1b1b1b;
  --color-primary-blue: #0085ff;
  --color-white: #ffffff;
  --color-secondary-gray: #5d6974;
  --color-hover-blue: #0278e4;
  --color-light-blue-bg: #d6ebff;
  --color-cta-medium-blue: #5bb0ff;
  --color-hover-cta-medium: #41a3ff;
  --color-active-cta-medium: #2b99ff;
  --color-input-border-blue: #0085ff;
  --color-focus-outline-blue: #0085ff;

  /* Typography */
  --font-heading: "Mulish", sans-serif;
  --font-body: "Roboto", sans-serif;
  --font-size-h1-lg: 40px;
  --font-size-h1-md: 36px;
  --font-size-h1-sm: 28px;
  --font-size-body-lg: 20px;
  --font-size-body-md: 18px;
  --font-size-body-sm: 16px;
  --font-size-caption: 12px;
  --line-height-tight: 1.05;
  --line-height-normal: 1.39;
  --line-height-loose: 1.42;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-40: 40px;
  --space-44: 44px;
  --space-56: 56px;
  --space-80: 80px;
  --space-99: 99px;
  --space-190: 190px;

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 24px;
  --radius-lg: 25px;
  --radius-full: 100%;

  /* Borders */
  --border-input: 2px solid var(--color-primary-blue);
}

8. AI Coding Assistant Prompt

# Gdemoideti Design System Specification

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

## Brand Context
Gdemoideti is a family-oriented event discovery platform. The design prioritizes clarity, trust, and approachability. Flat design, rounded corners, and a restrained palette make the UI friendly but professional.

## Colors
- Deep Neutral: #1b1b1b — primary text
- Primary Blue: #0085ff — primary buttons, links, focus outlines
- White: #ffffff — backgrounds, text on primary
- Secondary Gray: #5d6974 — captions, muted info
- Hover Blue: #0278e4 — hover/focus states for interactive elements
- Light Blue BG: #d6ebff — secondary button background
- CTA Medium Blue: #5bb0ff — tertiary button background
- Hover CTA Medium: #41a3ff — tertiary button hover
- Active CTA Medium: #2b99ff — tertiary button active
- Input Border Blue: #0085ff — input borders
- Focus Outline Blue: #0085ff — focus rings

## Typography
- Headings: "Mulish", sans-serif
- Body/UI: "Roboto", sans-serif

| Level | Font | Size | Weight | Line Height | Use For |
|-------|------|------|--------|-------------|---------|
| H1-lg | Mulish | 40px | 700 | 1.05 | Main titles |
| H1-md | Mulish | 36px | 700 | 1.11 | Section titles |
| H1-sm | Mulish | 28px | 700 | 1.14 | Small headings |
| Body-lg | Roboto | 20px | 400 | 1.40 | Paragraphs |
| Body-md | Roboto | 18px | 400 | 1.39 | UI text |
| Link-md | Roboto | 18px | 500 | 1.39 | Emphasized links |
| Button-lg | Roboto | 18px | 500 | 1.11 | Primary buttons |
| Body-sm | Roboto | 16px | 400 | 1.15 | Secondary text |
| Button-sm | Roboto | 16px | 500 | 1.44 | Small buttons |
| Caption | Roboto | 12px | 400/500 | 1.33/1.42 | Labels, captions |

## Spacing & Grid
Base: 8px grid. Values: 1px, 2px, 8px, 10px, 12px, 13px, 14px, 16px, 20px, 22px, 24px, 40px, 44px, 56px, 80px, 99px, 190px.

## Border Radius
- sm: 12px — buttons, inputs, images
- md: 24px — links
- lg: 25px — some div blocks
- full: 100% — avatars, circular elements

## Shadows & Depth
Flat design. Shadows only in focus states:
- Focus: rgba(0,0,0,0.1) 0px 4px 12px, rgba(0,0,0,0.2) 0px 0px 0px 2px

## Component Specifications

### Primary Button
Default:
- background: #0085ff
- color: #ffffff
- padding: 1px 6px
- border-radius: 12px
- border: none
Hover:
- background: #f7fbff
- color: #0085ff
Active:
- background: #f2f9ff
- color: #0085ff
- transform: scale(0.98)
Focus:
- box-shadow: focus shadow above

### Secondary Button
Default:
- background: #d6ebff
- color: #0085ff
Hover/Active/Focus: same as primary, different default bg.

### Tertiary Button
Default: bg #5bb0ff, color #ffffff, radius 12px
Hover: bg #41a3ff, opacity 0.8
Active: bg #2b99ff

### Navigation Links
Style 1: blue underlined, hover removes underline, darkens to #0278e4.
Style 2: neutral no underline, hover to #0278e4.
Style 3: white underlined, hover removes underline, changes to #0278e4.
Style 4: gray no underline, hover to #0278e4.

### Input Fields
- border: 2px solid #0085ff
- radius: 12px
- no shadows

## Layout & Responsive Rules
Breakpoints: 320, 330, 340, 360, 440, 600, 768, 960, 1024, 1280, 1512, 1768px.

## Interaction Rules
- Transition: 150ms ease for color/background changes
- Focus: use defined box-shadow
- Active: scale(0.98) for buttons

## DO List
- Use only palette colors
- Keep spacing multiples of 8px
- Use Mulish for headings, Roboto for body/UI
- Maintain 12px radius on major UI
- Use hover/focus states exactly as defined

## DON'T List
- Invent new colors
- Use shadows outside focus states
- Mix sharp and rounded corners
- Skip hover feedback

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #0085ff;
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 18px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #f7fbff;
  color: #0085ff;
}
.btn-primary:focus {
  box-shadow: rgba(0,0,0,0.1) 0px 4px 12px,
              rgba(0,0,0,0.2) 0px 0px 0px 2px;
}
.btn-primary:active {
  background: #f2f9ff;
  transform: scale(0.98);
}
```

### Secondary Button
```css
.btn-secondary {
  background: #d6ebff;
  color: #0085ff;
  padding: 1px 6px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 16px;
  border: none;
}
```

### Input Field
```css
.input {
  border: 2px solid #0085ff;
  border-radius: 12px;
  padding: 8px;
  font-size: 16px;
}
.input:focus {
  box-shadow: rgba(0,0,0,0.1) 0px 4px 12px,
              rgba(0,0,0,0.2) 0px 0px 0px 2px;
}
```

9. Summary

TL;DR — Gdemoideti’s system is flat, consistent, and approachable. A tight palette, Mulish/Roboto type pairing, 8px grid, and universal 12px radius define the look. Interaction states are clear, buttons feel responsive, and nothing is visually accidental.

Brand Keywords:

• trust-first
• family-friendly-functional
• clean-flat
• blue-driven
• rounded-consistent