Style Guide
FEMS design system components — compare these with the Pencil design file.
Color Palette
Primary
Brand Red
#E20E18
Red Gradient
#F46F6F → #E20E18
Red Light
#F46F6F
Rose Tint
#FEF8F9
Gold / Label
#D7B722
Neutrals (Slate)
Slate 900
#0F172A
Slate 700
#334155
Slate 600
#475569
Slate 400
#94A3B8
Slate 300
#CBD5E1
Slate 200
#E2E8F0
Slate 100
#F1F5F9
Black & White
Black
#1F1F1F
White
#FFFFFF
Typography Scale
Headings — Sora
Hero Headline H1
64px / Bold 700 / -2 trackingSection Headline H2
48px / Bold 700 / -1.5 trackingSub-Section H3
36px / SemiBold 600 / -1 trackingCard Title H4
24px / SemiBold 600 / -0.5 trackingSmall Title H5
20px / SemiBold 600 / 0 trackingOVERLINE LABEL
13px / SemiBold 600 / 2 tracking / Brand RedBody Text — Inter
Body Large — The complete school management platform trusted by 500+ institutions.
18px / Regular 400 / 1.6 lhBody Default — Manage attendance, grades, timetables, fees, and more from a single unified dashboard. Empower teachers, parents, and students.
16px / Regular 400 / 1.6 lhBody Small — Used for supporting descriptions, card meta info, and secondary content throughout the interface.
14px / Regular 400 / 1.5 lhCaption — Fine print, timestamps, footnotes, and metadata labels.
12px / Regular 400 / 1.5 lh / Slate 400Font Weights & Emphasis
Badges
Hero
Pricing That Fits Your Institution
Tell us about your school, we build a plan around you.
Anatomy
Badge → H1 → Subtitle → Feature strip (optional, 3 items). Stacked, centered, on a slate 900 background. Reference: src/app/pricing/page.tsx.
Container
#0F172A (slate-900). Always dark for hero sections.
flex flex-col items-center text-center. Hero is always centered.
px-5 mobile → md:px-10 tablet → lg:px-20 desktop (20 / 40 / 80 px).
py-16 mobile → md:py-20 tablet → lg:py-28 desktop (64 / 80 / 112 px).
gap-6 (24px) between badge, H1, subtitle, and strip.
Elements
Sora 13px SemiBold, uppercase, letterSpacing 2. text-white on bg-white/10 with border-white/20. Padding 6px 18px. Red dot prefix (1.5 x 1.5, bg-brand-red). Content: 1 to 3 words.
Sora Bold, text-white. Sizes: text-3xl mobile → md:text-4xl → lg:text-5xl. Tracking -1.5px, leading 1.1. Max 8 words. Title Case. No hyphens, no em dashes.
Inter Regular, text-[#94A3B8] (slate-400). Sizes: text-base mobile → md:text-lg. Must fit on a single line at desktop width — no line breaks. Keep to ~10 words max. Sentence case, direct voice. No hyphens, no em dashes.
Exactly 3 items. Icon 15 x 15, label Inter text-sm medium, color #94A3B8 (white on hover). Divider 1 x 14, bg-white/10 between items. Item padding md:px-6. Labels: 2 to 4 words, keyword first.
Animation
fade-down0msfade-up100msfade-up200msfade-up300msContent Writing Rules
Not in badge, H1, subtitle, or strip. Rewrite compound modifiers (real-time → real time, Multi-Child → Multi Child). Replace em dash clauses with commas, periods, or a rephrase.
Cut filler words. Lead with the main noun or benefit. H1 max 8 words. Badge 1 to 3 words. Strip labels 2 to 4 words.
Subtitle must fit on one line at desktop, no line break. Keep it to ~10 words max. Sentence case, direct address. Avoid marketing fluff like leveraging, solutions, streamlining.
Do not invent social proof like 500+ institutions. FEMS is early stage. Say what is true today and show the ambition separately.
Product pages use padding 100px 120px 80px and add a breadcrumb above the badge. Everything else follows the base pattern above.
Module Header
Admission
Manage the complete admission lifecycle from parent inquiry to student enrollment.
Always <Badge variant="red"> — content format: MODULE N (e.g. MODULE 1, MODULE 2)
Short module name only. Single word or two max. Must fit on one line at all breakpoints. Font: Sora Bold, 42px desktop → 34px tablet → 26px mobile, letter-spacing −1.
One sentence, single line. No em dash (—) or hyphen. Plain descriptive sentence. Font: Inter Regular, 18px, text-slate-600.
Section Header
Visit Us
Come say hello at our Dhaka office.
All caps, 13px Sora SemiBold, letterSpacing 2. Brand Red text on rose-tint pill with border. Always includes a red dot prefix. Sets context, keep it short (2 to 3 words).
Short and punchy. Ideally fits on one line. Sora Bold, 48px desktop → 40px tablet → 30px mobile, tracking −1.5px. text-slate-900. No punctuation at the end.
One sentence, single line preferred. Inter Regular, 16–18px, text-slate-600, leading-[1.6], maxWidth 640. No em dashes, no bullet points, no hyphen-breaks.
Write like a person, not a brochure. Use plain words. Short sentences. No corporate filler like 'leveraging', 'solutions', or 'streamlining'. If you would not say it out loud to someone, rewrite it.
Never put specific counts in descriptions that can change over time — team size, module count, school count, etc. Use 'a team of' instead of 'eight people'. Save exact numbers only for stat cards where they are intentionally highlighted.
Divider
Simple divider
Labeled divider
Cards
Feature Card
Student Management
Complete student profiles with academic history, attendance records, health info, and parent contacts — all in one place.
Learn moreAcademic Planning
Curriculum design, class scheduling, and examination management made effortless with smart automation.
Learn moreFinancial Hub
Fee collection, invoicing, payroll, and financial reporting with real-time dashboards.
Learn moreStat Card
500+
Schools Trust FEMS
1M+
Students Managed
19+
Modules Available
99.9%
Platform Uptime
Testimonial Card
“FEMS completely transformed how we manage our school. The attendance and grading modules alone saved us 15 hours per week.”
Sarah Johnson
Principal, Greenfield Academy
“The finance module is incredibly powerful. We can track every fee payment and generate reports in seconds.”
Rajesh Kumar
CFO, Delhi Public School
Module Card
Attendance
Gradebook
Fee Management
HR & Payroll
Notifications
Step Card
Sign Up & Configure
Create your institution profile and customize modules to match your school's workflow.
Import Your Data
Migrate existing records with our guided data import tools and dedicated support.
Go Live
Invite staff and students, then start managing everything from one dashboard.
Pricing Card
Starter
For small schools just getting started
Professional
Perfect for growing institutions with 500+ students
Enterprise
For large universities & multi-campus networks
Checklist Item
- Free 14-day trial included
- No credit card required
- Cancel anytime
- Dedicated onboarding support
Form Fields
We'll send verification to this email
This field is required
Placeholders
FAQ Section
Most institutions are fully set up within 2 weeks. Our dedicated onboarding team handles data migration, staff training, and custom configuration at no extra cost.
FEMS is a Full Education Management System — a comprehensive SaaS platform for schools, colleges, and universities to manage everything from admissions to alumni.
Yes! FEMS has a dedicated mobile app for students, parents, and staff with real-time notifications and key features on the go.
Trust Bar
Trusted by Oxford International School. Built for schools, colleges, and madrashas across Bangladesh.
Soft CTA
Secondary CTA for pages where a hard sell isn't appropriate. Uses bg-slate-100 so it blends with the footer. Buttons: btn-dark + btn-soft.
See FEMS First
Explore the platform at your own pace before committing.