UI Design System

Wrytix UI Guideline

v1.0

Official design guideline for the main website and Tools subdomain. One font family, consistent tokens, two typography scales.

2
Color System

All color tokens. Use CSS variables throughout the codebase for consistency and easy theming.

Token HEX Swatch Usage
Primary
Primary 600 #046BD2 Main accent, buttons, links
Primary 700 #0058BB Hover & active states
Text 900 #1E293B Main body text
Primary Gradient — Hero / Special CTA only
Gradient #046BD2 → #6067CB linear-gradient(90deg, #046BD2, #6067CB)
Neutrals
Background #F8FAFC Page background
Surface #FFFFFF Cards, modals, inputs
Border #E2E8F0 All borders & dividers
Text muted #64748B Secondary text, descriptions
Placeholder / Disabled #94A3B8 Placeholders, disabled states
Subtle bg #F1F5F9 Section backgrounds, table rows
Accent subtle bg #EEF2FF Chips, outline hover, badges
Accent (optional)
Pink 500 #EC4899 Secondary buttons, accents
Pink 600 #DB2777 Hover state for Pink 500
Status
Success #16A34A Confirmations, success states
Warning #F59E0B Warnings, caution
Error #EF4444 Errors, destructive actions
Info #0EA5E9 Informational messages
Success
#16A34A
Warning
#F59E0B
Error
#EF4444
Info
#0EA5E9

3
Typography Scale

One font family across both contexts, two separate scales. Never mix scales between main site and Tools subdomain.

Font Family

Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif

Aa
400 Regular
Aa
600 Semibold
Aa
700 Bold
A — Main Site · Content-first
H1 Heading
28px / 700
H2 Section
24px / 700
H3 Sub-section
22px / 700
H4 Block
21px / 700
H5 Sub-block
20px / 700
H6 Minimal
18px / 700
Body text of the page
18px / 400 / 1.6
SECTION LABEL
14–15px / 700
UI / body text
14–16px / 400
B — Tools Subdomain · UI-compact
H1 Heading
24px / 700
H2 Section
20px / 700
H3 Sub-section
18px / 700
Base UI / body text
16px / 400 / 1.5
Helper / muted text
14px / 400
Caption / meta info
12–13px / 400
SECTION LABEL
12–13px / 700
Weight usage rules
Regular 400 — body text, descriptions
Semibold 600 — buttons, key UI actions
Bold 700 — headings, section labels

4
Buttons

Global button system — same rules for both main site and Tools. Two sizes, four variants, one disabled state.

Primary



Background #046BD2 · Hover #0058BB + translateY(-1px) · Text #FFFFFF
Primary Gradient — Hero & Top CTA only


linear-gradient(90deg, #046BD2, #6067CB)
Secondary


Background #EC4899 · Hover #DB2777
Outline


Border 2px solid #046BD2 · Hover background #EEF2FF
Disabled


Background #E2E8F0 · Text #94A3B8 · Shadow none · cursor: not-allowed
Focus-visible (Accessibility — required)



outline: 3px solid #046BD2; outline-offset: 3px; — mandatory on all interactive elements
Property MD — Default SM — Compact
Height 50px 44px
Padding 0 30px 0 22–24px
Font size 16px 14–15px
Font weight 600 600
Border-radius 999px 999px
Shadow 0 8px 24px rgba(0,0,0,0.12) Same
Transition all 200ms ease Same
Icon gap 10px 10px
Min hit area 44px min-height 44px ✓ exact

5
Spacing & Shape

Base spacing scale and border-radius tokens. Stick to the scale — avoid arbitrary values.

Spacing Scale

4
4px
8
8px
12
12px
16
16px
24
24px
32
32px
48
48px

Border Radius

Inputs
12–14px
Cards
16px
Buttons
999px (pill)
Border Color
Single border color for all dividers, card edges, and input borders: #E2E8F0

Scroll to Top