7shifts

7shifts employs a functional and approachable design system, combining a crisp white and dark gray achromatic base with a singular vivid blue accent for key interactions. Typography provides clear hierarchy, with a custom Regular font family for all content up to large headlines. Components are lightweight and often borderless, emphasizing content over chrome, while subtle rounding creates a friendly, modern feel across cards and buttons. The system balances directness with a degree of visual softness. Prioritize Blueprint Blue (#4570ff) for all primary calls-to-action to establish a consistent interactive focal point. Apply 9999px border-radius to all buttons for a friendly, pill-shaped aesthetic. Use Ink Black (#000000) for primary headlines and Canvas White (#ffffff) for card backgrounds, maintaining high contrast. Employ Divider Gray (#e5e7eb) for all hairline borders and subtle visual separations within components and between sections. Maintain a clear visual hierarchy with 'Regular' for body copy and 'Medium' for button text and subheadings. Utilize 20px border-radius for all standard cards to reinforce the consistent soft-edged design language. Implement the fixed vertical element gap of 8px when arranging discrete UI elements within components or sections. Avoid using multiple vivid accent colors simultaneously; limit to Blueprint Blue for primary actions and occasional Soft Orange Highlight (#ff6808) for secondary emphasis. Do not introduce hard, sharp corners; use the established radii of 20px, 40px, or 9999px where appropriate. Refrain from using strong box-shadows or drop shadows; the system relies on flat surfaces and minimal elevation. Do not deviate from the 'Regular' and 'Medium' font families for core UI text; 'Nanum Pen Script' is reserved for highly decorative titles. Avoid using primary text in any color other than Ink Black (#000000) on light backgrounds or Canvas White (#ffffff) on dark backgrounds. Do not use overly complex gradients; the system favors solid colors and subtle accent washes. Avoid dense, information-heavy blocks; ensure generous padding (28px minimum for cards) and vertical spacing between elements.