Design system
Token chuẩn và component cho Psy. Giao diện đọc theo phong cách A (editorial), phần điều khiển và tương tác theo phong cách B (soft modern). Mọi component đều có đủ trạng thái, bấm thử trực tiếp trên trang này.
Nguyên tắc
A. Bề mặt đọc
- Chữ serif, cột 680px, dòng cao 1.7
- Nền kem, đường kẻ mảnh, bo góc nhỏ
- Ít bóng, ít màu, nội dung là trung tâm
B. Bề mặt tương tác
- Chữ sans, bo góc lớn, bóng mềm
- Mỗi môn một màu nhấn (
data-accent) - Phản hồi tức thì: nhấn, lật, đúng/sai, tiến độ
Chuyển động
- Ngắn (140 đến 360ms), có mục đích
- Nhấn xuống thu nhỏ, thả ra bật lại
- Tôn trọng
prefers-reduced-motion
Màu
Primitive
Bấm vào ô màu để chép tên biến CSS.
Semantic (sáng / tối)
Dùng các token này trong component. Mỗi token là một cặp sáng/tối, đổi tự động theo giao diện.
| Token | Sáng | Tối |
|---|---|---|
--color-bg-page | #FBF8F3 | #14130F |
--color-bg-surface | #FFFFFF | #1B1A16 |
--color-bg-subtle | #F5F0E6 | #25231E |
--color-bg-sunken | #EAE3D3 | #322F28 |
--color-bg-overlay | rgb(29 27 24 / 0.4) | rgb(0 0 0 / 0.6) |
--color-text-primary | Aa tâm lý#1D1B18 | Aa tâm lý#F5F0E6 |
--color-text-secondary | Aa tâm lý#46423B | Aa tâm lý#D9D0BB |
--color-text-muted | Aa tâm lý#5F5A51 | Aa tâm lý#A39C8D |
--color-text-disabled | Aa tâm lý#A39C8D | Aa tâm lý#7A7468 |
--color-border-subtle | #EAE3D3 | #322F28 |
--color-border-default | #D9D0BB | #46423A |
--color-border-strong | #A39C8D | #7A7468 |
--color-shadow-color | rgb(60 40 20 / 0.14) | rgb(0 0 0 / 0.55) |
Màu nhấn theo môn
Đặt data-accent="violet" lên một phần tử, mọi component bên trong đổi theo. Mặc định: teal.
Trạng thái phản hồi
Typography
Serif · nội dung đọc, tiêu đề
Source Serif 4
Tâm lý học nghiên cứu hành vi và các quá trình tinh thần. Ăn quả nhớ kẻ trồng cây, ơi ờ ở ử ữ.
Sans · giao diện, nhãn, nút
Be Vietnam Pro
Tâm lý học nghiên cứu hành vi và các quá trình tinh thần. Ăn quả nhớ kẻ trồng cây, ơi ờ ở ử ữ.
| Token | Giá trị | Mẫu |
|---|---|---|
--text-xs | 0.75rem | Tâm lý học nhận thức |
--text-sm | 0.875rem | Tâm lý học nhận thức |
--text-base | 1rem | Tâm lý học nhận thức |
--text-md | 1.125rem | Tâm lý học nhận thức |
--text-lg | 1.25rem | Tâm lý học nhận thức |
--text-xl | 1.5rem | Tâm lý học nhận thức |
--text-2xl | clamp(1.625rem, 1.3rem + 1.2vw, 2rem) | Tâm lý học nhận thức |
--text-3xl | clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem) | Tâm lý học nhận thức |
--text-4xl | clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem) | Tâm lý học nhận thức |
Line-height: tight 1.2, snug 1.35, normal 1.5, relaxed 1.7 (nội dung đọc). Weight: 400, 500, 600, 700.
Khoảng cách, bo góc, bóng
Spacing (lưới 4px)
--space-10.25rem--space-20.5rem--space-30.75rem--space-41rem--space-51.25rem--space-61.5rem--space-82rem--space-102.5rem--space-123rem--space-164rem--space-205rem--space-246remRadius
xs2pxsm4pxmd8pxlg12pxxl16pxpill999pxShadow
smmdlgChuyển động
Bấm "Phát" để xem từng thời lượng và đường cong.
Duration
instant · 80msfast · 140msbase · 220msslow · 360msslower · 560msEasing
standardenterexitspringspring vượt nhẹ rồi về chỗ, dùng cho nhấn/thả và hiện icon.
Bố cục và breakpoint
| Layout | Giá trị |
|---|---|
--layout-header-h | 3.5rem |
--layout-sidebar-w | 17rem |
--layout-toc-w | 14rem |
--layout-measure | 42.5rem |
--layout-container | 80rem |
--layout-gutter | 1rem |
| Breakpoint | Hành vi |
|---|---|
sm · 640px | Bố cục 1 cột, ẩn tên logo |
md · 768px | Cỡ chữ đọc 18px |
lg · 1024px | Sidebar cố định, hết drawer |
xl · 1280px | Thêm cột mục lục bên phải |
Biến CSS không dùng được trong @media, nên breakpoint được ghi trong token để làm tài liệu và viết literal trong CSS.
Button
Biến thể × trạng thái. Hover/focus/active được ép hiển thị để so sánh. Thử thật bằng chuột và Tab.
Tag
Callout
Map với callout Obsidian: > [!definition], [!example], [!experiment], [!case], [!note].
Thí nghiệmThu gọn được (đang mở)
Định nghĩaThu gọn được (đang đóng)
Quiz
Trạng thái tĩnh bên dưới. Bộ thử thật ở cuối mục: chọn, kiểm tra, xem hiệu ứng đúng/sai và điểm tổng.
Giải thích. Freud chia nhân cách thành Id (bản năng), Ego (thực tại) và Superego (đạo đức).
Giải thích. Freud chia nhân cách thành Id (bản năng), Ego (thực tại) và Superego (đạo đức).
Giải thích. Freud chia nhân cách thành Id (bản năng), Ego (thực tại) và Superego (đạo đức).
Giải thích. Freud chia nhân cách thành Id (bản năng), Ego (thực tại) và Superego (đạo đức).
Thử ngay: ba câu hỏi
0/0 câu · 0 đúng
Giải thích. Freud chia nhân cách thành Id (bản năng), Ego (thực tại) và Superego (đạo đức).
Giải thích. Pavlov phát hiện phản xạ có điều kiện khi nghiên cứu tiết nước bọt ở chó.
Giải thích. Nhu cầu sinh lý là nền tảng, cần được thỏa mãn trước các nhu cầu bậc cao hơn.
0/0
Flashcard
Bấm hoặc Enter/Space để lật. Nút sao đánh dấu thẻ cần ôn.
CourseCard
CourseTree
Toc
Thanh nhấn trượt theo mục đang đọc. Trên trang này, cột phải (màn hình rộng) là Toc thật.
Trên trang này
Bài này chưa có mục con.
Backlinks
Được nhắc tới trong
Chưa có ghi chú nào liên kết tới đây.
Dùng[[tên note]] trong ghi chú khác để tạo liên kết.Được nhắc tới trong
SearchBox
Bấm / hoặc Ctrl/Cmd+K để focus. Gõ "phòng vệ" thử kết quả, "zzz" thử rỗng, "lỗi" thử trạng thái lỗi. Dữ liệu trên trang này là giả lập.
Không tìm thấy kết quả cho “”
Thử từ khóa ngắn hơn hoặc tên tiếng Anh của khái niệm.Không tải được kết quả.
Không tìm thấy kết quả cho “”
Thử từ khóa ngắn hơn hoặc tên tiếng Anh của khái niệm.Không tải được kết quả.
Không tìm thấy kết quả cho “”
Thử từ khóa ngắn hơn hoặc tên tiếng Anh của khái niệm.Không tải được kết quả.
Không tìm thấy kết quả cho “phòng”
Thử từ khóa ngắn hơn hoặc tên tiếng Anh của khái niệm.Không tải được kết quả.
Không tìm thấy kết quả cho “phòng”
Thử từ khóa ngắn hơn hoặc tên tiếng Anh của khái niệm.Không tải được kết quả.
Không tìm thấy kết quả cho “zzz”
Thử từ khóa ngắn hơn hoặc tên tiếng Anh của khái niệm.Không tải được kết quả.
Không tìm thấy kết quả cho “lỗi”
Thử từ khóa ngắn hơn hoặc tên tiếng Anh của khái niệm.Không tải được kết quả.
ThemeToggle
ArticleCard
Thẻ bài viết kiểu Medium. Rê chuột để thấy tiêu đề đổi màu, bìa nghiêng, mũi tên trượt.
Prose
Kiểu chữ cho nội dung markdown (phong cách A). Rê chuột lên tiêu đề để thấy neo.
#Cấu trúc nhân cách ba ngôi
Freud cho rằng nhân cách gồm ba thành phần luôn tương tác với nhau: Id, Ego và Superego. Liên kết wiki có gạch chấm; liên kết thường gạch chân liền; liên kết tới note chưa tồn tại hiển thị đỏ nét đứt.
#Id
- Hoạt động theo nguyên tắc khoái lạc
- Hoàn toàn vô thức
- Có từ khi sinh ra
Tâm lý học có một quá khứ dài, nhưng chỉ có một lịch sử ngắn.
Hermann Ebbinghaus
Công thức tính điểm: z = (x − μ) / σ. Dùng đánh dấu để nhấn mạnh và Ctrl+K để tìm kiếm.
| Giai đoạn | Vùng cơ thể | Xung đột |
|---|---|---|
| Miệng | Miệng | Cai sữa |
| Hậu môn | Hậu môn | Tập đi vệ sinh |
| Dương vật | Cơ quan sinh dục | Phức cảm Oedipus |
Hết phần mẫu.