Contemporary

Contemporary is the house style for interfaces that should feel current without chasing a trend. It pairs disciplined structure—predictable grids, calm whitespace, and a tight type ramp—with a small, confident dose of color so the result reads as fresh, premium, and quietly opinionated. Reach for it when you want something that looks designed in the present moment but won't age into a gimmick.

Design principles

• Structure first: every layout sits on a consistent column grid with deliberate, breathable spacing rather than dense packing.
• Quiet accents, loud clarity: color is used sparingly to direct attention; the page does the talking, not the decoration.
• Tight, modern type: condensed display weights for headings, highly legible humanist sans for body.
• One primary action per view: the indigo accent is reserved so it always means "do this next."
• Soft, honest elevation: shadows hint at layering without faking heavy 3D depth.
• Restraint over ornament: no gradients-for-the-sake-of-it, no clutter; whitespace is a feature.

Color

The base is pure white (#FFFFFF) with a barely-cool surface (#F8FAFC) for cards and grouped sections, so layering reads through tone rather than borders alone. Text is slate (#1E293B) with a muted secondary (#64748B) for captions and metadata. The signature is indigo #4F46E5, used for primary buttons, active states, links, and focus rings; sky blue #0EA5E9 is the supporting accent for highlights, charts, and subtle gradients. Borders stay light at #E2E8F0.

For dark mode, invert to a deep slate background (#0B1120), surfaces at #111827, foreground at #E2E8F0, and muted at #94A3B8. Lift indigo to #6366F1 and sky to #38BDF8 so accents keep their punch against the darker field. Keep borders subtle at #1E293B.

Token reference

Use accent tints at 8–12% opacity for badge and callout backgrounds—for example indigo at rgba(79,70,229,0.10)—so accent color stays a signal, never a flood.