--- name: Focus Utility colors: primary: "#151412" secondary: "#68655F" tertiary: "#A39F98" bg: "#F5F4F0" bg-deep: "#ECEAE3" surface: "#FFFFFF" border: "#EAE8E2" border-mid: "#DFDDD7" border-strong: "#CFCDC7" text-ghost: "#C5C1BA" accent: "#2750D6" accent-hover: "#3460E8" accent-light: "#EBF0FD" accent-text: "#1A38A0" green: "#137E44" green-light: "#E3F4EC" green-text: "#0C5430" amber: "#905300" amber-light: "#FDF0DC" red: "#BA2B2B" red-light: "#FAEBEB" red-text: "#861E1E" typography: display-lg: fontFamily: Inter fontSize: 38px fontWeight: 600 lineHeight: 1 letterSpacing: -1.4px headline-lg: fontFamily: Inter fontSize: 31px fontWeight: 600 lineHeight: 1.05 letterSpacing: -1.1px headline-sm: fontFamily: Inter fontSize: 16px fontWeight: 600 lineHeight: 1.2 letterSpacing: -0.3px body-md: fontFamily: Inter fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: -0.2px body-sm: fontFamily: Inter fontSize: 12px fontWeight: 400 lineHeight: 1.4 label-md: fontFamily: Inter fontSize: 12.5px fontWeight: 500 lineHeight: 1.2 letterSpacing: -0.1px label-sm: fontFamily: Inter fontSize: 10px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.85px code-lg: fontFamily: JetBrains Mono fontSize: 21px fontWeight: 500 lineHeight: 1 letterSpacing: -0.4px code-md: fontFamily: JetBrains Mono fontSize: 14px fontWeight: 500 lineHeight: 1.2 letterSpacing: -0.1px rounded: sm: 7px md: 14px lg: 20px full: 9999px spacing: base: 8px xs: 4px sm: 8px md: 14px lg: 24px xl: 32px components: app-background: backgroundColor: "{colors.bg}" avatar: backgroundColor: "{colors.accent}" textColor: "{colors.surface}" rounded: "{rounded.full}" header-greeting: textColor: "{colors.tertiary}" typography: "{typography.body-sm}" search-input: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" rounded: 11px height: 41px padding: 12px search-input-placeholder: textColor: "{colors.text-ghost}" search-icon-focus: textColor: "{colors.accent}" button-chip: backgroundColor: "{colors.surface}" textColor: "{colors.secondary}" rounded: "{rounded.full}" height: 31px padding: 12px button-chip-hover: textColor: "{colors.primary}" button-chip-active: backgroundColor: "{colors.primary}" textColor: "{colors.surface}" progress-card: backgroundColor: "{colors.primary}" textColor: "{colors.surface}" rounded: "{rounded.lg}" padding: 20px stat-card: backgroundColor: "{colors.surface}" rounded: "{rounded.md}" padding: 12px stat-icon-active: backgroundColor: "{colors.accent-light}" textColor: "{colors.accent-text}" stat-icon-urgent: backgroundColor: "{colors.red-light}" textColor: "{colors.red-text}" stat-icon-done: backgroundColor: "{colors.green-light}" textColor: "{colors.green-text}" divider: backgroundColor: "{colors.border}" height: 1px divider-mid: backgroundColor: "{colors.border-mid}" height: 1px checkbox-checked: backgroundColor: "{colors.green}" textColor: "{colors.surface}" rounded: "{rounded.full}" task-item: backgroundColor: "{colors.surface}" rounded: "{rounded.md}" padding: 12px task-tag-work: backgroundColor: "{colors.accent-light}" textColor: "{colors.accent-text}" task-tag-personal: backgroundColor: "{colors.green-light}" textColor: "{colors.green-text}" task-tag-urgent: backgroundColor: "{colors.red-light}" textColor: "{colors.red-text}" task-tag-medium-priority: backgroundColor: "{colors.amber-light}" textColor: "{colors.amber}" task-tag-later: backgroundColor: "{colors.bg-deep}" textColor: "{colors.secondary}" task-due-overdue: textColor: "{colors.red}" input-field: backgroundColor: "{colors.bg}" textColor: "{colors.primary}" rounded: 11px height: 46px padding: 14px input-field-focus: backgroundColor: "{colors.surface}" tag-btn-work: backgroundColor: "{colors.accent-light}" textColor: "{colors.accent-text}" tag-btn-personal: backgroundColor: "{colors.green-light}" textColor: "{colors.green-text}" tag-btn-urgent: backgroundColor: "{colors.red-light}" textColor: "{colors.red-text}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.surface}" rounded: 13px height: 49px button-primary-hover: backgroundColor: "#272420" fab: backgroundColor: "{colors.accent}" rounded: "{rounded.full}" size: 50px fab-hover: backgroundColor: "{colors.accent-hover}" bottom-nav: backgroundColor: "{colors.bg}" height: 88px bottom-nav-item-active: backgroundColor: "{colors.accent-light}" textColor: "{colors.accent}" panel-handle: backgroundColor: "{colors.border-strong}" height: 3px width: 30px rounded: "{rounded.full}" --- # Focus Utility Focus is a modern, high-contrast, distraction-free task management interface. The design system is built to convey extreme clarity, precision, and focus through a refined warm neutral canvas, stark black components, and single-point interactive accents. ## Brand & Style The visual identity of Focus leans heavily into utility-first simplicity with a premium editorial feel. Its brand personality is calm, structured, and intentional. By employing a warm alabaster background instead of a pure, clinical white, the interface feels organic and easy on the eyes for extended productivity sessions. Stark primary buttons and progress containers introduce high visual contrast, instantly signaling the main user focus. The single blue accent color is used sparingly to drive interactive focus and highlights. ## Colors The color palette is built around three core layers: a soft alabaster background, crisp white surface cards, and deep ink typography/primary interactive components. - **Primary Canvas:** Warm Alabaster (#F5F4F0) acts as the main viewport background, paired with Deep Alabaster (#ECEAE3) for sub-sections and secondary layers. - **Surfaces:** Pure White (#FFFFFF) is used for cards, inputs, and chips to pop off the warm background. - **Typography & Ink:** Deep Charcoal/Ink (#151412) is the primary text color and the fill color for primary buttons and high-contrast containers. - **Accents:** Focus Blue (#2750D6) serves as the primary interactive driver, highlighting active navigation, status counts, badges, and primary interactive links. - **Feedback & Tags:** Semantic categories utilize highly legible pastels paired with corresponding dark text: - Work: Blue-light background (#EBF0FD) with Indigo text (#1A38A0) - Personal: Green-light background (#E3F4EC) with Forest-green text (#0C5430) - Urgent/Error: Red-light background (#FAEBEB) with Deep-red text (#861E1E) ## Typography Focus uses a dual-font strategy to balance clean readability with technical precision. - **Primary UI & Copy:** **Inter** is the core typeface, establishing an elegant, readable, and highly legible visual hierarchy. Title elements use semi-bold weights with negative letter-spacing for a modern, compact editorial feel. - **Technical & Utility Data:** **JetBrains Mono** is used for dates, time, task counts, percentages, and metrics. Its monospaced structure adds a sense of precision, alignment, and analytical tool-like clarity to the app's metadata. ## Layout & Spacing Focus follows a mobile-first, single-column vertical layout designed for quick scanning and micro-interactions. - **Rhythm:** Governed by an 8px grid system, ensuring consistent spacing between layout containers and interactive items. - **Padding:** Outer sections use a generous 24px margin to preserve whitespace and breathing room inside the viewport frame. - **Gaps:** List items and card groups maintain a tight 7px or 8px vertical rhythm to keep elements closely associated and scannable. ## Elevation & Depth The design system prefers flat tonal layers over heavy elevation, creating depth through containment and subtle borders. - **Containment:** Content sits on White (#FFFFFF) cards layered on top of the Alabaster background. - **Borders:** Thin, translucent borders separate interactive boundaries. These are simulated with soft grays (#EAE8E2, #DFDDD7, #CFCDC7) mapping to 7%, 10%, and 15% black opacities. - **Shadows:** Very soft ambient drop shadows are applied to cards to lift them slightly, while the FAB (Floating Action Button) uses a specialized glowing accent shadow (`0 4px 20px rgba(39, 80, 214, 0.34)`) to stand out as the primary screen action. ## Shapes Shapes are structural and crisp, using medium and small rounded corners to maintain a friendly yet clean aesthetic. - **Containers:** Task items, statistics cards, and general containers use a `14px` border radius (rounded.md). - **Hero Containers:** The main progress dashboard uses a softer `20px` border radius (rounded.lg). - **Interactive Elements:** Buttons use a `13px` radius, while search inputs and input fields use a `11px` radius. - **Pills & Chips:** Filter chips, avatars, and the FAB use fully rounded pill shapes (rounded.full). ## Components ### Action & Input Elements Primary actions like the FAB utilize the accent blue background to stand out. Main form buttons use the deep primary ink background (#151412) to frame action confirmation. Input fields use a subtle alabaster background with inset boundaries, shifting to white with a thin blue outline when focused. ### Filter Chips Chips act as toggle buttons. Inactive chips feature a white background with a thin gray border, while the active chip shifts to a solid ink background with white text, providing clear feedback on the active view state. ### Task Items Task containers use a white background with a thin, light gray border. They display priority visual indicators using a thin vertical color stripe (red for high, amber for medium) on the left edge. ## Do's and Don'ts - Do use JetBrains Mono for all numeric indicators, metrics, timestamps, and dates. - Do restrict the use of the Accent Blue (#2750D6) color to interactive icons, active navigation tabs, badge indicators, and the FAB. - Don't use heavy or high-opacity dark shadows for cards; keep depth indicators subtle and translucent. - Don't mix sharp corners with rounded corners; maintain the established scale of rounded values (7px, 11px, 13px, 14px, 20px, and full).