This is the design system for Ramtin Tech Zone. It keeps the site consistent: one set of colors, one type scale, one spacing scale, and a small set of components. The look is modern, minimal, and dark — the same look the site already had, now written down as rules instead of one-off values.
The full documentation lives in the repo as DESIGN_SYSTEM.md. This page is the living reference: every token and component below is rendered with the real styles.
Principles
- Content first. The article is the product. The chrome around it stays quiet.
- Minimal, not empty. One accent color, one surface, generous spacing. Nothing decorative for its own sake.
- Dark by design. The theme is dark only. No light mode, no theme switcher.
- Tokens, not values. No hardcoded colors, sizes, or radii in components. Everything references a token in
tokens.css. - Accessible by default. Every interactive element shows a focus ring. Text contrast meets WCAG AA.
Colors
Surfaces and text
Accent and semantic
Typography
The typeface is Inter, with a system fallback. Body text is 17px at 1.65 line height. Headings are tight (-0.02em tracking, 1.25 line height).
Heading 1 — 28–42px
Heading 2 — 26px
Heading 3 — 21px
Heading 4 — 18px
Body text — 17px, 1.65 line height. This is how an article paragraph reads: short sentences, simple words, concrete numbers.
Small text — 13px, muted. Used for meta, captions, and footer text.
Inline code and /ip/firewall/nat use the mono stack at 0.88em.
Spacing and radius
Spacing follows a 4px scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 72. Components use these tokens; one-off values stay literal and rare. Corners are 6px (small), 8px (medium), 10px (large), 14px (cards), or full (pills).
Buttons
Primary is for the one main action. Ghost is for everything else. Buttons are 15px semibold with 10px corners.
Chips, tags, and badges
AllMikroTikOpenWrtVPN
MikroTikRouterOS 7.25
PassedBetaFailedNote
Chips filter content. Tags label a post’s topics. Badges show a status — success, warning, error, or info.
Cards
MikroTik Reverse Proxy: Host Multiple Services on One Public IP
RouterOS now includes a built-in Reverse Proxy. Publish three web applications with different domains over HTTPS using a single public IP address.
Cards are the home page. One image (16:9), one tag, one title, a three-line description, and a footer with reading time. On hover the card lifts 3px and the border brightens.
Callouts
Use callouts for notes, tips, and warnings inside articles. Quotes stay as blockquotes; callouts are for things the reader must not miss.
This is a note. Use it for extra context that does not fit the main flow.
This is a tip. Use it for a shortcut or a better way to do the step above.
This is a warning. Use it when a step can lock you out or break the setup.
This is a danger callout. Use it only when data loss or a security risk is involved.
Code and keyboard keys
Inline code looks like /ip/firewall/nat. A code block looks like this:
/interface/bridge
add name=bridge-containers
Press Ctrl + C to copy. Keyboard keys use the kbd element.
Tables
| Feature | Action | Benefit |
|---|---|---|
| AdList | URL import | Automatic updates every 4 hours |
| DNS cache | Increase to 20 MiB | Prevents import errors |
| Whitelist | Static DNS forward | Fixes broken websites |
Forms
Inputs use the surface background, a 1px border, and 10px corners. Focus shows the accent ring.
Motion and focus
Motion is minimal: cards lift in 0.15s, nothing else animates. Every link, button, and input shows a visible focus ring when navigated by keyboard — try tabbing through this page. Selection uses the accent color.
Do’s and don’ts
- Do use a token for every color, size, space, and radius.
- Do keep the visual language flat and quiet. The article is the product.
- Do check every change at 640px and 900px widths.
- Don’t add a new color without a token and a name.
- Don’t add animation for its own sake.
- Don’t use a component from another design system. This system is small on purpose.