Remixes of aesthetic.pub
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: Aesthetic
description: |
Aesthetic embodies a dark, high-contrast gaming aesthetic where minimalism
meets performance. The design prioritizes clarity and speed over
ornamentation, using a near-black canvas (#0A0A0A) with crisp white text
(#FFFFFF) to deliver information with laser focus. Every element serves
function: pill-shaped buttons signal interaction, generous vertical spacing
creates breathing room in dense configuration panels, and a restrained neutral
palette (#8A8A8A) for secondary copy prevents cognitive overload. The mood is
confident and streamlined—winning is aesthetic, and aesthetics demand
precision.
source:
url: "https://aesthetic.pub"
pagesAnalyzed: 1
extractedAt: 2026-10-21
tokensMeasured: true
colors:
primary: "#1D1D1D"
canvas: "#0A0A0A"
surface: "#111111"
ink: "#FFFFFF"
body: "#8A8A8A"
neutral-1: "#272727"
typography:
display:
fontFamily: "Inter Variable"
fontSize: 72px
fontWeight: 700
lineHeight: 1
letterSpacing: -1.8px
heading-md:
fontFamily: "Inter Variable"
fontSize: 36px
fontWeight: 600
lineHeight: 1.11
letterSpacing: -0.9px
heading-md-strong:
fontFamily: "Inter Variable"
fontSize: 36px
fontWeight: 700
lineHeight: 1.11
letterSpacing: -0.9px
heading-sm:
fontFamily: "Inter Variable"
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-lg:
fontFamily: "Inter Variable"
fontSize: 18px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
body-md:
fontFamily: "Inter Variable"
fontSize: 16px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
body-sm:
fontFamily: "Inter Variable"
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
body-sm-loose:
fontFamily: "Inter Variable"
fontSize: 14px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
body-sm-strong:
fontFamily: "Inter Variable"
fontSize: 14px
fontWeight: 500
lineHeight: 1.43
letterSpacing: 0px
caption-sm:
fontFamily: "Inter Variable"
fontSize: 12px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
caption-sm-strong:
fontFamily: "Inter Variable"
fontSize: 12px
fontWeight: 500
lineHeight: 1.33
letterSpacing: 0px
caption-xs:
fontFamily: "Inter Variable"
fontSize: 10px
fontWeight: 500
lineHeight: 1.43
letterSpacing: 0px
code-sm:
fontFamily: ui-monospace
fontSize: 13px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
code-xs:
fontFamily: ui-monospace
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 0px
rounded:
none: 0px
xs: 14px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 64px
section: 80px
band: 112px
elevationStrategy: color-blocking
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FBFBFB"
surface: "#F1F1F1"
surfaceRaised: "#E9E9E9"
text: "#121212"
textMuted: "#747474"
border: "#D8D8D8"
accent: "#1D1D1D"
accentFg: "#FFFFFF"
focusRing: "#1D1D1D"
elevation: shadow
dark:
bg: "#0A0A0A"
surface: "#111111"
surfaceRaised: "#242424"
text: "#FFFFFF"
textMuted: "#8A8A8A"
border: "#272727"
accent: "#646464"
accentFg: "#FFFFFF"
focusRing: "#1D1D1D"
elevation: "border+surface"
components:
button-text:
typography: "{typography.body-sm-strong}"
textColor: "{colors.surface}"
height: 40px
padding: "0px 20px 0px 20px"
rounded: 26px
backgroundColor: "oklch(0.922 0 0)"
button-primary:
typography: "{typography.body-sm-strong}"
textColor: "oklch(0.985 0 0)"
height: 36px
padding: "0px 16px 0px 16px"
rounded: 26px
backgroundColor: "{colors.primary}"
button-outline:
typography: "{typography.body-sm-strong}"
textColor: "oklch(0.985 0 0)"
border: "1px solid rgb(31, 31, 31)"
height: 36px
padding: "0px 10px 0px 16px"
rounded: 26px
card:
typography: "{typography.body-sm}"
textColor: "oklch(0.985 0 0)"
padding: "24px 0px 24px 0px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.surface}"
card-lg:
typography: "{typography.body-sm}"
textColor: "oklch(0.985 0 0)"
padding: "24px 0px 24px 0px"
rounded: "{rounded.xs}"
backgroundColor: "rgb(19, 19, 19)"
navigation:
typography: "{typography.heading-sm}"
textColor: "oklch(0.985 0 0)"
height: 36px
footer:
typography: "{typography.body-sm}"
textColor: "{colors.body}"
padding: "48px 24px 48px 24px"
link:
typography: "{typography.body-sm-strong}"
textColor: "oklch(0.985 0 0)"
padding: "0px 20px 0px 20px"
rounded: 26px
link-sm:
typography: "{typography.body-sm}"
textColor: "{colors.body}"
states:
other-hover:
target: other
state: hover
backgroundColor: "rgb(58, 58, 58)"
input-disabled:
target: input
state: disabled
opacity: 0.5
input-focus-visible:
target: input
state: focus-visible
borderColor: "rgba(0, 0, 0, 0)"
other-disabled:
target: other
state: disabled
opacity: 0.5
other-focus-visible:
target: other
state: focus-visible
outline: "rgba(0, 0, 0, 0) solid 2px"
outlineColor: "rgba(0, 0, 0, 0)"
outlineWidth: 2px
breakpoints:
- width: 375
containerWidth: 1920
gridColumns: 0
navLinksVisible: 9
menuToggleVisible: true
headingPx: 60
bodyPx: 16
sectionPaddingX: 24
- width: 768
containerWidth: 1920
gridColumns: 0
navLinksVisible: 9
menuToggleVisible: true
headingPx: 72
bodyPx: 16
sectionPaddingX: 24
- width: 1024
containerWidth: 1920
gridColumns: 4
navLinksVisible: 9
menuToggleVisible: true
headingPx: 72
bodyPx: 16
sectionPaddingX: 24
- width: 1280
containerWidth: 1920
gridColumns: 4
navLinksVisible: 9
menuToggleVisible: true
headingPx: 72
bodyPx: 16
sectionPaddingX: 24
- width: 1440
containerWidth: 1920
gridColumns: 4
navLinksVisible: 9
menuToggleVisible: true
headingPx: 72
bodyPx: 16
sectionPaddingX: 24
coverage:
statesFound: 62
gradientsFound: 0
rolesUnassigned: 1
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Aesthetic embodies a dark, high-contrast gaming aesthetic where minimalism meets performance. The design prioritizes clarity and speed over ornamentation, using a near-black canvas ({colors.canvas} — #0A0A0A) with crisp white text ({colors.ink} — #FFFFFF) to deliver information with laser focus. Every element serves function: pill-shaped buttons signal interaction, generous vertical spacing creates breathing room in dense configuration panels, and a restrained neutral palette ({colors.body} — #8A8A8A) for secondary copy prevents cognitive overload. The mood is confident and streamlined—winning is aesthetic, and aesthetics demand precision.
Key Characteristics
{rounded.full} — 9999px) that feel modern and tactile{colors.primary} — #1D1D1D) for depth, no color saturation{typography.display} — 72px, #FFFFFF) announce value; secondary text ({colors.body} — #8A8A8A) recedes{colors.primary} — #1D1D1D): Primary CTAs, active states, and depth layering. Used in button backgrounds and interactive feedback to signal interactivity against the canvas.{colors.canvas} — #0A0A0A): Default page background; the darkest tone, establishing the base context.{colors.surface} — #111111): Card and panel backgrounds; a subtle step up from canvas, creating contained zones without harsh contrast.{colors.neutral-1} — #272727): Decorative borders and accent lines; used sparingly in UI chrome.{colors.ink} — #FFFFFF): Primary heading and display text; the brightest element, reserved for the most critical information.{colors.body} — #8A8A8A): Secondary and body copy; mid-gray, readable yet recessive, used for descriptions, captions, and auxiliary content.No error, success, warning, or info colors are declared or measured on the site. The design does not expose a semantic color ramp; see Known Gaps.
Primary: Inter Variable (variable weight, optimized for screen legibility and responsive weight adjustment)
Secondary: ui-monospace (fallback stack: ui-monospace, SFMono-Regular, Roboto Mono, Menlo, monospace)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Inter Variable | 72px | 700 | 1 | -1.8px | Hero headline; maximum impact, negative tracking for density |
| Heading Md Strong | Inter Variable | 36px | 700 | 1.11 | -0.9px | Section title; bold, tight leading, negative tracking |
| Heading Md | Inter Variable | 36px | 600 | 1.11 | -0.9px | Subheading; medium-weight variant of heading size |
| Heading Sm | Inter Variable | 16px | 400 | 1.5 | 0px | Label or small heading; compact, neutral weight |
| Body Lg | Inter Variable | 18px | 400 | 1.63 | 0px | Descriptive paragraph; generous line height for readability |
| Body Md | Inter Variable | 16px | 500 | 1.5 | 0px | Standard body text with medium emphasis |
| Body Sm | Inter Variable | 14px | 400 | 1.43 | 0px | Default body copy; compact yet readable |
| Body Sm Strong | Inter Variable | 14px | 500 | 1.43 | 0px | Emphasized body text, e.g., links or interactive labels |
| Body Sm Loose | Inter Variable | 14px | 400 | 1.63 | 0px | Body copy with expanded line height for breathing room |
| Caption Sm | Inter Variable | 12px | 400 | 1.63 | 0px | Fine print, metadata, timestamps |
| Caption Sm Strong | Inter Variable | 12px | 500 | 1.33 | 0px | Emphasized caption; meta labels with weight accent |
| Caption Xs | Inter Variable | 10px | 500 | 1.43 | 0px | Tiny label; compact, bold for icon labels or badges |
| Code Sm | ui-monospace | 13px | 400 | 1.63 | 0px | Inline or block code; monospace for technical content |
| Code Xs | ui-monospace | 12px | 400 | 1.33 | 0px | Compact monospace; code snippets or configuration values |
Primary Button
{colors.primary} (#1D1D1D)#F5F5F5 (off-white, oklch(0.985 0 0))0px 16px{typography.body-sm-strong} (14px, weight 500){rounded.full} (9999px, pill shape)#3A3A3A (rgb(58, 58, 58)) or shifts via oklch mixSecondary Button (Outline)
rgba(0, 0, 0, 0))#F5F5F5 (oklch(0.985 0 0))0px 10px–16px{typography.body-sm-strong} (14px, weight 500)1px solid rgb(31, 31, 31) (neutral-1 tone){rounded.full} (9999px)rgb(19, 19, 19) or color-mixed transparent variantsGhost / Text Button
{colors.ink} (#FFFFFF)0px 20px{typography.body-sm-strong} (14px, weight 500){rounded.full} (9999px)rgb(19, 19, 19)Card Default
{colors.surface} (#111111)#F5F5F5 (oklch(0.985 0 0))24px 0px (vertical spacing only; internal padding varies by content){rounded.xs} (14px){typography.body-sm} (14px, weight 400)Card Large
rgb(19, 19, 19) (near-surface shift for visual separation)#F5F5F5 (oklch(0.985 0 0))24px 0px{rounded.xs} (14px){typography.body-sm} (14px)Input Default
{colors.surface} (#111111){colors.ink} (#FFFFFF)0px–16px horizontal1px solid rgb(31, 31, 31) (neutral-1 outline){rounded.xs} (14px){typography.body-sm} (14px, weight 400)var(--ring) or primary accent; box-shadow activatescolor-mix(in oklab, var(--input) 40%, transparent) (40% brightness overlay)Nav Link Default
#F5F5F5 (oklch(0.985 0 0))0px (no padding; text only){typography.heading-sm} (16px, weight 400)Link Default (Inline)
#F5F5F5 (oklch(0.985 0 0))0px 20px{typography.body-sm-strong} (14px, weight 500)1px solid rgba(0, 0, 0, 0) (invisible outline for sizing){rounded.full} (9999px, visually a pill when hovered)rgb(19, 19, 19) or color-mixed destructive/primary variantLink Small (Footer/Meta)
{colors.body} (#8A8A8A)0px{typography.body-sm} (14px, weight 400)Base unit: {spacing.xs} = 8px
Scale & Context:
{spacing.xxs} = 4px: Micro-spacing between inline elements, icon-text gaps{spacing.xs} = 8px: Tight grouping, button internal padding increments{spacing.sm} = 12px: Small component spacing, form field gaps{spacing.md} = 16px: Standard spacing; primary vertical rhythm, card padding{spacing.lg} = 20px: Loose spacing between related sections, button horizontal padding{spacing.xl} = 24px: Medium section separation, card vertical padding{spacing.xxl} = 32px: Large section break{spacing.xxxl} = 64px: Feature/block separation{spacing.section} = 80px: Page section vertical gap{spacing.band} = 112px: Major content band spacing (hero to section transition){spacing.xl} = 24px on all measured breakpoints (375px, 768px, 1024px+)Aesthetic uses generous vertical whitespace to combat dark-background fatigue and create visual breathing room. Horizontal padding remains consistent at {spacing.xl} (24px) across all widths, but vertical spacing scales with content density: headlines enjoy {spacing.band} (112px) separations, while related sections use {spacing.section} (80px). Tight groupings (buttons, form controls) apply {spacing.sm}–{spacing.md} (12–16px) internally, preserving scanability in dense configuration panels.
{rounded.none} = 0px: Images, backgrounds, sharp geometric elements{rounded.xs} = 14px: Cards, panels, contained surfaces (soft corner that reads modern without being aggressively rounded){rounded.full} = 9999px: Buttons, avatars, badges; pill/circular for interactive affordanceThe design uses a single border width: 1px. Borders are applied as outline strokes on cards and inputs (e.g., 1px solid rgb(31, 31, 31) for outline buttons and form controls), signaling containment without visual heaviness. No thicker strokes were measured.
| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; background color only | Default cards, surfaces, backgrounds |
| Interactive | Subtle focus ring (box-shadow via CSS ring properties) or background color shift (e.g., rgb(19, 19, 19)) | Buttons, inputs, hover states |
Shadow Philosophy:
Aesthetic uses color-blocking for depth, not shadows. The single measured shadow is flat (rgba(0, 0, 0, 0) × 5 layers), indicating the design rejects drop-shadows entirely. Instead, layering emerges from discrete background colors: {colors.canvas} (#0A0A0A) → {colors.surface} (#111111) → {colors.neutral-1} (#272727) → {colors.primary} (#1D1D1D). This creates a low-contrast depth model suited to gaming interfaces where floating windows must remain readable without visual noise.
The system defines two opacity thresholds for interaction feedback:
color-mix(in oklab, var(--input) 40%, transparent)Disabled elements uniformly apply 0.5 (50%) opacity, reducing them to a clear "off" state without removing them from view.
Two z-index values structure the stacking order:
z-index: 10 — Menus, popovers, and temporary overlays above base contentz-index: 50 — Modals and full-screen overlays; highest level for critical user interactionsThe gap between 10 and 50 allows insertion of intermediate layers (notifications, tooltips) without redefining the entire stacking context.
{colors.canvas} and {colors.ink} for all critical text; ensure WCAG AA or better readability.{rounded.full} — 9999px) for all primary CTAs; the shape telegraphs interactivity instantly in gaming contexts.#0A0A0A → #111111 → #272727), never with drop-shadows; keep the interface flat and scannable.{colors.body} (#8A8A8A) for secondary copy and metadata; let it recede, making primary text (#FFFFFF) the visual anchor.{spacing.section} (80px) and {spacing.band} (112px) for major vertical breaks; gives dark backgrounds room to breathe without feeling empty.{typography.body-sm}); this size is tuned for long-form content on dark backgrounds.{spacing.xl} (24px) on mobile; the constraint preserves layout consistency.| Viewport | Trigger Point | Max Content Width | Columns | Nav Visible | Largest Heading | Body Size | Section Padding X |
|---|---|---|---|---|---|---|---|
| Mobile | < 768px | 1920px | 1 | Menu toggle active | 60–72px | 16px | 24px |
| Tablet | 768px–1023px | 1920px | 1 | Menu toggle active | 72px | 16px | 24px |
| Desktop | 1024px+ | 1920px | 4 | 9 links visible | 72px | 16px | 24px |
No meaningful change occurs below 1024px: content remains single-column, heading size may compress on very small screens (375px: 60px vs. 768px+: 72px), but section padding stays constant at 24px. At 1024px and above, a 4-column grid becomes available for feature layouts; the nav expands to show 9 visible links instead of a hamburger menu.
Interactive elements (buttons, links, form inputs) must maintain a minimum 40px height to accommodate touch on mobile devices. Measured buttons show 36–40px heights across variants; maintain this floor to ensure comfortable tapping without accidental misses.
z-index: 10 dropdown). Buttons and cards stack vertically; section padding remains {spacing.xl} (24px).Key principle: Horizontal padding never exceeds {spacing.xl} (24px); vertical spacing scales with content, using {spacing.section} (80px) and {spacing.band} (112px) to create rhythm rather than cramping layouts.
{colors.primary} — #1D1D1D){colors.canvas} — #0A0A0A){colors.surface} — #111111){colors.ink} — #FFFFFF){colors.body} — #8A8A8A){colors.neutral-1} — #272727)All buttons are pills ({rounded.full} — 9999px). Primary buttons use {colors.primary} (#1D1D1D) background; secondary buttons are transparent with 1px solid rgb(31, 31, 31) border; ghost buttons are transparent text-only. Never use square or slightly-rounded buttons.
Depth comes from color, not shadows. Cards and surfaces use layered background colors (#0A0A0A, #111111, #272727) to create hierarchy. The only shadow is flat (no visual lift). Apply box-shadow: none to all surfaces.
Typography hierarchy is built on Inter Variable weight shifts, not size alone. Display is 72px, weight 700, with -1.8px tracking. Headings are 36px; body is 14–18px. Always include the negative letter-spacing on display and heading sizes; it defines the brand voice.
Spacing is generous and vertical. Use {spacing.section} (80px) and {spacing.band} (112px) to separate major sections. Component padding is {spacing.md}–{spacing.lg} (16–20px). Never reduce vertical spacing below these scales on dark backgrounds.
Dark backgrounds require high text contrast. Primary text is pure #FFFFFF (Ink); secondary text is #8A8A8A (Body). Avoid mid-gray text on dark surfaces; test all copy against WCAG AA.
Responsive layout: single-column until 1024px, then 4-column grid. Section padding stays {spacing.xl} (24px) across all widths. Breakpoint changes are minimal; focus on stacking and reflow, not drastic visual shifts.
Interactive states: Hover applies opacity fade (0.8) or background color shift (rgb(58, 58, 58) or rgb(19, 19, 19)). Focus-visible adds a ring or border highlight. Disabled elements reduce to 0.5 opacity. All states inherit from measured interactions; do not invent new feedback.
{colors.neutral-1} (#272727) was measured but has no explicit role in the system; it appears to be decorative (borders, dividers, or edge accents). Do not invent a role for it.