USEFUL TOOLS. LESS HASSLE.One clear system.
Less friction.
This guide defines the visual and verbal identity of MoSanKit. Use it to keep every page, tool, and touchpoint consistent, recognisable, and easy to use.
A calm, confident palette.
Neutral foundations keep interfaces easy to scan. A fresh lime accent brings focus to important actions without overwhelming the experience.
Main text, navigation marks, footer and high-contrast UI.
Default canvas for a soft, low-glare reading experience.
Primary actions, highlights, active states and small brand details.
Use sparingly for dark green accents and supporting emphasis.
Descriptions, helper text and supporting information.
Subtle separation between cards, sections and controls.
Cards, tool panels, fields and elevated content surfaces.
Optional alternate accent for charts or subtle visual variation.
Keep lime for primary actions, active states, and a few moments of emphasis.
Use Ink for text on light surfaces. Avoid small white text on lime backgrounds.
Prefer Paper, White, and Line for most layouts instead of adding extra colours.
Built for clarity.
Two complementary typefaces create a clear distinction between friendly product communication and technical details.
things happen.
Manrope is the primary typeface for headings, body copy, navigation, labels, and interface controls.
{ code: true }
DM Mono is reserved for technical details, code, metadata, small labels, values, and eyebrow text.
| Style | Suggested size | Weight | Usage |
|---|---|---|---|
| Display / H1 | 48–78 px | 800 | Page hero headline |
| Section / H2 | 28–36 px | 800 | Major section headings |
| Card / H3 | 13–18 px | 700–800 | Tool and feature titles |
| Body | 13–15 px | 400–500 | Paragraphs and descriptions |
| UI label | 10–12 px | 600–800 | Navigation, buttons and labels |
| Technical | 9–11 px | 400–500 | DM Mono metadata and code |
The system working together.
Use contrast, spacing, and a restrained accent to make the next action obvious.
Useful tools.
Clear results.
Friendly language, strong hierarchy, and a single focused action. Interfaces should feel capable without feeling complicated.
Image Compressor
Reduce image file sizes while keeping quality in check.
Simple by design.
Every design decision should make tools easier to discover, understand, and use.
Lead with purpose
Give every page one clear job. Use descriptive headings and direct explanations.
Prioritise the task
Keep the tool experience central. Supporting content should help, not compete.
Reuse familiar patterns
Keep navigation, cards, buttons, spacing, and interaction styles consistent.
Design for everyone
Maintain readable contrast, clear labels, visible focus states, and responsive layouts.
Shape, space, and depth.
Soft corners and subtle elevation give the interface structure while keeping the overall look lightweight.
Corner radius
Spacing rhythm
Borders and shadows
Use a 1 px soft border in #E6EAE4 to define surfaces. Apply a restrained shadow only when an element needs elevation, such as a floating panel or hover card.
Iconography
Prefer simple, familiar line icons with consistent stroke weight. Use icons to support labels, not replace important text. Avoid decorative icon overload.
Helpful, never complicated.
MoSanKit sounds like a capable guide: approachable, concise, and confident without being loud or overly technical.
How we communicate
- Use plain, familiar language.
- Lead with the benefit or answer.
- Keep instructions short and actionable.
- Be confident, not boastful.
- Explain technical terms when needed.
Example brand message
Keep the brand recognisable.
Use this quick check before publishing a new page, tool, or campaign asset.
Do
- Use Manrope for everyday interface text and DM Mono for technical labels.
- Keep the Ink, Paper, White, and Lime palette consistent.
- Use generous whitespace and clear content hierarchy.
- Keep buttons and cards consistent across tools.
- Make layouts responsive and accessible.
Avoid
- Adding unrelated accent colours without a clear purpose.
- Using multiple display fonts on the same page.
- Overusing shadows, gradients, or decorative effects.
- Using lime for long paragraphs or low-contrast text.
- Making interfaces feel crowded or overly complex.