Remixes of astraeoratio.plaync.com
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: Astraeoratio
description: |
Astrae Oratio embodies a mystical, celestial aesthetic rooted in deep digital
blues and cosmic atmosphere. The design celebrates a dream-like fantasy world
with elegant serif typography anchoring a modern interface. Harsh lines and
sharp corners dominate, creating a crisp, angular aesthetic that contrasts
with the ethereal imagery of anime characters and glowing architecture. The
colour palette oscillates between near-black canvas surfaces and pure white
accents, with selective use of cool blues and muted coral tones for depth.
This is a high-contrast, nocturnal interface designed for immersion into a
magical RPG universe—every element reinforces the sense of entering a
different realm.
source:
url: "https://astraeoratio.plaync.com/en-us/index"
pagesAnalyzed: 1
extractedAt: 2026-11-02
tokensMeasured: true
colors:
primary: "#FFFFFF"
accent: "#314255"
link: "#9FD4FF"
canvas: "#1A1A1B"
on-primary: "#47474A"
ink: "#FFFFFF"
body: "#29292B"
accent-1: "#CE4550"
neutral-1: "#D2D2D2"
neutral-2: "#F7F3EE"
typography:
display-lg:
fontFamily: "S-Core Dream"
fontSize: 60px
fontWeight: 700
lineHeight: 1.2
letterSpacing: -1.8px
display-md:
fontFamily: "S-Core Dream"
fontSize: 52px
fontWeight: 700
lineHeight: 1.23
letterSpacing: 0px
heading-md:
fontFamily: "S-Core Dream"
fontSize: 34px
fontWeight: 700
lineHeight: 1.35
letterSpacing: 0px
heading-sm:
fontFamily: "S-Core Dream"
fontSize: 28px
fontWeight: 700
lineHeight: 1.36
letterSpacing: -0.84px
body-xl:
fontFamily: "S-Core Dream"
fontSize: 22px
fontWeight: 600
lineHeight: 1.36
letterSpacing: -0.66px
body-xl-tight:
fontFamily: "S-Core Dream"
fontSize: 22px
fontWeight: 600
lineHeight: 1.27
letterSpacing: -0.66px
body-lg:
fontFamily: Pretendard
fontSize: 18px
fontWeight: 500
lineHeight: 1.44
letterSpacing: -0.54px
body-lg-strong:
fontFamily: "S-Core Dream"
fontSize: 18px
fontWeight: 600
lineHeight: 1.44
letterSpacing: -0.54px
body-md:
fontFamily: Pretendard
fontSize: 16px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
body-sm:
fontFamily: "S-Core Dream"
fontSize: 14px
fontWeight: 600
lineHeight: 1.57
letterSpacing: -0.42px
nav:
fontFamily: "S-Core Dream"
fontSize: 20px
fontWeight: 700
lineHeight: 1.4
letterSpacing: -0.6px
button:
fontFamily: "S-Core Dream"
fontSize: 20px
fontWeight: 600
lineHeight: 1.4
letterSpacing: -0.6px
caption-xs:
fontFamily: Pretendard
fontSize: 12px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
caption-xs-loose:
fontFamily: Pretendard
fontSize: 12px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
rounded:
none: 0px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 44px
section: 52px
band: 60px
shadows:
sm: "rgba(0, 0, 0, 0.6) 0px 4px 8px 0px"
md: "rgba(255, 255, 255, 0.04) 0px -1px 0px 0px inset"
elevationStrategy: progressive
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FBFBFC"
surface: "#F1F1F2"
surfaceRaised: "#E9E9EA"
text: "#131314"
textMuted: "#747475"
border: "#D8D8D9"
accent: "#314255"
accentFg: "#FFFFFF"
focusRing: "#314255"
elevation: shadow
dark:
bg: "#1A1A1B"
surface: "#19191A"
surfaceRaised: "#2B2B2C"
text: "#FFFFFF"
textMuted: "#29292B"
border: "#353536"
accent: "#4F6A89"
accentFg: "#FFFFFF"
focusRing: "#314255"
elevation: "border+surface"
contrastFailures:
- "dark: muted on bg = 1.2:1 (needs 4.5:1)"
components:
button-primary:
typography: "{typography.body-md}"
textColor: "{colors.on-primary}"
height: 66.6667px
padding: "6px 6px 6px 6px"
boxShadow: "rgba(0, 0, 0, 0.4) 0px 1px 2px 0px"
rounded: 999px
backgroundColor: "{colors.primary}"
button-filled:
typography: "{typography.body-md}"
textColor: "{colors.on-primary}"
height: 52.6667px
padding: "4px 4px 4px 4px"
boxShadow: "rgba(0, 0, 0, 0.4) 0px 1px 2px 0px"
rounded: 999px
backgroundColor: "{colors.body}"
button-icon:
textColor: "{colors.accent}"
height: 90px
fontSize: 16px
fontFamily: Pretendard
fontWeight: 500
lineHeight: 0
button-icon-sm:
typography: "{typography.body-md}"
textColor: "{colors.on-primary}"
height: 56px
card:
typography: "{typography.body-md}"
textColor: "{colors.accent}"
badge-text:
textColor: "{colors.accent}"
height: 36px
padding: "5px 8px 5px 12px"
fontSize: 16px
fontFamily: "S-Core Dream"
fontWeight: 500
lineHeight: 1.5
backgroundColor: "{colors.canvas}"
badge-text-sm:
textColor: "{colors.ink}"
height: 28px
padding: "3px 15px 3px 12px"
fontSize: 16px
fontFamily: "S-Core Dream"
fontWeight: 500
lineHeight: 1.5
backgroundColor: "{colors.canvas}"
navigation:
typography: "{typography.body-md}"
textColor: "{colors.accent}"
height: 54px
footer:
typography: "{typography.body-md}"
textColor: "{colors.neutral-2}"
padding: "60px 140px 80px 140px"
backgroundColor: "{colors.canvas}"
link:
typography: "{typography.body-md}"
textColor: "{colors.accent}"
padding: "19px 16px 19px 16px"
rounded: 8px
backgroundColor: "rgba(0, 0, 0, 0.06)"
link-2:
typography: "{typography.body-md}"
textColor: "{colors.accent}"
padding: "19px 16px 19px 16px"
rounded: 8px
states:
button-hover:
target: button
state: hover
backgroundColor: "{colors.primary}"
button-disabled:
target: button
state: disabled
opacity: 0.5
other-hover:
target: other
state: hover
boxShadow: "rgba(115, 184, 255, 0.26) 0px 0px 18px, rgba(0, 0, 0, 0.24) 0px 7px 18px"
borderColor: "rgba(255, 255, 255, 0.84)"
card-hover:
target: card
state: hover
transform: "scale(1.08)"
other-disabled:
target: other
state: disabled
textColor: "{colors.on-primary}"
opacity: 1
boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 2px"
backgroundColor: "{colors.primary}"
link-hover:
target: link
state: hover
opacity: 1
other-active:
target: other
state: active
backgroundColor: "rgba(0, 0, 0, 0.08)"
other-focus-visible:
target: other
state: focus-visible
outline: "{colors.primary} solid 2px"
outlineColor: "{colors.ink}"
outlineWidth: 2px
link-focus-visible:
target: link
state: focus-visible
outline: "{colors.body} solid 2px"
outlineColor: "{colors.body}"
outlineWidth: 2px
other-focus:
target: other
state: focus
borderColor: "{colors.body}"
button-focus-visible:
target: button
state: focus-visible
outline: "{colors.body} solid 2px"
outlineColor: "{colors.body}"
outlineWidth: 2px
input-focus:
target: input
state: focus
borderColor: "{colors.body}"
input-disabled:
target: input
state: disabled
backgroundColor: "rgb(247, 247, 247)"
breakpoints:
- width: 375
containerWidth: 1920
gridColumns: 7
navLinksVisible: 5
menuToggleVisible: false
headingPx: 52
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 1920
gridColumns: 7
navLinksVisible: 5
menuToggleVisible: false
headingPx: 52
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 1920
gridColumns: 7
navLinksVisible: 5
menuToggleVisible: false
headingPx: 52
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1920
gridColumns: 7
navLinksVisible: 5
menuToggleVisible: false
headingPx: 52
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1920
gridColumns: 7
navLinksVisible: 5
menuToggleVisible: false
headingPx: 52
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 49
gradientsFound: 0
rolesUnassigned: 3
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Astrae Oratio embodies a mystical, celestial aesthetic rooted in deep digital blues and cosmic atmosphere. The design celebrates a dream-like fantasy world with elegant serif typography anchoring a modern interface. Harsh lines and sharp corners dominate, creating a crisp, angular aesthetic that contrasts with the ethereal imagery of anime characters and glowing architecture. The colour palette oscillates between near-black canvas surfaces and pure white accents, with selective use of cool blues and muted coral tones for depth. This is a high-contrast, nocturnal interface designed for immersion into a magical RPG universe—every element reinforces the sense of entering a different realm.
Key Characteristics:
#1A1A1B as primary canvas{colors.primary} — #FFFFFF): Primary text, headings, active states, primary call-to-action fills, and brand mark. Serves as the dominant foreground colour against dark surfaces.{colors.accent} — #314255): Secondary brand hue; used alongside primary white for depth and contrast. Decorative elements and supporting surfaces.{colors.link} — #9FD4FF): Hyperlink colour; cool blue that signals interactivity and maintains the celestial theme.{colors.accent-1} — #CE4550): Accent tone with no assigned semantic role; appears in decorative contexts and subtle highlights.{colors.canvas} — #1A1A1B): Default page background. Darkest neutral, establishes the nocturnal foundation.{colors.body} — #29292B): Secondary surface; elevated from canvas for card and container backgrounds.{colors.on-primary} — #47474A): Label and secondary text colour on dark surfaces; mid-tone neutral for hierarchy.{colors.neutral-1} — #D2D2D2): Light neutral; used for borders, dividers, and subtle UI elements.{colors.neutral-2} — #F7F3EE): Lightest neutral; appears in footer text and pale surface fills.Primary: S-Core Dream (Google Fonts)
Fallback stack: 'S-Core Dream', 'Arial', sans-serif
Used for: Display, headings, navigation, buttons, and body emphasis.
Secondary: Pretendard (Google Fonts)
Fallback stack: 'Pretendard', 'Segoe UI', sans-serif
Used for: Body text, links, captions, and form inputs.
Tertiary: Noto Serif (Google Fonts)
Fallback stack: 'Noto Serif', 'Georgia', serif
Used where serif emphasis is needed (limited use).
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Large | S-Core Dream | 60px | 700 | 1.2 | −1.8px | Hero banner, largest headings; extreme negative tracking reinforces impact |
| Display Medium | S-Core Dream | 52px | 700 | 1.23 | 0px | Section headings; strong visual weight |
| Heading Medium | S-Core Dream | 34px | 700 | 1.35 | 0px | Page section titles |
| Heading Small | S-Core Dream | 28px | 700 | 1.36 | −0.84px | Subsection titles; tight tracking adds elegance |
| Navigation Link | S-Core Dream | 20px | 700 | 1.4 | −0.6px | Top-level nav; bold and prominent |
| Button | S-Core Dream | 20px | 600 | 1.4 | −0.6px | CTA labels; matches nav weight for consistency |
| Body Extra Large | S-Core Dream | 22px | 600 | 1.36 | −0.66px | Large body emphasis; reduced weight from headings |
| Body Extra Large Tight | S-Core Dream | 22px | 600 | 1.27 | −0.66px | Large body with compressed line height for dense content |
| Body Large Strong | S-Core Dream | 18px | 600 | 1.44 | −0.54px | Strong body emphasis; common in cards and highlights |
| Body Large | Pretendard | 18px | 500 | 1.44 | −0.54px | Standard body copy; medium weight |
| Body Medium | Pretendard | 16px | 500 | 1.5 | 0px | Link text and standard form labels; neutral tracking |
| Body Small | S-Core Dream | 14px | 600 | 1.57 | −0.42px | Smaller text emphasis; still tracked tightly |
| Caption Extra Small | Pretendard | 12px | 400 | 1.5 | 0px | Metadata, timestamps, helper text |
| Caption Extra Small Loose | Pretendard | 12px | 400 | 1.6 | 0px | Captions with slightly increased line height for readability |
Primary Button (White fill)
{colors.primary} (#FFFFFF){colors.on-primary} (#47474A)6px 6px 6px 6px66.67px999px (pill-shaped)0px nonergba(0, 0, 0, 0.4) 0px 1px 2px 0px#FFFFFF (opacity 0.94), Text color → #F5F5F5Filled Button (Dark fill)
{colors.body} (#29292B){colors.on-primary} (#47474A)4px 4px 4px 4px52.67px999px (pill-shaped)0px nonergba(0, 0, 0, 0.4) 0px 1px 2px 0px#1A1A1B or #FFFFFF, Opacity varies 0.8–0.88Icon Button (Large)
rgba(0, 0, 0, 0) (transparent)#31425590px90px0px 0px 0px 0px0px (sharp)noneIcon Button Small
rgba(0, 0, 0, 0) (transparent){colors.on-primary} (#47474A)56px56px0px 0px 0px 0px0px (sharp)noneDefault Card
rgba(0, 0, 0, 0) (transparent; relies on parent surface)#314255424px660px0px 0px 0px 0px0px (sharp corners)0px solid #D2D2D2none#29292BDefault Card Small (alternative layout)
rgba(0, 0, 0, 0) (transparent)#314255728px410px0px 0px 0px 0px0px 75px 0px 0px (top-right corner only)0px solid #D2D2D2noneText Link (default variant)
rgba(0, 0, 0, 0.06) (near-black, low opacity)#31425519px 16px 19px 16px68px8px0px nonenone#29292B or #FF7272#F7F3EE, Opacity 0.3–0.6Text Link (no background variant)
rgba(0, 0, 0, 0) (transparent)#31425519px 16px 19px 16px68px8px0px nonenonergba(0, 0, 0, 0.04)Default Navigation
rgba(0, 0, 0, 0) (transparent)#314255605.27px54px0px 0px 0px 0px0px (sharp)0px solid #D2D2D2rgba(255, 255, 255, 0.04) 0px -1px 0px 0px inset (subtle top border)Text Badge
{colors.canvas} (#1A1A1B)#3142555px 8px 5px 12px36px0px (sharp)0px solid #D2D2D2noneText Badge Small
{colors.canvas} (#1A1A1B){colors.primary} (#FFFFFF)3px 15px 3px 12px28px0px 999px 999px 0px (right side only pill-shaped)0px solid #D2D2D2noneDefault Footer
{colors.canvas} (#1A1A1B){colors.neutral-2} (#F7F3EE)60px 140px 80px 140px1920px487.19px0px (sharp)0px solid #D2D2D2noneAstrae Oratio uses an 8px base unit with a logarithmic scale that accelerates at larger intervals for flexible spacing across UI layers.
{spacing.xxs} = 4px — Micro adjustments, internal padding in compact components{spacing.xs} = 8px — Tight spacing between adjacent elements{spacing.sm} = 12px — Small gaps; element padding and borders{spacing.md} = 16px — Standard spacing; default padding and gaps{spacing.lg} = 20px — Medium spacing; card internal gaps, section boundaries{spacing.xl} = 24px — Large spacing; component margins{spacing.xxl} = 28px — Extra-large spacing; container boundaries{spacing.xxxl} = 44px — Massive spacing; hero section gaps{spacing.section} = 52px — Section-to-section vertical rhythm{spacing.band} = 60px — Band/hero vertical padding; sets immersive scale1920px (full-width sections persist across all measured breakpoints)7 columns measured at all breakpoints (375px to 1440px)0px at all viewport sizes; full-width hero and band strategy140px horizontal (140px left, 140px right); creates elegant inset on narrow viewportsSpacing follows a breathing room approach: large vertical gaps between sections ({spacing.section} and {spacing.band}) emphasize content isolation and allow hero imagery to dominate. Horizontal spacing remains minimal (0px section padding) to maximize immersion. Internal component padding uses {spacing.md} and {spacing.lg} to create breathing room within cards and inputs without feeling loose. This creates a dense, focused information architecture layered atop expansive visual real estate.
The system uses sharp corners (0px) as the default aesthetic, with two exceptions:
{rounded.none} = 0px — Applied to buttons (base state), cards, badges (default), images, navigation, and all UI surfaces999px — Applied to primary button variants, creating distinctive CTA focus; soft yet prominent75px (top-right only on card small variant) and 8px (text link variants) — Minimal, controlled rounding for selected interactive statesThis sharp-first approach reinforces the angular, digital aesthetic of the interface while reserving radius for high-priority interactive elements.
| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; solid fill or transparent background | Cards, sections, badges |
| Subtle | rgba(255, 255, 255, 0.04) 0px -1px 0px 0px inset | Navigation borders; barely-there lift |
| Card Lift | rgba(0, 0, 0, 0.6) 0px 4px 8px 0px | Cards in hover or interactive state |
| Button Lift | rgba(0, 0, 0, 0.4) 0px 1px 2px 0px | Primary and filled buttons; minimal elevation |
Shadow Philosophy: Astrae Oratio minimizes shadow depth, relying instead on color blocking and transform shifts to convey elevation. This creates a flatter, more illustrative aesthetic that prioritizes the hero imagery and celestial theme over traditional depth. When shadows appear, they use warm black tones (rgba(0, 0, 0, 0.4–0.6)) to maintain the nocturnal mood. Hover states often employ transform: scale() or transform: translateY() rather than shadow intensification, reinforcing the magical, ephemeral quality of the interface.
The system uses selective opacity for refinement and state indication:
1.00 (100%) — Fully opaque; default state for all text and fills0.99 (99%) — Barely visible reduction; often applied to overlays0.96 (96%) — Hover states on light surfaces; subtle visual feedback0.88 (88%) — Button hover; noticeable but not jarring0.69 (69%) — Medium emphasis reduction; secondary UI elements0.56 (56%) — Low emphasis; decorative text or disabled-adjacent states0.00 (0%) — Invisible; used for opacity transitions and hidden statesDisabled elements typically use 0.3–0.6 opacity depending on component role, creating a clear visual distinction without removing the element from layout flow.
This minimal z-index ladder reflects the page structure: content, then interactive overlays, then persistent chrome. No modal or toast layers were observed in the extraction, so their z-indices are not defined.
0px border radius on cards, buttons (except primary CTAs), and all neutral UI. Sharpness is a core aesthetic.999px radius to signal interactivity.#FFFFFF) on near-black (#1A1A1B or #29292B) maintains brand legibility and nocturnal mood.scale() or translateY() to indicate interactivity rather than adding drop shadows.0px radius; deviating blurs the design language.700 for display and heading roles; weight hierarchy is central to clarity.#1A1A1B) as primary background; never reverse to light mode within the same surface.{spacing.section} (52px) or {spacing.band} (60px) for visual breathing room.| Viewport | Content Max Width | Grid Columns | Nav Links Visible | Menu Toggle | Display Lg | Body Text | Section Padding-X |
|---|---|---|---|---|---|---|---|
| 375px (Mobile) | 1920px | 7 | 5 | No | 52px | 16px | 0px |
| 768px (Tablet) | 1920px | 7 | 5 | No | 52px | 16px | 0px |
| 1024px (Small Desktop) | 1920px | 7 | 5 | No | 52px | 16px | 0px |
| 1280px (Desktop) | 1920px | 7 | 5 | No | 52px | 16px | 0px |
| 1440px (Large Desktop) | 1920px | 7 | 5 | No | 52px | 16px | 0px |
Key Observation: The site does not collapse at any measured breakpoint. Content remains at 1920px width, navigation is always visible (5 links), and padding is uniform at 0px across all viewport sizes. This suggests either a locked layout or breakpoints beyond 1440px. The design prioritizes full-width immersion over responsive adaptation.
52.67px height (filled) to 66.67px (primary); exceeds 44px WCAG guideline56px (small) to 90px (large); ample touch surface54px height; accessible on touch68px height (with padding); comfortable for finger inputNo responsive collapse observed. Across all breakpoints (375px–1440px), the following remain constant:
1920px70pxImplication: The site likely has a fixed-width design with horizontal scroll on mobile, or breakpoints exist beyond 1440px that were not measured. Sections extend full-width edge-to-edge regardless of viewport. Hero imagery, hero banner text, and navigation persist at desktop scale even on narrow screens, enforcing the immersive aesthetic over mobile-first adaptation.
{colors.primary} — #FFFFFF); use on buttons, headings, and brand mark{colors.canvas} — #1A1A1B); default page background and footer fill{colors.body} — #29292B); elevated containers and card backgrounds{colors.on-primary} — #47474A); secondary text and button labels{colors.link} — #9FD4FF); hyperlinks maintaining celestial theme{colors.accent} — #314255); supporting surfaces and decorative elements{colors.neutral-1} — #D2D2D2); borders and dividers{colors.neutral-2} — #F7F3EE); footer text and pale fills{colors.accent-1} — #CE4550); no assigned role; use sparingly for highlightsStart with the dark canvas (#1A1A1B): All page backgrounds begin here; layer in #29292B for surface elevation.
Use white (#FFFFFF) for primary visual weight: Headings, primary buttons, and brand marks rely on this single, high-contrast colour.
Apply sharp corners by default (0px radius): Only deviate for primary CTAs (999px pill) and specific interactive elements (8px or 75px partial radius).
Set display type with aggressive negative tracking: Sizes 28px+ use −0.54px to −1.8px letter-spacing; never use neutral (0px) tracking on large headlines.
Elevate depth through colour shifts and transform, never shadow stacking: Change background or scale on hover; minimal box-shadow only on buttons (0 1px 2px).
Maintain full-width hero sections: Backgrounds extend edge-to-edge; internal padding is 0px horizontal, with section padding vertical at {spacing.section} or {spacing.band}.
Respect opacity for state: Disabled = 0.3–0.6; hover = 0.8–0.96; transitions use opacity for subtlety, not harshness.
Reserve 999px radius for primary CTAs only: All other buttons, cards, and inputs remain sharp; this exception signals high-priority interaction.
Pair S-Core Dream (headings/nav) with Pretendard (body): Geometric boldness anchors the top; neutral sans-serif grounds the copy.
Never invert the canvas: The nocturnal theme is foundational; dark canvas + white type is non-negotiable for brand continuity.
{colors.accent-1} (#CE4550), {colors.neutral-1} (#D2D2D2), and {colors.neutral-2} (#F7F3EE) were measured but not linked to specific UI functions; treat them as decorative unless a role emerges in implementation.