Remixes of sotkaonline.ru
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: Sotkaonline
description: |
Сотка is a vibrant, modern educational platform designed with premium
aesthetics and energetic depth. The visual language combines sharp, bold
typography with gradient-rich hero sections that shift from deep navy
(#070732) through electric blue (#1455FF) into bright cyan, creating a sense
of progression and transformation. The design embraces micro-interactions,
elevated card treatments, and decorative accent colors that establish playful
energy without compromising professional credibility. The brand prioritizes
clarity through generous whitespace and strong hierarchy, while maintaining
visual sophistication via carefully considered neutral tones and shadow depth.
This is an aspirational platform that celebrates student achievement through
confident, forward-looking design.
source:
url: "https://sotkaonline.ru/"
pagesAnalyzed: 6
extractedAt: 2026-10-06
tokensMeasured: true
colors:
primary: "#070732"
accent: "#1455FF"
canvas: "#FFFFFF"
surface: "#F4F5F6"
surface-alt: "#050521"
on-primary: "#FFFFFF"
ink: "#000000"
body: "#0E0E12"
muted: "#1B1D21"
accent-1: "#0000EE"
accent-2: "#14151A"
accent-3: "#FFD6C4"
accent-4: "#11C627"
accent-5: "#007AFF"
typography:
display-lg:
fontFamily: "Graphik LCG"
fontSize: 60px
fontWeight: 600
lineHeight: 1.08
letterSpacing: -1.2px
display-md:
fontFamily: "PP Right Grotesk"
fontSize: 58px
fontWeight: 500
lineHeight: 0.97
letterSpacing: -1.16px
display-sm:
fontFamily: "Graphik LCG"
fontSize: 52px
fontWeight: 600
lineHeight: 1.08
letterSpacing: -1.04px
display-xs:
fontFamily: "Graphik LCG"
fontSize: 48px
fontWeight: 600
lineHeight: 1.14
letterSpacing: -2px
display-xs-2:
fontFamily: "Graphik LCG"
fontSize: 48px
fontWeight: 600
lineHeight: 1.14
letterSpacing: -0.96px
display-xs-tight:
fontFamily: "Graphik LCG"
fontSize: 48px
fontWeight: 600
lineHeight: 1.08
letterSpacing: -1.04px
heading-xl:
fontFamily: "PP Right Grotesk"
fontSize: 38px
fontWeight: 500
lineHeight: 0.9
letterSpacing: -0.76px
heading-lg:
fontFamily: "PP Right Grotesk"
fontSize: 32px
fontWeight: 500
lineHeight: 0.94
letterSpacing: -0.64px
heading-lg-tight:
fontFamily: "PP Right Grotesk"
fontSize: 32px
fontWeight: 500
lineHeight: 1
letterSpacing: -2px
heading-md:
fontFamily: "PP Right Grotesk"
fontSize: 30px
fontWeight: 500
lineHeight: 0.9
letterSpacing: -2px
heading-sm:
fontFamily: "PP Right Grotesk"
fontSize: 28px
fontWeight: 500
lineHeight: 0.93
letterSpacing: -0.56px
heading-xs:
fontFamily: "PP Right Grotesk"
fontSize: 26px
fontWeight: 500
lineHeight: 0.9
letterSpacing: -0.52px
body-md:
fontFamily: "Graphik LCG"
fontSize: 16px
fontWeight: 500
lineHeight: 1.25
letterSpacing: -0.08px
body-md-tight:
fontFamily: "Graphik LCG"
fontSize: 16px
fontWeight: 500
lineHeight: 1.4
letterSpacing: -0.5px
body-sm:
fontFamily: "Graphik LCG"
fontSize: 14px
fontWeight: 400
lineHeight: 1.4
letterSpacing: -0.07px
body-sm-tight:
fontFamily: "Graphik LCG"
fontSize: 14px
fontWeight: 400
lineHeight: 1.4
letterSpacing: -0.5px
body-sm-strong:
fontFamily: "Graphik LCG"
fontSize: 14px
fontWeight: 500
lineHeight: 1.32
letterSpacing: -0.07px
body-sm-2:
fontFamily: "Graphik LCG"
fontSize: 14px
fontWeight: 500
lineHeight: 1.4
letterSpacing: -0.5px
button-xl:
fontFamily: "PP Right Grotesk"
fontSize: 24px
fontWeight: 500
lineHeight: 0.92
letterSpacing: -0.48px
button-lg:
fontFamily: "Graphik LCG"
fontSize: 16px
fontWeight: 500
lineHeight: 1.4
letterSpacing: -0.08px
button-lg-arial:
fontFamily: Arial
fontSize: 16px
fontWeight: 500
lineHeight: 1.4
letterSpacing: -0.08px
button-lg-strong:
fontFamily: "Graphik LCG"
fontSize: 16px
fontWeight: 600
lineHeight: 1.4
letterSpacing: -0.08px
button-md:
fontFamily: "Graphik LCG"
fontSize: 14px
fontWeight: 500
lineHeight: 1.29
letterSpacing: -0.07px
button-md-arial:
fontFamily: Arial
fontSize: 14px
fontWeight: 500
lineHeight: 1
letterSpacing: 0px
label-md:
fontFamily: "Inter Tight"
fontSize: 16px
fontWeight: 500
letterSpacing: 0.16px
label-sm:
fontFamily: Arial
fontSize: 13.3333px
fontWeight: 400
letterSpacing: 0px
caption-xs:
fontFamily: "Graphik LCG"
fontSize: 12px
fontWeight: 500
lineHeight: 1.3
letterSpacing: -0.5px
caption-xs-2:
fontFamily: "Graphik LCG"
fontSize: 12px
fontWeight: 500
lineHeight: 1.3
letterSpacing: 0px
rounded:
none: 0px
xs: 5px
sm: 6px
md: 8px
lg: 10px
xl: 12px
xxl: 16px
r-20: 20px
r-24: 24px
r-28: 28px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 40px
band: 48px
borderWidths:
thin: 1px
medium: 2px
shadows:
sm: "rgba(0, 0, 0, 0.2) 0px 0px 10px 1px"
md: "rgba(7, 7, 50, 0.08) 0px -8px 24px 0px"
elevationStrategy: progressive
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F4F5F6"
surfaceRaised: "#EAEBEC"
text: "#000000"
textMuted: "#0E0E12"
border: "#E0E0E0"
accent: "#070732"
accentFg: "#FFFFFF"
focusRing: "#070732"
elevation: shadow
dark:
bg: "#0D0D11"
surface: "#1C1C1F"
surfaceRaised: "#28282B"
text: "#F5F5F7"
textMuted: "#9D9DA0"
border: "#343437"
accent: "#6C6CEA"
accentFg: "#0B0B0C"
focusRing: "#4848E5"
elevation: "border+surface"
gradients:
- context: section
kind: linear
value: "linear-gradient(rgb(7, 7, 50) 77.57%, rgb(20, 85, 255) 88.78%, rgb(100, 198, 255) 100%)"
- context: section
kind: linear
value: "linear-gradient(rgb(255, 224, 230) 77.57%, rgb(255, 187, 148), rgb(253, 79, 73)), none"
- context: section
kind: linear
value: "linear-gradient(0deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%), linear-gradient(rgb(255, 204, 250) 76.35%, rgb(255, 66, 214) 93.79%, rgb(253, 49, 107) 107.61%), linear-gradient(rgb(223, 216, 255) 69.35%, rgb(201, 101, 255) 84.71%, rgb(89, 56, 255) 96.88%)"
- context: section
kind: linear
value: "linear-gradient(rgb(215, 232, 255) 79.99%, rgb(100, 198, 255) 89.89%, rgb(20, 85, 255) 99.99%)"
- context: section
kind: linear
value: "linear-gradient(rgb(64, 255, 51), rgb(188, 255, 182) 50%, rgb(255, 255, 255), rgb(167, 255, 253) 60%, rgb(106, 255, 250))"
- context: section
kind: linear
value: "linear-gradient(rgb(80, 116, 255), rgb(213, 224, 255) 36%)"
components:
button-filled:
typography: "{typography.body-md-tight}"
textColor: "{colors.body}"
height: 62.4062px
padding: "20px 16px 20px 16px"
rounded: "{rounded.xl}"
backgroundColor: "rgba(2, 9, 26, 0.04)"
button-primary:
typography: "{typography.body-md-tight}"
textColor: "{colors.on-primary}"
height: 56.4062px
padding: "17px 0px 17px 0px"
rounded: "{rounded.xl}"
backgroundColor: "{colors.primary}"
button-filled-sm:
typography: "{typography.body-md-tight}"
textColor: "{colors.on-primary}"
border: "1px solid rgba(14, 14, 18, 0.08)"
height: 54.4062px
padding: "15px 0px 15px 0px"
rounded: "{rounded.xl}"
backgroundColor: "rgba(255, 255, 255, 0.16)"
button-primary-sm:
typography: "{typography.body-sm-2}"
textColor: "{colors.on-primary}"
height: 47.5938px
padding: "14px 0px 14px 0px"
rounded: "{rounded.lg}"
backgroundColor: "{colors.primary}"
card-featured:
textColor: "{colors.body}"
border: "1px solid {colors.accent}"
fontSize: 16px
fontFamily: "PP Right Grotesk"
fontWeight: 500
rounded: "{rounded.lg}"
backgroundColor: "rgba(20, 85, 255, 0.05)"
card-featured-lg:
textColor: "{colors.on-primary}"
padding: "12px 12px 12px 12px"
fontSize: 16px
fontFamily: "PP Right Grotesk"
fontWeight: 500
rounded: "{rounded.xxl}"
backgroundColor: "{colors.body}"
card:
textColor: "{colors.body}"
padding: "12px 12px 12px 12px"
fontSize: 16px
fontFamily: "PP Right Grotesk"
fontWeight: 500
rounded: "{rounded.xxl}"
backgroundColor: "{colors.accent-3}"
badge-text:
typography: "{typography.body-sm-2}"
textColor: "{colors.on-primary}"
height: 67.7812px
padding: "4px 8px 4px 8px"
badge-text-sm:
typography: "{typography.body-sm-2}"
textColor: "{colors.body}"
height: 66.7812px
padding: "4px 8px 4px 8px"
navigation:
textColor: "{colors.body}"
height: 27.5938px
fontSize: 16px
fontFamily: "Graphik LCG"
fontWeight: 500
navigation-2:
textColor: "{colors.muted}"
height: 27.5938px
fontSize: 16px
fontFamily: "Graphik LCG"
fontWeight: 400
lineHeight: 1
footer:
textColor: "{colors.body}"
border: "1px solid rgba(14, 14, 18, 0.08)"
padding: "40px 130px 40px 130px"
fontSize: 16px
fontFamily: "Graphik LCG"
fontWeight: 500
backgroundColor: "{colors.canvas}"
footer-sm:
textColor: "{colors.muted}"
border: "1px solid rgba(14, 14, 18, 0.08)"
padding: "40px 130px 40px 130px"
fontSize: 16px
fontFamily: "Graphik LCG"
fontWeight: 400
lineHeight: 1
backgroundColor: "{colors.canvas}"
link:
typography: "{typography.body-sm-strong}"
textColor: "{colors.accent}"
padding: "15px 15px 15px 15px"
rounded: "{rounded.lg}"
backgroundColor: "rgba(20, 85, 255, 0.05)"
link-sm:
typography: "{typography.body-sm-2}"
textColor: "rgb(1, 119, 255)"
padding: "8px 12px 8px 12px"
rounded: "{rounded.xl}"
backgroundColor: "rgba(1, 119, 255, 0.08)"
states:
button-hover:
target: button
state: hover
opacity: 0.8
other-disabled:
target: other
state: disabled
opacity: 0.3
other-hover:
target: other
state: hover
opacity: 0.8
link-hover:
target: link
state: hover
opacity: 0.8
other-focus:
target: other
state: focus
outline: none
borderColor: currentcolor
borderWidth: medium
backgroundColor: "rgba(2, 9, 26, 0.06)"
button-focus-visible:
target: button
state: focus-visible
outline: "currentcolor solid 2px"
outlineColor: currentcolor
outlineWidth: 2px
input-hover:
target: input
state: hover
outline: "{colors.accent} solid 2px"
outlineColor: "{colors.accent}"
outlineWidth: 2px
backgroundColor: "{colors.canvas}"
button-active:
target: button
state: active
textColor: "{colors.ink}"
backgroundColor: "rgb(239, 239, 239)"
card-hover:
target: card
state: hover
opacity: 1
input-focus:
target: input
state: focus
outline: none
breakpoints:
- width: 375
containerWidth: 351
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: false
headingPx: 40
bodyPx: 16
sectionPaddingX: 12
- width: 768
containerWidth: 744
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: false
headingPx: 40
bodyPx: 16
sectionPaddingX: 12
- width: 1024
containerWidth: 1000
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: false
headingPx: 40
bodyPx: 16
sectionPaddingX: 12
- width: 1280
containerWidth: 1204
gridColumns: 2
navLinksVisible: 37
menuToggleVisible: false
headingPx: 72
bodyPx: 16
sectionPaddingX: 60
- width: 1440
containerWidth: 1400
gridColumns: 2
navLinksVisible: 37
menuToggleVisible: false
headingPx: 72
bodyPx: 16
sectionPaddingX: 10
coverage:
statesFound: 63
gradientsFound: 16
rolesUnassigned: 5
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
tokens: colors: primary: "#070732" accent: "#1455FF" accent-1: "#0000EE" accent-2: "#14151A" accent-3: "#FFD6C4" accent-4: "#11C627" accent-5: "#007AFF" canvas: "#FFFFFF" surface: "#F4F5F6" surface-alt: "#050521" ink: "#000000" body: "#0E0E12" muted: "#1B1D21" typography: body-sm-strong: size: "14px" weight: 500 lineHeight: 1.32 letterSpacing: "-0.07px" body-md: size: "16px" weight: 500 lineHeight: 1.25 letterSpacing: "-0.08px" body-sm-2: size: "14px" weight: 500 lineHeight: 1.4 letterSpacing: "-0.5px" button-md: size: "14px" weight: 500 lineHeight: 1.29 letterSpacing: "-0.07px" button-lg: size: "16px" weight: 500 lineHeight: 1.4 letterSpacing: "-0.08px" body-md-tight: size: "16px" weight: 500 lineHeight: 1.4 letterSpacing: "-0.5px" body-sm: size: "14px" weight: 400 lineHeight: 1.4 letterSpacing: "-0.07px" body-sm-tight: size: "14px" weight: 400 lineHeight: 1.4 letterSpacing: "-0.5px" button-lg-strong: size: "16px" weight: 600 lineHeight: 1.4 letterSpacing: "-0.08px" caption-xs: size: "12px" weight: 500 lineHeight: 1.3 letterSpacing: "-0.5px" display-xs: size: "48px" weight: 600 lineHeight: 1.14 letterSpacing: "-2px" display-xs-2: size: "48px" weight: 600 lineHeight: 1.14 letterSpacing: "-0.96px" display-xs-tight: size: "48px" weight: 600 lineHeight: 1.08 letterSpacing: "-1.04px" display-sm: size: "52px" weight: 600 lineHeight: 1.08 letterSpacing: "-1.04px" display-lg: size: "60px" weight: 600 lineHeight: 1.08 letterSpacing: "-1.2px" caption-xs-2: size: "12px" weight: 500 lineHeight: 1.3 letterSpacing: "0px" display-md: size: "58px" weight: 500 lineHeight: 0.97 letterSpacing: "-1.16px" heading-lg: size: "32px" weight: 500 lineHeight: 0.94 letterSpacing: "-0.64px" heading-sm: size: "28px" weight: 500 lineHeight: 0.93 letterSpacing: "-0.56px" heading-xs: size: "26px" weight: 500 lineHeight: 0.9 letterSpacing: "-0.52px" button-xl: size: "24px" weight: 500 lineHeight: 0.92 letterSpacing: "-0.48px" heading-lg-tight: size: "32px" weight: 500 lineHeight: 1 letterSpacing: "-2px" heading-xl: size: "38px" weight: 500 lineHeight: 0.9 letterSpacing: "-0.76px" heading-md: size: "30px" weight: 500 lineHeight: 0.9 letterSpacing: "-2px" label-sm: size: "13px" weight: 400 lineHeight: null letterSpacing: "0px" button-md-arial: size: "14px" weight: 500 lineHeight: 1 letterSpacing: "0px" button-lg-arial: size: "16px" weight: 500 lineHeight: 1.4 letterSpacing: "-0.08px" label-md: size: "16px" weight: 500 lineHeight: null letterSpacing: "0.16px" spacing: xxs: "4px" xs: "8px" sm: "12px" md: "16px" lg: "20px" xl: "24px" xxl: "28px" xxxl: "32px" section: "40px" band: "48px" rounded: none: "0px" xs: "5px" sm: "6px" md: "8px" lg: "10px" xl: "12px" xxl: "16px" r-20: "20px" r-24: "24px" r-28: "28px" full: "9999px" shadows: sm: "rgba(0, 0, 0, 0.2) 0px 0px 10px 1px" md: "rgba(7, 7, 50, 0.08) 0px -8px 24px 0px" borders: thin: "1px" medium: "2px"
Сотка is a vibrant, modern educational platform designed with premium aesthetics and energetic depth. The visual language combines sharp, bold typography with gradient-rich hero sections that shift from deep navy ({colors.primary} — #070732) through electric blue ({colors.accent} — #1455FF) into bright cyan, creating a sense of progression and transformation. The design embraces micro-interactions, elevated card treatments, and decorative accent colors that establish playful energy without compromising professional credibility. The brand prioritizes clarity through generous whitespace and strong hierarchy, while maintaining visual sophistication via carefully considered neutral tones and shadow depth. This is an aspirational platform that celebrates student achievement through confident, forward-looking design.
Key Characteristics:
{rounded.md} to {rounded.xxl}) for approachability{colors.primary} — #070732): Deep navy used for primary CTAs, brand mark, active states, and premium button fills. Establishes trust and sophistication.{colors.accent} — #1455FF): Bright electric blue for secondary accents, hero gradient transitions, link states, and focus outlines. Creates energy and guides attention.{colors.accent-3} — #FFD6C4): Warm peachy-pink used in gradient overlays and background decorations. No assigned interactive role.{colors.accent-4} — #11C627): Vibrant green for thematic visual elements and decorative badges. No assigned interactive role.{colors.accent-5} — #007AFF): Sky blue for gradient components and secondary decorative sections. No assigned interactive role.{colors.accent-1} — #0000EE): Deep electric blue. No measured role; treated as decorative.{colors.accent-2} — #14151A): Near-black. No measured role; treated as decorative.{colors.canvas} — #FFFFFF): Default page background and primary surface for content cards. Also used as label color on brand surfaces.{colors.surface} — #F4F5F6): Light gray card and panel background. Creates subtle visual separation.{colors.surface-alt} — #050521): Dark navy alternating section band for high-contrast layout zones.{colors.ink} — #000000): Pure black for primary headings and critical text.{colors.body} — #0E0E12): Soft black for body copy and standard text. Slightly warmer than pure ink.{colors.muted} — #1B1D21): Dark gray for captions, secondary text, and de-emphasized content.Primary Display & Headings: PP Right Grotesk (fallback: -apple-system, BlinkMacSystemFont, sans-serif) Body, Buttons, & UI: Graphik LCG (fallback: system-ui, sans-serif) Forms & Labels: Inter Tight or Arial (fallback: system-ui, sans-serif)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Large | PP Right Grotesk | 60px | 600 | 1.08 | -1.2px | Hero / h1 primary |
| Display Medium | PP Right Grotesk | 58px | 500 | 0.97 | -1.16px | Large heading / h2, h3 |
| Display Small | Graphik LCG | 52px | 600 | 1.08 | -1.04px | Extra-large display |
| Display XS | Graphik LCG | 48px | 600 | 1.14 | -2px (and -0.96px, -1.04px variants) | Large heading / h3 |
| Heading XL | PP Right Grotesk | 38px | 500 | 0.9 | -0.76px | Major section heading |
| Heading LG | PP Right Grotesk | 32px | 500 | 0.94 | -0.64px | Or -2px (tight variant) |
| Heading MD | PP Right Grotesk | 30px | 500 | 0.9 | -2px | Sub-section heading |
| Heading SM | PP Right Grotesk | 28px | 500 | 0.93 | -0.56px | Minor heading |
| Heading XS | PP Right Grotesk | 26px | 500 | 0.9 | -0.52px | Small heading |
| Button XL | PP Right Grotesk | 24px | 500 | 0.92 | -0.48px or -0.24px | Large button / h3 context |
| Button LG | Graphik LCG | 16px | 500 | 1.4 | -0.08px | Standard large button |
| Button LG Strong | Graphik LCG | 16px | 600 | 1.4 | -0.08px | Emphasized button |
| Body MD | Graphik LCG | 16px | 500 | 1.25 | -0.08px | Standard body copy |
| Body MD Tight | Graphik LCG | 16px | 500 | 1.4 | -0.5px | Compact body variant |
| Button MD | Graphik LCG | 14px | 500 | 1.29 | -0.07px | Medium button |
| Body SM Strong | Graphik LCG | 14px | 500 | 1.32 | -0.07px | Emphasized small text |
| Body SM | Graphik LCG | 14px | 400 | 1.4 | -0.07px | Small body text, links |
| Body SM 2 | Graphik LCG | 14px | 500 | 1.4 | -0.5px | Compact small body |
| Body SM Tight | Graphik LCG | 14px | 400 | 1.4 | -0.5px | Tight small body |
| Caption XS | Graphik LCG | 12px | 500 | 1.3 | -0.5px or 0px | Caption / helper text |
| Label SM | Arial | 13px | 400 | — | 0px | Form label |
| Label MD | Inter Tight | 16px | 500 | — | 0.16px | Input label |
Primary Filled Button
{colors.primary} (#070732){colors.canvas} (#FFFFFF){rounded.xl} (12px)Secondary Filled Button (light background)
rgba(2, 9, 26, 0.04) (light navy overlay){colors.body} (#0E0E12){rounded.xl} (12px)Small Primary Button
{colors.primary} (#070732){colors.canvas} (#FFFFFF){rounded.lg} (10px)Tertiary Button (transparent outline on light background)
rgba(255, 255, 255, 0.16) (white with transparency){colors.canvas} (#FFFFFF){rounded.xl} (12px)Featured Card (Blue Accent)
{colors.body} (#0E0E12){colors.accent} (#1455FF){rounded.lg} (10px)Featured Large Card (Dark)
{colors.body} (#0E0E12){colors.canvas} (#FFFFFF){rounded.xxl} (16px)Default Card (pastel gradient backgrounds)
#FFD6C4 (coral/peach) or gradient overlay{colors.body} (#0E0E12){rounded.xxl} (16px)Gradient Card with Overlay
{colors.canvas} (#FFFFFF){rounded.r-20} (20px) to {rounded.r-28} (28px)rgba(7, 7, 50, 0.08) 0px -8px 24px 0pxText Input
{colors.canvas} (#FFFFFF){colors.body} (#0E0E12){rounded.md} (8px) to {rounded.lg} (10px){colors.accent} (#1455FF){colors.canvas} (#FFFFFF){colors.accent} (#1455FF), background {colors.canvas}Select Dropdown
{colors.canvas} (#FFFFFF){colors.body} (#0E0E12){rounded.lg} (10px){colors.accent} (#1455FF), background {colors.canvas}Primary Navigation (Desktop)
{colors.body} (#0E0E12)Secondary Navigation
{colors.muted} (#1B1D21)Badge (text variant)
{colors.canvas} (#FFFFFF)Badge (secondary text variant)
{colors.body} (#0E0E12)Link (Default)
{colors.accent} (#1455FF){rounded.lg} (10px)Link (Secondary Small)
#0177FF{rounded.xl} (12px)#1455FFFooter Container
{colors.canvas} (#FFFFFF){colors.body} (#0E0E12)Footer Secondary Text
{colors.muted} (#1B1D21)The spacing system uses a consistent base unit of 4px, scaling in multiples:
{spacing.xxs} = 4px{spacing.xs} (8px), {spacing.sm} (12px){spacing.md} (16px), {spacing.lg} (20px), {spacing.xl} (24px){spacing.xxl} (28px), {spacing.xxxl} (32px){spacing.section} (40px), {spacing.band} (48px)Usage Context:
{spacing.md} to {spacing.xl} (16px–24px){spacing.xs} to {spacing.sm} (8px–12px){spacing.section} to {spacing.band} (40px–48px){spacing.section} (40px) at medium breakpoints, {spacing.band} (48px–60px) at desktopWhitespace drives premium perception through generous breathing room between sections and components. Hero sections use full-viewport height with layered gradients and transparent overlays. Cards maintain internal padding of at least {spacing.md} (16px), with inter-component gaps of {spacing.sm} to {spacing.md} (12px–16px). Section breaks employ {spacing.band} (48px) vertical separation at desktop, collapsing to {spacing.section} (40px) on smaller screens. Typography hierarchy is enhanced through tight negative letter-spacing combined with generous line-height (1.08–1.4 depending on size), preventing text from feeling cramped despite compressed character spacing.
{rounded.none} (0px) — Footer, navigation backgrounds{rounded.xs} (5px) — Image containers{rounded.sm} (6px) — Secondary UI elements{rounded.md} (8px) — Buttons (primary){rounded.lg} (10px) — Cards (featured), input fields, links{rounded.xl} (12px) — Buttons (secondary), large buttons, inputs{rounded.xxl} (16px) — Large cards, featured card containers{rounded.r-20} (20px), {rounded.r-24} (24px), {rounded.r-28} (28px) — Gradient overlays, large feature cards{rounded.full} (9999px) — Avatar images1px — Used on button outlines and input borders (secondary states)2px — Used on focused input fields and accent card borders| Level | Treatment | Use |
|---|---|---|
| Base (Flat) | No shadow, surface color only | Page background, standard cards, buttons |
| Lifted (sm) | rgba(0, 0, 0, 0.2) 0px 0px 10px 1px | Dropdown menus, overlays |
| Elevated (md) | rgba(7, 7, 50, 0.08) 0px -8px 24px 0px | Featured cards, hover states |
The system employs color-blocking depth, where elevation is created primarily through surface color changes (dark navy sections, light gray cards, white pages) rather than aggressive shadows. When shadows do appear, they are subtle and directional—the md shadow uses an upward 8px offset with soft blur, creating a floating effect. The sm shadow is uniform (0px offset) with modest spread, suitable for menus that sit atop content.
A simple layering scale manages stacking context:
The system avoids deep nesting; most interactive surfaces require only z-index 1–4.
#070732) for all critical CTAs to establish brand authority and guide user intent.{spacing.md} (16px) padding inside cards and containers for breathing room and readability.rgba(255, 255, 255, 0.7)) to maintain text contrast on vibrant hero sections.{rounded.md} to {rounded.xxl}) consistently across all interactive components for approachability.{colors.accent} (#1455FF) for secondary actions, links, focus states, and attention-drawing elements.{colors.body}, {colors.muted}) for body text and secondary hierarchy to avoid competing with primary accent colors.#000000) for body text; use {colors.body} (#0E0E12) for warmth and legibility.rgba(255, 255, 255, 0.7)) to ensure contrast.md shadow is reserved for featured cards; standard cards remain flat.{spacing.sm} (12px) to prevent layout overflow.| Viewport | Content Width | Grid Cols | Nav Links | Largest Heading | Body Text | Section Padding-X |
|---|---|---|---|---|---|---|
| 375px (Mobile) | 351px | 1 | 0 | 40px | 16px | 12px |
| 768px (Tablet) | 744px | 1 | 0 | 40px | 16px | 12px |
| 1024px (Small Laptop) | 1000px | 1 | 0 | 40px | 16px | 12px |
| 1280px (Desktop) | 1204px | 2 | 37 links | 72px | 16px | 60px |
| 1440px (Large Desktop) | 1400px | 2 | 37 links | 72px | 16px | 10px |
Key Changes:
{typography.display-md} or larger variant), horizontal padding increases to 60px.Minimum touch target size is 48px × 48px for all interactive elements:
#070732) — Fill color for main buttons and brand mark#1455FF) — Links, focus outlines, secondary accent areas#FFFFFF) — Default page background, card surfaces#F4F5F6) or gradient overlay#000000) or Body (#0E0E12) — Use #0E0E12 for standard body; #000000 for emphasis#0E0E12)#1B1D21)#FFD6C4 — coral), Accent-4 (#11C627 — green), Accent-5 (#007AFF — cyan)Apply the typography hierarchy strictly: Use PP Right Grotesk for all headings and display sizes; use Graphik LCG for body, buttons, and UI text. Match exact font sizes and line-heights from the typography table.
Preserve negative letter-spacing on display text. Do not round -2px, -1.2px, -0.96px tracking to 0px; these define the premium, forward-moving feel.
Round all component corners using the border-radius scale ({rounded.md} for buttons, {rounded.xxl} for large cards, {rounded.full} for avatars). Do not use sharp 0px radius on interactive components.
Use {colors.primary} (#070732) exclusively for primary buttons and brand mark. Secondary and tertiary buttons use light navy overlay (rgba(2, 9, 26, 0.04)) or white transparency (rgba(255, 255, 255, 0.16)).
Apply hover/focus states at 60–77% opacity (or via background color shift per component rules). Ensure outline and border colors match {colors.accent} (#1455FF) for focus states.
Maintain section padding using the spacing scale: {spacing.section} (40px) to {spacing.band} (48px) for vertical gaps, {spacing.sm} (12px) on mobile, {spacing.section} to {spacing.band} (40px–60px) on desktop.
Use subtle shadows sparingly: Apply the md shadow (rgba(7, 7, 50, 0.08) 0px -8px 24px 0px) only to featured cards. Standard cards remain flat.
Test all color combinations for WCAG AA contrast (4.5:1 minimum for text). Verify links (#1455FF) meet contrast ratios against white and light gray backgrounds.
Implement responsive breakpoint changes at 1280px: Increase heading sizes, expand padding, reveal navigation, shift to two-column layout. Below 1280px, maintain single column, 12px padding, and smaller headings.
Use decorative accent colors (coral, green, cyan) in gradient overlays, icon backgrounds, and thematic illustrations—not as primary text or button fills. These create visual rhythm without competing with core brand colors.
Interaction states not fully specified: The extraction captured CSS for hover, focus, active, and disabled states, but not all component variants (e.g., error or loading states) were present in the measured pages. Assume standard patterns (opacity reduction, color shift) where states are not explicitly documented.
Semantic color ramp missing: The site does not declare error, success, warning, or info colors in its markup. No semantic status palette exists; use accent colors or text color modulation for contextual messaging instead.
Five decorative accent colors unassigned: Colors {colors.accent-1} (#0000EE), {colors.accent-2} (#14151A), {colors.accent-3} (#FFD6C4), {colors.accent-4} (#11C627), and {colors.accent-5} (#007AFF) were extracted but have no measured interactive role. They appear in gradient overlays and decorative sections. Do not invent primary uses for them outside of visual decoration.
Dark mode not present: Only light theme was measured. The design system does not declare a native dark theme; all values are light-mode only.
Surfaces behind authentication not visited: The extraction covered 6 public pages of the site. Account dashboards, course content, and user-specific pages were not analyzed; their design may diverge from this system.
Micro-interaction timings not extracted: CSS transitions, animations, and duration values were not captured. Implement standard 200ms–300ms ease-out for all interactive state changes unless more specific data becomes available.
Icon library and illustrations not detailed: The system uses iconography and decorative imagery extensively, but specific icon sizing, stroke widths, and illustration styles were not systematically documented beyond the component samples shown.
Font file loading and performance: Fallback font stacks are specified, but web font delivery, @font-face URLs, and performance metrics were not part of the extraction.
Сотка is a vibrant, modern educational platform designed with premium aesthetics and energetic depth. The visual language combines sharp, bold typography with gradient-rich hero sections that shift from deep navy ({colors.primary} — #070732) through electric blue ({colors.accent} — #1455FF) into bright cyan, creating a sense of progression and transformation. The design embraces micro-interactions, elevated card treatments, and decorative accent colors that establish playful energy without compromising professional credibility. The brand prioritizes clarity through generous whitespace and strong hierarchy, while maintaining visual sophistication via carefully considered neutral tones and shadow depth. This is an aspirational platform that celebrates student achievement through confident, forward-looking design.
Key Characteristics:
{rounded.md} to {rounded.xxl}) for approachability{colors.primary} — #070732): Deep navy used for primary CTAs, brand mark, active states, and premium button fills. Establishes trust and sophistication.{colors.accent} — #1455FF): Bright electric blue for secondary accents, hero gradient transitions, link states, and focus outlines. Creates energy and guides attention.{colors.accent-3} — #FFD6C4): Warm peachy-pink used in gradient overlays and background decorations. No assigned interactive role.{colors.accent-4} — #11C627): Vibrant green for thematic visual elements and decorative badges. No assigned interactive role.{colors.accent-5} — #007AFF): Sky blue for gradient components and secondary decorative sections. No assigned interactive role.{colors.accent-1} — #0000EE): Deep electric blue. No measured role; treated as decorative.{colors.accent-2} — #14151A): Near-black. No measured role; treated as decorative.{colors.canvas} — #FFFFFF): Default page background and primary surface for content cards. Also used as label color on brand surfaces.{colors.surface} — #F4F5F6): Light gray card and panel background. Creates subtle visual separation.{colors.surface-alt} — #050521): Dark navy alternating section band for high-contrast layout zones.{colors.ink} — #000000): Pure black for primary headings and critical text.{colors.body} — #0E0E12): Soft black for body copy and standard text. Slightly warmer than pure ink.{colors.muted} — #1B1D21): Dark gray for captions, secondary text, and de-emphasized content.Primary Display & Headings: PP Right Grotesk (fallback: -apple-system, BlinkMacSystemFont, sans-serif) Body, Buttons, & UI: Graphik LCG (fallback: system-ui, sans-serif) Forms & Labels: Inter Tight or Arial (fallback: system-ui, sans-serif)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Large | PP Right Grotesk | 60px | 600 | 1.08 | -1.2px | Hero / h1 primary |
| Display Medium | PP Right Grotesk | 58px | 500 | 0.97 | -1.16px | Large heading / h2, h3 |
| Display Small | Graphik LCG | 52px | 600 | 1.08 | -1.04px | Extra-large display |
| Display XS | Graphik LCG | 48px | 600 | 1.14 | -2px (and -0.96px, -1.04px variants) | Large heading / h3 |
| Heading XL | PP Right Grotesk | 38px | 500 | 0.9 | -0.76px | Major section heading |
| Heading LG | PP Right Grotesk | 32px | 500 | 0.94 | -0.64px | Or -2px (tight variant) |
| Heading MD | PP Right Grotesk | 30px | 500 | 0.9 | -2px | Sub-section heading |
| Heading SM | PP Right Grotesk | 28px | 500 | 0.93 | -0.56px | Minor heading |
| Heading XS | PP Right Grotesk | 26px | 500 | 0.9 | -0.52px | Small heading |
| Button XL | PP Right Grotesk | 24px | 500 | 0.92 | -0.48px or -0.24px | Large button / h3 context |
| Button LG | Graphik LCG | 16px | 500 | 1.4 | -0.08px | Standard large button |
| Button LG Strong | Graphik LCG | 16px | 600 | 1.4 | -0.08px | Emphasized button |
| Body MD | Graphik LCG | 16px | 500 | 1.25 | -0.08px | Standard body copy |
| Body MD Tight | Graphik LCG | 16px | 500 | 1.4 | -0.5px | Compact body variant |
| Button MD | Graphik LCG | 14px | 500 | 1.29 | -0.07px | Medium button |
| Body SM Strong | Graphik LCG | 14px | 500 | 1.32 | -0.07px | Emphasized small text |
| Body SM | Graphik LCG | 14px | 400 | 1.4 | -0.07px | Small body text, links |
| Body SM 2 | Graphik LCG | 14px | 500 | 1.4 | -0.5px | Compact small body |
| Body SM Tight | Graphik LCG | 14px | 400 | 1.4 | -0.5px | Tight small body |
| Caption XS | Graphik LCG | 12px | 500 | 1.3 | -0.5px or 0px | Caption / helper text |
| Label SM | Arial | 13px | 400 | — | 0px | Form label |
| Label MD | Inter Tight | 16px | 500 | — | 0.16px | Input label |
Primary Filled Button
{colors.primary} (#070732){colors.canvas} (#FFFFFF){rounded.xl} (12px)Secondary Filled Button (light background)
rgba(2, 9, 26, 0.04) (light navy overlay){colors.body} (#0E0E12){rounded.xl} (12px)Small Primary Button
{colors.primary} (#070732){colors.canvas} (#FFFFFF){rounded.lg} (10px)Tertiary Button (transparent outline on light background)
rgba(255, 255, 255, 0.16) (white with transparency){colors.canvas} (#FFFFFF){rounded.xl} (12px)Featured Card (Blue Accent)
{colors.body} (#0E0E12){colors.accent} (#1455FF){rounded.lg} (10px)Featured Large Card (Dark)
{colors.body} (#0E0E12){colors.canvas} (#FFFFFF){rounded.xxl} (16px)Default Card (pastel gradient backgrounds)
#FFD6C4 (coral/peach) or gradient overlay{colors.body} (#0E0E12){rounded.xxl} (16px)Gradient Card with Overlay
{colors.canvas} (#FFFFFF){rounded.r-20} (20px) to {rounded.r-28} (28px)rgba(7, 7, 50, 0.08) 0px -8px 24px 0pxText Input
{colors.canvas} (#FFFFFF){colors.body} (#0E0E12){rounded.md} (8px) to {rounded.lg} (10px){colors.accent} (#1455FF){colors.canvas} (#FFFFFF){colors.accent} (#1455FF), background {colors.canvas}Select Dropdown
{colors.canvas} (#FFFFFF){colors.body} (#0E0E12){rounded.lg} (10px){colors.accent} (#1455FF), background {colors.canvas}Primary Navigation (Desktop)
{colors.body} (#0E0E12)Secondary Navigation
{colors.muted} (#1B1D21)Badge (text variant)
{colors.canvas} (#FFFFFF)Badge (secondary text variant)
{colors.body} (#0E0E12)Link (Default)
{colors.accent} (#1455FF){rounded.lg} (10px)Link (Secondary Small)
#0177FF{rounded.xl} (12px)#1455FFFooter Container
{colors.canvas} (#FFFFFF){colors.body} (#0E0E12)Footer Secondary Text
{colors.muted} (#1B1D21)The spacing system uses a consistent base unit of 4px, scaling in multiples:
{spacing.xxs} = 4px{spacing.xs} (8px), {spacing.sm} (12px){spacing.md} (16px), {spacing.lg} (20px), {spacing.xl} (24px){spacing.xxl} (28px), {spacing.xxxl} (32px){spacing.section} (40px), {spacing.band} (48px)Usage Context:
{spacing.md} to {spacing.xl} (16px–24px){spacing.xs} to {spacing.sm} (8px–12px){spacing.section} to {spacing.band} (40px–48px){spacing.section} (40px) at medium breakpoints, {spacing.band} (48px–60px) at desktopWhitespace drives premium perception through generous breathing room between sections and components. Hero sections use full-viewport height with layered gradients and transparent overlays. Cards maintain internal padding of at least {spacing.md} (16px), with inter-component gaps of {spacing.sm} to {spacing.md} (12px–16px). Section breaks employ {spacing.band} (48px) vertical separation at desktop, collapsing to {spacing.section} (40px) on smaller screens. Typography hierarchy is enhanced through tight negative letter-spacing combined with generous line-height (1.08–1.4 depending on size), preventing text from feeling cramped despite compressed character spacing.
{rounded.none} (0px) — Footer, navigation backgrounds{rounded.xs} (5px) — Image containers{rounded.sm} (6px) — Secondary UI elements{rounded.md} (8px) — Buttons (primary){rounded.lg} (10px) — Cards (featured), input fields, links{rounded.xl} (12px) — Buttons (secondary), large buttons, inputs{rounded.xxl} (16px) — Large cards, featured card containers{rounded.r-20} (20px), {rounded.r-24} (24px), {rounded.r-28} (28px) — Gradient overlays, large feature cards{rounded.full} (9999px) — Avatar images1px — Used on button outlines and input borders (secondary states)2px — Used on focused input fields and accent card borders| Level | Treatment | Use |
|---|---|---|
| Base (Flat) | No shadow, surface color only | Page background, standard cards, buttons |
| Lifted (sm) | rgba(0, 0, 0, 0.2) 0px 0px 10px 1px | Dropdown menus, overlays |
| Elevated (md) | rgba(7, 7, 50, 0.08) 0px -8px 24px 0px | Featured cards, hover states |
The system employs color-blocking depth, where elevation is created primarily through surface color changes (dark navy sections, light gray cards, white pages) rather than aggressive shadows. When shadows do appear, they are subtle and directional—the md shadow uses an upward 8px offset with soft blur, creating a floating effect. The sm shadow is uniform (0px offset) with modest spread, suitable for menus that sit atop content.
A simple layering scale manages stacking context:
The system avoids deep nesting; most interactive surfaces require only z-index 1–4.
#070732) for all critical CTAs to establish brand authority and guide user intent.{spacing.md} (16px) padding inside cards and containers for breathing room and readability.rgba(255, 255, 255, 0.7)) to maintain text contrast on vibrant hero sections.{rounded.md} to {rounded.xxl}) consistently across all interactive components for approachability.{colors.accent} (#1455FF) for secondary actions, links, focus states, and attention-drawing elements.{colors.body}, {colors.muted}) for body text and secondary hierarchy to avoid competing with primary accent colors.#000000) for body text; use {colors.body} (#0E0E12) for warmth and legibility.rgba(255, 255, 255, 0.7)) to ensure contrast.md shadow is reserved for featured cards; standard cards remain flat.{spacing.sm} (12px) to prevent layout overflow.| Viewport | Content Width | Grid Cols | Nav Links | Largest Heading | Body Text | Section Padding-X |
|---|---|---|---|---|---|---|
| 375px (Mobile) | 351px | 1 | 0 | 40px | 16px | 12px |
| 768px (Tablet) | 744px | 1 | 0 | 40px | 16px | 12px |
| 1024px (Small Laptop) | 1000px | 1 | 0 | 40px | 16px | 12px |
| 1280px (Desktop) | 1204px | 2 | 37 links | 72px | 16px | 60px |
| 1440px (Large Desktop) | 1400px | 2 | 37 links | 72px | 16px | 10px |
Key Changes:
{typography.display-md} or larger variant), horizontal padding increases to 60px.Minimum touch target size is 48px × 48px for all interactive elements: