Design System

Bilko Design System Documentation

~~Project:~~Source: ~~{{PROJECT_NAME}}~~Extracted from apps/web/tailwind.config.ts + brand identity spec ~~Version:~~Design Language: ~~{{VERSION}}~~Modern ~~Date:~~Balkan ~~{{DATE}}~~accounting ~~Author:~~SaaS ~~{{AUTHOR}}~~— ~~Status:~~clean, ~~Draft~~professional, ~~| In Review | Approved~~ ~~Reviewers:~~ ~~{{REVIEWERS}}~~accessible

Document History

~~Version~~	~~Date~~	~~Author~~	~~Changes~~
~~0.1~~	~~{{DATE}}~~	~~{{AUTHOR}}~~	~~Initial draft~~

1.Color Design PrinciplesPalette

Primary Brand

Principle Description
Clarity first Every UI element must communicate its purpose without explanation
Consistent over clever Prefer familiar patterns over novel interactions
Accessible by default WCAG AA compliance is a baseline, not a feature
Density-aware Support comfortable and compact density modes
TODO: Add principle {{DESCRIPTION}}

~~Principle~~	~~Description~~
~~Clarity first~~	~~Every UI element must communicate its purpose without explanation~~
~~Consistent over clever~~	~~Prefer familiar patterns over novel interactions~~
~~Accessible by default~~	~~WCAG AA compliance is a baseline, not a feature~~
~~Density-aware~~	~~Support comfortable and compact density modes~~
~~TODO: Add principle~~	~~{{DESCRIPTION}}~~

2. Color System

2.1 Primitive Palette (Raw Values)Colors

/*Primary:        Brand#00E5A0  primitives(Vibrant teal-green — doprimary NOTCTA, uselinks, directlyactive instates)
componentsPrimary */Dark:   --color-brand-50:#00B380  {{#F0F9FF}};(Darker --color-brand-100:variant {{#E0F2FE}};for --color-brand-500:hover {{#0EA5E9}};states)
--color-brand-600:Primary {{#0284C7}};Light:  --color-brand-900:#33EBB3  {{#0C4A6E}};(Lighter --color-neutral-0:variant #FFFFFF;for --color-neutral-50:  {{#F8FAFC}};
--color-neutral-100: {{#F1F5F9}};
--color-neutral-400: {{#94A3B8}};
--color-neutral-700: {{#334155}};
--color-neutral-900: {{#0F172A}};
--color-neutral-1000: #000000;backgrounds)

2.2Status Semantic Tokens (Light Mode)Colors

/*Success:        Background#22C55E  */(Green --color-bg-primary:— var(--color-neutral-0);success --color-bg-secondary:states, var(--color-neutral-50);paid --color-bg-elevated:invoices, var(--color-neutral-0);positive /*metrics)
TextWarning:        */#F59E0B  --color-text-primary:(Amber var(--color-neutral-900);— --color-text-secondary:warnings, var(--color-neutral-700);pending --color-text-disabled:items, var(--color-neutral-400);aging --color-text-inverse:invoices)
var(--color-neutral-0);Error:          /*#EF4444  Interactive(Red */— --color-interactive-primary:errors, var(--color-brand-500);overdue --color-interactive-primary-hover:invoices, var(--color-brand-600);negative --color-interactive-primary-active:actions)
var(--color-brand-700);Info:           /*#3B82F6  Semantic(Blue */— --color-success:informational {{#10B981}};messages, --color-warning:neutral {{#F59E0B}};
--color-error:    {{#EF4444}};
--color-info:     {{#3B82F6}};data)

2.3Text Semantic Tokens (Dark Mode)Colors

[data-theme="dark"]Text {Primary:   --color-bg-primary:#111113  var(--color-neutral-900);(Near-black --color-bg-secondary:— var(--color-neutral-800);body --color-text-primary:text, var(--color-neutral-50);headings)
/*Text TODO:Secondary: Complete#6B7280  dark(Gray-600 mode— tokensecondary mappingtext, */labels)
}Text Muted:     #888888  (Gray-500 — muted text, placeholders)

2.4Background ContrastColors

~~Ratios~~

Background Light:   #FAFAFA  (WCAG)Off-white — main content area background)
Background Surface: #FFFFFF  (White — card backgrounds, modals)

Border Color

Border:

Gray-200 Green — revenue

bars/lines)

Chart

background

`Typography`

`Font`

Family

labels)

base: 16px (Body text,

default)

emphasized

text)

xl: 20px (Section

titles)

(Emphasis, table

headers)

semibold: 600

~~Pair~~	~~Ratio~~	~~WCAG AA~~#E5E7EB (~~4.5:1)~~	~~WCAG~~— ~~AAA~~borders, dividers) Chart Colors `Chart Revenue: #22C55E (7:1)`
Expense: #EF4444 (Red — expense bars/lines) Chart Profit: #3B82F6 (Blue — profit bars/lines) Chart Neutral: #6B7280 (Gray — neutral data points) Sidebar Colors (Dark Theme) `Sidebar BG: #111113 (Near-black — sidebar background) Sidebar Text: #FAFAFA (Off-white — sidebar text) Sidebar Text primaryMuted: #888888 (Gray — inactive menu items) Sidebar Active: #00E5A0 (Primary green — active menu item) Sidebar Hover: #1F1F23 (Slightly lighter black — hover state)` Usage: Sidebar = dark (#111113) with light text Content area = light (#FAFAFA) with dark text Cards = white (#FFFFFF) surface on bglight ~~primary~~	~~{{X:1}}~~	~~{{Pass/Fail}}~~	~~{{Pass/Fail}}~~
~~Text~~ `Sans Serif: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` Source: Google Fonts Inter (variable font) Fallback: System UI fonts for performance Font Sizes `xs: 12px (Small badges, captions) sm: 14px (Table cells, secondary ontext, bgform primary`	~~{{X:1}}~~	~~{{Pass/Fail}}~~	~~{{Pass/Fail}}~~
~~Interactive~~lg: on18px bg(Subheadings, ~~primary~~	~~{{X:1}}~~	~~{{Pass/Fail}}~~	~~{{Pass/Fail}}~~
~~White~~2xl: on24px ~~brand-~~(Card titles, small headings) 3xl: 32px (Page headings) 4xl: 40px (Hero text, large numbers) Font Weights `normal: 400 (Body text) medium: 500`	~~{{X:1}}~~	~~{{Pass/Fail}}~~	~~{{Pass/Fail}}~~

(Subheadings, button text)
bold:      700  (Headings, metric numbers)

Type Scale Usage

Headings:
- Page title: text-3xl font-bold (32px, 700)
- Section title: text-2xl font-bold (24px, 700)
- Card title: text-base font-semibold (16px, 600)

Body:
- Default: text-base font-normal (16px, 400)
- Table cells: text-sm font-medium (14px, 500)
- Muted text: text-sm text-text-muted (14px, #888888)

Numbers:
- Metrics: text-3xl font-bold (32px, 700)
- Totals: text-2xl font-bold (24px, 700)
- Amounts: text-base font-medium (16px, 500)

Spacing System (8px Grid)

xs:  4px   (Tight spacing, icon gaps)
sm:  8px   (Input padding, small gaps)
md:  16px  (Default spacing, card padding)
lg:  24px  (Section spacing)
xl:  32px  (Large section spacing)
2xl: 48px  (Major section breaks)
3xl: 64px  (Hero spacing)

~~TODO:~~Usage:

Card padding: p-6 (24px)

Form field gap: space-y-4 (16px)

Section spacing: space-y-6 (24px)

Grid gap: gap-6 (24px)

Consistency: ~~Run~~All ~~contrast~~spacing ~~checks~~uses ~~with~~8px {{axeincrements |(4px, Colour8px, Contrast16px, Analyser}}24px, ~~and~~32px, ~~fill~~48px, ~~table.~~64px)

3.Border TypographyRadius

sm:   3.16px   Font(Small Families
elements, badges)md:8px(Buttons,inputs,cards)lg:12px(Modals,large















      Token  Value  Usage
   
    --font-headingcards)
full: 9999px (Circular elements, pills)
{{Inter, sans-serif}} H1–H4, display text
--font-body {{Inter, sans-serif}} Body copy, labels, UI
--font-mono {{JetBrains Mono, monospace}} Code, technical data

3.2 Type Scale






































































































Token Size Weight Line Height Letter Spacing Usage
--text-display 48px 700 1.1 -0.02em Hero headings
--text-h1 36px 700 1.2 -0.01em Page titles
--text-h2 28px 600 1.25 -0.01em Section headings
--text-h3 22px 600 1.3 0 Subsections
--text-h4 18px 600 1.4 0 Card headings
--text-body-lg 18px 400 1.6 0 Lead paragraphs
--text-body 16px 400 1.6 0 Default body copy
--text-body-sm 14px 400 1.5 0 Secondary text, captions
--text-label 14px 500 1.4 0.01em Form labels, UI labels
--text-caption 12px 400 1.4 0.02em Timestamps, meta
--text-code 14px 400 1.6 0 Inline code

~~Token~~	~~Value~~	~~Usage~~
`--font-headingcards) full: 9999px (Circular elements, pills)`	`{{Inter, sans-serif}}`	~~H1–H4, display text~~
`--font-body`	`{{Inter, sans-serif}}`	~~Body copy, labels, UI~~
`--font-mono`	`{{JetBrains Mono, monospace}}`	~~Code, technical data~~

~~Token~~	~~Size~~	~~Weight~~	~~Line Height~~	~~Letter Spacing~~	~~Usage~~
`--text-display`	~~48px~~	~~700~~	~~1.1~~	~~-0.02em~~	~~Hero headings~~
`--text-h1`	~~36px~~	~~700~~	~~1.2~~	~~-0.01em~~	~~Page titles~~
`--text-h2`	~~28px~~	~~600~~	~~1.25~~	~~-0.01em~~	~~Section headings~~
`--text-h3`	~~22px~~	~~600~~	~~1.3~~	0	~~Subsections~~
`--text-h4`	~~18px~~	~~600~~	~~1.4~~	0	~~Card headings~~
`--text-body-lg`	~~18px~~	~~400~~	~~1.6~~	0	~~Lead paragraphs~~
`--text-body`	~~16px~~	~~400~~	~~1.6~~	0	~~Default body copy~~
`--text-body-sm`	~~14px~~	~~400~~	~~1.5~~	0	~~Secondary text, captions~~
`--text-label`	~~14px~~	~~500~~	~~1.4~~	~~0.01em~~	~~Form labels, UI labels~~
`--text-caption`	~~12px~~	~~400~~	~~1.4~~	~~0.02em~~	~~Timestamps, meta~~
`--text-code`	~~14px~~	~~400~~	~~1.6~~	0	~~Inline code~~


TODO:Usage:


Cards: rounded-md (8px)

Buttons: rounded-md (8px)

Inputs: rounded-md (8px)

Badges: rounded-sm (6px)

User avatar: rounded-full (circular)



Shadows

Card Shadow:     0 2px 8px rgba(0, 0, 0, 0.08)   (Subtle card elevation)
Modal Shadow:    0 8px 24px rgba(0, 0, 0, 0.12)  (Dialog/modal elevation)
Dropdown Shadow: 0 4px 16px rgba(0, 0, 0, 0.10)  (Dropdown menu elevation)

Usage:


Cards: shadow-card

Modals/dialogs: shadow-modal

Dropdown menus: shadow-dropdown


Philosophy: VerifySubtle scaleshadows againstfor Figmadepth, —avoid updateheavy valuesshadows if(material mismatched.design style)

4. Spacing & LayoutBreakpoints
sm:  4.640px   (Small tablets, large phones)
md:  768px   (Tablets)
lg:  1024px  (Small desktops, large tablets)
xl:  1280px  (Desktops)

Mobile-First Strategy:


Base styles = mobile (< 640px)

sm: = small tablet (640px+)

md: = tablet/desktop toggle (768px+)

lg: = desktop layout (1024px+)

xl: = wide desktop (1280px+)


Responsive Patterns:


Grid: grid-cols-1 Spacingmd:grid-cols-2 Scalelg:grid-cols-3

Sidebar: hidden md:block (4pxhide Baseon Unit)mobile)
Filters: 
flex-col 


































stack on mobile, row on 



























Token Value Usage
--space-0sm:flex-row 0px 
--space-1 4px Micro gaps, icon padding
--space-2 8px Tight inline spacing
--space-3 12px Compact form elements
--space-4 16px Default content spacing
--space-5 20px Card padding (compact)
--space-6 24px Cardtablet+)
padding, section padding
--space-8 32px Large section gaps
--space-10 40px Feature section padding
--space-12 48px Section separation
--space-16 64px Page-level padding
--space-20 80px Hero sections

4.2 Grid System


























Property Value
Column count 12
Column gutter 24px (mobile: 16px)
Container max-width 1280px
Container side padding 24px (mobile: 16px)

4.3 Responsive Breakpoints









































Name Min Width Target Devices
xs 0px Small phones
sm 480px Large phones
md 768px Tablets
lg 1024px Small laptops
xl 1280px Desktops
2xl 1536px Large displays


5. Component LibraryTokens
Button
5.1
PrimitiveHeight: Components40px (Atoms)
default), 


















































































Component Status Variants Storybook
Button `{{Done WIP Planned}}`
Input `{{Done WIP Planned}}`
Select `{{Done WIP Planned}}`
Checkbox `{{Done WIP Planned}}`
Radio `{{Done WIP Planned}}`
Toggle/Switch `{{Done WIP Planned}}`
Textarea `{{Done WIP Planned}}`
Badge `{{Done WIP Planned}}`
Avatar `{{Done WIP Planned}}`
Tooltip `{{Done WIP Planned}}`
Spinner `{{Done WIP Planned}}`
Divider `{{Done WIP Planned}}`

5.2 Composite Components32px (Molecules)
sm), 





































































Component Status Storybook
Card {{Status}} {{URL}}
Modal / Dialog {{Status}} {{URL}}
Dropdown Menu {{Status}} {{URL}}
Table {{Status}} {{URL}}
Pagination {{Status}} {{URL}}
Toast / Notification {{Status}} {{URL}}
Form Field48px (labellg), + input + error) {{Status}} {{URL}}
Search Bar {{Status}} {{URL}}
Breadcrumb {{Status}} {{URL}}
Tabs {{Status}} {{URL}}
Accordion {{Status}} {{URL}}
Date Picker {{Status}} {{URL}}

5.3 Layout Components


































Component Description
Container Max-width wrapper with responsive padding
Stack Vertical flex stack with configurable gap
Inline Horizontal flex row with configurable gap/alignment
Grid CSS grid layout wrapper
PageLayout Full-page layout with sidebar/header/main/footer slots
Section Content section with standard vertical rhythm


6. Iconography Guidelines
















(default),


sm)Font: 
12pxVariants:
Success: 
GreenbackgroundWarning: 
nosemanticmeaning)Chart 
Primarygreen(#00E5A0)ringProper 
headinghierarchyItem Standard
Library `{{Lucide React
Delivery Inline SVG via component40px (noicon)
sprite,Padding: no16px iconhorizontal font)  
Sizes 16px12px (sm), 20px (md,lg)
Border Radius: 8px (md)

Font: 14px medium (default), 12px (sm), 16px (lg)

Variants:

Default: Primary green background, white text

Outline: Border only, transparent background

Ghost: No border, no background, hover shows background

Destructive: Error red background, white text




Input


Height: 40px

Padding: 12px horizontal

Border: 1px solid #E5E7EB (border color)

Border Radius: 8px (md)

Font: 14px normal

Focus: Primary color ring (2px)


Card


Background: #FFFFFF (surface)

Border: 1px solid #E5E7EB

Border Radius: 8px (md)

Shadow: 0 2px 8px rgba(0, 0, 0, 0.08)

Padding: 24px (lg),default 32pxcontent padding)


Badge


Padding: 4px 8px

Border Radius: 6px (xl)
 Strokemedium
width 1.5px
atDefault: 24px,Gray scaledbackground
proportionally
 
Color InheritsAmber background
Destructive: Red background

Secondary: Light gray




Table


Row Height: 48px (default)

Cell Padding: 12px horizontal, 16px vertical

Border: 1px solid #E5E7EB (between rows)

Hover: Light gray background (#FAFAFA)

Header: Medium font weight, secondary text color



Icon System

Library: Lucide React (v0.469.0)
Size: Consistent 16px (currentColorw-4 h-4) or 20px (w-5 h-5)
Usage:


Buttons: 16px icon + 8px gap from text

Menu items: 20px icon + 12px gap from text

Standalone: 24px or larger


Common Icons:


Plus (add actions)

Search (search inputs)

Menu (mobile sidebar toggle)

User (user menu)

Bell (notifications)

ChevronDown/Right (expandable sections)

Check (success, reconciliation)

X (close, delete)

Download (export actions)

Send (send email)



Chart Design Tokens

Chart Colors (Recharts)

Revenue:  #22C55E  (Green bars)
Expense:  #EF4444  (Red bars)
Profit:   #3B82F6  (Blue bars)
Neutral:  #6B7280  (Gray — neverwhen hardcoded  
 
Interactive
icons MustTypography

Axis Labels: 12px normal

Tooltip: 14px medium

Legend: 12px normal


Chart Layout


Responsive Container: 100% width, fixed height (250px default)

Cartesian Grid: Dashed, #E5E7EB stroke

Tooltip Background: White with border

Border Radius: 8px (md)



Accessibility

Color Contrast


All text colors meet WCAG AA standards

Primary text (#111113) on white = 16.17:1 (AAA)

Secondary text (#6B7280) on white = 4.69:1 (AA)

Primary green (#00E5A0) on white = 2.92:1 (fails — used for accents only, not body text)


Focus Indicators


All interactive elements have visible focus ring
+Focus 44×44pxring touchcolor: target  
 
CustomFocus icons  SVGwidth: optimized2px
via
SVGO,Semantic placedHTML
in
src/components/icons/
 
 
(h1 Accessibility→ rule:h2 Icons→ conveyingh3)
meaning
Form mustlabels haveproperly aria-label.associated Decorativewith icons:inputs
aria-hidden="true".
ARIA labels on icon-only buttons

Table headers properly scoped



7. Motion & Animation Standards


7.1 Duration Tokens




































Token Value Usage
--duration-instant 50ms Micro-feedback (checkbox check)
--duration-fast 100ms Button states, hover
--duration-normal 200ms Modals, dropdowns
--duration-slow 300ms Page transitions, large panels
--duration-slower 500ms Onboarding, loading states

7.2 Easing Tokens































Token Value Usage
--ease-default cubic-bezier(0.4, 0, 0.2, 1) General UI
--ease-enter cubic-bezier(0, 0, 0.2, 1) Elements entering
--ease-exit cubic-bezier(0.4, 0, 1, 1) Elements leaving
--ease-spring cubic-bezier(0.34, 1.56, 0.64, 1) Playful, emphasis

7.3 Reduced Motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Rule: Every animated component MUST respect prefers-reduced-motion.


8. Accessibility Requirements Per Component































































Requirement Buttons Inputs Modals Tables Navigation
Keyboard accessible ✓ ✓ ✓ ✓ ✓
Focus visible ✓ ✓ Focus trap ✓ ✓
ARIA role button textbox/combobox dialog table/grid nav
Screen reader label aria-label or visible text <label> associated aria-labelledby Caption + headers aria-label
Error state aria-describedby error msg aria-invalid — — —
Touch target 44×44px min 44px height — Row: 44px min 44×44px


9. Design Token FormatPrinciples


9.1 CSS Custom Properties (Source of Truth)

/* tokens/colors.css */
:root {
  --color-brand-500: #0EA5E9;
  /* ... */
}

9.2 Tailwind Config Extension

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          500: 'var(--color-brand-500)',
          // ...
        }
      }
    }
  }
}

9.3 JavaScript/TypeScript Constants

// tokens/colors.ts — for use in charting libraries, canvas, etc.
export const colors = {
  brand500: '#0EA5E9',
  // ...
} as const;

Token update process: Figma → Style Dictionary export → CSS/JS/Tailwind files → PR review.


10. Component Documentation Standard


Each component story must include:

DefaultClarity over Decoration story — basic render withData-first, minimal propsornamentation
AllConsistent VariantsSpacing story — every8px visualgrid, variantpredictable displayedrhythm
AllAccessible Statesby Default story — hover,WCAG focus,AA disabled,minimum, error,Radix loadingUI primitives
ResponsiveMobile-First story — behaviorResponsive atfrom each375px+ breakpoint(iPhone SE)
AccessibilityDark storySidebar + Light Content — keyboardClear navigation,visual screenseparation
readerPrimary notesColor as Accent — Green (#00E5A0) for actions, not backgrounds

Subtle Shadows — Elevation without heaviness

Data-Dense UI — Tables, charts, metrics — optimized for information density


Brand Identity Alignment

ComponentFrom JSDoc minimum:~/system/specs/bilko-brand-identity.md:
/**
*Primary Button component for primary user actions.
 *
 * @example
 * <Button variant="primary" onClick={handleSubmit}>Save Changes</Button>
 */

Props table:Color: Every#00E5A0 prop(implemented)
must
Typography: have:Inter type,(implemented)
default,Tone: requiredModern, flag,professional, description.
Balkan-focused (implemented)

Dark Sidebar: #111113 (implemented)

Logo Placement: Top left sidebar (implemented)



ApprovalFuture Tokens (Phase 2)
When 
implementingAPIintegration:

Loading 
States:SkeletoncomponentcolorsError 
States:Errormessagebackgrounds(#FEF2F2,lightSuccess 
States:Successmessagebackgrounds(#F0FDF4,green)Toast 
Notifications:Background,text,borderDark 
Mode:Fulldarkthemevariant  Role
Name Date Signature  
 
 
Author     
  Leadred)
Designer    
  Frontendlight Lead
  
  Accessibilitycolors
Reviewer    
 
 
(optional)

~~Token~~	~~Value~~	~~Usage~~
`--space-0sm:flex-row`	~~0px~~
`--space-1`	~~4px~~	~~Micro gaps, icon padding~~
`--space-2`	~~8px~~	~~Tight inline spacing~~
`--space-3`	~~12px~~	~~Compact form elements~~
`--space-4`	~~16px~~	~~Default content spacing~~
`--space-5`	~~20px~~	~~Card padding~~ (~~compact)~~
`--space-6`	~~24px~~	~~Card~~tablet+) ~~padding, section padding~~
`--space-8`	~~32px~~	~~Large section gaps~~
`--space-10`	~~40px~~	~~Feature section padding~~
`--space-12`	~~48px~~	~~Section separation~~
`--space-16`	~~64px~~	~~Page-level padding~~
`--space-20`	~~80px~~	~~Hero sections~~

~~Property~~	~~Value~~
~~Column count~~	12
~~Column gutter~~	~~24px (mobile: 16px)~~
~~Container max-width~~	~~1280px~~
~~Container side padding~~	~~24px (mobile: 16px)~~

~~Name~~	~~Min Width~~	~~Target Devices~~
`xs`	~~0px~~	~~Small phones~~
`sm`	~~480px~~	~~Large phones~~
`md`	~~768px~~	~~Tablets~~
`lg`	~~1024px~~	~~Small laptops~~
`xl`	~~1280px~~	~~Desktops~~
`2xl`	~~1536px~~	~~Large displays~~

~~Component~~	~~Status~~	~~Variants~~	~~Storybook~~
~~Button~~	~~`{{Done~~	~~WIP~~	~~Planned}}`~~
~~Input~~	~~`{{Done~~	~~WIP~~	~~Planned}}`~~
~~Select~~	~~`{{Done~~	~~WIP~~	~~Planned}}`~~
~~Checkbox~~	~~`{{Done~~	~~WIP~~	~~Planned}}`~~
~~Radio~~	~~`{{Done~~	~~WIP~~	~~Planned}}`~~
~~Toggle/Switch~~	~~`{{Done~~	~~WIP~~	~~Planned}}`~~
~~Textarea~~	~~`{{Done~~	~~WIP~~	~~Planned}}`~~
~~Badge~~	~~`{{Done~~	~~WIP~~	~~Planned}}`~~
~~Avatar~~	~~`{{Done~~	~~WIP~~	~~Planned}}`~~
~~Tooltip~~	~~`{{Done~~	~~WIP~~	~~Planned}}`~~
~~Spinner~~	~~`{{Done~~	~~WIP~~	~~Planned}}`~~
~~Divider~~	~~`{{Done~~	~~WIP~~	~~Planned}}`~~

~~Component~~	~~Status~~	~~Storybook~~
~~Card~~	`{{Status}}`	~~{{URL}}~~
~~Modal / Dialog~~	`{{Status}}`	~~{{URL}}~~
~~Dropdown Menu~~	`{{Status}}`	~~{{URL}}~~
~~Table~~	`{{Status}}`	~~{{URL}}~~
~~Pagination~~	`{{Status}}`	~~{{URL}}~~
~~Toast / Notification~~	`{{Status}}`	~~{{URL}}~~
~~Form Field~~48px (~~label~~lg), ~~+ input + error)~~	`{{Status}}`	~~{{URL}}~~
~~Search Bar~~	`{{Status}}`	~~{{URL}}~~
~~Breadcrumb~~	`{{Status}}`	~~{{URL}}~~
~~Tabs~~	`{{Status}}`	~~{{URL}}~~
~~Accordion~~	`{{Status}}`	~~{{URL}}~~
~~Date Picker~~	`{{Status}}`	~~{{URL}}~~

~~Component~~	~~Description~~
`Container`	~~Max-width wrapper with responsive padding~~
`Stack`	~~Vertical flex stack with configurable gap~~
`Inline`	~~Horizontal flex row with configurable gap/alignment~~
`Grid`	~~CSS grid layout wrapper~~
`PageLayout`	~~Full-page layout with sidebar/header/main/footer slots~~
`Section`	~~Content section with standard vertical rhythm~~

~~Item~~	~~Standard~~
~~Library~~	~~`{{Lucide React~~
~~Delivery~~	~~Inline SVG via component~~40px (noicon) ~~sprite,~~ Padding: no16px ~~icon~~horizontal ~~font)~~
~~Sizes~~	~~16px~~12px (sm), 20px (~~md,~~lg) Border Radius: 8px (md) Font: 14px medium (default), 12px (sm), 16px (lg) Variants: Default: Primary green background, white text Outline: Border only, transparent background Ghost: No border, no background, hover shows background Destructive: Error red background, white text Input Height: 40px Padding: 12px horizontal Border: 1px solid #E5E7EB (border color) Border Radius: 8px (md) Font: 14px normal Focus: Primary color ring (2px) Card Background: #FFFFFF (surface) Border: 1px solid #E5E7EB Border Radius: 8px (md) Shadow: 0 2px 8px rgba(0, 0, 0, 0.08) Padding: 24px (~~lg),~~default ~~32px~~content padding) Badge Padding: 4px 8px Border Radius: 6px (~~xl)~~
~~Stroke~~medium ~~width~~	~~1.5px~~ at Default: ~~24px,~~Gray ~~scaled~~background ~~proportionally~~
~~Color~~	~~Inherits~~Amber background Destructive: Red background Secondary: Light gray Table Row Height: 48px (default) Cell Padding: 12px horizontal, 16px vertical Border: 1px solid #E5E7EB (between rows) Hover: Light gray background (#FAFAFA) Header: Medium font weight, secondary text color Icon System Library: Lucide React (v0.469.0) Size: Consistent 16px (`currentColorw-4 h-4`) or 20px (`w-5 h-5`) Usage: Buttons: 16px icon + 8px gap from text Menu items: 20px icon + 12px gap from text Standalone: 24px or larger Common Icons: Plus (add actions) Search (search inputs) Menu (mobile sidebar toggle) User (user menu) Bell (notifications) ChevronDown/Right (expandable sections) Check (success, reconciliation) X (close, delete) Download (export actions) Send (send email) Chart Design Tokens Chart Colors (Recharts) `Revenue: #22C55E (Green bars) Expense: #EF4444 (Red bars) Profit: #3B82F6 (Blue bars) Neutral: #6B7280 (Gray — neverwhen hardcoded`
~~Interactive~~ ~~icons~~	~~Must~~Typography Axis Labels: 12px normal Tooltip: 14px medium Legend: 12px normal Chart Layout Responsive Container: 100% width, fixed height (250px default) Cartesian Grid: Dashed, #E5E7EB stroke Tooltip Background: White with border Border Radius: 8px (md) Accessibility Color Contrast All text colors meet WCAG AA standards Primary text (#111113) on white = 16.17:1 (AAA) Secondary text (#6B7280) on white = 4.69:1 (AA) Primary green (#00E5A0) on white = 2.92:1 (fails — used for accents only, not body text) Focus Indicators All interactive elements have visible focus ring + Focus ~~44×44px~~ring ~~touch~~color: ~~target~~
~~Custom~~ Focus ~~icons~~	~~SVG~~width: ~~optimized~~2px ~~via~~ ~~SVGO,~~ Semantic ~~placed~~HTML in `src/components/icons/`

~~Token~~	~~Value~~	~~Usage~~
`--duration-instant`	~~50ms~~	~~Micro-feedback (checkbox check)~~
`--duration-fast`	~~100ms~~	~~Button states, hover~~
`--duration-normal`	~~200ms~~	~~Modals, dropdowns~~
`--duration-slow`	~~300ms~~	~~Page transitions, large panels~~
`--duration-slower`	~~500ms~~	~~Onboarding, loading states~~

~~Token~~	~~Value~~	~~Usage~~
`--ease-default`	`cubic-bezier(0.4, 0, 0.2, 1)`	~~General UI~~
`--ease-enter`	`cubic-bezier(0, 0, 0.2, 1)`	~~Elements entering~~
`--ease-exit`	`cubic-bezier(0.4, 0, 1, 1)`	~~Elements leaving~~
`--ease-spring`	`cubic-bezier(0.34, 1.56, 0.64, 1)`	~~Playful, emphasis~~

~~Requirement~~	~~Buttons~~	~~Inputs~~	~~Modals~~	~~Tables~~	~~Navigation~~
~~Keyboard accessible~~	✓	✓	✓	✓	✓
~~Focus visible~~	✓	✓	~~Focus trap~~	✓	✓
~~ARIA role~~	`button`	`textbox`/`combobox`	`dialog`	`table`/`grid`	`nav`
~~Screen reader label~~	~~aria-label or visible text~~	`<label>` ~~associated~~	`aria-labelledby`	~~Caption + headers~~	`aria-label`
~~Error state~~	`aria-describedby` ~~error msg~~	`aria-invalid`	—	—	—
~~Touch target~~	~~44×44px min~~	~~44px height~~	—	~~Row: 44px min~~	~~44×44px~~

~~Role~~	~~Name~~	~~Date~~	~~Signature~~
~~Author~~
~~Lead~~red) ~~Designer~~
~~Frontend~~light ~~Lead~~
~~Accessibility~~colors ~~Reviewer~~

Design System

Bilko Design System Documentation

Document History

1.Color Design PrinciplesPalette

2. Color System

2.1 Primitive Palette (Raw Values)Colors

2.2Status Semantic Tokens (Light Mode)Colors

2.3Text Semantic Tokens (Dark Mode)Colors

2.4Background ContrastColors

Border Color

Chart Colors

Sidebar Colors (Dark Theme)

Typography

Font

Font Sizes

Font Weights

Type Scale Usage

Spacing System (8px Grid)

3.Border TypographyRadius

3.16px Font(Small Families

3.2 Type Scale

Shadows

4. Spacing & LayoutBreakpoints

4.640px (Small tablets, large phones) md: 768px (Tablets) lg: 1024px (Small desktops, large tablets) xl: 1280px (Desktops)

4.2 Grid System

4.3 Responsive Breakpoints

5. Component LibraryTokens

Button

5.1 PrimitiveHeight: Components40px (Atoms)

5.2 Composite Components32px (Molecules)

5.3 Layout Components

6. Iconography Guidelines

Input

Card

Badge

Table

Icon System

Chart Design Tokens

Chart Colors (Recharts)

Chart

Chart Layout

Accessibility

Color Contrast

Focus Indicators

Semantic placedHTML

7. Motion & Animation Standards

7.1 Duration Tokens

7.2 Easing Tokens

7.3 Reduced Motion

8. Accessibility Requirements Per Component

9. Design Token FormatPrinciples

9.1 CSS Custom Properties (Source of Truth)

9.2 Tailwind Config Extension

9.3 JavaScript/TypeScript Constants

10. Component Documentation Standard

Brand Identity Alignment

ApprovalFuture Tokens (Phase 2)

`Typography`

`Font`

`4.640px (Small tablets, large phones) md: 768px (Tablets) lg: 1024px (Small desktops, large tablets) xl: 1280px (Desktops)`

5.1
Primitive
Height: Components40px (Atoms)