Okul.com.tr — Eğitim Ekosistemi

UI design tokens (auth/login modal pattern)

2 dakika okuma süresi

Proje: Okul Platform · Hub: Okul Platform — Conventions

UI design tokens — auth/modal pattern

When adding UI, reuse existing tokens. Do NOT invent new radii, font-sizes, or font-weights. Derived from resources/assets/css/custom.css (desktop) and resources/views/mobile/components/login.blade.php (mobile style block) and sass/mobile/components/_form.scss.

Colors

RoleHexExample class
Brand accent (pink)#FF495C.submit-button, .tab-button.active, .corporate-login, .auth-links a
Brand hover/pale 1#FFF1F3.corporate-login bg
Brand hover/pale 2#FFEDEF.tab-button (inactive) bg
Brand hover/pale 3#FFDBDE.corporate-login:hover bg
Text primary#4A4A4A.form-label, .form-input, .header-title
Text secondary#818181.header-subtitle, .remember-checkbox, .divider
Border#EDEDED.form-input, tab container, social btn
Error#F50000.error-label, .is-invalid border, .error-input text
White#FFFFFF.submit-button text, inputs bg

Border radius

  • Inputs, buttons, pills, social login button: 8px
  • Tabs: 4px
  • Text links: none
  • NEVER use 6px, 10px, 12px — not in the system

Typography

  • Body/labels/input text: 14px (desktop), 16px (mobile — mobile body text is a step larger)
  • Prominent button text: 16px
  • Section titles: 20px
  • Tiny/secondary (e.g., skip link): 10px max — rare

Font weight

  • Body: inherited / 400
  • Buttons (.submit-button): 500
  • Links in .auth-links: inherited (no explicit weight on desktop); 600 on mobile prominent links (e.g., .forgot-password)
  • Titles (.header-title): 600
  • Mobile prominent inline links: 600 + text-decoration-line: underline
  • NEVER use 700 or 800 in modal context

Spacing

  • .form-group { margin-bottom: 20px }
  • .submit-button { padding: 16px; margin: 8px 0 }
  • .auth-links { margin: 16px 0 }
  • .corporate-login { padding: 16px; margin-top: 16px }
  • Mobile forms generally use padding: 1rem / margin: 1rem auto

Motion

  • Modal components in this codebase do NOT use transition animations. .social-login-btn has a light transition: all .2s ease but that’s the only one. Don’t add hover transitions to text links or switch links — just text-decoration: underline on hover.

Rule

Before writing new CSS for auth/modal UI:

  1. Check custom.css (desktop) or sass/mobile/components/_form.scss + the blade component’s <style> for existing class.
  2. Reuse it. If a new variant is needed, match the token set above.
  3. Never inline <style> in blade or inline style="..." attribute for cosmetic values — only for functional initial state (e.g., style="display:none" that JS toggles).

Grafik Görünümü

Backlinkler