The brand

Present LMS

One operational surface for the people running an institute.

This page is the canonical reference for how Present LMS looks and sounds. It is a living surface — when the product evolves, this evolves with it.

01 — Color

A near-monochrome palette, one accent.

White and graphite carry the interface. A single blue earns attention by being the only saturated color in the room — used for the primary CTA, active nav, links, and the occasional numeral.

Ink

ink/200

#a8b0bc

Disabled text, decorative ink layer.

ink/300

#7a8593

Eyebrows, muted captions, low-priority labels.

ink/500

#52606d

Body copy, supporting text, icon strokes on neutral chips.

ink/700

#1f2a3d

Strong UI text, dense data.

ink/900

#0b1220

Primary text, display headlines, active nav chip.

Accent

accent/100

#eef3fd

Soft accent fill — emphasized badges and stat chips.

accent/500

#2a63d4

Primary brand accent — CTAs, links, key numerals.

accent/600

#214fb0

Primary button hover.

accent/050

#f5f8fe

Tinted hover for accent-leaning surfaces.

Surface

surface/base

#ffffff

App background, primary card fill.

surface/muted

#fafbfc

Inner shell, recessed panels.

surface/subtle

#f6f7f9

Inactive icon chips, code blocks, hover row.

Border

border/hairline

#e7eaef

Default 1px border on cards, inputs, dividers.

border/soft

#eceff3

Internal dividers, sidebar separators.

border/strong

#cdd3db

Focus rings, hovered avatar rings.

Status

SUCCESS

status/success

Success badges, confirmations.

#047857#ecfdf5#a7f3d0

WARNING

status/warning

Cautions, soft warnings.

#b45309#fffbeb#fde68a

DANGER

status/danger

Destructive actions, error states.

#9f2f2f#fff5f5#f0c4c4

02 — Type

Plus Jakarta for display, Inter for body.

The display family carries headlines, numerals, and brand moments. The body family does the rest. Tracking tightens as size grows.

Display — Plus Jakarta Sans

Run your admin tasks from one clear operational surface.

font-alt · weight 600 · tracking −0.025em

Body — Inter

Keep track of the people and learning structure inside your institute without jumping across separate tools. Body copy is comfortable at 14–16px with generous line-height — most reading happens here.

font-humanist · weight 400 · tracking 0

Scale

eyebrow

11px · 1.2 · 600

Eyebrow specimen

Section eyebrows above headlines.

caption

12px · 1.4 · 500

The quick brown fox

Microcopy, metadata, badges.

body-sm

13px · 1.55 · 400

The quick brown fox

Compact UI body, sidebar items.

body

14px · 1.6 · 400

The quick brown fox

Default body text.

body-lg

16px · 1.65 · 400

The quick brown fox

Hero paragraphs, intro copy.

title-sm

20px · 1.3 · 600

The quick brown fox

Card titles.

title

24px · 1.25 · 600

The quick brown fox

Section titles.

display-sm

40px · 1.1 · 600

The quick brown fox

Stat numerals, secondary heroes.

display

52px · 1.05 · 600

The quick brown fox

Page heroes, brand moments.

03 — Shape

Generous radii, restrained shadows.

Cards lean on rounded corners and hairline borders rather than drop shadows. Elevation is reserved for floating overlays.

Radii

0.5rem

Pills, inline tags.

0.75rem

Inputs, small chips.

1rem

Icon chips, secondary cards.

1.5rem

Primary cards.

2xl

1.75rem

Stat cards, content panels.

3xl

2rem

Hero containers, shell insets.

pill

9999px

Buttons, avatar rings.

Elevation

shadow/none

—

Default — most cards rely on borders, not shadows.

shadow/hairline

0 1px 0 rgba(15, 23, 42, 0.0…

Subtle lift on inner shell panels.

shadow/card

0 1px 2px rgba(15, 23, 42, 0…

Optional lift on floating cards.

shadow/overlay

0 20px 48px -24px rgba(15, 2…

Modals, dropdowns.

Motion

fast

120ms

base

180ms

slow

320ms

Keep transitions short and easing gentle. Default to `base` + `standard` for hovers and state changes; `slow` for entrances only.

04 — Components

Patterns, with their states.

The same surfaces used across the admin area. Treat these specimens as the regression check — if they look off here, they're off everywhere.

Buttons

Primary

Secondary

Danger

Text / link

View all Invite teachers or students

Inputs

DefaultWith valueDisabled

Badges

StudentTeacherAdminActivePending

Cards

Members

128

Teachers, admins, and students with institute access.

Pending invites

Invitations waiting for someone to accept. Emphasized in accent blue.

Nav items

DashboardActive

Members

BatchesHover

05 — Voice

Calm operator, not corporate cheerleader.

The product talks to admins who already trust themselves. Strip filler, name what is on screen, and let the work speak.

Principles

Clear, not corporate

Write like a thoughtful operator, not a feature page. Avoid hype words ("powerful", "seamless", "robust"). Trust the reader.

Second person, present tense

Address the admin directly. "Invite teachers or students" beats "Teachers and students can be invited."

Concrete over clever

Name what is on screen. "Open member management" tells you where you are going; "Get started" does not.

Lowercase eyebrows, sentence-case everything else

Eyebrows are UPPERCASE with wide tracking. Headlines, buttons, and labels are sentence case. Title Case Is Reserved For Proper Nouns.

One verb per CTA

Buttons start with a verb and stay short. "Invite teachers", "Remove member", "Open member management".

Microcopy patterns

eyebrow

“Institute overview”

Two or three words, uppercase, narrow scope.

headline

“Run your admin tasks from one clear operational surface.”

A single sentence that names the page’s purpose. End with a period.

supporting

“Keep track of the people and learning structure inside your institute without jumping across separate tools.”

One paragraph, around 20–30 words. Earns its place by adding context the headline cannot.

ctaPrimary

“Open member management”

Verb + object. Names the destination or action exactly.

ctaSecondary

“View all”

Two or three words. Pairs with an arrow icon.

emptyState

“No members yet. Invite teachers or students to get started.”

State the absence, then offer one next step. No exclamation marks.

error

“We could not load members. Try again in a moment.”

Plain language. No "Oops" or "Whoops". Suggest a recoverable next step when possible.

Do / Don’t

Open member management

Names the destination.

Click here to manage

Vague verb, redundant "click here".

Invite teachers or students

Lists who, in plain words.

Onboard new users

Generic SaaS phrasing.

No members yet. Invite teachers or students to get started.

Names the state, offers the next step.

Looks empty in here!

Tone too casual; no path forward.

Pending invites

Concrete noun.

Outstanding action items

Corporate filler.