# Design Reference - All-In-One Salon
> Crisp digital ledger, with neon highlights guiding the way.

## Source
- Original site: https://glossgenius.com
- Captured: 2026-04-11T18:51:54.756Z

## Tags
- clean
- professional
- approachable
- modern
- minimalist
- vibrant-accents
- rounded-forms
- high-contrast-text
- salon-tech
- editorial-typography

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Inkwell Black | `#17150` | neutral | Primary text, headline text, dark background sections, button backgrounds. This deep near-black provides strong contrast and a sense of premium quality. |
| Cloud White | `#ffffff` | neutral | Main page background, card backgrounds, text on dark backgrounds. Dominates the canvas for a bright, open feel. |
| Porcelain Gray | `#f0f7f6` | neutral | Secondary background color for sections, card hover states, badge backgrounds. Offers a subtle variation from pure white for content differentiation. |
| Obsidian Black | `#000000` | neutral | Navigation text, icons, button outlines. Used for the sharpest contrast elements, often interactive. |
| Silver Mist | `#e2e2e2` | neutral | Subtle borders and dividers for section separation. |
| Genius Yellow | `#cccc25` | brand | Calls to Action, active state indicators. This vibrant yellow gives an immediate energetic and positive feel. |
| Genius Yellow Gradient | `#cccc25` | brand | Decorative backgrounds and possibly interactive elements, offering a subtle shift in luminescence for visual interest. |
| Sky Violet | `#9fa6ff` | accent | Promotional banners, card backgrounds, accent areas. This vivid violet provides a playful, modern contrast to the muted neutrals. |
| Sky Violet Gradient | `#9fa6ff` | accent | Backgrounds for features or promotional blocks, adding depth and visual softness. |

## Typography
- role: Primary typeface for all UI elements, body text, subheadings, and smaller headlines. Its clean sans-serif form ensures high readability and a contemporary feel across all weights and sizes, from small navigation links to substantial section titles.; sizes: 13px, 14px, 16px, 18px, 22px, 32px, 40px, 48px, 72px; family: Basel Grotesk Book; weight: 400, 500, 600; lineHeight: 0.97, 1.02, 1.05, 1.10, 1.13, 1.20, 1.40; substitute: Inter; letterSpacing: 0.056, 0.031, 0.071, -0.01, -0.015, -0.02, -0.03, -0.03, -0.04
- role: Used exclusively for large, impactful display text. The significantly tighter line-height and letter-spacing, combined with its high contrast to Basel Grotesk Book, give it a distinctive, elegant, and editorial presence for hero headlines.; sizes: 96px, 144px; family: Basel Classic Book; weight: 400; lineHeight: 0.80, 0.90; substitute: Playfair Display; letterSpacing: -0.03, -0.03

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "nav": "40px",
      "cards": "8px",
      "badges": "8px",
      "buttons": "1440px",
      "interactiveElements": "1440px"
    },
    "elementGap": "8px",
    "sectionGap": "72-96px",
    "cardPadding": "20px"
  },
  "radius": {
    "nav": "40px",
    "cards": "8px",
    "badges": "8px",
    "buttons": "1440px",
    "interactiveElements": "1440px"
  }
}
```

## Component Patterns
- name: Hero CTA Button Group
- name: Feature Card — Boost Online Traffic
- name: FAQ Accordion
- name: Primary Call to Action Button; role: Interactive element
- name: Secondary Ghost Button; role: Interactive element
- name: Pill Accent Button; role: Interactive element
- name: Rounded White Button; role: Interactive element
- name: Feature Card with 8px Radius; role: Content container
- name: Informational Badge; role: Categorization/Label
- name: Outline Badge; role: Categorization/Label
- name: Hero CTA Button; role: Primary user action
- name: Dark Section CTA Button; role: Secondary action in dark sections

## Do
- Prioritize Basel Grotesk Book for all functional text: 400 weight for body, 500 for subheadings and buttons, 600 for important UI labels.
- Utilize 1440px border-radius for interactive elements like buttons and tags, creating a soft, inviting touch across the UI.
- Use Porcelain Gray (#f0f7f6) as a subtle background differentiator for content blocks or badges to break up Cloud White sections.
- Reserve GlossGenius Yellow (#cccc25 or its gradient) almost exclusively for primary Calls to Action and active states to command attention.
- Employ Basel Classic Book only for large impact headlines (96px, 144px) with tight letter-spacing (-0.03em) and line-height (0.90, 0.80) to maintain an exclusive, editorial feel.
- Maintain an element gap of 8px for consistent spacing between related items and navigation links.

## Don't
- Do not use Basel Classic Book at smaller sizes or for body copy; its narrow kerning and tight leading are not suitable for readability at scale.
- Avoid using multiple accent colors; stick to Genius Yellow and Sky Violet for deliberate emphasis.
- Do not introduce hard, sharp corners; all significant interactive or content elements should use 8px or 1440px radii.
- Do not use box shadows for elevation; rely on color shifts (Inkwell Black for backgrounds, Porcelain Gray for elevated sections) to create depth instead.
- Do not add unnecessary borders to cards or main content sections; use background color changes to define boundaries.