Panduan lengkap sistem desain BASCORRO - warna, tipografi, spacing, dan komponen

Design System

Panduan komprehensif untuk menjaga konsistensi visual di seluruh project BASCORRO. Sistem desain ini berdasarkan landing page dan diterapkan ke seluruh dokumentasi serta materi tim.

Kenapa Design System penting? Konsistensi visual membangun brand recognition dan profesionalisme - penting untuk sponsor, judges RoboCup, dan identitas tim.

Quick Reference

/* Brand Colors */
--color-undip-blue: #002060;
--color-accent-yellow: #F4B400;
--color-tech-grey: #f3f4f6;

/* Fonts */
--font-display: 'Space Grotesk', sans-serif;
--font-serif: 'Cinzel', serif;
--font-body: 'Inter', sans-serif;

Color Palette

Brand Colors

UNDIP Blue

#002060

Primary brand color

Accent Yellow

#F4B400

Highlights & accents

Tech Grey

#f3f4f6

Backgrounds

Color Usage

Color	Hex	Tailwind	Use Case
UNDIP Blue	`#002060`	`bg-undip-blue`	Primary buttons, headings, links
Accent Yellow	`#F4B400`	`bg-accent-yellow`	Highlights, hover states, decorative
Tech Grey	`#f3f4f6`	`bg-tech-grey`	Page backgrounds, cards
Dark	`#1a1a1a`	`bg-[#1a1a1a]`	Footer, dark sections
White	`#ffffff`	`bg-white`	Cards, content areas

Neutral Grays (Tailwind)

Token	Hex	Class	Usage
Gray 100	`#f3f4f6`	`gray-100`	Light backgrounds
Gray 200	`#e5e7eb`	`gray-200`	Borders, dividers
Gray 300	`#d1d5db`	`gray-300`	Disabled states
Gray 400	`#9ca3af`	`gray-400`	Placeholder text, muted icons
Gray 500	`#6b7280`	`gray-500`	Secondary text
Gray 600	`#4b5563`	`gray-600`	Body text
Gray 900	`#111827`	`gray-900`	Headings, primary text

Semantic Colors

Purpose	Color	Hex	Usage
Success	Green	`#10b981`	Successful actions, active status
Warning	Amber	`#f59e0b`	Warnings, caution states
Error	Red	`#ef4444`	Errors, destructive actions
Info	Blue	`#3b82f6`	Information, neutral alerts

Accessibility

Contrast Ratios - Pastikan text memiliki contrast ratio minimal 4.5:1 untuk normal text dan 3:1 untuk large text (WCAG AA).

Combination	Ratio	Status
UNDIP Blue on White	12.6:1	Pass AAA
White on UNDIP Blue	12.6:1	Pass AAA
Gray 600 on White	5.0:1	Pass AA
UNDIP Blue on Yellow	6.8:1	Pass AA

Typography

Font Families

// layout.tsx - Font loading
import { Inter, Space_Grotesk, Cinzel } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });
const spaceGrotesk = Space_Grotesk({ subsets: ['latin'], weight: ['400', '700'] });
const cinzel = Cinzel({ subsets: ['latin'], weight: ['400', '700'] });

Font Roles

Role	Font	CSS Variable	Usage
Display	Space Grotesk	`font-display`	Headlines, brand text, section titles
Serif	Cinzel	`font-serif`	Quotes, accents, decorative text
Body	Inter	`font-sans`	Body text, UI elements, paragraphs

Live Font Preview

Display Font — Space Grotesk

BASCORRO

Humanoid Robosoccer Team

The quick brown fox jumps over the lazy dog

Serif Font — Cinzel

"Engineering Excellence"

Shaping the future of autonomous humanoid soccer

The quick brown fox jumps over the lazy dog

Body Font — Inter

Primary body text for documentation and content

Inter is optimized for screen readability with excellent legibility at small sizes. Perfect for technical documentation, UI elements, and long-form content.

The quick brown fox jumps over the lazy dog — 0123456789

Type Scale

Class	Size	Line Height	Usage
`text-xs`	12px / 0.75rem	1.5	Labels, tags, metadata, footnotes
`text-sm`	14px / 0.875rem	1.5	Secondary text, descriptions
`text-base`	16px / 1rem	1.5	Body text, paragraphs
`text-lg`	18px / 1.125rem	1.75	Lead paragraphs
`text-xl`	20px / 1.25rem	1.75	Subheadings, card titles
`text-2xl`	24px / 1.5rem	1.33	Section subheadings
`text-3xl`	30px / 1.875rem	1.33	Small page titles
`text-4xl`	36px / 2.25rem	1.25	Section headers
`text-5xl`	48px / 3rem	1.1	Page titles
`text-6xl`	60px / 3.75rem	1	Large titles
`text-7xl`+	72px+	0.9	Hero headlines

Font Weights

Weight	Class	Usage
Regular (400)	`font-normal`	Body text, descriptions
Medium (500)	`font-medium`	Labels, navigation
Semi-bold (600)	`font-semibold`	Subheadings
Bold (700)	`font-bold`	Headings, CTAs
Black (900)	`font-black`	Hero text, brand

Typography Examples

{/* Hero headline */}
<h1 className="font-display font-black text-7xl md:text-8xl tracking-tighter text-gray-900">
  BASCORRO
</h1>

{/* Section header */}
<h2 className="font-display font-bold text-4xl md:text-5xl uppercase tracking-tight">
  Our Machines
</h2>

{/* Quote/accent text */}
<p className="font-serif text-xl italic text-gray-600 border-l-4 border-accent-yellow pl-6">
  "Shaping the future of autonomous humanoid soccer"
</p>

{/* Body text */}
<p className="text-base text-gray-600 leading-relaxed">
  Regular paragraph content...
</p>

{/* Label/tag */}
<span className="text-xs font-bold uppercase tracking-widest text-gray-500">
  Engineering
</span>

Spacing & Layout

Spacing Scale

Menggunakan 4px base unit (Tailwind default).

Class	Size	Pixels	Usage
`p-1`	0.25rem	4px	Minimal padding
`p-2`	0.5rem	8px	Tight padding
`p-3`	0.75rem	12px	Compact elements
`p-4`	1rem	16px	Standard padding
`p-6`	1.5rem	24px	Card padding
`p-8`	2rem	32px	Section padding (mobile)
`p-12`	3rem	48px	Large spacing
`p-16`	4rem	64px	Section padding (desktop)
`p-24`	6rem	96px	Major sections

Common Patterns

{/* Section container */}
<section className="px-8 py-24 md:px-16">
  <div className="max-w-7xl mx-auto">
    {/* Content */}
  </div>
</section>

{/* Card padding */}
<div className="p-8 rounded-2xl">

{/* Button padding */}
<button className="px-8 py-4">

{/* Tag/pill padding */}
<span className="px-3 py-1">

Responsive Breakpoints

Breakpoint	Min Width	Usage
`sm`	640px	Small devices
`md`	768px	Tablets
`lg`	1024px	Laptops
`xl`	1280px	Desktops
`2xl`	1536px	Large screens

Container Widths

Class	Max Width	Usage
`max-w-lg`	32rem (512px)	Narrow content
`max-w-2xl`	42rem (672px)	Text-heavy content
`max-w-4xl`	56rem (896px)	Medium content
`max-w-7xl`	80rem (1280px)	Full-width sections

Border Radius

Element	Class	Radius
Buttons (pill)	`rounded-full`	9999px
Cards	`rounded-2xl`	16px
Large cards	`rounded-3xl`	24px
Tags/pills	`rounded-full` or `rounded-md`	varies
Input fields	`rounded-xl`	12px
Icon containers	`rounded-xl` or `rounded-2xl`	12-16px
Small elements	`rounded`	4px
Medium elements	`rounded-lg`	8px

Shadows

Type	Class	Usage
None	`shadow-none`	Flat elements
Subtle	`shadow-sm`	Cards at rest, subtle depth
Default	`shadow`	Standard elevation
Medium	`shadow-md`	Dropdowns, popovers
Large	`shadow-xl`	Hover states, elevated cards
Extra large	`shadow-2xl`	Main containers, modals

Shadow Examples

{/* Card with hover shadow */}
<div className="shadow-sm hover:shadow-xl transition-shadow">

{/* Main container */}
<div className="shadow-2xl">

<button className="px-8 py-4 bg-undip-blue text-white font-bold rounded-full hover:bg-gray-900 transition-colors">
  Primary Action
</button>

Secondary Button

<button className="px-8 py-4 border border-gray-300 text-gray-900 font-bold rounded-full hover:bg-white transition-colors">
  Secondary Action
</button>

Accent Button

<button className="px-8 py-4 bg-accent-yellow text-black font-bold rounded-full hover:bg-yellow-400 transition-colors">
  Accent Action
</button>

Small Button

<button className="px-4 py-2 text-xs font-bold bg-undip-blue text-white rounded-full">
  Small Button
</button>

<div className="bg-white rounded-2xl p-8 border border-gray-100 shadow-sm hover:shadow-xl transition-all">
  <h3 className="font-bold text-xl mb-2">Card Title</h3>
  <p className="text-sm text-gray-600">Card description...</p>
</div>

Feature Card (with image)

<div className="bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all border border-gray-200">
  <div className="h-64 bg-gray-200">
    {/* Image */}
  </div>
  <div className="p-8">
    <h3 className="text-2xl font-bold font-display mb-2">Title</h3>
    <p className="text-gray-600 text-sm">Description...</p>
  </div>
</div>

Spec Card (dark variant)

<div className="border border-white/10 p-6 rounded-2xl hover:bg-white/5 transition-colors">
  <h4 className="font-bold text-lg mb-2 text-white">Title</h4>
  <p className="text-sm text-gray-400">Description...</p>
</div>

Live Card Examples

🤖

Standard Card

This is a standard card with icon, title, and description. Uses rounded-2xl corners and subtle shadow.

Image Area

Feature Card

Card with image header. Uses rounded-3xl for larger radius.

Dark Variant

Computer Vision

Real-time ball detection using YOLO and custom algorithms.

Locomotion

Stable walking gaits with inverse kinematics.

Tags & Badges

Status Tag

<span className="bg-white/10 backdrop-blur-md px-3 py-1 rounded text-xs font-mono text-white border border-white/20">
  STATUS: ACTIVE
</span>

Category Label

<span className="text-xs font-bold uppercase tracking-widest text-gray-500">
  Engineering
</span>

Spec Tag

<span className="bg-gray-50 px-3 py-2 rounded border border-gray-100 text-xs font-mono text-gray-700">
  Height: 510mm
</span>

Role Tag

<span className="text-[10px] font-medium bg-white border border-gray-200 px-2 py-1 rounded-md text-gray-500 hover:text-undip-blue transition-colors">
  Lead Programmer
</span>

Live Tag Examples

Tags & Badges

Category Labels

EngineeringSoftwareActive

Spec Tags

Height: 510mmWeight: 3.5kgDOF: 20OS: ROS 2

Role Tags

Lead ProgrammerVision SpecialistTeam Captain

Status Badges

ActiveIn ProgressDevelopmentInactive

Section Headers

Pattern yang konsisten untuk section headers:

const SectionHeader = ({ title, subtitle }) => (
  <div className="mb-12 md:mb-20">
    <div className="flex items-center gap-4 mb-4">
      <div className="h-px w-8 bg-accent-yellow"></div>
      <span className="text-xs font-bold uppercase tracking-widest text-gray-500">
        {subtitle}
      </span>
    </div>
    <h2 className="font-display font-bold text-4xl md:text-5xl text-gray-900 uppercase tracking-tight">
      {title}
    </h2>
  </div>
);

Live Section Header Example

Engineering

Our Machines

↑ This is the standard section header pattern used throughout the landing page

Form Elements

Search Input

<button className="w-full max-w-md flex items-center gap-3 px-4 py-3 bg-white border border-gray-200 rounded-xl text-left hover:border-gray-300 hover:shadow-sm transition-all">
  <Search className="w-5 h-5 text-gray-400" />
  <span className="flex-1 text-gray-400 text-sm">Search documentation...</span>
  <kbd className="px-2 py-1 text-xs font-mono bg-gray-100 rounded border border-gray-200 text-gray-400">
    ⌘K
  </kbd>
</button>

Nav Link

<a className="text-sm font-medium text-gray-600 hover:text-undip-blue hover:underline decoration-accent-yellow decoration-2 underline-offset-4 transition-all">
  Link Text
</a>

Nav Button (CTA)

<a className="flex items-center gap-2 text-xs font-bold bg-undip-blue text-white px-4 py-2 rounded-full hover:bg-accent-yellow hover:text-black transition-all duration-300">
  JOIN US <ArrowRight className="w-3 h-3" />
</a>

Motion & Animation

Transitions

Type	Class	Duration
Colors only	`transition-colors`	150ms
All properties	`transition-all`	150ms
Transform	`transition-transform`	150ms
Slow	`duration-500`	500ms
Very slow	`duration-1000`	1000ms

Common Patterns

{/* Color transition */}
<button className="transition-colors hover:bg-gray-900">

{/* Shadow + transform */}
<div className="transition-all hover:shadow-xl hover:-translate-y-1">

{/* Scale on hover */}
<img className="hover:scale-105 transition-transform duration-1000">

Framer Motion Patterns

// Fade in + slide up
<motion.div
  initial={{ opacity: 0, y: 30 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.8, delay: 0.4 }}
>

// Staggered children
<motion.div
  initial={{ opacity: 0, y: 20 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-50px" }}
  transition={{ delay: index * 0.1, duration: 0.5 }}
>

// Scale container
<motion.div
  initial={{ scale: 0.95, opacity: 0 }}
  animate={{ scale: 1, opacity: 1 }}
  transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
>

Custom Animations

/* global.css */
@theme {
  --animate-spin-slow: spin 20s linear infinite;
}

<div className="animate-spin-slow">
  {/* Rotating element */}
</div>

Iconography

Icon Library

Menggunakan Lucide React sebagai standard icon library.

pnpm add lucide-react

Common Icons

Icon	Component	Usage
Bot	`<Bot />`	Logo, robotics
Eye	`<Eye />`	Vision, view
Activity	`<Activity />`	Status, motion
Brain	`<Brain />`	AI, strategy
Monitor	`<Monitor />`	Simulation
Code	`<Code />`	Software
Wrench	`<Wrench />`	Mechanical
Zap	`<Zap />`	Electronics
Users	`<Users />`	Team, management
Search	`<Search />`	Search
ArrowRight	`<ArrowRight />`	Navigation, CTA
ChevronDown	`<ChevronDown />`	Scroll indicator

Icon Sizes

Size	Class	Pixels	Usage
XS	`w-3 h-3`	12px	Inline with small text
SM	`w-4 h-4`	16px	Navigation, buttons
MD	`w-5 h-5`	20px	Default size
LG	`w-6 h-6`	24px	Card icons
XL	`w-8 h-8`	32px	Feature icons

Icon Containers

{/* Standard icon container */}
<div className="w-12 h-12 bg-white rounded-xl border border-gray-200 flex items-center justify-center text-gray-400">
  <Icon size={24} />
</div>

{/* Dark variant */}
<div className="w-12 h-12 bg-undip-blue/20 rounded-xl flex items-center justify-center text-accent-yellow">
  <Icon />
</div>

CSS Variables Reference

Custom Properties (global.css)

@theme {
  /* Colors */
  --color-undip-blue: #002060;
  --color-accent-yellow: #F4B400;
  --color-tech-grey: #f3f4f6;

  /* Fonts */
  --font-display: 'Space Grotesk', sans-serif;
  --font-serif: 'Cinzel', serif;

  /* Animation */
  --animate-spin-slow: spin 20s linear infinite;
}

Using Custom Properties

{/* In Tailwind classes */}
<div className="bg-undip-blue text-accent-yellow font-display">

{/* In inline styles */}
<div style={{ backgroundColor: 'var(--color-undip-blue)' }}>

Best Practices

Do's

Gunakan UNDIP Blue sebagai primary color untuk brand consistency
Gunakan Accent Yellow untuk highlight dan call-to-action
Maintain proper contrast ratios (4.5:1 minimal)
Gunakan font-display untuk headlines
Konsisten dengan border-radius (rounded-2xl untuk cards)
Tambahkan hover states untuk interactive elements
Gunakan transitions untuk smooth interactions

Don'ts

Jangan mix terlalu banyak warna dalam satu section
Jangan gunakan font weights yang tidak terdefinisi
Jangan abaikan responsive design
Jangan gunakan hardcoded pixel values jika bisa pakai Tailwind classes
Jangan lupakan focus states untuk accessibility
Jangan gunakan shadows berlebihan

Accessibility Checklist

Complete Design Showcase

Preview of how all design elements work together:

🤖BASCORRO

AboutRobotsTeam

EST. 2017 // UNDIP ROBOTICS

BASCORRO

"Shaping the future of autonomous humanoid soccer through intelligent design."

About Us

20+

Members

Robots

Divisions

2026

RoboCup Target

👁

Computer Vision

Ball detection using YOLO and custom color segmentation.

OpenCVYOLO

🦿

Locomotion

Stable walking gaits with inverse kinematics.

IKPID

Core Intelligence

ActiveROS 2 Humble

Design System

Standard Card

Feature Card

Computer Vision

Locomotion

Our Machines

BASCORRO

Computer Vision

Locomotion

Core Intelligence

On this page