# Glyphy — Design System
> A utility platform for generating fancy fonts, symbols, and emoticons.
- **Canonical:** https://uiuxskills.com/library/glyphy
- **Source:** https://glyphy.io
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:11:02.032Z

---

---
version: alpha
name: Glyphy
description: A utility platform for generating fancy fonts, symbols, and emoticons.
tone: Functional, playful, and highly accessible.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-container: "#F9FAFB"
  on-surface: "#111827"
  outline: "#E5E7EB"
  accent: "#3B82F6"
  error: "#EF4444"
  success: "#10B981"
  warning: "#F59E0B"
  info: "#3B82F6"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFFFF"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
  button-secondary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.accent}"
  link:
    textColor: "{colors.accent}"
  link-hover:
    textColor: "#1D4ED8"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.primary}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FEE2E2"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-warning:
    backgroundColor: "{colors.warning}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-info:
    backgroundColor: "{colors.info}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Glyphy is a utility-first platform built for speed and clarity. The visual identity is intentionally minimal, ensuring that complex character sets, symbols, and emoticons remain the focal point of the user experience. It feels functional and accessible, stripping away decorative clutter to prioritize content density and ease of navigation.

## Colors

The color palette relies on a high-contrast, neutral foundation to ensure readability across diverse character sets.

*   Primary (#000000): Used for primary text and high-contrast UI elements.
*   Surface (#FFFFFF): The base background color for the entire application.
*   Surface-container (inferred) (#F9FAFB): Used for card backgrounds and section dividers.
*   On-surface (inferred) (#111827): Primary text color for readability.
*   Outline (inferred) (#E5E7EB): Used for borders and separators.
*   Accent (inferred) (#3B82F6): Used for interactive links and call-to-action arrows.
*   Error (inferred) (#EF4444): Semantic color for error states.
*   Success (inferred) (#10B981): Semantic color for success states.
*   Warning (inferred) (#F59E0B): Semantic color for warning states.
*   Info (inferred) (#3B82F6): Semantic color for informational elements.

## Typography

The typography strategy focuses on system-native readability using a single sans-serif family to maintain a clean, utilitarian aesthetic.

*   Display-lg (inferred): Used for main page headings.
*   Headline-lg (inferred): Used for section titles.
*   Headline-md (inferred): Used for sub-section titles.
*   Body-md (inferred): Standard body text and character display.
*   Body-sm (inferred): Used for secondary descriptions.
*   Label-md (inferred): Used for button labels.
*   Label-sm (inferred): Used for small UI labels.

## Layout

The site follows a vertical-stack pattern optimized for browsing lists, constrained to a 1200px max-width container. It utilizes a mobile-first approach where the interface collapses into a single column on smaller screens. Spacing is governed by a scale starting at `{spacing.xs}` (4px) and scaling up to `{spacing.2xl}` (48px), with `{spacing.md}` (16px) serving as the standard gutter for list items. The section order is: nav, hero, font-generators, symbol-browser, name-generator, emoticons, footer.

## Elevation & Depth

Depth is conveyed through subtle, single-layer shadows that keep the interface feeling lightweight and fast.

*   `elevation.sm`: Subtle card lift.
*   `elevation.md`: Standard dropdown or popover depth.
*   `elevation.lg`: Modal or drawer overlay.

## Shapes

The design uses a consistent `{rounded.md}` (8px) radius for all cards and containers. This provides a modern, approachable feel that softens the otherwise rigid, functional layout without distracting from the content.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for the background and `{typography.label-md}` for text. The primary button should feel solid and distinct, while the secondary button uses `{colors.surface-container}` to recede visually.

### Card
The card is the primary container for content, featuring a `{colors.surface}` background, a `{colors.outline}` border, and `{rounded.md}` corners. Use these to group related character sets or symbol categories.

### Badge
Badges are used for status or category labeling. They utilize small padding and `{typography.label-sm}`. Use specific variants like `{badge-success}` or `{badge-info}` to provide semantic context to the user.

### Input Field
Input fields should be clean, using `{rounded.sm}` and a `{colors.outline}` border. On focus, the border should transition to `{colors.accent}` to indicate interactivity.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Never use `{colors.error}` for non-destructive actions. |
| Use `{colors.accent}` for all navigational links. | Avoid using `{typography.display-lg}` for body text. |
| Apply `{rounded.md}` to all card components. | Do not remove the border from `{card}` components. |
| Maintain consistent `{spacing.md}` between list items. | Never apply `{spacing.xs}` as a primary layout margin. |
| Use `{typography.headline-lg}` for section headers. | Do not use high-contrast shadows on `{badge}` components. |
| Ensure all symbols are displayed with `{typography.body-md}`. | Avoid mixing font families; stick to the system sans-serif. |
| Use `{input-field}` with `{rounded.sm}` for search inputs. | Do not use `{colors.accent}` for non-interactive text. |
| Use `{badge-success}` for status confirmation. | Never use `{typography.label-sm}` for primary headings. |

## Content Style

CTA labels must be imperative, short, and direct (e.g., "View →"). Avoid flowery language; the goal is to get the user to the content as quickly as possible.

Headings should be descriptive and functional. They exist to categorize the character sets below them, so keep phrasing benefit-led and declarative.

Copy density is intentionally low. The site is primarily composed of lists and character grids, so avoid long paragraphs. Use whitespace to separate categories rather than dense text blocks.

## Imagery & Icons

No distinctive imagery observed — the site relies on Unicode characters and symbols as its primary imagery. No photographic or illustrated assets are used. Icons should be minimal and defer to the existing character sets.