Remixes of argy.world
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Argy
description: |
ARGY's design system embodies a futuristic, minimalist aesthetic rooted in
electronic dance music culture. The visual identity celebrates bold
typography, monochromatic color schemes, and ultra-clean layouts that
prioritize content immersion. Emphasis is placed on dramatic
scale—particularly in hero headline treatments—combined with generous
whitespace and deliberate use of dark surfaces to create a premium,
contemporary experience. The design evokes a sense of transcendence and
forward motion, aligning with the brand's positioning as a visionary force
reshaping electronic music. Every element is stripped to its essential
function, eliminating ornament in favor of purposeful contrast and typographic
hierarchy.
source:
url: "https://argy.world/"
pagesAnalyzed: 6
extractedAt: 2026-11-06
tokensMeasured: true
colors:
primary: "#FEFEFE"
canvas: "#0D1117"
ink: "#A9B8C5"
body: "#9DA4AB"
hairline: "#424242"
typography:
display-xxl:
fontFamily: "MADE Outer Sans"
fontSize: 184px
fontWeight: 700
lineHeight: 1.18
letterSpacing: 0px
textTransform: uppercase
display-xl:
fontFamily: "MADE Outer Sans"
fontSize: 116.8px
fontWeight: 700
lineHeight: 1.18
letterSpacing: 0px
textTransform: uppercase
display-lg:
fontFamily: "MADE Outer Sans"
fontSize: 68.8px
fontWeight: 700
lineHeight: 1.18
letterSpacing: 0px
textTransform: uppercase
display-md:
fontFamily: "MADE Outer Sans"
fontSize: 41.6px
fontWeight: 700
lineHeight: 0.94
letterSpacing: 0px
textTransform: uppercase
display-sm:
fontFamily: "MADE Outer Sans"
fontSize: 40px
fontWeight: 700
lineHeight: 0.85
letterSpacing: 0px
textTransform: uppercase
heading:
fontFamily: "MADE Outer Sans"
fontSize: 25.6px
fontWeight: 400
lineHeight: 0.94
letterSpacing: 0px
textTransform: uppercase
body-xl:
fontFamily: "MADE Outer Sans"
fontSize: 24.16px
fontWeight: 500
lineHeight: 1
letterSpacing: 0px
textTransform: uppercase
body-lg:
fontFamily: "MADE Outer Sans"
fontSize: 20.8px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
textTransform: uppercase
body-md:
fontFamily: "MADE Outer Sans"
fontSize: 18.88px
fontWeight: 700
lineHeight: 0.74
letterSpacing: 2.08px
textTransform: uppercase
body-sm:
fontFamily: "MADE Outer Sans"
fontSize: 16px
fontWeight: 400
lineHeight: 1.38
letterSpacing: 0px
body-xs:
fontFamily: "MADE Outer Sans"
fontSize: 14.56px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0px
body-xs-2:
fontFamily: "MADE Outer Sans"
fontSize: 13.12px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
textTransform: uppercase
button:
fontFamily: "MADE Outer Sans"
fontSize: 16px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
label:
fontFamily: "MADE Outer Sans"
fontSize: 13.12px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
textTransform: uppercase
caption-sm:
fontFamily: "MADE Outer Sans"
fontSize: 11.68px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
textTransform: uppercase
caption-xs:
fontFamily: "MADE Outer Sans"
fontSize: 8.8px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0px
rounded:
none: 0px
xs: 4.48px
sm: 16px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 32px
xl: 44px
xxl: 56px
xxxl: 64px
section: 68px
band: 84px
borderWidths:
thin: 1px
elevationStrategy: color-blocking
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FBFBFB"
surface: "#F1F1F1"
surfaceRaised: "#E9E9E9"
text: "#1D1D1D"
textMuted: "#707070"
border: "#D8D8D8"
accent: "#6F6F6F"
accentFg: "#FFFFFF"
focusRing: "#8E8E8E"
elevation: shadow
dark:
bg: "#0D1117"
surface: "#0D1016"
surfaceRaised: "#202329"
text: "#A9B8C5"
textMuted: "#9DA4AB"
border: "#424242"
accent: "#FEFEFE"
accentFg: "#0B0B0C"
focusRing: "#FEFEFE"
elevation: "border+surface"
components:
button-outline:
textColor: "{colors.body}"
border: "1px solid {colors.body}"
height: 32.7188px
padding: "5.44px 6.88px 5.44px 6.88px"
fontSize: 19.84px
fontFamily: "MADE Outer Sans"
fontWeight: 700
lineHeight: 1
rounded: "{rounded.xs}"
button-outline-sm:
textColor: "{colors.body}"
border: "1px solid {colors.body}"
height: 31.75px
padding: "5.44px 6.88px 5.44px 6.88px"
fontSize: 18.88px
fontFamily: "MADE Outer Sans"
fontWeight: 700
lineHeight: 1
rounded: "{rounded.xs}"
button-text:
typography: "{typography.button}"
textColor: "{colors.body}"
height: 16px
link:
typography: "{typography.body-sm}"
textColor: "{colors.hairline}"
padding: "35.2px 0px 16px 0px"
link-sm:
typography: "{typography.caption-xs}"
textColor: "{colors.ink}"
states:
other-focus:
target: other
state: focus
textColor: "rgb(68, 68, 68)"
textDecoration: none
backgroundColor: "rgb(221, 221, 221)"
other-hover:
target: other
state: hover
borderColor: currentcolor
borderWidth: medium
textDecoration: none
input-focus:
target: input
state: focus
boxShadow: "rgb(202, 202, 202) 0px 0px 5px"
borderColor: "rgb(138, 138, 138)"
borderWidth: 1px
backgroundColor: "{colors.primary}"
input-disabled:
target: input
state: disabled
backgroundColor: "rgb(230, 230, 230)"
link-hover:
target: link
state: hover
textColor: "rgb(20, 104, 160)"
button-hover:
target: button
state: hover
textColor: "{colors.primary}"
backgroundColor: "rgb(20, 103, 158)"
link-focus:
target: link
state: focus
textColor: "rgb(23, 121, 186)"
backgroundColor: "rgb(230, 230, 230)"
nav-hover:
target: nav
state: hover
boxShadow: "rgb(202, 202, 202) 0px 7px 0px, rgb(202, 202, 202) 0px 14px 0px"
backgroundColor: "rgb(202, 202, 202)"
button-focus-visible:
target: button
state: focus-visible
outline: "-webkit-focus-ring-color auto 3px"
outlineColor: -webkit-focus-ring-color
outlineWidth: 3px
button-focus:
target: button
state: focus
opacity: 1
breakpoints:
- width: 375
containerWidth: 355
gridColumns: 6
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 738
gridColumns: 3
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 994
gridColumns: 3
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1250
gridColumns: 3
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1408
gridColumns: 3
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 66
gradientsFound: 0
rolesUnassigned: 0
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
ARGY's design system embodies a futuristic, minimalist aesthetic rooted in electronic dance music culture. The visual identity celebrates bold typography, monochromatic color schemes, and ultra-clean layouts that prioritize content immersion. Emphasis is placed on dramatic scale—particularly in hero headline treatments—combined with generous whitespace and deliberate use of dark surfaces to create a premium, contemporary experience. The design evokes a sense of transcendence and forward motion, aligning with the brand's positioning as a visionary force reshaping electronic music. Every element is stripped to its essential function, eliminating ornament in favor of purposeful contrast and typographic hierarchy.
Key Characteristics
{colors.primary} — #FEFEFE): Core brand accent used in primary CTAs, active states, and the ARGY mark itself. Off-white tone ensures maximum contrast against dark canvas.{colors.canvas} — #0D1117): Default page background. Deep charcoal-near-black establishes the immersive, premium atmosphere and serves as the primary surface for all content.{colors.ink} — #A9B8C5): Primary heading and display text color. Mid-tone neutral provides strong visual hierarchy and legibility over dark canvas.{colors.body} — #9DA4AB): Secondary body copy and descriptive text. Slightly darker than ink, used for supporting content and metadata.{colors.hairline} — #424242): 1px borders, dividers, and subtle structural lines. Minimal presence to avoid visual clutter while maintaining necessary definition.The site does not declare error, success, warning, or other semantic states in its markup or stylesheets. No semantic color ramp exists.
Primary: MADE Outer Sans (imported via Google Fonts as Montserrat weight variations)
Fallback stack: MADE Outer Sans, Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | MADE Outer Sans | 184px | 700 | 1.18 | 0px | Measured on h1; ultra-hero scale |
| Display XL | MADE Outer Sans | 116.8px | 700 | 1.18 | 0px | Measured on h1; primary hero |
| Display LG | MADE Outer Sans | 68.8px | 700 | 1.18 | 0px | Measured on display; section hero |
| Display SM | MADE Outer Sans | 40px | 700 | 0.85 | 0px | Measured on h2; subsection title |
| Display MD | MADE Outer Sans | 41.6px | 700 | 0.94 | 0px | Measured on h3; card/module heading |
| Heading | MADE Outer Sans | 25.6px | 400 | 0.94 | 0px | Measured on heading; structural divider |
| Body XL | MADE Outer Sans | 24.16px | 500 | 1 | 0px | Measured on body; uppercase accent text |
| Body MD | MADE Outer Sans | 18.88px | 700 | 0.74 | 2.08px | Measured on body; uppercase caption with tracking |
| Body LG | MADE Outer Sans | 20.8px | 400 | 1 | 0px | Measured on body; uppercase body-level text |
| Body SM | MADE Outer Sans | 16px | 400 | 1.38 | 0px | Measured on link; standard body copy |
| Body XS | MADE Outer Sans | 14.56px | 400 | 1.3 | 0px | Measured on body; small body text |
| Body XS-2 | MADE Outer Sans | 13.12px | 400 | 1 | 0px | Measured on body; uppercase fine text |
| Button | MADE Outer Sans | 16px | 400 | 1 | 0px | Measured on button; button label |
| Label | MADE Outer Sans | 13.12px | 400 | 1.5 | 0px | Measured on input; form label |
| Caption SM | MADE Outer Sans | 11.68px | 400 | 1.5 | 0px | Measured on caption; uppercase footer/meta |
| Caption XS | MADE Outer Sans | 8.8px | 400 | 1.3 | 0px | Measured on caption/link; fine print |
text-transform: uppercase, embedding case transformation into the design system rather than relying on editorial discipline. This reinforces the commanding, futuristic brand voice.Outline (Primary)
rgba(0, 0, 0, 0) (transparent){colors.ink} (#A9B8C5)1px solid {colors.ink} (#A9B8C5){spacing.xs} {spacing.xs} (8px){rounded.xs} (4.48px){typography.button} (16px, weight 400)rgb(157, 164, 171) with no background changeOutline Small
rgba(0, 0, 0, 0) (transparent){colors.ink} (#A9B8C5)1px solid {colors.ink} (#A9B8C5){spacing.xs} {spacing.xs} (8px){rounded.xs} (4.48px){typography.body-md} (18.88px, weight 700)rgb(157, 164, 171)Text (Ghost)
rgba(0, 0, 0, 0) (transparent){colors.ink} (#A9B8C5){typography.button} (16px, weight 400){colors.ink}Default (Full-width)
rgb(66, 66, 66) (dark neutral)rgba(0, 0, 0, 0) (transparent){spacing.xxl} 0px {spacing.md} 0px (top 44px, bottom 16px){typography.body-sm} (16px, weight 400, line-height 1.38)rgb(20, 104, 160) (branded blue); text-decoration underline appliedrgb(230, 230, 230) and text color rgb(23, 121, 186) with box-shadow rgba(23, 121, 186, 0.5) 0px 0px 6px 1pxDefault Small
{colors.ink} (#A9B8C5)rgba(0, 0, 0, 0) (transparent){typography.caption-xs} (8.8px, weight 400, line-height 1.44){colors.ink} or shifts to darker neutral depending on contextThe site does not isolate card or container components with dedicated styling. Content appears to be organized in full-width sections with color-blocking (dark canvas background with light typography). No padding, radius, or shadow is applied to create distinct "card" surfaces—the entire page canvas is unified.
Text Input (Focus)
#FFFFFF (white)1px solid rgb(138, 138, 138) (medium gray)rgb(202, 202, 202) 0px 0px 5px (subtle outer glow)0px (removed){typography.label} (13.12px, weight 400)rgb(230, 230, 230) (light gray)Text Input (Disabled)
rgb(230, 230, 230) (light gray)The site does not expose a traditional horizontal nav bar. Menu interactions appear to use a hamburger toggle (not visible in measured viewports or always collapsed), and navigation is managed off-canvas or via footer links. No nav-specific component styling is declared.
The design employs a geometric 4px base unit scaled into a nine-step sequence:
{spacing.xxs} = 4px — micro-adjustments, tight element clustering{spacing.xs} = 8px — button/input padding, hairline separators{spacing.sm} = 12px — form field spacing, small component gaps{spacing.md} = 16px — standard component padding, body left/right margins{spacing.lg} = 32px — module padding, major section gaps{spacing.xl} = 44px — large section padding, hero breathing room{spacing.xxl} = 56px — inter-section spacing{spacing.xxxl} = 64px — major content block separation{spacing.section} = 68px — full-section vertical padding{spacing.band} = 84px — hero band and ultra-large section guttersUsage Context: Buttons and inputs consistently apply {spacing.xs} (8px) padding. Body and section content maintain {spacing.md} (16px) horizontal margins across all viewports. Large hero sections leverage {spacing.band} (84px) and {spacing.section} (68px) for dramatic vertical rhythm.
{spacing.md} (16px)Container strategy: No explicit .container class observed. Full-width sections with internal padding create margins. Likely CSS Grid or flexbox with auto-fit columns.
Whitespace is weaponized as a design tool. Large hero areas combine ultra-sized typography ({typography.display-xxl} at 184px) with surrounding void, forcing focus and creating luxury through emptiness. Body copy maintains {typography.body-sm} at 16px with 1.38 line-height for legibility. Sections are separated by {spacing.band} (84px) vertical gaps, allowing each module to breathe independently. The entire design system is built around the principle that negative space is as important as content.
{rounded.none} = 0px — Default; used on images, containers, inputs. Sharp, architectural aesthetic.{rounded.xs} = 4.48px — Buttons (both outline and outline-sm). Minimal softening; barely perceptible but present.{rounded.sm} = 16px — Additional component surfaces (if present in full extraction).Component mapping: Buttons use {rounded.xs} (4.48px). Images and structural containers use {rounded.none} (0px). The system favors sharp corners, reinforcing the minimalist, geometric brand identity.
1px — Applied to button outlines and form input borders. Hairline precision for maximum elegance.The design system employs color-blocking—depth is achieved through surface color transitions rather than shadows. No box-shadow values are present on primary UI components (buttons, cards, inputs). Elevation comes from contrast: light text on dark canvas, dark text on light surfaces, and color shifts on hover/focus states.
| Level | Treatment | Use |
|---|---|---|
| Flat (Base) | Canvas background {colors.canvas} (#0D1117) with text in {colors.ink} | All primary content, default state |
| Hover (Subtle lift) | Text color shift (e.g., rgb(20, 104, 160) on links) with no shadow | Interactive state feedback |
| Focus (Emphasis) | Outer glow or box-shadow for inputs: rgb(202, 202, 202) 0px 0px 5px | Form field focus indication |
| Overlay (Highest) | Not systematically defined; modal/dropdown z-index values exist but no shadow treatment specified | Rare; likely handled by component framework |
Philosophy: Depth through color, contrast, and z-index eliminates the need for gradients or multi-layer shadows. This approach keeps the visual language clean, modern, and aligned with flat design principles popular in digital product design.
The site employs opacity at discrete points in interaction and overlay states:
These are applied inconsistently across different interaction states. No single opacity value is designated as "disabled" or "hover"—each component may vary.
| Layer | Z-index | Use |
|---|---|---|
| Dropdown (Lower) | 11, 12 | Popovers, submenus, tooltips |
| Dropdown (Standard) | 28 | Higher-priority dropdown or offscreen panel |
| Sticky (Lower) | 998 | Sticky header or sidebar, below modals |
| Sticky (Upper) | 999 | Sticky navigation or persistent UI, just below modal |
| Modal (Lower) | 1120 | Modal or dialog, lower priority |
| Modal (Mid) | 1150 | Standard modal or full-screen overlay |
| Modal (Upper) | 1180 | Highest-priority modal or alert |
Stacking strategy: A clear hierarchy exists: dropdowns at 11–28, sticky content at 998–999, modals at 1120–1180. This ensures predictable layering without collision.
text-transform: uppercase is embedded in the design system, not a stylistic choice.{colors.primary} (#FEFEFE) as the sole accent color for CTAs, brand marks, and active states. Its near-white tone provides maximum contrast and visual punch against {colors.canvas}.{colors.canvas} and neutral surfaces; shift text color on hover/focus rather than adding shadows.{rounded.none} on most components) to preserve the geometric, architectural aesthetic. Use {rounded.xs} (4.48px) only on buttons for micro-softening.{spacing.band} (84px) and {spacing.section} (68px) between major sections. Let content breathe and dominate the visual plane.{typography.caption-sm} (11.68px, uppercase) and {typography.caption-xs} (8.8px, uppercase) for metadata and fine print.{typography.display-*} scale. Hero content should exceed 100px (use {typography.display-xl} at 116.8px or {typography.display-xxl} at 184px).1px borders ({rounded.none} radius) on inputs and buttons for precision and elegance. Avoid thicker strokes.{colors.primary} is the sole non-neutral tone.{rounded.xs} (4.48px). The system is sharp and architectural, not soft or rounded.{spacing.md} (16px) on mobile or {spacing.section} (68px) between major vertical blocks.{typography.display-md} (41.6px). The scale is intentionally bold across all viewports.| Viewport | Content Width | Grid Columns | Layout Shift | Notes |
|---|---|---|---|---|
| 375px (Mobile) | 355px | Single column | Full-width stacking | 20px left/right margin; no multi-column layout |
| 768px (Tablet) | 738px | 3 columns | Content expands; grid activated | Menu remains hidden; 15px left/right margin |
| 1024px (Small Desktop) | 994px | 3 columns | Modest expansion | Full nav visible (if present); consistent grid |
| 1280px (Desktop) | 1250px | 3 columns | Margin increases | Standard desktop presentation |
| 1440px (Large Desktop) | 1408px | 3 columns | Maximum width capped | Content width reaches max; no further scaling |
Key transitions:
The extracted component data does not declare explicit minimum touch target sizes. Measured button heights are 31.75–32.7188px, and measured link click areas are 87.2188px tall (padding-inclusive). These exceed the 44px WCAG minimum for mobile when padding is included, but explicit touch target documentation is absent from the stylesheets.
Observed practice: Buttons and links appear adequately sized for touch on mobile viewports; however, no z-indexed "tap zone" expansion is declared. Assume standard browser default behavior: a 44×44px minimum is recommended for interactive elements.
{typography.display-md} (41.6px) or smaller; no display XXL or XL used below 768px.{spacing.lg} (32px) or {spacing.xl} (44px) between major blocks.{typography.display-xl} at 116.8px) become prominent.Typography scaling: Display sizes remain consistent across breakpoints (184px, 116.8px, 68.8px, etc.), suggesting a fixed-size approach rather than fluid scaling. This aligns with the brand's emphasis on bold, commanding typography at all scales.
#FEFEFE) — Off-white for maximum contrast against dark backgrounds. Use on button fills, active states, brand mark.#0D1117) — Deep charcoal-black. Primary surface for all content.#A9B8C5) — Mid-tone neutral for display typography and primary headings.#9DA4AB) — Slightly darker neutral for body copy and supporting content.#424242) — Dark gray for 1px rules and structural lines.All text must be uppercase unless explicitly marked as an exception. Use text-transform: uppercase on all text elements, including headings, body, labels, and captions.
Buttons have three variants: outline (full-width, transparent with border), outline-sm (compact, transparent with border), and text/ghost (no border, no padding, transparent). Do not invent a solid/filled button variant.
Depth comes from color, not shadows. Use {colors.canvas} (dark) vs. light surfaces, and color shifts on hover/focus. No box-shadow or gradients on primary UI.
Display typography starts at 41.6px (display-md) and scales to 184px (display-xxl). Hero sections use 116.8px or 184px. Do not scale below 40px for display roles.
Spacing increments are 4px-based: xxs (4px), xs (8px), sm (12px), md (16px), lg (32px), xl (44px), xxl (56px), xxxl (64px), section (68px), band (84px). Use these exact values; do not invent intermediate steps.
Border radius is 0px by default; use 4.48px only on buttons. Sharp corners reinforce the architectural aesthetic. Do not round images, containers, or form fields.
Font family is MADE Outer Sans (Montserrat) exclusively. Weights: 400 (body), 500 (accent), 700 (display/heading). No other weights or fonts.
Links default to rgb(66, 66, 66) (dark neutral) and shift to rgb(20, 104, 160) (branded blue) on hover. Apply text-decoration: underline on hover.
Form inputs have 1px borders with focus state: rgb(202, 202, 202) 0px 0px 5px box-shadow, rgb(138, 138, 138) border, white background. Disabled: light gray background.
Z-index layering: Dropdowns (11–28), sticky content (998–999), modals (1120–1180). Maintain this hierarchy to prevent stacking conflicts.
Responsive layout: Single column at 375px; 3-column grid at 768px+. Content width caps at 1408px (1440px viewport). No 2-column intermediate layout.
Typography line-height: Display sizes use 0.85–1.18 (tight); body uses 1.3–1.38 (spacious). Match these exactly; do not default to 1.5 or 1.6.
Opacity is used sparingly for disabled/overlay states (0.28–0.92). No universal opacity modifier; each state is context-specific.
Focus states must be visible: Links use box-shadow glow; buttons use default browser focus ring. Test with keyboard navigation.
Interaction states for most components are not systematically declared. Extracted stylesheets show ad-hoc hover/focus behaviors, but not every component has a documented focus ring, disabled state, or active state. Implement conservative defaults (browser focus rings, disabled opacity 0.5) where the system is silent.
No semantic color ramp (error, success, warning, info) is exposed. The site does not declare red/green/yellow/blue status colours. If these states are needed, define them as a downstream extension; they are not part of ARGY's published system.
No gradients or mesh backgrounds were detected. If decorative gradients are required, define them explicitly; the current system is strictly flat color-blocking.
Light/dark mode not observed. Only a dark theme (canvas #0D1117) was measured. Any light mode would be a custom extension.
Component coverage: Only buttons, links, and form inputs were measured in detail. Other UI elements (tabs, accordion, breadcrumbs, toast, popover) may exist but were not extracted. Assume they follow the button/link styling paradigm (no shadow, sharp corners, uppercase labels, color-blocking).
Animation / motion: No transition durations, easing functions, or keyframe animations were extracted. The system may have micro-interactions; they are not documented here.
Cross-origin stylesheets not readable: Some CSS may reside on third-party domains (analytics, embeds, CDNs) and was not analyzed. Coverage: 6 pages of the public site.
Surfaces behind authentication: Login, account, or member-only pages were not visited. The system may have additional components or color roles not visible in the public extraction.
Touch target minimums: No explicit CSS variable or mixin for touch targets was found. Observed component heights (31.75–87.2188px) appear adequate, but no formal guideline exists.
Responsive breakpoint names: The system does not declare Tailwind-style breakpoint tokens (sm, md, lg, etc.). Breakpoints are inferred from measured viewport widths only.