SKIT BENGALURU · DESIGN SYSTEM
The SKIT Design System
One reference for the colours, type, components and spacing behind the Sri Krishna Institute of Technology website — so every new page feels like it belongs.
Foundations
The colour system
Audited across every live page. A forest green leads on 90+ pages, backed by a family of warm creams, a deep-to-mid grey text ramp, and one warm coral used sparingly for accents.
Brand & accent
green leads · coral accents
Forest Green
#2F574D
Primary
Deep Green
#0E3A27
Dark
Pine
#1C332D
Signal Green
#066F41
Success
Coral
#F4796C
Accent
Surfaces
creams, frosts & white
Card Cream
#F6F4ED
Cards
Sand
#ECEBE4
Cream
#F4F1EA
Page
Frost White
#F5F5F5
Off White
#FAFAFA
Ink & text
dark-to-mid grey ramp
Ink
#0C0C0D
Navy Ink
#18212D
Steel Grey
#4E5052
Body
Graphite
#5B5B5B
Slate
#666666
Alpha & overlays
transparent ramps
Ink 85
rgba(0,0,0,.85)
Text
Ink 30
rgba(0,0,0,.2)
Border
Ink 10
rgba(0,0,0,.1)
White 50
rgba(255,255,255,.5)
On green
White 25
rgba(255,255,255,.25)
Lines & borders
hairlines
Hairline
#E8E8E8
Stroke
#EDEDED
Soft Silver
#DADADB
Muted Grey
#83858D
Meta
Charcoal
#333333
Foundations
Three type families
Geist and Inter both drive headings across the site’s templates; Lato carries body copy and every interface label. Kumbh Sans and Figtree turn up on a few legacy pages. The eyebrow — a green, uppercase pre-title — sits above most sections.
Aa
Gg
Geist
Display · Headings
Medium 500 · Semibold 600 · Bold 700
Aa
Gg
Inter
Headings · Long text
Regular 400 · Medium 500 · Bold 700
Aa
Gg
Lato
Body · Interface
Regular 400 · Bold 700
Shape what comes next
Display
Geist Bold · up to 5rem
Say hello to your future
Main Heading
Geist Bold · 2.5rem
52 pages
Explore our engineering programs
Section Title
Geist Medium · 1.875rem
25 pages
Departments & research centres
Heading 2
Inter Bold · 30px
alt system
Placement & career support
Heading 3b
Inter Bold · 26px
23 pages
Programme highlights
Card Title
Geist Medium · 1rem
34 pages
SKIT BENGALURU · ADMISSIONS
Green Pre-title
Lato Bold · uppercase
57 pages
Everything a student needs, told clearly and without noise.
Body
Lato Regular · 1.13rem
36 pages
Faculty profiles, tables and long-form policy text.
Faculty / Long Body
Inter Regular · 0.88rem
48 pages
Captions, card meta and helper text.
Small Text
Lato Regular · 0.75rem
63 pages
Components
The component library
Every live page is built from a shared kit. These are the recurring primitives — buttons, badges, eyebrows, rating and cards — plus the full inventory grouped by role.
Buttons
Badges & tags
Success Stories
Admissions Open 2026
Need Help?
Live · Placements
NAAC Accredited
Rating & section eyebrow
4.9 · trusted by 3000+ students
WHY CHOOSE SKIT
Navigation & chrome
Global / Nav Bar
Global / Sidebar
Mega menu & dropdowns
Global / Footer
Back to top · WhatsApp chat
Actions
Button / Primary · Primary 2 · 3
Apply Now · Sq icon button
Secondary & text links
Load More · View More
Tabs · Category filters
Badges & labels
Badge 2 · 3 · 4
Badge-linked
Pre Title · Section Title
Kicker · Overline
Tag · Highlight
Cards
Bento Card · Bento 2
CTA Card · CTA 2
Service · Benefit Card
Teacher · Speaker · Profile
Journal · Post · Reference
Content modules
FAQ · FAQ Item
Ticker · Company ticker
Counter · Rating counter
Testimonial · 5-stars
Feature list · Tables
Media & utility
Video · AmbiLight video
Slideshow · Carousel
Spinner · Load state
Icon · Phosphor
Maps · Forms
Components
Cards & surfaces
Three surface levels give the page depth: warm card cream and white cards that float on a soft shadow, and deep-green feature panels for moments that should stand out.
Card cream
The dominant card surface site-wide (#F6F4ED). Warm, soft, 24px radius.
White card
Clean white for dense content, tables and lists. Floats on a soft shadow.
Feature panel
Deep green for heroes, stats and CTAs — large panels round at 42px.
Card families in the kit — Bento, CTA, Service, Benefit, Teacher, Journal, Post and Reference cards — all share this surface language.
Foundations
Spacing & radius
Layouts run on a mixed scale where 10px is the everyday gap and sections pad 25px at the sides, 50px top and bottom. Corners run 8 → 42, with a fully-round pill on top.
Spacing scale
8px
10px
12px
16px
20px
24px
30px
40px
64px
Corner radius
Input
8px
Media
16px
Card
24px
Panel
42px
Pill
Full
Foundations
Iconography
Line icons from Phosphor lead, with Hero, Basicons and Iconic on hand. Keep a consistent weight and pair icons with a green or ink stroke — never mix filled and line styles in one row.
Phosphor
Hero
Basicons
Iconic
THE SKIT SYSTEM
Keep it green. Keep it clear.
Reuse these colours, type and components on every new page and the whole SKIT site stays one coherent place.