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.