Godly.Design Design System

Overview

Godly.Design presents itself as a curated gallery of modern web design, and its own interface embodies the principles it showcases: an almost aggressively minimalist canvas where content—website previews, brand identities, and metadata—breathes within generous whitespace. The dominant mood is archival precision meets contemporary SaaS polish. The color philosophy is starkly binary at its foundation—white surface ({colors.canvas}) against near-black body copy ({colors.body})—with voltage injected sparingly through a signature pink accent ({colors.accent}) that appears on featured brand logos and active states. This is not a colorful system; it is a monochromatic framework that trusts typography, spacing, and subtle gray gradations to carry hierarchy, reserving chromatic expression for moments of brand identity.

The typography voice is distinctly modern-system: no custom typefaces, no serif counterpoints, just the native font stack rendered at confident sizes with modest weights that never exceed 500. Headlines command attention through scale (48px–56px) rather than weight, creating an editorial quietude that feels both authoritative and approachable. The shape language is relentlessly pill-shaped—buttons, search inputs, tags, and navigation items all share {rounded.pill} geometry—which softens the otherwise sharp, high-contrast palette and signals a friendly, touch-friendly interaction model.

Two sub-systems are evident: the browse/navigation dialect (sidebar-driven, metadata-heavy, utilitarian gray) and the showcase dialect (the main content area where brand assets, preview cards, and tabbed interfaces create a gallery-like experience). The transition between these zones is managed through consistent spacing tokens and a unified component vocabulary.

Key Characteristics:

• Near-black primary ({colors.primary} — #010000) used exclusively for high-emphasis buttons and tab active states, creating maximum contrast against white
• Signature pink accent ({colors.accent} — #f43f5e) reserved for brand logo containers ({component.brand-logo-container}) and emotional brand moments
• Pill-rounded geometry ({rounded.pill}) applied universally to all interactive elements, creating visual cohesion across nav, buttons, inputs, and tags
• System font stack ({typography.display-lg}) at weight 500 max—hierarchy comes from size (48px/30px/14px), never from boldness
• Muted ink tone ({colors.ink} — #737373) carries 60%+ of all text volume, establishing a clear secondary information tier
• Subtle shadow system ({extensions.shadows.sm}) with 10% opacity for elevation that feels lightweight, not heavy
• 150ms transitions ({extensions.motion.duration}) with standard ease-out timing create responsive but not flashy interactions
• Sidebar navigation ({component.sidebar-nav-item}) uses background fill (not color) to indicate active state, preserving the monochromatic restraint

Colors

Brand & Accent

• Primary ({colors.primary} — #010000): Near-black brand color used for primary call-to-action buttons ({component.button-primary}), active tab states ({component.tab-button}), and highest-emphasis interactive elements. Functions as the system's "black" in a black-and-white framework.
• Primary Active ({colors.primary-active} — #000000): Pure black pressed/active state for primary buttons, providing tactile feedback on click.
• Accent ({colors.accent} — #f43f5e): Vibrant pink-magenta reserved exclusively for brand identity moments—specifically the circular logo container ({component.brand-logo-container}) and any brand-specific highlighting. Never used for UI chrome.
• Accent Soft ({colors.accent-soft} — #fdf2f4): Extremely pale pink wash used as background fill behind the accent logo container, providing subtle warmth without competing with content.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white base surface for the entire application background, card interiors, and modal backdrops.
• Surface ({colors.surface} — #f5f5f5): Light cool-gray used for sidebar active item backgrounds ({component.sidebar-nav-item-active}), tag chip fills ({component.tag-chip}), and subtle zoning.
• Surface Soft ({colors.surface-soft} — #fafafa): Near-white gray for alternating row backgrounds or extremely subtle area differentiation.
• Surface Strong ({colors.surface-strong} — #e5e5e5): Medium-light gray for disabled element backgrounds, dividers needing more presence than hairlines, or pressed-state surfaces.
• Surface Elevated ({colors.surface-elevated} — #ffffff): White with implied elevation (via shadow) for floating cards and dropdowns—visually identical to canvas but semantically distinct.

Text / Ink

• Ink ({colors.ink} — #737373): The workhorse gray—used for body text in metadata sections, sidebar labels, descriptions, and 60%+ of all textual content. Provides comfortable reading contrast without the aggression of pure black.
• Body ({colors.body} — #000000): Pure black reserved for headlines ({typography.display-lg}, {typography.title-md}), primary navigation labels, active states, and any text demanding maximum attention.
• Muted ({colors.muted} — #737373): Functionally identical to ink in this system; used interchangeably for secondary text, placeholders, and inactive navigation items.
• Muted Soft ({colors.muted-soft} — #a3a3a3): Light gray for tertiary information—section headers ({component.section-header}), timestamps, helper text, and icon-only buttons.
• On Primary ({colors.on-primary} — #ffffff): Pure white text for rendering on near-black primary button backgrounds.
• On Dark ({colors.on-dark} — #ffffff): Reserved white for any future dark-mode surfaces.
• On Surface ({colors.on-surface} — #000000): Black text guaranteed readable on white/light surface tokens.

Hairlines & Borders

• Hairline ({colors.hairline} — #e5e5e5): Standard border color for outlined buttons ({component.button-outline}), search inputs ({component.search-input}), and card boundaries. Visible but recessive.
• Hairline Soft ({colors.hairline-soft} — #f0f0f0): Extremely subtle divider for separating content groups without drawing attention—used between metadata rows and list items.
• Border Strong ({colors.border-strong} — #d4d4d4): Medium gray for focus rings, hovered borders on inputs, and elements requiring clearer containment.
• Border Muted ({colors.border-muted} — #e5e5e5): Functional alias for hairline in bordered contexts.

Semantic

• Error ({colors.error} — #dc2626): Red for form validation failures and destructive action feedback.
• Success ({colors.success} — #16a34a): Green for confirmation states and positive system feedback.
• Warning ({colors.warning} — #ca8a04): Amber/yellow for caution states and attention-requiring notifications.
• Info ({colors.info} — #2563eb): Blue for informational toasts and external link indicators.
• Link ({colors.link} — #2563eb): Standard blue for hyperlinks within body copy.
• Link Active ({colors.link-active} — #1d4ed8): Darker blue for visited or active link states.

Typography

Font Family

The system relies entirely on the native system font stack: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif. No web fonts are loaded, no @font-face declarations exist, and the fontLinks array is empty. This is a deliberate choice that ensures instant rendering, native OS fidelity (San Francisco on macOS, Segoe UI on Windows, system defaults on Linux), and zero layout shift from font-loading latency. The single exception in the extracted data—a solitary instance of Georgia, serif—appears to be an artifact or edge case not part of the core system.

Headlines, body text, buttons, and labels all draw from this identical family. Differentiation is achieved purely through size, weight (400 vs. 500), letter-spacing, and color—not through typeface variation. This creates a unified, "system-native" voice that feels trustworthy and fast.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 56px | 500 | 1.1 | -0.02em | Hero-scale headlines (reserved for future use) | | {typography.display-lg} | 48px | 500 | 1.1 | -0.01em | Brand name headline (Gumloop) | | {typography.title-md} | 30px | 500 | 1.2 | 0 | Section titles, major subheadings | | {typography.title-sm} | 20px | 500 | 1.3 | 0 | Card titles, minor headings | | {typography.body-md} | 14px | 400 | 1.43 | 0 | Body copy, descriptions, metadata values | | {typography.body-sm} | 13px | 400 | 1.46 | 0 | Secondary body text, sidebar items | | {typography.caption} | 12px | 400 | 1.33 | 0.02em | Timestamps, fine print, badges | | {typography.button} | 14px | 500 | 1.25 | 0 | Button labels, CTA text | | {typography.label} | 12px | 500 | 1.33 | 0.04em | Uppercase section headers (PLATFORM, STYLE, INDUSTRY) | | {typography.label-md} | 13px | 500 | 1.38 | 0.02em | Medium-weight labels, filter tags |

Principles

The typography system's defining move is its refusal to exceed weight 500. Even the largest headline ({typography.display-lg} at 48px) sits at medium weight, relying on sheer scale and tight negative letter-spacing (-0.01em) to command authority. This creates a "quiet luxury" effect—present without shouting. The weight ceiling of 500 means there is no bold state in the traditional sense; emphasis is conveyed through color shifts (from {colors.ink} to {colors.body}) or size jumps (14px → 30px → 48px).

Letter-spacing follows a clear logic: display sizes get slight compression (-0.01em to -0.02em) to tighten optically large characters; small caps-style labels get expansion (0.02em to 0.04em) for airy, tracked-out legibility; everything else sits at normal (0). Line heights are comfortably loose (1.1–1.46), ensuring readability even at larger sizes without feeling sparse.

Color carries significant hierarchical weight: {colors.body} (pure black) is reserved for the top two type levels and active states; {colors.ink} (medium gray) handles the bulk of reading content; {colors.muted-soft} (light gray) manages tertiary information. A headline in gray and body text in black would violate the system's logic—size and color must correlate.

Note on Font Substitutes

No substitution is needed—the system intentionally uses the OS-native stack. If implementing in an environment where system fonts are unavailable (certain embedded contexts, PDF generation), the closest Google Fonts equivalent is Inter, which shares the same geometric-humanist skeleton, similar x-height, and excellent legibility at small sizes. Define as --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;. For the single Georgia artifact, substitute Merriweather if serif is genuinely required.

Layout

Spacing System

• Base unit: 4px ({spacing.xxs}). All spacing values derive from this multiple.
• Tokens:
  • {spacing.xxs} (4px) — Icon internal padding, tight gaps
  • {spacing.xs} (6px) — Small internal gaps, icon-text spacing
  • {spacing.sm} (8px) — Sidebar item vertical padding, compact gaps
  • {spacing.md} (12px) — Most common internal padding, card gaps, form gaps
  • {spacing.lg} (16px) — Section margins, button padding, container gutters
  • {spacing.xl} (24px) — Card internal padding, major section spacing
  • {spacing.xxl} (32px) — Large section breaks, hero-to-content gap
  • {spacing.section} (40px) — Major vertical rhythm unit between content sections
• Section padding (vertical): {spacing.section} (40px) — Used between the brand header block and the metadata grid, and between metadata and the preview cards section.
• Card internal padding: {component.card} uses {spacing.xl} (24px); {component.preview-card} uses no internal padding (content is edge-to-edge).
• Gutters: Desktop main content area has 40px horizontal padding (lg: px-8, xl: px-10); sidebar has 0px intrinsic padding with items self-padding via {spacing.md}/{spacing.sm}.

Grid & Container

• Max content width: The main article container constrains to 1080px; the parent main element reaches 1160px. This creates a readable central column with breathing room.
• Editorial density: The showcase page follows a "gallery" density—generous whitespace around each preview card, metadata presented in a sparse 4-column grid with ample cell padding.
• Grid behavior at desktop: The root layout uses grid-cols-[17.5rem_minmax(0,1fr)] — a fixed 280px sidebar column alongside a fluid main content column. At xl breakpoints, a third sticky right-rail column emerges (hidden on smaller screens).
• Hero/column splits: The brand header area (logo + name + description) occupies a single full-width column; below it, metadata spreads into implicit columns; preview cards arrange in a responsive grid (2-column on desktop, likely 1-column on mobile).

Whitespace Philosophy

The system practices editorial airiness—whitespace is not empty space but an active structural element. The 40px section spacing ({spacing.section}), 24px card padding, and 16px+ gaps between preview cards create a museum-like viewing experience where each design specimen (the showcased websites) gets room to be seen without crowding. This is the opposite of marketplace density; it's closer to a photography portfolio or architecture monograph.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [☰]  Godly.Design          [🔍 Search...]          [👤] [≡]   │
│        (logo + wordmark)                          (icons)       │
└─────────────────────────────────────────────────────────────────┘
 ↑64px height, sticky, bg-white/90, backdrop-blur, px-4 md:px-6↑

The top nav ({component.top-nav}) is 64px tall, sticky with backdrop-blur frosted-glass effect (90% opacity white), containing: hamburger menu (left, mobile), logo+wordmark (left-center), search button (right-center, expands to input on hover/focus), and user/action icons (right). Max-width is unconstrained (full viewport).

Hero Section (Brand Showcase)

┌─────────────────────────────────────────────────────────────────┐
│  < Back to sites                    [<] [>]     [Visit site]   │
│                                                                  │
│  ┌──────┐  Gumloop                                            │
│  │  G   │                                                      │
│  │(pink)│  Gumloop is the multiplayer AI agent builder...      │
│  └──────┘                                                      │
│ ────────────────────────────────────────────────────────────── │
│ PLATFORM    STYLE    INDUSTRY    SITE                          │
│ Web         —        AI          gumloop.com                   │
│ ────────────────────────────────────────────────────────────── │
│ [Home Page] [Sections] [OG Image]                              │
└─────────────────────────────────────────────────────────────────┘

Structure: Breadcrumb row (top), then flex row with brand logo container ({component.brand-logo-container} — 80px pink circle) left-aligned against brand name ({typography.display-lg}) and description ({typography.body-md}). Horizontal rule ({component.divider}). Metadata grid with label/value pairs. Tab bar with pill-shaped toggle buttons.

Preview Cards Section

┌─────────────────────────────────────────────────────────────────┐
│ DESKTOP                                  MOBILE                 │
│ ┌──────────────────────────────────┐  ┌──────────────────────┐ │
│ │  Gumloop  [Nav links] [CTAs]    │  │  Gumloop        [☰]  │ │
│ │                                  │  │                      │ │
│ │  [Color dots]                    │  │  [Color dots]        │ │
│ │  Build, share, optimize...      │  │  Build, share...     │ │
│ │  [Get Started] [Book a demo]    │  │  [Get Started]       │ │
│ │                                  │  │  [Book a demo]       │ │
│ │  ┌────────────────────────────┐  │  │                      │ │
│ │  │  (Screenshot preview)      │  │  │  (Screenshot)        │ │
│ │  └────────────────────────────┘  │  └──────────────────────┘ │
│ └──────────────────────────────────┘                           │
└─────────────────────────────────────────────────────────────────┘

Two preview cards ({component.preview-card}) displayed side-by-side (desktop) or stacked (mobile), each showing a framed browser/mockup of the showcased website. Cards have {rounded.xl} (24px) corners and subtle {extensions.shadows.card} elevation. Labels "DESKTOP" and "MOBILE" appear above each in {typography.label} style (uppercase, tracked, muted color).

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} background | Base page surface, sidebar, flat cards | | 1 (Hairline) | 1px {colors.hairline} border, no shadow | Outlined buttons, search inputs, dividers | | 2 (Soft raise) | {extensions.shadows.sm} — 0 1px 3px rgba(0,0,0,0.1) | Floating cards, dropdowns, preview cards | | 3 (Modal) | {extensions.shadows.md} — 0 4px 12px rgba(0,0,0,0.12) | Dialog boxes, search overlay | | 4 (Prominent) | {extensions.shadows.lg} — 0 12px 40px rgba(0,0,0,0.2) | Mobile bottom bar, toast notifications | | Focus ring | 1-2px {colors.border-strong} outline, offset 1-2px | Keyboard focus states on buttons, inputs, links |

Philosophy: The depth system is decidedly flat-preferred with shadow-as-elevation. Unlike material design's dramatic layering, Godly.Design uses shadows sparingly and subtly—never exceeding 0.2 opacity, never casting colored tints. The default state for most components is flat (Level 0); shadows appear only when an element is visually "lifted" from the canvas (preview cards, modals, the mobile nav bar). Color blocking (using {colors.surface} vs. {colors.canvas}) does more heavy-lifting for z-perception than shadows do. The overall effect is printed-page clarity rather than layered-app complexity.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Inner elements, tiny badges, avatar corners (if needed) | | {rounded.DEFAULT} | 8px | Text inputs, default card corners, small containers | | {rounded.md} | 12px | Sidebar navigation items, tag chips, moderate containers | | {rounded.lg} | 16px | Brand logo container, large info cards, image masks | | {rounded.xl} | 24px | Preview cards, modal dialogs, hero image containers | | {rounded.pill} | 9999px (infinite) | All buttons, search inputs, navigation items, tags, icon buttons | | {rounded.full} | 9999px (infinite) | Alias for pill; avatar circles |

Shape Philosophy: The system is dominated by {rounded.pill} geometry. Every interactive surface—buttons, search fields, sidebar items, tabs, tags—is fully rounded. This creates a distinctive "friendly-UI" signature that softens the high-contrast monochrome palette. Sharp corners exist only at the {rounded.sm} (4px) level for non-interactive structural elements, and {rounded.DEFAULT} (8px) for text inputs that need to feel more "document-like" than "button-like." The progression from pill → xl → lg → md → sm → sharp creates a clear visual grammar: more round = more clickable/tappable.

Photography Geometry

Preview screenshots (the showcased website images) appear inside {component.preview-card} containers with {rounded.xl} (24px) corner clipping. Aspect ratios appear to be roughly 16:10 or 16:9 for desktop previews, and roughly 9:19.5 (mobile portrait) for mobile previews. Images are contained (not cropped) within their frames with subtle internal padding. No border-radius is applied to the images themselves—they inherit the container's clip. The brand logo (Gumloop's "G") is centered within an {rounded.xl} circle ({component.brand-logo-container}) with {colors.accent-soft} background.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The highest-emphasis call-to-action. Solid {colors.primary} (near-black) background with {colors.on-primary} (white) text, using {typography.button} (14px/500). Fully pill-shaped ({rounded.pill}) with 10px 20px padding. Used for "Get Started," "Home Page" (active tab), and any conversion-focused action. Active state is {component.button-primary-active} (pure black). Has a subtle 150ms color transition.

{component.button-secondary} — White background with {colors.body} (black) text, same shape and typography as primary. Used for "Book a demo," "Sections," and "OG Image" (inactive tabs). Hover state ({component.button-secondary-hover}) shifts background to {colors.surface} (light gray). Border is absent—it relies on background differentiation, not outlines.

{component.button-outline} — Transparent background with {colors.hairline} (1px #e5e5e5) border and {colors.muted} text. Used for "Visit site" in the top-right of the content area. Pill-shaped, smaller padding (8px 16px), {typography.body-sm}. On hover, border darkens to {colors.border-strong} and text shifts toward {colors.body}.

{component.button-ghost} — Fully transparent background and border, {colors.muted} text, 36×36px square (but rendered as circle via {rounded.pill}). Used for icon-only actions: hamburger menu, user avatar placeholder, pagination arrows. On hover, background fills to {colors.surface} and text darkens.

{component.button-icon} — Smaller variant (32×32px) of ghost button for tertiary icon actions. Lighter {colors.muted-soft} text color indicates lower priority. Used for the search icon, close buttons, and utility controls.

{component.button-visit-site} — Specialized outline variant for the "Visit site" button in the top-right corner. White background, thin border (implied from screenshot), {typography.body-sm}, pill-shaped. Functions as a external-link CTA with lower visual weight than primary actions.

{component.tab-button} — Styled identically to {component.button-primary} (filled black, white text) representing the active tab state ("Home Page"). Part of a segmented control group.

{component.tab-button-inactive} — Styled identically to {component.button-secondary} (white background, black text) representing inactive tabs ("Sections," "OG Image"). Sits adjacent to {component.tab-button} in a horizontal group with gap spacing.

Cards & Containers

{component.card} — Standard content card. White background, {rounded.lg} (16px) corners, {spacing.xl} (24px) internal padding, subtle {extensions.shadows.card} elevation. Contains body text at {typography.body-md}. Used for informational panels and grouped content.

{component.card-elevated} — Higher-elevation variant with {rounded.xl} (24px) corners and {extensions.shadows.md} shadow. Used for modal content or prominently featured information blocks.

{component.preview-card} — The signature component of the showcase. White background, {rounded.xl} (24px) corners, no internal padding (content is edge-to-edge), {extensions.shadows.card} shadow. Contains a framed screenshot of the showcased website with browser-chrome simulation (address bar, navigation). Labeled by "DESKTOP" or "MOBILE" headers above them in {typography.label} style.

{component.brand-logo-container} — 80×80px circular container ({rounded.xl} effectively renders as circle given equal dimensions) with {colors.accent-soft} (pale pink) background. Centers the brand's logo/icon (the Gumloop "G" in {colors.accent}). Sits to the left of the brand name headline.

Inputs & Forms

{component.search-input} — Pill-shaped ({rounded.pill}) search field with {colors.canvas} background, {colors.hairline} border, and {colors.muted} placeholder/text color. 36px tall, {typography.body-sm}. Appears in the top nav as both a collapsed icon button and expanded input field. Focus state ({component.search-input-focus}) darkens border to {colors.border-strong} and shifts text to {colors.body}. Contains a search icon (left) and keyboard shortcut hint (right, "Ctrl K").

{component.text-input} — Standard text input for forms. {rounded.DEFAULT} (8px) corners (notably less rounded than buttons), 44px height, {typography.body-md}, 10px 14px padding, {colors.canvas} background. Used for any data entry beyond search. Focus state ({component.text-input-focus}) adds a {colors.border-strong} outline ring.

Navigation

{component.top-nav} — The persistent 64px header spanning full viewport width. Sticky positioning with backdrop-blur and bg-white/90 (90% opaque white). Contains logo (left), search (center-right), and icon utilities (right). Typography is {typography.body-md} for text elements.

{component.sidebar-nav} — Fixed left rail navigation (280px wide on desktop). Transparent background, contains vertically stacked {component.sidebar-nav-item} entries. Each item has an icon (left) and label (right).

{component.sidebar-nav-item} — Individual sidebar navigation entry. Transparent background, {colors.muted} text ({typography.body-sm}), {rounded.md} (12px) corners, 8px 12px padding. Includes an icon (16-20px) and text label. Items like "Trending," "Websites," "App Screenshots," etc.

{component.sidebar-nav-item-active} — Active/hovered sidebar item. Background fills with {colors.surface} (light gray), text shifts to {colors.body} (black). Same geometry and padding as inactive state. In the screenshot, "Websites" appears to be the active item.

{component.breadcrumb} — Simple text-based navigation trail ("Back to sites" with left arrow). {colors.muted} text, {typography.body-sm}, no background or border. Positioned above the brand header.

{component.pagination-arrow} — Circular arrow buttons ("<" and ">") for navigating between showcased sites. {rounded.pill}, 36×36px, {colors.canvas} background with subtle border, {colors.body} arrow icon.

{component.mobile-nav-bar} — Bottom-positioned floating navigation bar visible only on mobile (lg:hidden). Pill-shaped ({rounded.pill}), 48px tall, white background with {extensions.shadows.lg} elevation, containing icon shortcuts.

{component.mobile-nav-item} — Icon-only buttons within the mobile nav bar. 32×32px, transparent background, pill-rounded, {colors.muted} icon color.

Information Display

{component.hero-brand-header} — The main brand presentation area combining {component.brand-logo-container}, the {typography.display-lg} brand name ("Gumloop"), and {typography.body-md} description paragraph. No background, no border—relies on spacing for separation.

{component.meta-label} — Uppercase small-caps label for metadata fields ("PLATFORM", "STYLE", "INDUSTRY", "SITE"). Uses {typography.label} (12px/500, 0.04em letter-spacing), {colors.muted-soft} color. Positioned above corresponding values.

{component.meta-value} — The data value beneath each {component.meta-label}. Uses {typography.body-md} (14px/400), {colors.body} color. Examples: "Web", "—", "AI", "gumloop.com".

{component.section-header} — Section title above preview cards ("DESKTOP", "MOBILE"). Uppercase, {typography.label} style, {colors.muted-soft}, with 16px 0 8px spacing (top margin, bottom margin).

{component.divider} — Horizontal rule separating the brand header/description from the metadata grid. {colors.hairline} color, full-width, 1px height, no shadow.

{component.tag-chip} — Small pill-shaped tag for categorization. {colors.surface} background, {colors.muted} text, {typography.caption} (12px), 4px 10px padding. Would be used for technology tags, industry labels, or filter chips.

{component.footer-link} — Simple text link in footer areas. {colors.muted}, {typography.body-sm}, 4px 8px padding. Minimal decoration.

Do's and Don'ts

Do

• Do use {colors.body} (pure #000000) exclusively for headlines and active states; relegate all extended reading to {colors.ink} (#737373) to maintain the system's typographic hierarchy.
• Do apply {rounded.pill} to every button, search input, tag, and navigation item—this shape language is the most distinctive visual signature of the system.
• Do constrain body text to {typography.body-md} (14px/400) or smaller; if you need emphasis, increase size to {typography.title-sm} (20px) or shift color to {colors.body}, never exceed weight 500.
• Do use {spacing.md} (12px) as your default internal padding for components and {spacing.xl} (24px) for cards—this creates the airy, gallery-like rhythm the design demands.
• Do reserve {colors.accent} (#f43f5e) strictly for brand logo containers and brand-specific highlights; never use it for UI chrome, buttons, or status indicators.
• Do implement the sticky top-nav ({component.top-nav}) with backdrop-blur and bg-white/90 for the frosted-glass effect over scrolling content.
• Do use {extensions.shadows.sm} (10% opacity) for elevated cards and preview containers—heavier shadows will feel out of place in this light-touch system.
• Do set transition duration to {extensions.motion.duration} (150ms) with {extensions.motion.easing} (cubic-bezier(0.4, 0, 0.2, 1)) for all interactive state changes.
• Do use the system font stack as-is without importing web fonts—this is a deliberate performance and native-fidelity choice.
• Do structure the desktop layout as a fixed 280px sidebar + fluid main column grid (grid-cols-[17.5rem_minmax(0,1fr)]).

Don't

• Don't introduce font weights above 500—even display headlines stop at medium weight; the system conveys hierarchy through scale and color, not bolding.
• Don't use {colors.primary} (#010000) for body text or headings; it's reserved for button backgrounds and active tab fills where white text sits atop it.
• Don't apply sharp corners (below {rounded.sm} / 4px) to any interactive element—if it's clickable, it should be pill-shaped or at least {rounded.md} (12px).
• Don't add gradient backgrounds, patterns, or textured surfaces—the canvas is pure {colors.canvas} (#ffffff) with no decoration.
• Don't let preview cards or elevated elements cast shadows heavier than {extensions.shadows.md}; the aesthetic is lightweight, not materially dense.
• Don't use {colors.accent} for buttons or links—that's what {colors.primary} and {colors.link} are for; pink is for brand identity only.
• Don't reduce spacing below {spacing.sm} (8px) between major content sections—the generous whitespace is intentional and functional.
• Don't implement hover states as undocumented assumptions; reference {component.button-primary-active}, {component.button-secondary-hover}, and {component.text-input-focus} as your active/pressed baselines, then add hover as an intermediate state.
• Don't mix serif fonts into the system (except the isolated Georgia artifact); the voice is entirely sans-serif system-native.
• Don't expand the color palette beyond the documented 30+ tokens—inventing new grays or accent variants will break the carefully calibrated neutral-to-voltage ratio.

Motion & Animation

Transition Tokens

--transition-colors: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-transform: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), translate 0.15s cubic-bezier(0.4, 0, 0.2, 1), scale 0.15s cubic-bezier(0.4, 0, 0.2, 1), rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-opacity: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-all: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1);

Keyframe Animations

• spin — Continuous 360° rotation, typically for loading indicators.
• pulse — Opacity/breathe animation for drawing attention to notification badges or status indicators.

Interaction Patterns

• Button press/tap: Background color transitions over 150ms with standard ease-out; primary buttons darken from {colors.primary} to {colors.primary-active}.
• Input focus: Border color transitions from {colors.hairline} to {colors.border-strong} over 150ms; optional subtle box-shadow ring appears.
• Sidebar item hover: Background fills from transparent to {colors.surface} over 150ms; text color shifts from {colors.muted} to {colors.body}.
• Card hover (preview cards): Subtle shadow elevation increase from {extensions.shadows.card} to {extensions.shadows.md} over 150-300ms (--transition-slow).
• Mobile nav reveal: Slides up from bottom with transform + opacity transition (300ms, custom easing).
• Search dialog open: Scales and fades in from slightly reduced opacity and transformed position.
• Pagination arrows: Scale down slightly on active press (active:scale-95 observed in classes), returning to normal on release.
• Icon button hover: Background fills to {colors.surface} (or {colors.surface-strong} on dark), icon color shifts toward {colors.body}.

The overall motion level is subtle—nothing exceeds 300ms, easing is always a variant of ease-out, and no springy or bouncy curves exist. Animations serve functional clarity (focus indication, press feedback) rather than decorative flourish.

Imagery Style

• Type: The primary imagery consists of website screenshot previews—framed browser mockups showing the showcased product (Gumloop) in desktop and mobile viewports.
• Presentation: Screenshots are contained within {component.preview-card} containers with heavy rounding (24px) and subtle drop shadows, simulating floating browser windows or device frames.
• Framing: Each preview includes simulated browser chrome (address bar, navigation elements) as part of the screenshot, making it clear this is a web page being displayed, not raw imagery.
• Color treatment: Screenshots are displayed at full color saturation without filters, overlays, or tinting—the white background of the showcase page provides natural contrast.
• Aspect ratios: Desktop previews appear approximately 16:10 or 16:9; mobile previews are narrow and tall (~9:19.5), accurately representing phone viewports.
• Brand logos: Displayed as centered icons within circular {colors.accent-soft} containers (the Gumloop "G" logo), creating a badge-like focal point beside the brand name.
• Decorative elements: Small colored dot clusters (4-5 colored circles) appear above headlines in preview cards—these appear to be part of the showcased site's branding, not the Godly.Design system itself.
• Role: Imagery supports and documents—it never dominates or becomes hero-scale background. The showcase is about the designed object, not atmospheric photography.
• No illustration, 3D, or abstract graphics were detected in this interface. The visual vocabulary is entirely typographic, photographic (screenshots), and geometric (logo containers).

Icon System

• Library: Custom SVG icons (no detected dependency on Lucide, Heroicons, Material Icons, or Bootstrap Icons). The framework detection shows iconLibs: [], indicating inline or custom-built SVG components.
• Specific icons observed:
  • Lightning bolt (Godly.Design logo mark)
  • Home/House (Trending, sidebar)
  • Globe (Websites, sidebar)
  • Mobile device (App Screenshots, sidebar)
  • App grid (App Icons, sidebar)
  • Pen/tool (Logos, sidebar)
  • Image landscape (OG Images, sidebar)
  • Rectangle/square (Hero, sidebar)
  • Megaphone (CTA, sidebar)
  • Layout/footer (Footer, sidebar)
  • Document/grid (Posts, sidebar)
  • Magnifying glass (Search)
  • Chevron left/right (pagination, breadcrumbs)
  • Hamburger menu (mobile nav trigger)
  • User/avatar circle (user menu)
  • Vertical ellipsis (more options)
  • Close/X (dialog dismiss)
• Treatment: Stroke-based icons (not filled), currentColor for color inheritance (typically {colors.muted} or {colors.muted-soft}), sized at 16px–20px for sidebar nav, 16px for inline actions, 20px–24px for standalone decorative use.
• Alignment: Icons are vertically center-aligned with adjacent text, with consistent 8px gap (observed gap-2 in search button classes).
• Stroke weight: Appears to be 1.5px–2px, consistent with modern "outline" icon style (similar to Heroicons outline or Lucide stroke weight).

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Astro (static-first)
- Styling:        Tailwind CSS v3.4+ (utility-first, strongly indicated by class naming patterns)
- Fonts:          System font stack only (no @font-face, no Google Fonts import)
- Animation:      Tailwind built-in transitions + CSS keyframes for spin/pulse
- Icons:          Custom SVG components (inline, currentColor-based)
- Component lib:  Custom components (shadcn/ui patterns detectable in class structures)
- Build:          Vite or Next.js compiler

The extracted CSS reveals strong Tailwind fingerprints: inline-flex, rounded-full, text-muted-foreground, hover:bg-muted, px-3, gap-2, lg:hidden, sticky top-0, backdrop-blur, and the specific shadow/token naming conventions. The component structure (button variants with -hover, -active suffixes; consistent spacing scale) maps directly to Tailwind's utility philosophy. No CSS Modules, styled-components, or vanilla CSS patterns were detected.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 1024px (lg breakpoint) | Single-column layout, sidebar collapses to hamburger menu, mobile bottom nav bar appears, preview cards stack vertically | | Tablet | 1024px – 1279px | Two-column layout (sidebar + main) activates, sidebar may be collapsible | | Desktop | ≥ 1280px (xl breakpoint) | Full three-column layout (sidebar + main + right rail), max-content widths engage, horizontal spacing increases to xl:px-10 | | Wide | ≥ 1536px | Container max-width constraints prevent over-stretching; content centers at 1080px–1160px |

Touch Targets

• {component.button-primary}: ~40px height × variable width (padding 10px 20px) — exceeds WCAG AAA 44×44 minimum ✓
• {component.button-ghost}: 36×36px — below AAA minimum, acceptable for icon-only secondary actions but consider increasing to 44px for mobile
• {component.search-input}: 36px height — below AAA; recommend 44px minimum on mobile
• {component.sidebar-nav-item}: ~40px height (8px padding × 2 + ~24px content) — meets minimum ✓
• {component.pagination-arrow}: 36×36px — below AAA; increase to 44×44px for touch-friendly pagination
• {component.text-input}: 44px height — meets AAA minimum ✓
• {component.mobile-nav-item}: 32×32px — below AAA; these are dense icon shortcuts—acceptable in bottom-bar context but monitor usability

Collapsing Strategy

• Navigation sidebar: Fixed positioned on desktop (280px left rail), collapses to off-canvas drawer triggered by hamburger menu ({component.button-ghost}) on mobile. Overlay backdrop (bg-black/40) appears behind drawer.
• Top search: Expands from icon button to full input field on click/focus; on mobile, may trigger a dedicated search dialog (detected blume-search dialog element with w-[min(62.5rem,94vw)] sizing).
• Hero/brand header: Stays full-width on all breakpoints; logo container scales down slightly on mobile (80px → possibly 64px).
• Preview cards: Side-by-side (2-column) on desktop, stack to single-column on mobile with full viewport width.
• Metadata grid: 4-column on desktop (Platform / Style / Industry / Site), collapses to 2-column or stacked on mobile.
• Tab bar: Horizontal scrollable or wrapping on mobile if tab count exceeds viewport width.
• Right rail: Hidden below lg breakpoint (class hidden lg:block observed on right aside element).
• Mobile bottom nav: Fixed to bottom of viewport, only visible below lg breakpoint (lg:hidden), floats above content with high z-index (z-50).

Image Behavior

• Desktop preview card: Maintains aspect ratio (approximately 16:10), width scales with container, height constrained proportionally. Internal padding remains 0 (edge-to-edge screenshot).
• Mobile preview card: On mobile viewport, stacks below desktop preview, width becomes full-container (minus gutters), height scales to maintain aspect ratio.
• Brand logo container: Fixed 80×80px on desktop; may reduce to 64px on mobile to balance proportions with smaller headline size (48px → possibly 32px–36px).
• Screenshots inside cards: Use object-contain behavior (not cover) to ensure entire webpage preview is visible without cropping. Border-radius clips to container's 24px corners.

Iteration Guide

1. Initialize with Tailwind CSS v3.4+ and configure the design tokens in tailwind.config.js: map every {colors.x} value to your theme.colors, {typography.x} to theme.fontSize/theme.fontWeight, {spacing.x} to theme.spacing, {rounded.x} to theme.borderRadius. Define custom shadow values from {extensions.shadows}.

2. Build the shell layout first: Implement the sticky top-nav ({component.top-nav}) at 64px height with backdrop-blur, then the grid layout with fixed 280px sidebar (grid-cols-[17.5rem_minmax(0,1fr)]). Add the main content area with max-width: 1080px and px-6 lg:px-8 xl:px-10 horizontal padding. Verify the sidebar is fixed positioned and the main content scrolls independently.

3. Implement the sidebar navigation ({component.sidebar-nav}, {component.sidebar-nav-item}, {component.sidebar-nav-item-active}) with all observed items (Trending, Websites, App Screenshots, App Icons, Logos, OG Images, Hero, CTA, Footer, Posts, Search, Submit). Apply {colors.surface} background and {colors.body} text for the active state ("Websites"). Ensure 280px width matches the grid definition.

4. Build the brand showcase header: Create the flex row with {component.brand-logo-container} (80px, {colors.accent-soft}, {rounded.xl}, centered pink icon), {typography.display-lg} "Gumloop" headline in {colors.body}, and {typography.body-md} description in {colors.ink}. Add the breadcrumb (< Back to sites) above and pagination arrows + "Visit site" button to the right.

5. Implement the metadata grid: Four-column layout (or responsive) with {component.meta-label} (uppercase, {typography.label}, {colors.muted-soft}) above {component.meta-value} ({typography.body-md}, {colors.body}). Fields: Platform=Web, Style=—, Industry=AI, Site=gumloop.com. Separate from header with {component.divider}.

6. Create the tabbed interface: {component.tab-button} (filled black, "Home Page") alongside {component.tab-button-inactive} (white, "Sections", "OG Image"). Use a horizontal flex container with gap. Below this, add {component.section-header} labels ("DESKTOP", "MOBILE") and {component.preview-card} instances.

7. Build preview cards ({component.preview-card}): White background, {rounded.xl} (24px), {extensions.shadows.card} shadow, no internal padding. Inside, frame a screenshot with simulated browser chrome. Ensure desktop and mobile cards sit side-by-side on desktop (grid-cols-2) and stack on mobile.

8. Implement all button variants with their exact token references: {component.button-primary} (black fill, white text, pill), {component.button-secondary} (white, black text, pill), {component.button-outline} (border, muted text), {component.button-ghost} (transparent, icon-only). Add the active/focus states as separate CSS classes or Tailwind variants. Ensure 150ms transitions on all interactive properties.

9. Add the search input ({component.search-input}): Pill-shaped, {colors.hairline} border, 36px height, search icon left, "Ctrl K" hint right. Implement focus state ({component.search-input-focus}) with border color shift. On mobile, this should trigger a modal dialog (structure detected in HTML).

10. Responsive pass and polish: Test at 375px (mobile), 768px (tablet), 1280px (desktop), 1536px (wide). Verify sidebar collapses to drawer, preview cards stack, mobile bottom nav appears, right rail disappears, spacing adjusts (px-6 → px-8 → px-10). Validate all touch targets meet 44px minimum where feasible. Run contrast checks on all color pairings (especially {colors.ink} on {colors.canvas} at 4.54:1 ratio—passes AA for normal text).

Font Setup: No web fonts need to be imported. Define in your CSS/global styles:

:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
  font-family: var(--font-sans);
}

If Inter is desired as a fallback for environments lacking good system fonts, add:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

Known Gaps

• Hover state styling: Per the no-hover policy, intermediate hover states (between default and active) are not documented. Implementers should add :hover pseudo-classes as gentle precursors to the active/pressed states (e.g., {component.button-secondary-hover} serves as both hover and a target for active).
• Loading/skeleton states: No loading skeletons, shimmer effects, or pending-state UI were extractable from the static screenshot. Recommend implementing skeleton cards matching {component.preview-card} dimensions with {colors.surface} background and pulse animation.
• Form validation states: Beyond {component.text-input-focus}, error states (red border, error message text) and success states (green border, checkmark) are inferred from semantic tokens ({colors.error}, {colors.success}) but not visually verified.
• Dark mode: Despite extensions.mode: "light" being correct for this screenshot, the CSS contains dark mode token references (dark:text-zinc-500, dark:hover:bg-zinc-900, dark:shadow-[0_12px_40px_rgba(0,0,0,0.7)]), suggesting a complete dark mode exists but wasn't captured. Dark mode tokens would invert canvas/ink relationships and adjust shadow opacities.
• Search dialog internals: The search overlay/dialog structure was detected in HTML (blume-search custom element, mt-[8vh], min(480px,90dvh) height) but its internal UI (results list, keyboard navigation, highlighted items) isn't visible in the screenshot.
• Authenticated/user flows: All visible UI is public-facing (showcase/gallery). Dashboard surfaces, user settings, saved collections, or admin interfaces aren't represented.
• Sub-brand palettes: If Godly.Design showcases multiple brands with different accent colors (beyond Gumloop's pink), the system must accommodate dynamic accent swapping—likely via CSS custom properties on a per-showcase basis.
• Exact pink hex derivation: {colors.accent} (#f43f5e) and {colors.accent-soft} (#fdf2f4) were converted from oklch values (oklch(0.68 0.17 50) and oklch(0.984 0.003 247.858)) which have perceptual uniformity in OKLCH space. The sRGB hex approximations are visually close but may differ by ±2-3 delta-E from the original intent. For production, prefer retaining the oklch() values if the target browsers support CSS Color Level 4.
• Georgia serif artifact: One instance of font-family: Georgia, serif was detected (count: 1) but its application context is unknown—it may be a legacy style, a specific brand-name treatment, or an error. It does not appear in the visible screenshot content.
• Right-rail sidebar content: The sticky right aside element (visible in HTML: sticky top-16 hidden h-[calc(100dvh-4rem)] ... lg:block) contains content (observed mt-8 space-y-0.5 border-border border-t pt-4) that is hidden below the lg breakpoint and may contain table-of-contents, related links, or advertising—this content wasn't captured in the screenshot crop.