Егор Котилевский

Generated Oct 21, 2026

DESIGN.md for pelby.ru

pelby.ru10 colors5 componentsHeliosBlackC + Comfortaa

Remix

12 screenshots captured· pelby.ru

1 / 12 · Открытие ресторанного бизнеса «под ключ» - Pelby · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Pelby
description: |
  Pelby's design system projects a bold, contemporary energy rooted in
  professional expertise paired with approachable warmth. The visual identity
  balances a vibrant saturated blue (#191BDF) as the dominant structural color
  with a striking orange accent (#FE6807) that energizes calls-to-action and key
  moments. The typography is commanding—large, uppercase display faces dominate
  hero sections and major headings, creating immediate hierarchy and confidence.
  The palette is deliberately achromatic in its neutral foundation (#E4E3E4,
  #000000), allowing the brand accent and deep blue to take narrative control.
  Interaction and depth emerge through color shifts and strategic opacity
  changes rather than shadows, lending the system a flat-yet-layered,
  digital-native character. The overall impression is bold, forward-thinking,
  and distinctly modern—suitable for a premium hospitality technology partner.
source:
  url: "https://pelby.ru/"
  pagesAnalyzed: 6
  extractedAt: 2026-10-21
  tokensMeasured: true
colors:
  primary: "#FFFFFF"
  accent: "#FE6807"
  link: "#E74516"
  canvas: "#E4E3E4"
  surface: "#191BDF"
  on-primary: "#222222"
  ink: "#000000"
  body: "#FFFFFF"
  accent-1: "#A0A7BE"
  neutral-1: "#BDBCBD"
  neutral-2: "#EFEFEF"
typography:
  display-xl:
    fontFamily: Comfortaa
    fontSize: 80px
    fontWeight: 300
    lineHeight: 1.11
    letterSpacing: 0px
    textTransform: uppercase
  display-lg:
    fontFamily: HeliosBlackC
    fontSize: 50px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
    textTransform: uppercase
  display-md:
    fontFamily: HeliosBlackC
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0px
    textTransform: uppercase
  heading-md:
    fontFamily: HeliosBlackC
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
    textTransform: uppercase
  heading-sm:
    fontFamily: Manrope
    fontSize: 30px
    fontWeight: 400
    lineHeight: 0.72
    letterSpacing: 0px
  heading-xs:
    fontFamily: HeliosBlackC
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  body-lg:
    fontFamily: Manrope
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  body-lg-2:
    fontFamily: Manrope
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.24px
  body-lg-strong:
    fontFamily: Manrope
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  body-md:
    fontFamily: Comfortaa
    fontSize: 16px
    fontWeight: 400
    letterSpacing: 0px
  body-sm:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  body-sm-comfortaa:
    fontFamily: Comfortaa
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  button-sm:
    fontFamily: Comfortaa
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0px
  button-xs:
    fontFamily: Arial
    fontSize: 13.3333px
    fontWeight: 400
    letterSpacing: 0px
  label-sm:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0.28px
  label-xs:
    fontFamily: Comfortaa
    fontSize: 12px
    fontWeight: 300
    lineHeight: 1.33
    letterSpacing: 0.24px
  caption-sm:
    fontFamily: Arial
    fontSize: 12px
    fontWeight: 400
    lineHeight: 2
    letterSpacing: 0px
  caption-sm-verdana:
    fontFamily: Verdana
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.17
    letterSpacing: 0px
  caption-sm-strong:
    fontFamily: Comfortaa
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0px
  caption-xs:
    fontFamily: Verdana
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.27
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 24px
  sm: 35px
  md: 40px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  section: 60px
  band: 80px
borderWidths:
  thin: 1px
elevationStrategy: color-blocking
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#E4E3E4"
    surface: "#191BDF"
    surfaceRaised: "#181AD6"
    text: "#000000"
    textMuted: "#FFFFFF"
    border: "#C9C8C9"
    accent: "#DB5701"
    accentFg: "#000000"
    focusRing: "#FE6807"
    elevation: shadow
  dark:
    bg: "#150E0A"
    surface: "#231C19"
    surfaceRaised: "#2F2925"
    text: "#FFF9F5"
    textMuted: "#A6A09C"
    border: "#3A3531"
    accent: "#FE6807"
    accentFg: "#0B0B0C"
    focusRing: "#FE6807"
    elevation: "border+surface"
  contrastFailures:
    - "light: muted on bg = 1.28:1 (needs 4.5:1)"
    - "light: text on surface = 2.26:1 (needs 4.5:1)"
gradients:
  - context: section
    kind: linear
    value: "linear-gradient(0deg, rgb(241, 137, 23) 42.56%, rgb(231, 64, 31) 113.31%)"
  - context: section
    kind: linear
    value: "linear-gradient(0deg, rgb(231, 64, 31) 42.56%, rgb(241, 137, 23) 113.31%)"
  - context: section
    kind: linear
    value: "linear-gradient(0deg, rgb(25, 27, 223) 10%, rgba(39, 50, 107, 0) 20%), url(\"https://pelby.ru/themes/pelby/assets/img/home/background.png\")"
  - context: hero
    kind: linear
    value: "linear-gradient(0deg, rgb(231, 64, 31) 42.56%, rgb(241, 137, 23) 113.31%)"
components:
  button-filled:
    typography: "{typography.button-sm}"
    textColor: "{colors.accent}"
    border: "1px solid {colors.accent}"
    height: 70px
    rounded: 50px
    backgroundColor: "{colors.accent}"
  button-filled-2:
    typography: "{typography.button-xs}"
    textColor: "{colors.body}"
    border: "1px solid {colors.accent}"
    height: 70px
    padding: "10px 30px 10px 30px"
    rounded: "{rounded.md}"
    backgroundColor: "{colors.accent}"
  button-icon:
    typography: "{typography.button-sm}"
    textColor: "{colors.accent}"
    border: "1px solid {colors.accent}"
    height: 70px
    padding: "14px 20px 14px 20px"
    rounded: 70px
    backgroundColor: "{colors.accent}"
  button-icon-2:
    typography: "{typography.button-xs}"
    textColor: "{colors.accent}"
    border: "1px solid {colors.accent}"
    height: 70px
    padding: "1px 6px 1px 6px"
    rounded: "50%"
    backgroundColor: "{colors.primary}"
  card:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.surface}"
    padding: "60px 60px 60px 60px"
    rounded: "{rounded.md}"
    backgroundColor: "rgba(228, 227, 228, 0.01)"
  card-sm:
    typography: "{typography.body-md}"
    textColor: "{colors.surface}"
    backgroundColor: "{colors.primary}"
  navigation:
    textColor: "{colors.ink}"
    height: 24px
    fontSize: 14px
    fontFamily: Comfortaa
    fontWeight: 400
  footer:
    typography: "{typography.body-md}"
    textColor: "{colors.neutral-1}"
    border: "1px solid rgba(228, 227, 228, 0.2)"
    padding: "40px 0px 40px 0px"
    backgroundColor: "{colors.surface}"
  link:
    typography: "{typography.body-md}"
    textColor: "{colors.surface}"
  link-sm:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
    border: "1px solid {colors.accent}"
    rounded: "50%"
    backgroundColor: "{colors.accent}"
states:
  link-hover:
    target: link
    state: hover
    textDecoration: none
  input-focus-visible:
    target: input
    state: focus-visible
    outline: none
  input-focus:
    target: input
    state: focus
    backgroundColor: "rgb(75, 64, 149)"
  button-disabled:
    target: button
    state: disabled
    opacity: 0.6
  other-hover:
    target: other
    state: hover
    opacity: 1
    transform: "translateX(50%)"
  button-hover:
    target: button
    state: hover
    textColor: "rgba(228, 227, 228, 0.85)"
  other-focus:
    target: other
    state: focus
    outline: none
    borderColor: currentcolor
    borderWidth: medium
  button-focus:
    target: button
    state: focus
    outline: none
  button-focus-visible:
    target: button
    state: focus-visible
    outline: none
  other-focus-visible:
    target: other
    state: focus-visible
    outline: none
  button-active:
    target: button
    state: active
    backgroundColor: "rgb(243, 241, 237)"
  other-active:
    target: other
    state: active
    backgroundColor: "rgb(243, 241, 237)"
breakpoints:
  - width: 375
    containerWidth: 355
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 28
    bodyPx: 16
    sectionPaddingX: 20
  - width: 768
    containerWidth: 748
    gridColumns: 1
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 50
    bodyPx: 16
    sectionPaddingX: 20
  - width: 1024
    containerWidth: 984
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 50
    bodyPx: 16
    sectionPaddingX: 20
  - width: 1280
    containerWidth: 1080
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 50
    bodyPx: 16
    sectionPaddingX: 20
  - width: 1440
    containerWidth: 1320
    gridColumns: 2
    navLinksVisible: 4
    menuToggleVisible: false
    headingPx: 50
    bodyPx: 16
    sectionPaddingX: 20
coverage:
  statesFound: 56
  gradientsFound: 4
  rolesUnassigned: 3
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Pelby

1. Visual Theme & Atmosphere

Pelby's design system projects a bold, contemporary energy rooted in professional expertise paired with approachable warmth. The visual identity balances a vibrant saturated blue ({colors.surface} — #191BDF) as the dominant structural color with a striking orange accent ({colors.accent} — #FE6807) that energizes calls-to-action and key moments. The typography is commanding—large, uppercase display faces dominate hero sections and major headings, creating immediate hierarchy and confidence. The palette is deliberately achromatic in its neutral foundation ({colors.canvas} — #E4E3E4, {colors.ink} — #000000), allowing the brand accent and deep blue to take narrative control. Interaction and depth emerge through color shifts and strategic opacity changes rather than shadows, lending the system a flat-yet-layered, digital-native character. The overall impression is bold, forward-thinking, and distinctly modern—suitable for a premium hospitality technology partner.

Key Characteristics

Vibrant, saturated color blocking (deep blue surface, bright orange accents)
Large, uppercase display typography with commanding presence
Minimal shadow usage; depth achieved through color and opacity
Pill-shaped and rounded interactive elements signaling contemporary design
Flat aesthetic with strategic layering through opacity and color fields
Professional yet energetic—suitable for B2B service positioning

2. Color Palette & Roles

Primary

Brand Accent ({colors.accent} — #FE6807): Primary call-to-action fill, button states, link accents, and brand-defining highlights throughout interfaces. Used to draw attention to key interactions.
Primary / Brand ({colors.primary} — #FFFFFF): Body copy, primary text content, and active state indicators. Acts as the system's neutral workhorse for readability.

Accent Colors

Link Accent ({colors.link} — #E74516): Inline hyperlink color, slightly deeper than the primary brand accent to provide additional tonal variation for content links.
Decorative Accent ({colors.accent-1} — #A0A7BE): No measured semantic role; used as a decorative or supplementary accent in non-critical UI moments.

Interactive & Surface

Surface ({colors.surface} — #191BDF): Deep blue backdrop for primary sections, footers, and full-width bands. Acts as the structural backbone for major layout areas.
On Primary ({colors.on-primary} — #222222): Label text and descriptions on brand-colored surfaces, providing controlled contrast against blue and accent tones.

Neutral Scale

Canvas ({colors.canvas} — #E4E3E4): Default page background, establishing the light neutral foundation.
Ink ({colors.ink} — #000000): Primary heading and display text color, delivering maximum contrast and readability.
Neutral Decorative ({colors.neutral-1} — #BDBCBD): Supporting neutral; role not systematically defined; used for tertiary text or decorative borders.
Neutral Light ({colors.neutral-2} — #EFEFEF): Very light neutral; role not systematically defined; may appear in subtle backgrounds or borders.

3. Typography Rules

Font Family

Display & Headings: HeliosBlackC, supplemented by Comfortaa for display scales.
Fallback stack: HeliosBlackC, Comfortaa, sans-serif

Body & UI: Manrope for body text; Comfortaa for buttons and labels; Arial and Verdana for captions.
Fallback stack: Manrope, Comfortaa, Arial, Verdana, sans-serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XL	Comfortaa	80px	300	1.11	0px	Uppercase display, maximum presence
Display LG	HeliosBlackC	50px	400	1.2	0px	Uppercase hero & section titles
Display MD	HeliosBlackC	40px	300	1.2	0px	Uppercase major headings
Heading MD	HeliosBlackC	34px	400	1.2	0px	Uppercase section headers
Heading SM	HeliosBlackC	30px	400	0.72	0px	Compact uppercase headings
Heading XS	HeliosBlackC	24px	400	1.2	0px	Small uppercase headings
Body LG Strong	Manrope	18px	700	1.2	0px	Emphasized body text
Body LG	Manrope	18px	400	1.2	0px	Primary body copy
Body LG (variant)	Manrope	18px	400	1.2	0.24px	Body with tracking
Body MD	Comfortaa	16px	400	—	0px	Standard medium body text
Body SM	Manrope	14px	500	1.43	0px	Secondary body text
Body SM (Comfortaa)	Comfortaa	14px	500	1.43	0px	Secondary body in comfort font
Button SM	Comfortaa	14px	700	1.43	0px	Button label, bold
Button XS	Arial	13.33px	400	—	0px	Compact button text
Label SM	Comfortaa	14px	500	1.43	0.28px	Input label with tracking
Label XS	Comfortaa	12px	300	1.33	0.24px	Small label text
Caption SM	Comfortaa	12px	700	1.33	0px	Bold caption
Caption SM (Arial)	Arial	12px	400	2	0px	Caption in Arial
Caption SM (Verdana)	Verdana	12px	400	1.17	0px	Caption in Verdana
Caption XS	Verdana	11px	400	1.27	0px	Smallest caption text

Principles

Display-first hierarchy: Large, bold headlines dominate layouts, establishing instant visual priority. Uppercase presentation reinforces confidence and modernity.
Manrope for body: Clean, spacious sans-serif ensures body text remains legible and contemporary across screen sizes.
Tracking as expression: Letter-spacing is applied selectively (labels, body variants) to signal hierarchy and maintain visual rhythm.
Weight contrast: Bold weights (700) are reserved for buttons, labels, and emphasized text; regular weights (300–400) establish visual calm.
Line-height efficiency: Most scales use 1.2 line-height for compact, energetic spacing; body text at 1.43 ensures comfort for longer reads.

4. Component Stylings

Buttons

Filled Primary

Background: {colors.accent} (#FE6807)
Text color: {colors.primary} (#FFFFFF)
Font: Comfortaa, 14px, weight 700, line-height 20px
Padding: 0px 0px 0px 0px
Border: 1px solid {colors.accent} (#FE6807)
Border-radius: {rounded.full} (50px / pill shape)
Width: 337px
Height: 70px
Box-shadow: none
Hover: Text color and border shift to a lighter or darker variant per system state

Filled Secondary

Background: {colors.accent} (#FE6807)
Text color: {colors.primary} (#FFFFFF)
Font: Arial, 13.33px, weight 400
Padding: 10px 30px 10px 30px
Border: 1px solid {colors.accent} (#FE6807)
Border-radius: {rounded.md} (40px)
Width: 116.53px
Height: 70px
Box-shadow: none

Icon Button (Filled)

Background: {colors.accent} (#FE6807)
Text color: {colors.accent} (#FE6807)
Font: Comfortaa, 14px, weight 700, line-height 20px
Padding: 14px 20px 14px 20px
Border: 1px solid {colors.accent} (#FE6807)
Border-radius: {rounded.full} (70px)
Width: 70px
Height: 70px
Box-shadow: none

Icon Button (Outline)

Background: {colors.primary} (#FFFFFF)
Text color: {colors.accent} (#FE6807)
Font: Arial, 13.33px, weight 400
Padding: 1px 6px 1px 6px
Border: 1px solid {colors.accent} (#FE6807)
Border-radius: 50%
Width: 70px
Height: 70px
Box-shadow: none

Cards & Containers

Default Card

Background: rgba(228, 227, 228, 0.01) (near-transparent light neutral)
Text color: {colors.ink} (#000000)
Font: Comfortaa, 16px, weight 400
Padding: 60px 60px 60px 60px ({spacing.section})
Border: 1px solid {colors.surface} (#191BDF)
Border-radius: {rounded.md} (40px)
Width: 413.33px
Height: 358.77px
Box-shadow: none

Small Card

Background: {colors.primary} (#FFFFFF)
Text color: {colors.surface} (#191BDF)
Font: Comfortaa, 16px, weight 400
Padding: 0px 0px 0px 0px
Border: none
Border-radius: 0px 0px {rounded.sm} (40px, 40px, 20px, 20px)
Width: 305px
Height: 305px
Box-shadow: none

Inputs & Forms

Input Focus State

Background (on focus): rgb(75, 64, 149) (slightly desaturated blue)
Text color (on focus): {colors.canvas} (#E4E3E4)
Outline: none (explicitly removed)

Input Label

Font: Comfortaa, 14px, weight 500, line-height 1.43, letter-spacing 0.28px
Border-radius: {rounded.sm} (35px)

Navigation

Default Navigation

Background: transparent
Text color: {colors.ink} (#000000)
Font: Comfortaa, 14px, weight 400
Padding: 0px 0px 0px 0px
Border: none
Border-radius: {rounded.none} (0px)
Width: 341px
Height: 24px
Box-shadow: none

Footer

Default Footer

Background: {colors.surface} (#191BDF)
Text color: {colors.neutral-1} (#BDBCBD)
Font: Comfortaa, 16px, weight 400
Padding: 40px 0px 40px 0px ({spacing.xxxl} vertical)
Border: 1px solid rgba(228, 227, 228, 0.2)
Border-radius: {rounded.none} (0px)
Width: 1440px
Height: 421px (default) / 414px (small variant)
Box-shadow: none

5. Layout Principles

Spacing System

The spacing scale is built on a base unit of 4px and expands in consistent increments:

{spacing.xxs} = 4px — micro-spacing for icon-text gaps, tight component padding
{spacing.xs} = 8px — small spacing between related elements
{spacing.sm} = 12px — standard internal padding for compact components
{spacing.md} = 16px — default padding for cards, sections, and general spacing
{spacing.lg} = 20px — generous padding for more airy components
{spacing.xl} = 24px — prominent vertical/horizontal spacing between major groups
{spacing.xxl} = 32px — large spacing for section breaks and padding
{spacing.xxxl} = 40px — footer and major container padding
{spacing.section} = 60px — internal padding for large content containers
{spacing.band} = 80px — spacing for full-width section bands and major layout blocks

Usage Context: Cards use {spacing.section} (60px) as internal padding; footers use {spacing.xxxl} (40px); buttons use 0px padding (fixed dimensions). Spacing between sections typically applies {spacing.band} or {spacing.section} as margin or padding-bottom.

Grid & Container

Max Width: 1440px at desktop (1280px, 1024px, 768px, 375px breakpoints)
Content Column: Approximately 1080–1320px available for content, depending on viewport
Grid Columns:
- 375px (mobile): 1 column layout
- 768px (tablet): 1 column layout
- 1024px (small desktop): 2 column layout (measured)
- 1280px (desktop): 2 column layout
- 1440px (large desktop): 2 column layout with all nav links visible
Section Padding: 20px horizontal on all breakpoints

Strategy: Single-column layouts dominate at mobile and tablet; at 1024px and above, a two-column structure emerges for card grids and multi-element sections. Container widths expand in discrete steps aligned to viewport breakpoints.

Whitespace Philosophy

The system prioritizes breathing room through generous section spacing and internal card padding. Major layout sections are separated by {spacing.band} (80px) to create clear visual hierarchy and guide the eye through content. Cards maintain large internal padding ({spacing.section} — 60px) to prevent crowding. Typography uses ample line-height (1.2–1.43) to ensure text remains comfortable. The overall effect is open, premium, and unhurried—befitting a professional service brand.

Border Radius Scale

{rounded.none} = 0px — cards, footers, navigation (sharp, architectural feel)
{rounded.xs} = 24px — modal and overlay containers (subtle rounding)
{rounded.sm} = 35px — input fields and supplementary containers
{rounded.md} = 40px — cards, larger containers (moderate curve)
{rounded.full} = 9999px — buttons, icon buttons, pill-shaped links (maximum roundness)

Component Application:

Buttons: {rounded.full} (pill shape, all buttons)
Cards: {rounded.md} (40px) or {rounded.none} (sharp) depending on variant
Inputs: {rounded.sm} (35px)
Modals: {rounded.xs} (24px)
Navigation: {rounded.none} (0px, sharp)
Footer: {rounded.none} (0px, sharp)

Border Widths

Thin = 1px — Used on button borders, card borders, footer borders. Provides subtle definition without visual weight.

6. Depth & Elevation

Level	Treatment	Use
Base (no elevation)	No shadow; flat color block	Default card, button, navigation backgrounds
Overlay	Color block with opacity adjustment (0.6–0.7)	Disabled states, hover transitions
Interactive (hover)	Color shift or opacity increase	Button hover, interactive link states

Shadow Philosophy: The Pelby system uses color blocking rather than shadows to establish depth. Elevation is communicated through:

Surface color changes — Deep blue ({colors.surface} — #191BDF) establishes spatial hierarchy vs. light canvas ({colors.canvas} — #E4E3E4)
Opacity shifts — Overlays and disabled states use 60–70% opacity to signal depth and interactivity
Color shift on interaction — Hover states change text or border color rather than apply shadows

This approach maintains the flat, digital-native character of the design while preserving visual layering through intentional color choices.

Opacity Levels

60% opacity (0.60) — Disabled button states, reducing visual weight while maintaining recognition
70% opacity (0.70) — Hover overlays, subtle interactive feedback without aggressive visual change

Z-index / Layering

base: 1 — Default content layer (cards, sections)
base: 2 — Elevated content layer
base: 3 — Further elevated elements
base: 4 — Modal-adjacent or overlay-adjacent layers
base: 7 — High-priority overlay layer
dropdown: 10 — Dropdown menus, popovers
dropdown: 21 — Primary modal or highest dropdown
dropdown: 22 — Highest-priority overlay (toast, alert)

7. Do's and Don'ts

Do

Use the orange accent ({colors.accent} — #FE6807) for all primary CTAs. It is the brand's energizing signal; apply it consistently to buttons, links, and key interactive moments.
Employ large, uppercase display typography for headings and hero sections. This is the system's defining visual voice—use it to establish hierarchy and confidence.
Build depth through color shifts and opacity changes, not shadows. Apply {colors.surface} (#191BDF) for major sections, adjust opacity to 0.6–0.7 for overlays, and shift hues on hover.
Maintain 60px internal padding in cards and major containers. This breathing room is essential to the premium, open aesthetic.
Use pill-shaped buttons ({rounded.full} — 50px border-radius). All buttons default to maximum roundness for a contemporary, cohesive feel.
Follow the spacing scale exactly: {spacing.md} (16px) for standard gutters, {spacing.section} (60px) for card internals, {spacing.band} (80px) for section breaks.
Stack heading hierarchy intentionally: Display LG (50px) for heroes, Heading MD (34px) for section titles, Body LG (18px) for body copy.

Don't

Do not apply shadows for elevation. The system uses color and opacity exclusively. Avoid box-shadow unless explicitly measured and included in a component variant.
Do not use accent colors sparingly. The orange ({colors.accent}) is bold by design; apply it confidently to CTAs and key moments. Avoid timid, muted application.
Do not invent new colors or semantic ramps (error, warning, success). The site does not declare these roles. Stick to the 10 extracted colors.
Do not round button corners below 50px border-radius. Buttons are pill-shaped; maintain {rounded.full}.
Do not apply inconsistent spacing within sections. Use {spacing.section} (60px) for card padding; {spacing.band} (80px) for major section breaks.
Do not mix font families arbitrarily. HeliosBlackC and Comfortaa are for display/headings; Manrope is for body. Avoid Arial/Verdana unless it is a measured caption variant.
Do not add visual clutter through decorative shadows, gradients beyond measured ones, or multiple opacity layers. Let color and whitespace do the talking.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport	Content Column	Grid Columns	Nav Links Visible	Key Changes
Mobile	375px	355px	1	0	Single column, compact heading size (28px), section padding 20px
Tablet	768px	748px	1	0	Single column maintained, heading grows to 50px, no layout change
Small Desktop	1024px	984px	2	0	Two-column grid emerges for card layouts; heading 50px maintained
Desktop	1280px	1080px	2	0	Two-column grid; full-width sections at 1280px
Large Desktop	1440px	1320px	2	4	Max width reached; all header nav links become visible; full-width sections

Collapsing Strategy:

Mobile (≤768px): Collapse multi-column grids to single column. Heading sizes reduce (28px at 375px → 50px at 768px). Section padding remains 20px. Navigation hides menu toggle (no hamburger observed).
Tablet to Desktop (768px → 1024px): Headings scale to full size (50px). Grid expands to 2 columns at 1024px+. Content column grows from 748px to 984px+.
Large Desktop (≥1440px): Content reaches max width (1320px). All navigation links appear. Full-width bands (footer, hero) span entire viewport width.

Touch Targets

Buttons: Minimum 70px height × 70px width (icon buttons); 70px height for standard CTA buttons. Ensures comfortable touch on mobile and tablet.
Links: Minimum 14px font size; {spacing.md} (16px) padding around interactive text. Icon links are 70px × 70px pill-shaped targets.
Navigation items: Minimum 24px height, spaced with {spacing.md} (16px) gutters for finger-friendly targeting.
Form inputs: Minimum 35px border-radius and adequate vertical padding to support touch interaction.

Collapsing Strategy

Single-column mobile (375px–768px): Stack all cards vertically. Reduce heading sizes below 768px. Keep section padding uniform at 20px horizontal.
Grid emergence (1024px+): Two-column card grids appear. Headings reach full display size (50px). Content column expands; section padding increases through margin adjustments.
Full-width sections: Hero bands, footers, and full-width overlays always span 100% viewport width, regardless of breakpoint.
Navigation visibility: Header nav shows text links at 1440px+; below that, presumed to toggle or collapse (no menu toggle was observed, but nav link count dropped to 0 before 1440px).

9. Agent Prompt Guide

Quick Color Reference

Primary CTA & Accents: Orange ({colors.accent} — #FE6807)
Page Background / Canvas: Light gray ({colors.canvas} — #E4E3E4)
Primary Surface / Sections: Deep Blue ({colors.surface} — #191BDF)
Heading & Primary Text: Black ({colors.ink} — #000000)
Body / Active State: White ({colors.primary} — #FFFFFF)
Link Text: Darker orange ({colors.link} — #E74516)
On-Brand Labels: Dark gray ({colors.on-primary} — #222222)
Neutral Accents: Light gray ({colors.neutral-1} — #BDBCBD); very light ({colors.neutral-2} — #EFEFEF)
Decorative: Medium-light gray ({colors.accent-1} — #A0A7BE)

Iteration Guide

Color blocking > shadows: Use color shifts and opacity (0.6–0.7) for depth. Never apply box-shadow unless explicitly extracted from a component.
All buttons are pill-shaped: Border-radius {rounded.full} (50px) on every button. Fills are #FE6807 (orange); borders are 1px solid orange.
Typography is uppercase-first: Display headings (50px+) are UPPERCASE. Body text is sentence-case (Manrope, 18px, weight 400). Buttons are bold (weight 700).
Spacing is consistent: Use {spacing.md} (16px) for general gutters, {spacing.section} (60px) for card padding, {spacing.band} (80px) for major breaks.
Responsive grid: Single column at ≤768px; two columns at 1024px+. Headings 28px at 375px, 50px at 768px+.
Card styling: Border 1px #191BDF, border-radius 40px, internal padding 60px, background near-transparent or white depending on context.
Interactive states: Hover shifts color or opacity. Disabled is 60% opacity. Focus removes outline; no visible focus ring was measured.
No semantic colors: The site has no error/warning/success palette. Use only the 10 extracted colors.

10. Known Gaps

No semantic / status color ramp: The site does not expose error, warning, success, or info colors. Do not invent these roles; if status messaging is required, work with the client to define new colors.
No interaction state data for buttons beyond hover: Active, focus, and disabled states were not fully measured across all button variants. Disabled opacity (0.6) was observed; other states may require further observation.
No shadow elevations measured: The system relies entirely on color and opacity. If shadow-based elevation is desired, it must be designed and added separately.
Decorative colors without roles: 3 colors ({colors.accent-1}, {colors.neutral-1}, {colors.neutral-2}) were extracted but have no clear semantic role. They appear in isolated components or decorative contexts. Treat them as optional accents unless use-case emerges.
Dark-mode not shipped: The extraction analyzed one theme only (light canvas, deep blue surface, orange accents). No dark-mode variant was observed or measured. If dark mode is planned, it must be separately defined.
Forms and validation not fully captured: Input focus state was measured, but error states, success validation, and form-level feedback were not observed. Extend form styling with stakeholder guidance.
Animation and micro-interaction details sparse: Hover transform values (translateX, rotate, scale) were extracted but lack timing, easing, or context. Animations require additional specification before implementation.
Surfaces behind authentication not visited: The extraction covered 6 public pages. Authenticated or gated interfaces may introduce colors, components, or patterns not reflected in this document.

tokens:

colors:
  primary:
    value: "#FFFFFF"
    description: Primary / Brand; Body copy and active states
  accent:
    value: "#FE6807"
    description: Brand accent; Primary CTA fill
  link:
    value: "#E74516"
    description: Inline link color
  accent-1:
    value: "#A0A7BE"
    description: Decorative accent (unassigned role)
  canvas:
    value: "#E4E3E4"
    description: Default page background
  surface:
    value: "#191BDF"
    description: Primary surface; card and section background
  ink:
    value: "#000000"
    description: Primary heading and text color
  on-primary:
    value: "#222222"
    description: Label text on brand surfaces
  neutral-1:
    value: "#BDBCBD"
    description: Neutral (unassigned role)
  neutral-2:
    value: "#EFEFEF"
    description: Neutral light (unassigned role)

typography:
  display-xl:
    fontFamily: Comfortaa
    fontSize: 80px
    fontWeight: 300
    lineHeight: 1.11
    letterSpacing: 0px
    textTransform: uppercase
  display-lg:
    fontFamily: HeliosBlackC
    fontSize: 50px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
    textTransform: uppercase
  display-md:
    fontFamily: HeliosBlackC
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0px
    textTransform: uppercase
  heading-md:
    fontFamily: HeliosBlackC
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
    textTransform: uppercase
  heading-sm:
    fontFamily: HeliosBlackC
    fontSize: 30px
    fontWeight: 400
    lineHeight: 0.72
    letterSpacing: 0px
  heading-xs:
    fontFamily: HeliosBlackC
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  body-lg-strong:
    fontFamily: Manrope
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  body-lg:
    fontFamily: Manrope
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  body-lg-2:
    fontFamily: Manrope
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.24px
  body-md:
    fontFamily: Comfortaa
    fontSize: 16px
    fontWeight: 400
    letterSpacing: 0px
  body-sm:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  body-sm-comfortaa:
    fontFamily: Comfortaa
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  button-sm:
    fontFamily: Comfortaa
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0px
  button-xs:
    fontFamily: Arial
    fontSize: 13.3333px
    fontWeight: 400
    letterSpacing: 0px
  label-sm:
    fontFamily: Comfortaa
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0.28px
  label-xs:
    fontFamily: Comfortaa
    fontSize: 12px
    fontWeight: 300
    lineHeight: 1.33
    letterSpacing: 0.24px
  caption-sm-strong:
    fontFamily: Comfortaa
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0px
  caption-sm:
    fontFamily: Arial
    fontSize: 12px
    fontWeight: 400
    lineHeight: 2
    letterSpacing: 0px
  caption-sm-verdana:
    fontFamily: Verdana
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.17
    letterSpacing: 0px
  caption-xs:
    fontFamily: Verdana
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.27
    letterSpacing: 0px

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  section: 60px
  band: 80px

rounded:
  none: 0px
  xs: 24px
  sm: 35px
  md: 40px
  full: 9999px

opacity:
  disabled: 0.60
  overlay: 0.70

zIndex:
  base-1: 1
  base-2: 2
  base-3: 3
  base-4: 4
  base-7: 7
  dropdown-10: 10
  dropdown-21: 21
  dropdown-22: 22

components:
  button:
    filled:
      background: "#FE6807"
      color: "#FFFFFF"
      border: "1px solid #FE6807"
      borderRadius: "50px"
      height: 70px
      width: 337px
      fontFamily: Comfortaa
      fontSize: 14px
      fontWeight: 700
      padding: 0px
  card:
    default:
      background: "rgba(228, 227, 228, 0.01)"
      color: "#000000"
      border: "1px solid #191BDF"
      borderRadius: "40px"
      padding: "60px"
  input:
    focus:
      background: "rgb(75, 64, 149)"
      color: "#E4E3E4"
      outline: none
      borderRadius: "35px"
  footer:
    default:
      background: "#191BDF"
      color: "#BDBCBD"
      border: "1px solid rgba(228, 227, 228, 0.2)"
      padding: "40px 0"

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from pelby.ru

Primary

#FFFFFF

Primary CTA, brand accent, active state; Body copy

#FE6807

Brand hue used alongside the achromatic primary

#E74516

Inline link colour

#A0A7BE

Accent / decorative

Neutral

#E4E3E4

Default page background

#191BDF

Card / panel background

#000000

Headings / primary text

#222222

Label colour on brand surfaces

#BDBCBD

Neutral

#EFEFEF

Neutral

Typography · Manrope

body18px · 400 · 21.6px

link14px · 500 · 20px

input14px · 500 · 20px

body18px · 400 · 21.6px

body18px · 700 · 21.6px

heading30px · 400 · 21.6px

h318px · 400 · 21.6px

Typography · HeliosBlackC

h150px · 400 · 60px

heading34px · 400 · 40.8px

display40px · 300 · 48px

h324px · 400 · 28.8px

h240px · 300 · 48px

body24px · 400 · 28.8px

Typography · Comfortaa

button14px · 700 · 20px

label12px · 300 · 16px

nav-link14px · 700

body16px · 400

body14px · 500 · 20px

caption12px · 700 · 16px

body16px · 700

body18px · 400 · 28px

display80px · 300 · 89px

Typography · Arial

button13.3333px · 400

caption12px · 400 · 24px

Typography · Verdana

caption11px · 400 · 14px

caption12px · 400 · 14px

Spacing

20px

12px

60px

40px

80px

16px

24px

32px

Components · 5

Remixes of pelby.ru

Latest remixes

No public remixes yet. Be the first to make one.

Remix it