Madenrai School

Design Specification — Madenrai School

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#040301), a vivid accent (#F62F24). All type is set in var(--t-text-font,Arial). Detected font weights: 300, 400, 500, 600, 700. Detected style signatures: glassmorphism; gradient-rich / aurora; rounded / pill-heavy.

Logo asset(s): https://static.tildacdn.com/tild3765-6535-4661-b438-313530386431/Frame_1321316430.png

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(0turn,rgba(0,0,0,1) 0%,rgba(255,247,5,0) 100%)
• linear-gradient(left,rgba(255,255,255,.1),rgba(255,255,255,.4))
• linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.4))
• linear-gradient(0turn,rgba(0,0,0,1) 0%,rgba(166,166,166,0) 65%,rgba(255,247,5,0) 100%)
• linear-gradient(0turn,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 9%,rgba(255,247,5,0) 100%)
• linear-gradient(0turn,rgba(0,0,0,1) 0%,rgba(255,247,5,0) 0%,rgba(0,0,0,1) 86%)
• linear-gradient(0turn,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 0%,rgba(255,247,5,0) 100%)
• linear-gradient(0turn,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 0%,rgba(255,247,5,0) 82%)

Typography

Primary typeface: var(--t-text-font — stack: var(--t-text-font,Arial)

Font stacks (most used first)

• var(--t-text-font,Arial)
• var(--t-headline-font,Arial)
• 'Roboto Condensed'
• var(--uc-button-fontfamily-pssitWymlE,var(--t-text-font,Arial))
• 'H1',Arial,sans-serif
• 'H1'
• Arial,Helvetica,sans-serif

Web font sources

• fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;500;600;700&subset=latin,cyrillic

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 500, 600, 700

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Layout

Container max-width: 1199px

Breakpoints

• 479px
• 560px
• 639px
• 640px
• 900px
• 959px
• 960px
• 1199px

Animation & Motion

Transitions

• background-color 0.2s ease-in-out,color 0.2s ease-in-out,border-color 0.2s ease-in-out,box-shadow 0.2s ease-in-out
• color 0.2s ease-in-out
• none
• stroke ease-in-out .2s
• opacity ease-in-out .5s
• opacity 500ms
• transform ease-in-out 0.3s
• opacity ease-in-out 0.3s
• opacity 0.2s cubic-bezier(.25,1,.5,1),visibility 0.2s cubic-bezier(.25,1,.5,1),color 0s ease-in-out
• opacity 0.2s cubic-bezier(.45,0,.55,1),visibility 0.2s cubic-bezier(.45,0,.55,1),color 0s ease-in-out
• opacity ease-in-out 0.2s
• all ease-in-out 0.3s

Easing curves

• linear
• cubic-bezier(.25,1,.5,1)
• cubic-bezier(.45,0,.55,1)
• cubic-bezier(.5,0,.75,0)
• inherit
• ease-in-out

Keyframes

@keyframes flash { 20%{-webkit-transform:translateX(100%);transform:translateX(100%);}100%{-webkit-transform:translateX(100%);transform:translateX(100%);} }
@keyframes flash-md { 30%{-webkit-transform:translateX(100%);transform:translateX(100%);}100%{-webkit-transform:translateX(100%);transform:translateX(100%);} }
@keyframes flash-lg { 40%{-webkit-transform:translateX(100%);transform:translateX(100%);}100%{-webkit-transform:translateX(100%);transform:translateX(100%);} }
@keyframes button-icon-fade-in { from{opacity:0}to{opacity:1} }
@keyframes t-button-hover-animation { to{background-image:none;background-color:transparent} }
@keyframes fadeInUp { 0%{opacity:0;-webkit-transform:translateY(110%);transform:translateY(110%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)} }

Effects

• backdrop-filter: blur(8px)
• backdrop-filter: blur(20px)
• backdrop-filter: blur(0px)
• backdrop-filter: blur(10px)

Source Design Tokens (CSS custom properties)

:root {
  --t396-shadow-text-opacity: 100%;
  --t396-borderwidth: 0px;
  --t396-bordercolor: rgba(228,226,214,0);
  --t396-speedhover: 0.2s;
  --t396-bgcolor-color: rgba(0,0,0,0);
  --t396-bgcolor-image: none;
  --t396-bgcolor-hover-color: #e4e2d6;
  --t396-bgcolor-hover-image: none;
  --t396-shadowshoverspeed: var(--uc-button-speedhover-pssitWymlE,0.2s);
  --icon: url('https://static.tildacdn.com/tild3937-3264-4437-b737-363665643035/Group_1321316280.svg');
  --t396-borderstyle: solid;
  --t396-borderstyle-existed: 1;
  --t-headline-font: 'H1',Arial,sans-serif;
  --t-text-font: 'Roboto Condensed',Arial,sans-serif;
  --uc-button-color-pssitWymlE: #e4e2d6;
  --uc-button-bgcolor-pssitWymlE: rgba(0,0,0,0);
  --uc-button-radius-pssitWymlE: 30px 30px 30px 30px;
  --uc-button-padding-pssitWymlE: 10px 13px 10px 13px;
  --uc-button-bordercolor-pssitWymlE: #e4e2d6;
  --uc-button-bordersize-pssitWymlE: 1px;
  --uc-button-colorhover-pssitWymlE: #0e0e0c;
  --uc-button-bgcolorhover-pssitWymlE: #e4e2d6;
  --uc-button-speedhover-pssitWymlE: 0.2s;
  --uc-button-fontfamily-pssitWymlE: var(--t-text-font,Arial);
  --uc-button-fontweight-pssitWymlE: 400;
  --uc-button-lineheight-pssitWymlE: 1.55;
  --uc-button-uppercase-pssitWymlE: uppercase;
  --uc-button-fontsize-pssitWymlE: 14px;
}

Do's and Don'ts

Do

• Do reserve the accent #F62F24 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 300, 400, 500, 600, 700.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-primary: #2015FF;
  --color-accent: #F62F24;
  --color-background: #FFFFFF;
  --color-surface: #F2F1E9;
  --color-text-primary: #040301;
  --color-secondary: #040301;
  --color-text-secondary: #E4E2D6;
  --color-border: #74736B;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F5F4F1;
  --color-surface-container: #F2F1E9;
  --color-surface-container-high: #EEEEEE;
  --color-surface-container-highest: #E6E6E6;
  --font-sans: var(--t-text-font,Arial);
  --font-size-display: 120px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 30px;
  --font-size-title-lg: 22px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 3px;
  --radius-lg: 30px;
  --space-sm: 8px;
  --space-md: 20px;
  --space-lg: 40px;
  --space-xl: 65px;
  --tracking-display: -1px;
  --tracking-label: 0.5px;
  --container-max: 1199px;
}