mem
starsforks
How to install mem?
ihlamury/design-skills/mem
$npx -y skills add ihlamury/design-skills --skill memMem's UI design system. Use when building interfaces inspired by Mem's aesthetic - light mode, Inter font, 4px grid.
SKILL.md
| 1 | # Mem UI Skills |
| 2 | |
| 3 | Opinionated constraints for building Mem-style interfaces with AI agents. |
| 4 | |
| 5 | ## When to Apply |
| 6 | |
| 7 | Reference these guidelines when: |
| 8 | - Building light-mode interfaces |
| 9 | - Creating Mem-inspired design systems |
| 10 | - Implementing UIs with Inter font and 4px grid |
| 11 | |
| 12 | ## Colors |
| 13 | |
| 14 | - SHOULD use light backgrounds for primary surfaces |
| 15 | - MUST use `#F9F5ED` as page background (`surface-base`) |
| 16 | - MUST use `#95A3DC` for primary actions and focus states (`accent`) |
| 17 | - SHOULD limit color palette to 9 distinct colors |
| 18 | - MUST maintain text contrast ratio of at least 4.5:1 for accessibility |
| 19 | |
| 20 | ### Semantic Tokens |
| 21 | |
| 22 | | Token | HEX | RGB | Usage | |
| 23 | |-------|-----|-----|-------| |
| 24 | | `surface-base` | #F9F5ED | rgb(249,245,237) | Page background | |
| 25 | | `surface-raised` | #EADCC3 | rgb(234,220,195) | Cards, modals, raised surfaces | |
| 26 | | `text-primary` | #474449 | rgb(71,68,73) | Headings, body text | |
| 27 | | `text-2` | #665E53 | rgb(102,94,83) | Additional text | |
| 28 | | `text-tertiary` | #2F2C3D | rgb(47,44,61) | Additional text | |
| 29 | | `border-default` | #534F59 | rgb(83,79,89) | Subtle borders, dividers | |
| 30 | | `warning` | #F9F5ED | rgb(249,245,237) | Warning states, cautions | |
| 31 | | `accent` | #95A3DC | rgb(149,163,220) | Primary actions, links, focus | |
| 32 | |
| 33 | ## Typography |
| 34 | |
| 35 | - MUST use `Inter` as primary font family |
| 36 | - SHOULD use single font family for consistency |
| 37 | - MUST use `86px` / `700` for primary headings |
| 38 | - MUST use `20px` / `400` for body text |
| 39 | - MUST limit font weights to: regular, bold, semi_bold |
| 40 | - MUST use `text-balance` for headings and `text-pretty` for body text |
| 41 | - SHOULD use `tabular-nums` for numeric data |
| 42 | - NEVER modify letter-spacing unless explicitly requested |
| 43 | |
| 44 | ### Text Styles |
| 45 | |
| 46 | | Style | Font | Size | Weight | Color | Count | |
| 47 | |-------|------|------|--------|-------|-------| |
| 48 | | `heading-1` | Inter | 86px | 700 | #2F2C3D | 1 | |
| 49 | | `body` | Inter | 20px | 400 | #665E53 | 1 | |
| 50 | | `body-secondary` | Inter | 20px | 400 | #423E44 | 1 | |
| 51 | | `body-secondary` | Inter | 19px | 400 | #474349 | 1 | |
| 52 | | `body-secondary` | Inter | 19px | 400 | #514B51 | 1 | |
| 53 | | `body-secondary` | Inter | 19px | 400 | #605A60 | 1 | |
| 54 | | `body-secondary` | Inter | 19px | semi_bold | #34313F | 1 | |
| 55 | | `body-secondary` | Inter | 18px | 400 | #504B4F | 1 | |
| 56 | | `body-secondary` | Inter | 18px | 400 | #514D53 | 1 | |
| 57 | | `text-16px` | Inter | 16px | 400 | #474449 | 1 | |
| 58 | |
| 59 | ### Typography Reference |
| 60 | |
| 61 | **Font Families:** |
| 62 | - `Inter` (used 13x) |
| 63 | |
| 64 | **Font Sizes:** 13px, 14px, 16px, 18px, 19px, 20px, 86px |
| 65 | |
| 66 | ## Spacing |
| 67 | |
| 68 | - MUST use 4px grid for spacing |
| 69 | - SHOULD use spacing from scale: 1px, 2px, 4px, 5px, 6px, 8px, 13px, 28px |
| 70 | - SHOULD use 5px as default gap between elements |
| 71 | - NEVER use arbitrary spacing values (use design scale) |
| 72 | - SHOULD maintain consistent padding within containers |
| 73 | |
| 74 | ## Borders |
| 75 | |
| 76 | - MUST use border-radius from scale: 16px, 29px, 32px, 33px, 37px, 39px |
| 77 | - SHOULD use 29px+ radius for pill-shaped elements |
| 78 | - SHOULD limit border widths to: 1px, 2px, 3px |
| 79 | - SHOULD use 37px as default border-radius |
| 80 | - NEVER use arbitrary border-radius values (use design scale) |
| 81 | - SHOULD use subtle borders (1px) for element separation |
| 82 | |
| 83 | ### Border Radius Reference |
| 84 | |
| 85 | **Scale:** 16px, 29px, 32px, 33px, 37px, 39px |
| 86 | |
| 87 | ## Layout |
| 88 | |
| 89 | - MUST design for 1920px base viewport width |
| 90 | - SHOULD use consistent element widths: 302px, 304px, 74px |
| 91 | - SHOULD maintain text-heavy layout with clear hierarchy |
| 92 | - NEVER use `h-screen`, use `h-dvh` for full viewport height |
| 93 | - MUST respect `safe-area-inset` for fixed elements |
| 94 | - SHOULD use `size-*` for square elements instead of `w-*` + `h-*` |
| 95 | |
| 96 | ### Detected Layout Patterns |
| 97 | |
| 98 | - **Main Content**: width: 1920px, height: 937px |
| 99 | - **Main Content**: width: 1920px, height: 920px |
| 100 | - **Header**: height: 72px |
| 101 | - **Header**: height: 71px |
| 102 | |
| 103 | ## Components |
| 104 | |
| 105 | ### Buttons |
| 106 | |
| 107 | | Variant | Background | Text | Border | Height | Radius | |
| 108 | |---------|------------|------|--------|--------|--------| |
| 109 | | Ghost | transparent | #474449 | none | - | - | |
| 110 | |
| 111 | ## Interactive States |
| 112 | |
| 113 | ### Focus |
| 114 | |
| 115 | - MUST use `2px` outline with accent color (`#95A3DC`) |
| 116 | - MUST use `2px` outline-offset |
| 117 | - NEVER remove focus indicators |
| 118 | |
| 119 | ### Hover |
| 120 | |
| 121 | - Buttons (primary): lighten background by 10% |
| 122 | - Buttons (secondary): use `#EADCC3` background |
| 123 | - List items: use `#EADCC3` background |
| 124 | |
| 125 | ### Disabled |
| 126 | |
| 127 | - MUST use `opacity: 0.5` |
| 128 | - MUST use `cursor: not-allowed` |
| 129 | |
| 130 | ## Interaction |
| 131 | |
| 132 | - MUST use an `AlertDialog` for destructive or irreversible actions |
| 133 | - SHOULD use structural skeletons for loading states |
| 134 | - MUST show errors next to where the action happens |
| 135 | - NEVER block paste in `input` or `textarea` elements |
| 136 | - MUST add an `aria-label` to icon-only buttons |
| 137 | |
| 138 | ## Animation |
| 139 | |
| 140 | - NEVER add animation unless it is explicitly requested |
| 141 | - MUST animate only compositor props (`transform`, `opacity`) |
| 142 | - NEVER animate layout properties (`width`, `height`, `top`, `left`, `margin`, `padding`) |
| 143 | - SHOUL |
People who liked this also viewed
6 picksType
- lark-drive飞书云空间（云盘/云存储）：管理 Drive 文件和文件夹，包含上传/下载、创建文件夹、复制/移动/删除、查看元数据、评论/权限/订阅、标题、版本、飞书文档密级标签（secure labels）和本地文件导入。用户需要整理云盘目录、处理云空间资源 URL/token、判断链接类型/真实 token/标题，或导入 Word/Markdown/Excel/CSV/PPTX/.base 为 docx/sSkillsJul 2026
- lark-sharedUse for lark-cli setup/auth tasks: auth login/status/logout, user vs bot identity, business-domain permissions (--domain, including all/docs/drive), missing scopes, revoking authorization, or handlingSkillsJul 2026
- lark-whiteboard飞书画板：查询和编辑飞书云文档中的画板。支持导出画板为预览图片、导出原始节点结构、使用多种格式更新画板内容。 当用户需要查看画板内容、导出画板图片、编辑画板时使用此 skill。不负责：飞书云文档内容编辑（lark-doc）、文档内嵌电子表格/Base（lark-sheets / lark-base）。SkillsJul 2026
- lark-task飞书任务：管理任务、清单和任务智能体。创建待办任务、查看和更新任务状态、拆分子任务、组织任务清单、分配协作成员、上传任务附件、注册或注销任务智能体、更新任务智能体的主页数据、写入智能体任务记录。当用户需要创建待办事项、查看任务列表、跟踪任务进度、管理项目清单或给他人分配任务、为任务上传附件文件、注册注销任务智能体、更新智能体主页数据、写入任务记录时使用。SkillsJul 2026
- lark-attendance飞书考勤打卡：查询自己的考勤打卡记录SkillsJul 2026
- lark-apps妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要SkillsJul 2026
