Remixes of mitu.institute
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.
This design system embodies a modern, professional educational institution with a strong emphasis on trust, innovation, and accessibility. The aesthetic combines deep corporate blues with soft, light surfaces to create a sophisticated yet approachable atmosphere. The palette leverages bright blues to convey technology and forward-thinking values, while maintaining neutral grounds that ensure clarity and legibility. The visual language prioritizes clarity and directness—clean typography, minimal ornamentation, and purposeful use of whitespace—reflecting an institution committed to delivering education without unnecessary complexity. Interactive elements employ rounded corners selectively and maintain consistent proportions, creating a polished yet human-centered experience.
Key Characteristics
#1143A7, #2969E3) paired with light, airy backgrounds#1143A7): Main brand color used for primary CTA buttons, links, headers, and key interactive elements#0000EE): Deep action blue for certain link states and emphasis; used less frequently but carries strong visual weight#2969E3): Secondary primary blue for alternative button states, secondary actions, and interactive hover states#8BADF0): Soft accent used extensively in UI—backgrounds, button fills, icon tints, and hover states; creates visual softness#DBE3FF): Very light accent for subtle backgrounds, disabled states, and secondary surface treatments#CFD9FB): Delicate tint for hover overlays, focus states, and light interactive feedback#3A52EE): Vibrant blue for special highlights or emphasis where stronger visual weight is needed#FF8482): Primary alert and error indication; used for destructive actions and warnings#D52723): Darker error state for high-priority error messaging and critical validations#FFDB4D): Warning state messaging and cautionary indicators#27C500): Confirmation and success state messaging#000000): Primary text color, component text, heading content; used for maximum contrast#6A6A6A): Secondary text, supporting labels, and muted UI text#666666): Tertiary text for less emphasized content#DADADA): Dividers, borders, and subtle separators#F6F6F6): Subtle background tint; almost white but with minimal warmth#FFFFFF): Primary surface, cards, input backgrounds; default interactive element fill#EEF3FF): Light surface tint for sections, backgrounds, and contained areas; subtle blue cast#F1F6FF): Even lighter surface tint for backgrounds and low-emphasis containersPrimary Font: Arimo (sans-serif)
Arimo, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serifSecondary Font: Arial (sans-serif, legacy support)
Arial, Helvetica, sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display H1 | Arimo | 64px | 700 | 70.4px | 0px | Page hero headings, primary page titles |
| Display H2 | Arimo | 48px | 700 | 52.8px | 0px | Section headings, featured content |
| Large Heading H3 | Arimo | 40px | 700 | 46px | 0px | Major subsection headings |
| Medium Heading H3 | Arimo | 24px | 700 | 27.6px | 0px | Card titles, section subheads |
| Body Large | Arimo | 16px | 400 | 18.4px | 0px | Primary body text, link text |
| Body Regular | Arimo | 14px | 400 | 16.1px | 0px | Secondary body text, input text, metadata |
| Label Bold | Arimo | 14px | 600 | 16.1px | 0px | Button text, form labels, badges |
| Label Medium | Arimo | 14px | 700 | 16.8px | 0px | Strong button text, emphasized labels |
| Link Text | Arimo | 16px | 400 | 18.4px | 0px | Clickable text links |
| Link Text Small | Arimo | 14px | 400 | 16.8px | 0px | Small clickable links, secondary links |
| Span Emphasized | Arimo | 14px | 600 | 16.1px | 0px | Emphasized inline text, strong spans |
| H2 Subtitle | Arimo | 24px | 400 | 28.8px | 0px | Secondary/supporting headings, descriptive text |
| Input Text | Arimo | 14px | 400 | 16.1px | 0px | Form input text, placeholder text |
| Input Legacy | Arial | 13px | 400 | 28px | 0px | Legacy input support |
700) conveys primary emphasis, 600 for secondary, 400 for supporting content1.15x font size ensures readability and breathing room64px), heading (48px), subheading (40px), and body (16px, 14px)#1143A7#FFFFFF16px, weight 600, line height 17.6px18px 23px2px solid #1143A70px176px57.5938pxnone#0F3380, border 2px solid #0F3380#081F4A, border 2px solid #081F4A#C5D2F0, border 2px solid #C5D2F0, text color #FFFFFF at 0.5 opacity#FFFFFF#1143A714px, weight 700, line height 16.8px18px 30px0px none0px181px55pxnone#F1F6FF, border 1px solid #DBE3FF#EEF3FF, border 1px solid #CFD9FB#EEF3FF#00000016px, weight 400, line height 18.4px0px0px none0px58px58pxnone#DBE3FF#CFD9FB#8BADF0#FFFFFF16px, weight 400, line height 18.4px0px0px none50%30px30pxnone#7A9FE8#6A91E0rgba(0, 0, 0, 0)#FFFFFF16px, weight 600, line height 17.6px0px0px none0pxnone#DBE3FF, underline 1px solid #DBE3FFrgba(0, 0, 0, 0) (transparent)#00000016px, weight 400, line height 18.4px0px0px none0pxnonergba(0, 0, 0, 0) (transparent)#00000016px, weight 400, line height 18.4px40px 33.1562px2px solid #DBE3FF0pxnone368.547px179.281px2px solid #CFD9FB, background #F1F6FF at 0.3 opacityrgba(0, 0, 0, 0) (transparent)#00000016px, weight 400, line height 18.4px0px0px none0pxnone1170px1020.81pxrgba(0, 0, 0, 0) (transparent)#00000014px, weight 400, line height 16.1px1px 2px0px none0px19.5938px234pxnone2px solid #1143A7, box shadow 0 0 0 3px #DBE3FF#6A6A6A#F6F6F6, text color #DADADA, border 1px solid #DADADArgba(0, 0, 0, 0) (transparent)#FFFFFF13px, weight 400, line height 28px1px 2px0px none0px19.5938px234pxnonergba(0, 0, 0, 0) (transparent)#00000016px, weight 400, line height 18.4px32px 0px2px solid #DBE3FF (bottom border)0pxrgba(217, 217, 217, 0.58) 0px 45px 45px -45px1440px125.797px#1143A7, underline 2px solid #1143A7#1143A7, font weight 600#FFFFFF#00000014px, weight 400, line height 16.1px12px 16px1px solid #DADADA0pxrgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.5) 0px 8px 30px -5px99#EEF3FF, text color #1143A7#0000EE16px, weight 400, line height 18.4pxnone#1143A7, text decoration underline 2px solid #1143A7#081F4A, text decoration underline 2px solid #081F4A#1143A718px, weight 700, line height 19.8px2px solid #DBE3FF18px 56px 18px 26pxrgba(0, 0, 0, 0) (transparent)2px solid #1143A7, background #F1F6FF59.7969px191px#1143A714px, weight 400, line height 16.8pxnone#0F3380, text decoration underline4px4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 52px, 60px, 80px, 120px4px: Micro-spacing, gaps between inline elements8px: Tight grouping, small icon spacing12px: Form element spacing, badge padding16px: Primary padding, standard component spacing20px: Medium content spacing, button padding24px: Card padding, section spacing32px: Header padding, navigation spacing40px: Large card padding, section margins52px: Strong separation, featured section margins60px: Major section breaks80px: Hero spacing, prominent section dividers120px: Full-page section gaps, visual breathing room1440px (standard desktop container)1170px for primary content area (full width minus padding)32px on each side at desktop24px–40px inner paddingGenerous whitespace is fundamental to the design system. The layout prioritizes clarity over density:
16px between interactive elements and text blocks60px–120px vertical spacing to create visual pause24px–40px internal breathing room0px — Primary standard; all components default to sharp corners50% — Circular buttons and avatar placeholders1px — Input focus rings, subtle dividers2px — Primary button borders, card borders, navigation divider4px — Major dividers, emphasis borders8px — Large card emphasis borders (rare)| Level | Treatment | Use |
|---|---|---|
| None (Base) | No shadow | Background surfaces, text, base component state |
| Subtle | rgba(217, 217, 217, 0.58) 0px 45px 45px -45px | Navigation bar, floating hints |
| Medium | rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.5) 0px 8px 30px -5px | Modal overlays, dropdown menus, floating panels |
| Deep | rgba(0, 0, 0, 0.3) 0px 20px 50px -15px | High-priority modals, special overlays (inferred) |
Shadow Philosophy
Shadows are deployed sparingly and purposefully. The system employs:
1 (100%) — Default state for all visible content0.7 (70%) — Hover overlays, disabled text, secondary emphasis0.5 (50%) — Disabled button text, muted labels0.3 (30%) — Background tints, overlay fills, very soft overlays0.15 (15%) — Inset shadow effect, edge highlights1 — Default document flow, standard components2, 3, 4, 9 — Stacked content sections, layered cards (inferred hierarchy)10 — Dropdown menus and select boxes appearing above base content100 — Fixed navigation, sticky headers99 — Modal dialogs, full-screen overlays (just below sticky layer for accessibility)101 — Notifications, alerts appearing above all other content (inferred)#1143A7, #2969E3, #8BADF0) for all interactive CTAs and key UI elements0px border radius across all standard components; only use 50% for circular buttons and avatars16px between logical groups, 32px for major sections2px solid #DBE3FF border separation#FFFFFF) for form inputs, primary cards, and elevated surfaces#EEF3FF, #F1F6FF) for section backgrounds and subtle differentiation600px–700px weight) for clear affordance50%)24px+ spacing between them1440px container width at desktop breakpoints| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px – 480px | Full-width layout, single-column cards, 16px horizontal padding, stacked navigation, reduced heading sizes (40px → 24px) |
| Tablet | 480px – 1024px | 2-column card grids, 24px horizontal padding, condensed navigation, medium heading sizes (48px → 40px) |
| Desktop | 1024px – 1440px | Full grid layouts, 3+ column cards, 32px horizontal padding, standard heading sizes, sticky navigation |
| Large Desktop | 1440px + | Content max-width 1440px, centered with equal margins, full feature deployment |
44px × 44px for touch buttons and interactive elements (WCAG compliant)55px – 57.5938px at desktop; 48px at mobile12px gap between adjacent touch targets to prevent accidental taps16px vertical spacing for clickable text links< 768px)32px desktop → 24px tablet → 16px mobile48px → 40px, 40px → 32px)176px fixed at desktop → auto (full-width or flex) at mobile with 16px margins234px fixed at desktop → full-width minus 16px gutters at mobile60px sections → 40px at tablet → 24px at mobile#1143A7)#0000EE) / Rich Blue (#2969E3)#FFFFFF)#1143A7)#8BADF0)#000000)#6A6A6A)#0000EE)#EEF3FF)#F1F6FF)#DBE3FF)#DBE3FF)#FF8482) / Danger Red (#D52723)#FFDB4D)#27C500)#CFD9FB)#DADADA)0px border radius unless explicitly creating a circular element (50%)#1143A7 background with #FFFFFF text; secondary buttons reverse to #FFFFFF background with #1143A7 text400 (body) to 700 (headings); fall back to Arial only for legacy inputs64px (H1) → 48px (H2) → 40px (H3) → 24px (subheading); body text defaults to 16px or 14px4px; most common values are 16px, 24px, 32px, and 40px2px solid #DBE3FF bottom border with subtle shadow rgba(217, 217, 217, 0.58) 0px 45px 45px -45px#000000 text; focus state adds 2px solid #1143A7 border and #DBE3FF inner shadow2px solid #DBE3FF with 40px padding0.3 for light overlays and 0.7 for disabled/muted states1, dropdown = 10 / 99, sticky = 100, modal = 99, toast = 101#F1F6FF or lighter shade of component color)#0000EE and turn #1143A7 with underline on hover; ensure focus rings use #DBE3FF1440px at desktop; center content and add 32px side padding320px, expand to tablet (480px), then desktop (1024px), with max width 1440px44px × 44px and spaced 12px apart for accessibility