Skip to content

Apply Apple HIG design standards throughout app #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexgalkin94 merged 1 commit into from
Jan 17, 2026
Merged

Apply Apple HIG design standards throughout app #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@
--success: #22c55e;
--warning: #eab308;
--danger: #ef4444;

/* Apple HIG Touch Target */
--touch-target: 44px;
}

@theme inline {
Expand All @@ -24,20 +27,26 @@
--color-success: var(--success);
--color-warning: var(--warning);
--color-danger: var(--danger);
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
/* Apple HIG: SF Pro is the system font */
--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
--font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body {
background: var(--background);
color: var(--foreground);
font-family: var(--font-sans);
/* Apple HIG: 17pt default body text */
font-size: 17px;
line-height: 1.4;
/* Apple HIG: -0.43px tracking for 17pt */
letter-spacing: -0.43px;
min-height: 100dvh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* Clean card - no glassmorphism */
/* Clean card */
.glass-card {
background: var(--card);
border: 1px solid var(--border);
Expand Down
9 changes: 5 additions & 4 deletions src/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function Button({
disabled = false,
type = 'button',
}: ButtonProps) {
const baseStyles = 'font-medium rounded-lg flex items-center justify-center active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed';
const baseStyles = 'font-medium rounded-xl flex items-center justify-center active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed';

const variants = {
primary: 'bg-white text-black hover:bg-zinc-200',
Expand All @@ -26,10 +26,11 @@ export default function Button({
ghost: 'bg-transparent hover:bg-zinc-800 text-zinc-400',
};

// Apple HIG: 44pt minimum touch target, 17pt text
const sizes = {
sm: 'px-3 py-1.5 text-xs',
md: 'px-4 py-2 text-sm',
lg: 'px-5 py-2.5 text-sm',
sm: 'px-4 py-2 text-[15px] min-h-[36px]', // Compact: 15pt, 36px height
md: 'px-5 py-3 text-[17px] min-h-[44px]', // Standard: 17pt, 44px min
lg: 'px-6 py-3.5 text-[17px] min-h-[50px]', // Large: 17pt, 50px height
};

return (
Expand Down
8 changes: 5 additions & 3 deletions src/components/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ export default function Input({
return (
<div className={className}>
{label && (
<label className="block text-xs sm:text-sm text-zinc-400 mb-1.5">{label}</label>
// Apple HIG: 13pt for labels/captions
<label className="block text-[13px] text-zinc-400 mb-2">{label}</label>
)}
<div className="relative">
<input
Expand All @@ -40,10 +41,11 @@ export default function Input({
min={min}
max={max}
step={step}
className="w-full max-w-full bg-zinc-900 border border-zinc-800 rounded-lg px-3 py-2.5 sm:px-4 sm:py-3 text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-zinc-600 focus:ring-1 focus:ring-zinc-600 transition-colors [&::-webkit-calendar-picker-indicator]:invert [&::-webkit-calendar-picker-indicator]:opacity-50"
// Apple HIG: 17pt text, 44pt minimum height
className="w-full bg-zinc-900 border border-zinc-800 rounded-xl px-4 py-3 text-[17px] min-h-[44px] text-white placeholder-zinc-600 focus:outline-none focus:border-zinc-600 focus:ring-1 focus:ring-zinc-600 transition-colors [&::-webkit-calendar-picker-indicator]:invert [&::-webkit-calendar-picker-indicator]:opacity-50"
/>
{suffix && (
<span className="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-500 text-sm">
<span className="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-500 text-[15px]">
{suffix}
</span>
)}
Expand Down