Baedillah Rizky Hendriyan n

Generated Oct 12, 2026

DESIGN.md for sidigs.com

sidigs.com/?utm_source=google&utm_medium=paid_search&utm_campaign=leads_indonesia_oktober_2026&utm_term=lms%20sekolah&utm_content=pembelajaran_ujian_online&gad_source=1&gad_campaignid=24325665586&gbraid=0AAAAABgDEFrPXTPPS2szDDFojnBMELLvB&gclid=CjwKCAjwirLWBhBBEiwAlItbEreOIok9K3aDODGZV0u9K0p_zrQIiN8CdL_qEnrrX6CXEmPjHfyb1RoC8r0QAvD_BwE15 colors6 componentsInter

Remix

12 screenshots captured· sidigs.com

1 / 12 · SIDIGS — Sistem Informasi Digital Sekolah | SPMB, CBT & SPP Online · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Sidigs
description: |
  SIDIGS embodies a modern, tech-forward educational platform aesthetic built on
  bold primary actions and trusting, professional depth. The design prioritizes
  clarity and user confidence through a clean canvas, vibrant accent colors, and
  purposeful layering. The visual personality balances corporate
  professionalism—evident in the muted secondary text and structured
  navigation—with energetic warmth through strategically placed brand yellow.
  Hero sections use deep blue-to-cyan gradients to evoke trust and forward
  movement, reinforced by white text and generous whitespace. The overall effect
  is welcoming yet authoritative, designed to guide school administrators and
  educators through complex digital workflows without cognitive overload.
source:
  url: "https://sidigs.com/?utm_source=google&utm_medium=paid_search&utm_campaign=leads_indonesia_oktober_2026&utm_term=lms%20sekolah&utm_content=pembelajaran_ujian_online&gad_source=1&gad_campaignid=24325665586&gbraid=0AAAAABgDEFrPXTPPS2szDDFojnBMELLvB&gclid=CjwKCAjwirLWBhBBEiwAlItbEreOIok9K3aDODGZV0u9K0p_zrQIiN8CdL_qEnrrX6CXEmPjHfyb1RoC8r0QAvD_BwE"
  pagesAnalyzed: 6
  extractedAt: 2026-10-12
  tokensMeasured: true
colors:
  primary: "#FFB400"
  accent: "#2D3748"
  link: "#009ADE"
  canvas: "#FFFFFF"
  surface-alt: "#0A3660"
  on-primary: "#412402"
  ink: "#2D3748"
  body: "#718096"
  hairline: "#BAE3F7"
  accent-1: "#0C447C"
  accent-2: "#E0F4FD"
  accent-3: "#4A5568"
  accent-4: "#CA6F1E"
  accent-5: "#2980B9"
  neutral-1: "#000000"
  neutral-2: "#F0F9FF"
typography:
  heading-xxl:
    fontFamily: Inter
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  heading-xl:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0px
  heading-lg:
    fontFamily: Inter
    fontSize: 22px
    fontWeight: 700
    letterSpacing: 0px
  heading-md:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  heading-sm:
    fontFamily: Inter
    fontSize: 12.5px
    fontWeight: 600
    letterSpacing: 0px
  heading-xs:
    fontFamily: Inter
    fontSize: 11.62px
    fontWeight: 700
    letterSpacing: 0px
  body-xl:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  body-lg:
    fontFamily: Inter
    fontSize: 13.5px
    fontWeight: 700
    letterSpacing: 0px
  body-md:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 400
    letterSpacing: 0px
  body-md-strong:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 700
    letterSpacing: 0px
  body-sm:
    fontFamily: Inter
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-xs:
    fontFamily: Inter
    fontSize: 11.5px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  nav:
    fontFamily: Inter
    fontSize: 12.5px
    fontWeight: 700
    letterSpacing: 0px
  button-xs:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 500
    letterSpacing: 0px
  button-xs-strong:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.35
    letterSpacing: 0px
  caption-md:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0px
  caption-sm:
    fontFamily: Inter
    fontSize: 11.5px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  caption-sm-strong:
    fontFamily: Inter
    fontSize: 11.5px
    fontWeight: 600
    letterSpacing: 0px
  caption-xs:
    fontFamily: Inter
    fontSize: 10.5px
    fontWeight: 400
    letterSpacing: 0px
  caption-xs-strong:
    fontFamily: Inter
    fontSize: 10.5px
    fontWeight: 700
    letterSpacing: 0px
  caption-xs-uppercase:
    fontFamily: Inter
    fontSize: 10.5px
    fontWeight: 700
    letterSpacing: 0.84px
    textTransform: uppercase
rounded:
  none: 0px
  xs: 4px
  sm: 5px
  md: 7px
  lg: 8px
  xl: 9px
  xxl: 10px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 32px
  section: 36px
  band: 44px
borderWidths:
  thin: 1px
  medium: 2px
shadows:
  sm: "rgba(0, 0, 0, 0.12) 0px 8px 24px 0px"
  md: "rgba(12, 68, 124, 0.2) 0px 2px 12px 0px"
elevationStrategy: progressive
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FFFFFF"
    surface: "#0A3660"
    surfaceRaised: "#0B365F"
    text: "#2D3748"
    textMuted: "#718096"
    border: "#BAE3F7"
    accent: "#C28900"
    accentFg: "#000000"
    focusRing: "#FFB400"
    elevation: shadow
  dark:
    bg: "#161109"
    surface: "#241F18"
    surfaceRaised: "#302B24"
    text: "#FFFCF5"
    textMuted: "#A6A39B"
    border: "#3B3730"
    accent: "#FFB400"
    accentFg: "#0B0B0C"
    focusRing: "#FFB400"
    elevation: "border+surface"
  contrastFailures:
    - "light: muted on bg = 4.02:1 (needs 4.5:1)"
    - "light: text on surface = 1.02:1 (needs 4.5:1)"
gradients:
  - context: section
    kind: linear
    value: "linear-gradient(135deg, rgb(12, 68, 124), rgb(0, 154, 222))"
  - context: section
    kind: linear
    value: "linear-gradient(135deg, rgb(30, 132, 73), rgb(39, 174, 96))"
components:
  button-primary:
    typography: "{typography.body-md-strong}"
    textColor: "{colors.on-primary}"
    padding: "11px 22px 11px 22px"
    rounded: "{rounded.lg}"
    backgroundColor: "{colors.primary}"
  button-primary-2:
    typography: "{typography.nav}"
    textColor: "{colors.on-primary}"
    height: 31px
    padding: "8px 18px 8px 18px"
    rounded: "{rounded.md}"
    backgroundColor: "{colors.primary}"
  button-filled:
    textColor: "{colors.canvas}"
    height: 29px
    padding: "7px 11px 7px 11px"
    fontSize: 12px
    fontFamily: Inter
    fontWeight: 400
    rounded: "{rounded.md}"
    backgroundColor: "rgba(255, 255, 255, 0.1)"
  button-filled-lg:
    textColor: "{colors.canvas}"
    height: 33px
    padding: "9px 18px 9px 18px"
    fontSize: 12px
    fontFamily: Inter
    fontWeight: 700
    rounded: "{rounded.lg}"
    backgroundColor: "{colors.accent-1}"
  button-outline:
    textColor: "{colors.canvas}"
    border: "1px solid rgba(255, 255, 255, 0.35)"
    height: 39px
    padding: "11px 16px 11px 16px"
    fontSize: 12.5px
    fontFamily: Inter
    fontWeight: 400
    rounded: "{rounded.lg}"
  button-outline-sm:
    typography: "{typography.nav}"
    textColor: "{colors.canvas}"
    border: "1px solid rgba(255, 255, 255, 0.35)"
    height: 33px
    padding: "8px 14px 8px 14px"
    rounded: "{rounded.md}"
  card:
    textColor: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    padding: "16px 16px 16px 16px"
    fontSize: 14px
    fontFamily: Inter
    fontWeight: 400
    rounded: "{rounded.xl}"
    backgroundColor: "{colors.canvas}"
  card-sm:
    textColor: "{colors.ink}"
    padding: "14px 16px 14px 16px"
    fontSize: 14px
    fontFamily: Inter
    fontWeight: 400
    backgroundColor: "{colors.neutral-2}"
  badge-filled:
    textColor: "{colors.canvas}"
    height: 16px
    padding: "2px 9px 2px 9px"
    fontSize: 10px
    fontFamily: Inter
    fontWeight: 700
    rounded: 20px
    backgroundColor: "{colors.accent-1}"
  badge-filled-lg:
    typography: "{typography.caption-xs-strong}"
    textColor: "{colors.canvas}"
    height: 21px
    padding: "4px 10px 4px 10px"
    rounded: 20px
    backgroundColor: "rgba(255, 255, 255, 0.18)"
  navigation:
    textColor: "{colors.ink}"
    height: 60px
    padding: "0px 32px 0px 32px"
    fontSize: 14px
    boxShadow: "rgba(12, 68, 124, 0.2) 0px 2px 12px 0px"
    fontFamily: Inter
    fontWeight: 400
    backgroundColor: "{colors.accent-1}"
  footer:
    textColor: "{colors.ink}"
    fontSize: 14px
    fontFamily: Inter
    fontWeight: 400
  link:
    textColor: "{colors.primary}"
    fontSize: 11.5px
    fontFamily: Inter
    fontWeight: 700
  link-lg:
    textColor: "rgba(255, 255, 255, 0.7)"
    padding: "7px 11px 7px 11px"
    fontSize: 12px
    fontFamily: Inter
    fontWeight: 400
    rounded: "{rounded.md}"
states:
  link-hover:
    target: link
    state: hover
    textColor: "{colors.canvas}"
    backgroundColor: "rgba(255, 255, 255, 0.1)"
  other-hover:
    target: other
    state: hover
    opacity: 0.9
  card-hover:
    target: card
    state: hover
    boxShadow: "rgba(0, 0, 0, 0.08) 0px 3px 12px"
  button-hover:
    target: button
    state: hover
    opacity: 0.9
  other-focus:
    target: other
    state: focus
    boxShadow: "rgba(0, 154, 222, 0.1) 0px 0px 0px 3px"
  button-disabled:
    target: button
    state: disabled
    opacity: 0.6
breakpoints:
  - width: 375
    containerWidth: 343
    gridColumns: 1
    navLinksVisible: 1
    menuToggleVisible: true
    headingPx: 22
    bodyPx: 14
    sectionPaddingX: 16
  - width: 768
    containerWidth: 736
    gridColumns: 1
    navLinksVisible: 1
    menuToggleVisible: true
    headingPx: 22
    bodyPx: 14
    sectionPaddingX: 16
  - width: 1024
    containerWidth: 960
    gridColumns: 3
    navLinksVisible: 5
    menuToggleVisible: false
    headingPx: 26
    bodyPx: 14
    sectionPaddingX: 32
  - width: 1280
    containerWidth: 1100
    gridColumns: 3
    navLinksVisible: 5
    menuToggleVisible: false
    headingPx: 26
    bodyPx: 14
    sectionPaddingX: 32
  - width: 1440
    containerWidth: 1100
    gridColumns: 3
    navLinksVisible: 5
    menuToggleVisible: false
    headingPx: 26
    bodyPx: 14
    sectionPaddingX: 32
coverage:
  statesFound: 27
  gradientsFound: 2
  rolesUnassigned: 7
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by SIDIGS

1. Visual Theme & Atmosphere

SIDIGS embodies a modern, tech-forward educational platform aesthetic built on bold primary actions and trusting, professional depth. The design prioritizes clarity and user confidence through a clean canvas, vibrant accent colors, and purposeful layering. The visual personality balances corporate professionalism—evident in the muted secondary text and structured navigation—with energetic warmth through strategically placed brand yellow. Hero sections use deep blue-to-cyan gradients to evoke trust and forward movement, reinforced by white text and generous whitespace. The overall effect is welcoming yet authoritative, designed to guide school administrators and educators through complex digital workflows without cognitive overload.

Key Characteristics

Bold, warm brand yellow (#FFB400) reserved for primary CTAs and accents, creating high visual salience
Deep blue (#0C447C) and cyan (#009ADE) hero bands with gradient transitions signal progression and institutional reliability
Neutral, light canvas (#FFFFFF) and subtle hairline borders maintain visual breathing room
Typography hierarchy emphasizes clarity through weight and size variation, not color contrast
Minimal shadow use; depth achieved through color blocking and strategic borders
Component borders appear sharp (0px radius) on buttons but rounded (7px–10px) on cards, creating visual distinction between interactive and passive surfaces
Muted body text (#718096) ensures long-form content remains accessible without overwhelming

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #FFB400): Primary CTA buttons, brand accent highlights, active state indicators, and decorative accent bars in dashboards. High contrast against dark backgrounds; warm and optimistic.
Primary Text / Heading ({colors.accent} — #2D3748): Hero band accent color, primary heading text, and semantic "ink" for body copy emphasis. Dark, stable, and authoritative.

Interactive

Link ({colors.link} — #009ADE): Inline hyperlinks and navigation state. Medium-saturation cyan for clear affordance without aggression.
Secondary Action Fill ({colors.accent-1} — #0C447C): Secondary button fills and dark interactive states. Deep blue, institutional and calm.

Accent & Decorative

Accent Decorative 1 ({colors.accent-2} — #E0F4FD): Soft, light blue-tinted decorative surface. Role not measured; use for subtle background tints or accent containers.
Accent Decorative 2 ({colors.accent-3} — #4A5568): Mid-tone gray accent. Role not measured; use for secondary text, borders, or decorative dividers.
Accent Decorative 3 ({colors.accent-4} — #CA6F1E): Warm orange accent. Role not measured; use for decorative icon fills or tertiary status indicators.
Accent Decorative 4 ({colors.accent-5} — #2980B9): Medium blue accent. Role not measured; use for chart fills or secondary brand color in illustrations.

Neutral Scale

Canvas / Page Background ({colors.canvas} — #FFFFFF): Default page and container background. Clean, maximum contrast with body text.
Surface Alt / Section Band ({colors.surface-alt} — #0A3660): Dark blue alternating section backgrounds, often paired with white text and gradient overlays for hero zones.
Body Text ({colors.body} — #718096): Paragraph copy, secondary descriptions, and support text. Muted gray-blue, readable at 13–14px sizes.
Label / On Primary ({colors.on-primary} — #412402): Text color applied over primary brand fills. Dark brown for maximum legibility on #FFB400.

Surface & Borders

Hairline / Divider ({colors.hairline} — #BAE3F7): 1px borders on cards, section dividers, and subtle outline buttons. Pale blue, barely-there but sufficient to define edge containment.
Neutral Decorative 1 ({colors.neutral-1} — #000000): Pure black. Role not measured; reserve for strong text emphasis or icon fills if needed.
Neutral Decorative 2 ({colors.neutral-2} — #F0F9FF): Very light blue-tinted white. Role not measured; use for subtle background tints or disabled states.

3. Typography Rules

Font Family

Primary: Inter (system fallback stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)
Secondary: Inter (site uses Inter exclusively; no serif or alternative font family measured)

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XL	Inter	26px	700	1.3	0px	Hero headings, primary page title
Display L	Inter	24px	700	1.25	0px	Large hero headings, section openers
Heading MD	Inter	20px	700	1.3	0px	Mid-level section headings, card titles
Heading SM	Inter	12.5px	600	not measured	0px	Small section labels, card subtitles
Heading XS	Inter	11.62px	700	not measured	0px	Labels, form field titles, UI text
Body XL	Inter	16px	700	1.3	0px	Emphasis copy, strong callouts
Body LG	Inter	13.5px	700	not measured	0px	Strong body text, badge text
Body MD	Inter	13px	400	not measured	0px	Standard paragraph copy, form text
Body MD Strong	Inter	13px	700	not measured	0px	Emphasized body text
Body SM	Inter	12.5px	400	1.65	0px	Small copy, secondary descriptions
Body XS	Inter	11.5px	400	1.55	0px	Fine print, helper text, captions
Button XS	Inter	12px	500	not measured	0px	Small button text (secondary, outline)
Button XS Strong	Inter	12px	700	1.35	0px	Primary button text
Navigation	Inter	12.5px	700	not measured	0px	Top navigation links, menu items
Caption MD	Inter	12px	400	1.7	0px	Image captions, small labels
Caption SM	Inter	11.5px	400	1.6	0px	Micro copy, timestamps, metadata
Caption SM Strong	Inter	11.5px	600	not measured	0px	Strong caption, label emphasis
Caption XS	Inter	10.5px	400	not measured	0px	Tiny labels, footer text
Caption XS Strong	Inter	10.5px	700	not measured	0px	Strong tiny labels, badge text
Caption XS Uppercase	Inter	10.5px	700	not measured	0.84px	Micro uppercase labels, section markers

Principles

Hierarchy is weight-first: regular (400) for body, medium (500) for secondary, bold (700) for emphasis and headings. Size increments support this but do not drive it alone.
Line-height increases slightly at smaller sizes (body-xs: 1.55, body-sm: 1.65, caption-md: 1.7) to maintain legibility of small text; larger sizes compress (display: 1.25–1.3).
Letter-spacing is universal 0px except for uppercase labels (caption-xs-uppercase: 0.84px), which are tightly tracked and text-transformed for formality.
No negative tracking; the system uses positive or neutral letter-spacing throughout.
Body copy is set at {typography.body-md} (13px, 400 weight, 1-line). Captions and support text scale down to 10.5px while maintaining readable line-height.

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#FFB400)
Text color: {colors.on-primary} (#412402)
Padding: 11px 22px
Font: {typography.body-md-strong} (13px, weight 700)
Border radius: {rounded.lg} (8px)
Border: none
Box shadow: none
Hover state: opacity 0.9, transform scale(1.08), box-shadow rgba(12, 68, 124, 0.32) 0px 8px 22px

Primary Button (Compact)

Background: {colors.primary} (#FFB400)
Text color: {colors.on-primary} (#412402)
Padding: 8px 18px
Font: {typography.nav} (12.5px, weight 700)
Border radius: {rounded.md} (7px)
Border: none
Box shadow: none
Height: 31px
Hover state: opacity 0.9

Secondary Button (Filled)

Background: rgba(255, 255, 255, 0.1)
Text color: #FFFFFF
Padding: 7px 11px
Font: {typography.button-xs} (12px, weight 500)
Border radius: {rounded.md} (7px)
Border: none
Box shadow: none
Height: 29px
Hover state: opacity 0.9, background rgba(255, 255, 255, 0.15)

Secondary Button (Large)

Background: {colors.accent-1} (#0C447C)
Text color: #FFFFFF
Padding: 9px 18px
Font: {typography.button-xs-strong} (12px, weight 700)
Border radius: {rounded.lg} (8px)
Border: none
Box shadow: none
Height: 33px
Hover state: opacity 0.88

Outline Button

Background: transparent
Text color: #FFFFFF
Padding: 11px 16px
Font: {typography.nav} (12.5px, weight 400)
Border: 1px solid rgba(255, 255, 255, 0.35)
Border radius: {rounded.lg} (8px)
Box shadow: none
Height: 39px
Hover state: opacity 0.9, border-color rgba(255, 255, 255, 0.55), background rgba(255, 255, 255, 0.1)

Outline Button (Small)

Background: transparent
Text color: #FFFFFF
Padding: 8px 14px
Font: {typography.nav} (12.5px, weight 700)
Border: 1px solid rgba(255, 255, 255, 0.35)
Border radius: {rounded.md} (7px)
Box shadow: none
Height: 33px
Hover state: border-color var(--bdr), opacity 0.9

Cards & Containers

Card Default

Background: {colors.canvas} (#FFFFFF)
Text color: {colors.accent} (#2D3748)
Padding: 16px
Font: {typography.body-md} (13px, weight 400)
Border: 1px solid {colors.hairline} (#BAE3F7)
Border radius: {rounded.xl} (9px)
Box shadow: none
Hover state: box-shadow rgba(0, 154, 222, 0.1) 0px 4px 16px, border-color var(--bp)

Card Small

Background: {colors.neutral-2} (#F0F9FF)
Text color: {colors.accent} (#2D3748)
Padding: 14px 16px
Font: {typography.body-md} (13px, weight 400)
Border: none
Border radius: {rounded.none} (0px)
Box shadow: none
Height: 65px
Hover state: box-shadow rgba(0, 0, 0, 0.06) 0px 3px 12px

Badges

Badge Filled

Background: {colors.accent-1} (#0C447C)
Text color: #FFFFFF
Padding: 2px 9px
Font: {typography.caption-xs-strong} (10.5px, weight 700)
Border radius: {rounded.full} (20px / pill-shaped)
Border: none
Box shadow: none

Badge Filled Large

Background: rgba(255, 255, 255, 0.18)
Text color: #FFFFFF
Padding: 4px 10px
Font: {typography.caption-xs-strong} (10.5px, weight 700)
Border radius: {rounded.full} (20px / pill-shaped)
Border: none
Box shadow: none

Navigation

Header Navigation

Background: {colors.accent-1} (#0C447C)
Text color: {colors.accent} (#2D3748)
Padding: 0px 32px
Font: {typography.body-md} (13px, weight 400)
Border radius: {rounded.none} (0px)
Border: none
Box shadow: {shadows.md} (rgba(12, 68, 124, 0.2) 0px 2px 12px 0px)
Height: 60px
Full width, sticky positioning
Hover state (on nav links): color var(--bp) (#FFB400)

Navigation Link

Font: {typography.nav} (12.5px, weight 700)
Color: {colors.accent} (#2D3748)
Hover state: color {colors.primary} (#FFB400)

Inputs & Forms

No form input styling was explicitly extracted. Component defaults:

Focus state: outline 2px solid var(--bm), border-color var(--bp)
General focus: border-color var(--bp), box-shadow rgba(0, 154, 222, 0.1) 0px 0px 0px 3px

5. Layout Principles

Spacing System

SIDIGS uses a consistent 4px base unit scaled into semantic increments:

{spacing.xxs} (4px): Micro-spacing within components (badge internal padding, tight gaps)
{spacing.xs} (8px): Compact spacing between tightly related elements
{spacing.sm} (12px): Standard internal padding for form fields and small components
{spacing.md} (16px): Card padding, standard component spacing
{spacing.lg} (20px): Breathing room between logical groups
{spacing.xl} (24px): Section-level spacing, moderate whitespace
{spacing.xxl} (28px): Generous spacing between major sections
{spacing.xxxl} (32px): Large whitespace, emphasis spacing in hero zones
{spacing.section} (36px): Primary section gap
{spacing.band} (44px): Extra-large visual break, full-bleed section dividers

Usage Context

Horizontal padding on page sections: {spacing.xxxl} (32px) on desktop, {spacing.md} (16px) on mobile.
Vertical gap between sections: {spacing.section} (36px).
Card internal padding: {spacing.md} (16px).
Button padding: {spacing.lg} (20px) horizontal for primary, {spacing.sm} (12px)–{spacing.md} (16px) for compact variants.

Grid & Container

Max width (desktop): 1100px content column at 1280px+ viewport widths.
Column strategy:
- Mobile (375px): 1 column, full-width content.
- Tablet (768px): 1 column (not multi-column).
- Desktop (1024px–1440px): 3 columns for card layouts (e.g., feature cards on homepage).
Section width: Full-bleed hero sections (background extends to viewport edges); content center-aligned at max width.
Padding: Horizontal padding scales: 16px (mobile), 32px (desktop).

Whitespace Philosophy

SIDIGS prioritizes generous whitespace and breathing room to ensure clarity in complex dashboards and multi-panel layouts. Between major sections, {spacing.section} (36px) creates visual hierarchy. Within sections, {spacing.md} (16px) internal padding and {spacing.lg} (20px) gaps between elements maintain scanability. Hero zones and CTAs are isolated with extra padding ({spacing.xxxl} 32px) to draw focus. The design avoids cramming; every UI surface should feel spacious and welcoming, even when displaying data-dense elements like dashboards or tables.

Border Radius Scale

The system uses graduated rounding, not universal rounding:

{rounded.none} (0px): Buttons (hard edge, professional), small card variants, table rows
{rounded.xs} (4px): Image corners, very tight radii
{rounded.sm} (5px): Subtle rounding, small UI elements
{rounded.md} (7px): Primary button variants, compact inputs, standard component rounding
{rounded.lg} (8px): Primary buttons, large button variants, modal backgrounds
{rounded.xl} (9px): Default card containers, most card-like surfaces
{rounded.xxl} (10px): Large card surfaces, expanded modal backgrounds
{rounded.full} (9999px): Badges, pill-shaped buttons, circular avatars (if present)

Component Mapping

Buttons: {rounded.lg} (8px) for large, {rounded.md} (7px) for compact, {rounded.none} (0px) for sharp CTA variants
Cards: {rounded.xl} (9px) standard, {rounded.xxl} (10px) for expanded surfaces
Images: {rounded.xs} (4px)
Badges: {rounded.full} (pill-shaped)

Border Widths

Thin (1px): Card and input borders, hairline dividers. Use {colors.hairline} (#BAE3F7) for subtle definition.
Medium (2px): Emphasis borders, card borders when elevated or interactive (on hover, focus).

6. Depth & Elevation

Level	Treatment	Use
Flat (0)	No shadow	Card default, body text, inactive surfaces
Micro (md)	`rgba(12, 68, 124, 0.2) 0px 2px 12px 0px`	Navigation bar, sticky headers
Small (sm)	`rgba(0, 0, 0, 0.12) 0px 8px 24px 0px`	Dropdowns, floating panels
Hover Lift	`rgba(0, 0, 154, 222, 0.1) 0px 4px 16px`	Card on hover, interactive surfaces
Elevated	`rgba(0, 0, 0, 0.08) 0px 3px 12px`	Deep card hover, modal-like surfaces

Shadow Philosophy The SIDIGS system uses minimal, color-coded shadows for depth signaling. The navigation employs a branded-blue shadow (rgba(12, 68, 124, 0.2)) to tie visual depth to the institutional color. Card hover states shift to an accent-blue shadow (rgba(0, 154, 222, 0.1)), signaling interactivity without overwhelming the canvas. Dropdowns and floating elements use a neutral dark shadow (rgba(0, 0, 0, 0.12)) for standard elevation. The overall strategy favors color blocking (deep blue sections, white cards) over heavy shadows; depth is achieved through surface contrast and subtle lifts on interaction rather than dramatic z-axis movement.

Opacity Levels

82% (0.82): Reduced opacity, semi-transparent overlays
94% (0.94): Near-opaque, barely-visible transparency for disabled or inactive states
99% (0.99): Imperceptible reduction, used for very subtle hover or focus effects
Disabled button: 60% opacity (0.6)
Hover overlay (on dark): 10–18% opacity white (rgba(255, 255, 255, 0.1) to rgba(255, 255, 255, 0.18))

Z-index / Layering

Sticky (200): Navigation bar, persistent headers
Modal (1000): Overlay dialogs, full-screen modals, topmost interactive surfaces

7. Do's and Don'ts

Do

Use {colors.primary} (#FFB400) for all primary CTAs—enroll buttons, demo requests, and high-priority actions. It commands attention and is instantly recognizable.
Pair dark text ({colors.on-primary} — #412402) over primary yellow for 7.5:1+ contrast and legibility.
Reserve {colors.accent-1} (#0C447C) for secondary button fills and hero band accents; it signals authority and calm institutional presence.
Implement full-bleed gradient hero sections with linear-gradient(135deg, rgb(12, 68, 124), rgb(0, 154, 222)) for visual momentum and depth.
Set body copy to {typography.body-md} (13px, 400 weight) with {colors.body} (#718096) for optimal legibility in long-form content.
Use card borders (1px solid {colors.hairline}) instead of shadows on light backgrounds; reserve shadows for dark surfaces and hover states.
Implement generous padding ({spacing.md} minimum) around content to avoid cognitive overload in dashboards.
Apply {rounded.lg} (8px) to all primary buttons for consistency; reserve {rounded.none} (0px) only for sharp, data-dense button groups.
Hover states should include both visual feedback (opacity, shadow, color) and a subtle scale or translate transform to confirm interaction.
Use uppercase labels (text-transform: uppercase; letter-spacing: 0.84px) sparingly for section markers and form field titles.

Don't

Do not use secondary blue ({colors.accent-1}) for body text or high-volume copy; it lacks sufficient contrast against white and reads muddy.
Do not apply shadows to cards on white backgrounds; the hairline border ({colors.hairline}) provides sufficient definition.
Do not mix rounded and sharp buttons in the same action group; consistency signals affordance.
Do not scale body text below {typography.body-sm} (12.5px) for main content; captions and helper text can drop to 10.5px minimum.
Do not invent new color roles; all CTA fills must be {colors.primary} (#FFB400), all secondary fills {colors.accent-1} (#0C447C).
Do not use outline buttons on light backgrounds; they lack sufficient contrast. Reserve outline style for dark backgrounds only.
Do not apply letter-spacing to body text; it reduces readability. Reserve tracking to uppercase labels and display text.
Do not exceed 2–3 font sizes per page; hierarchy should feel intentional, not chaotic.
Do not apply opacity below 60% to disabled states; they must remain visible and distinguishable.
Do not layer multiple shadows; use one shadow per surface level. Micro (2px), small (8px), or hover lift are the only three tiers.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport	Content Column	Grid	Nav Visible	Heading	Body	Section Padding
Mobile	375px	343px	1 column	0 links (menu toggle active)	22px	14px	16px
Tablet	768px	736px	1 column	0 links (menu toggle active)	22px	14px	16px
Desktop	1024px–1279px	960px	3 columns	5 nav links visible	26px	14px	32px
Large Desktop	1280px–1440px	1100px (max)	3 columns	5 nav links visible	26px	14px	32px
Extra Large	1440px+	1100px (max, fixed)	3 columns	5 nav links visible	26px	14px	32px

Breakpoint Logic

Mobile & tablet collapse at 768px; navigation shifts to hamburger menu, sections reflow to single column.
Desktop breakpoint at 1024px: nav expands inline, content reorganizes to 3 columns, headings grow 4px, horizontal padding doubles to 32px.
Large desktop (1280px+): content width caps at 1100px and centers; breakpoint behavior holds.

Touch Targets

No explicit touch-target data was extracted. Implement standard accessibility minimums:

Button minimum height: 44px (mobile), 32px+ (desktop)
Link tap area: 48×48px minimum
Spacing between interactive elements: {spacing.md} (16px) minimum gap

Collapsing Strategy

Hero sections: Full-width on all breakpoints; text size and padding adjust but layout does not stack.
Multi-column layouts: 3-column grid on desktop collapses to 1 column on tablet/mobile. Card width becomes 100% of viewport minus padding.
Navigation: Top navigation bar persists at all sizes; on mobile, text links hide and a hamburger menu toggle appears at 768px breakpoint.
Forms & inputs: Single-column on mobile; optionally 2-column on tablet/desktop if space permits.
Padding & margins: Horizontal padding: 16px (mobile/tablet), 32px (desktop+). Vertical spacing compresses slightly on mobile (20px gap instead of 24px) to save vertical real estate.
Heading sizes: Largest heading ({typography.heading-xxl} — 26px) on desktop, scales down to {typography.heading-lg} (22px) on mobile.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Primary (#FFB400) — use for all enrollment, demo, and high-priority buttons
Secondary CTA: Secondary Filled (#0C447C) — use for secondary actions and hero accents
Link: Link (#009ADE) — inline hyperlinks only
Background (page): Canvas (#FFFFFF) — default, white
Background (section): Surface Alt (#0A3660) — dark blue for hero/alternating zones
Heading text: Accent (#2D3748) — dark gray-blue, primary heading color
Body text: Body (#718096) — muted gray-blue for paragraphs
Label / on primary: On Primary (#412402) — dark brown for text on yellow backgrounds
Border / hairline: Hairline (#BAE3F7) — pale blue, 1px borders
Disabled / neutral overlay: Neutral Decorative 2 (#F0F9FF) — very light blue tint

Iteration Guide

Color constraint: All CTA buttons are #FFB400 with #412402 text. Secondary buttons are #0C447C with white text. No exceptions.
Typography base: Body is Inter, 13px, 400 weight. Headings scale up with 700 weight. Do not mix fonts; Inter is system-wide.
Button radius: Primary = 8px, secondary = 7px, outline = 8px. Buttons are never rounded pills (9999px); only badges are pills.
Card radius: Standard card is 9px. Small card variants can be 0px (sharp) if data-dense.
Shadow rule: Use max 3 shadow tiers: flat (none), micro (2px blue), small (8px dark), hover lift (4px cyan). Never stack multiple shadows.
Padding pattern: Cards = 16px. Buttons = 11px 22px (large), 8px 18px (compact). Section padding = 32px desktop, 16px mobile.
Spacing unit: All spacing is 4px or multiples thereof. No arbitrary gaps; use spacing.* tokens only.
Focus state: Input focus = outline: 2px solid var(--bm), border-color: var(--bp). Ensure visible keyboard navigation.
Hover feedback: Interactive elements should shift opacity (0.9) or scale (1.08) + shadow on :hover. Disabled elements = 0.6 opacity.
Gradient hero: Use linear-gradient(135deg, rgb(12, 68, 124), rgb(0, 154, 222)) for primary hero bands. Pair with white text and {spacing.xxxl} (32px) padding.

10. Known Gaps

Semantic status colors: No error, success, warning, or info colors are declared in the site's stylesheets. If status indicators are needed, map them to existing accent colors or add new colors outside this system.
7 decorative accent colors ({colors.accent-2} through {colors.accent-5} and {colors.neutral-1}, {colors.neutral-2}) have no measured role. They appear in illustrations or charts but lack explicit interactive or semantic purpose; use them as needed for visual polish (chart fills, icon accents, decorative backgrounds) but do not treat as core system colors.
Interaction states not fully captured: Hover, active, focus, and disabled states were inferred from CSS selectors and may not exhaustively cover all component variants. Verify behavior for custom components against a live instance.
Dark mode / alternate theme: One color theme was measured. No dark-mode variant, light/dark toggle, or theme-switching logic was observed; system is light-mode only.
Animation / motion: Transition timing, easing functions (ease-in-out, cubic-bezier, etc.), and duration were not extracted. Assume default browser defaults or 200–300ms ease for interactive states.
Micro-interactions: Tooltip styling, popover backgrounds, and floating-action-button treatments were not measured.
Authenticated surfaces: All measurements are from public-facing pages (homepage, blog, demo page). Account dashboards, admin panels, and internal tools may diverge from this system.
Table & complex data UI: No table cell styling, row hover, or multi-select interaction patterns were extracted. Assume card styling applies to card-wrapped table rows; detailed table component rules are absent.
Accessibility compliance: WCAG contrast ratios and accessibility-specific markup (ARIA, semantic HTML) were not measured. Verify all text color combinations meet WCAG AA (4.5:1 for normal text) or AAA (7:1 for enhanced) standards before shipping.
Print styles: No print media query or print-specific colors were observed.

System Coverage: 6 page(s) analysed across https://sidigs.com/ (homepage, blog, feature sections, and CTA-heavy zones). Surfaces behind authentication and subscription paywalls were not visited. This design system represents the public-facing SIDIGS brand and marketing site; internal application UI may extend or vary from these tokens.

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from sidigs.com/?utm_source=google&utm_medium=paid_search&utm_campaign=leads_indonesia_oktober_2026&utm_term=lms%20sekolah&utm_content=pembelajaran_ujian_online&gad_source=1&gad_campaignid=24325665586&gbraid=0AAAAABgDEFrPXTPPS2szDDFojnBMELLvB&gclid=CjwKCAjwirLWBhBBEiwAlItbEreOIok9K3aDODGZV0u9K0p_zrQIiN8CdL_qEnrrX6CXEmPjHfyb1RoC8r0QAvD_BwE

Primary

#FFB400

Primary CTA, brand accent, active state

#2D3748

Secondary accent / hero band; Headings / primary text

#009ADE

Inline link colour

#0C447C

Accent / decorative

#E0F4FD

Accent / decorative

#4A5568

Accent / decorative

#CA6F1E

Accent / decorative

#2980B9

Accent / decorative

Neutral

#FFFFFF

Default page background

#0A3660

Alternating section band

#718096

Body copy

#412402

Label colour on brand surfaces

#BAE3F7

1px borders and dividers

#000000

Neutral

#F0F9FF

Neutral

Typography · Inter

caption11.5px · 400 · 18.4px

caption10.5px · 400

body12.5px · 400 · 20.625px

caption11px · 400

nav-link12.5px · 700

caption12px · 400 · 20.4px

link11.5px · 400

caption10.5px · 700

caption11.5px · 600

body20px · 700

button12px · 400

body16px · 700 · 20.8px

heading11.62px · 700

h512px · 600

caption10.5px · 700

body13.5px · 700

caption11px · 700

h124px · 700 · 30px

caption10px · 700

caption11.5px · 700

h126px · 700 · 33.8px

h222px · 700

h412.5px · 600

body11.5px · 400 · 17.825px

heading20px · 700 · 26px

body13px · 700

body13px · 400

body15px · 700

h413px · 700

caption12px · 600 · 16.8px

caption10px · 700

body11px · 400 · 15.4px

caption10px · 400 · 14px

h511.62px · 700

h512px · 700

link14px · 400

caption11px · 600

h121px · 700 · 27.3px

label11.5px · 600

button12px · 700 · 16.2px

heading11px · 600

caption10px · 700

button14px · 400

button12px · 500

caption12px · 700

body17px · 700

button10px · 700

heading10.5px · 700

h220px · 700 · 26px

caption9.5px · 500 · 12.35px

body16px · 800

caption9px · 800

body20px · 800

caption9px · 400

Spacing

12px

8px

16px

4px

104px

32px

28px

140px

Elevation

rgba(0, 0, 0, 0.12) 0px 8px 24px 0px

rgba(12, 68, 124, 0.2) 0px 2px 12px 0px

Components · 6

Remixes of sidigs.com

Latest remixes

No public remixes yet. Be the first to make one.

Remix it