Cora · brand and product UI guidelines
Cora
runs the studio.
The workspace for creative studios: leads, shoots, clients, money and content in one calm place, with an AI teammate that does the busywork.
Calm control for busy studios
Cora replaces the spreadsheet, WhatsApp threads and five SaaS tabs a small studio juggles. It should feel like a quiet, well-run back office: dense with information, never noisy, and always one tap from the next action.
Sage ground, white cards, thin lines. Colour appears only when it carries meaning.
Shopify-grade density: real numbers, tabular figures, every list sortable and filterable.
Shoots, proofs, crews and GST in the studio's own words, rupees with Indian grouping.
Every flow works one-handed on a phone. The desktop is the bigger version, not the original.
One wordmark, set in type
The Cora wordmark is the word CORA in Inter Semibold, all caps, tracked to −0.05em. It is live type, so it stays sharp at every size. The version tag beside it appears only inside the product.
Clear space and minimum size
Keep half the cap height clear on every side. Minimum 17px tall on screens (the mobile header size) and 12mm in print.
App icon and avatar
App icon: a Lime C on Ink at 22% corner radius. Workspace avatar: Ink C on Lime. People get initials on Ink circles; clients get initials on a category tile.
No gradients or effects.
No re-tracking or weight changes.
No white on Lime. Lime always takes Ink.
The mark is caps. In sentences, write Cora.
Forest, night, sage and one bright lime
The palette comes from a planted studio: deep forest ink, a near-black night for chrome, a pale sage ground and a single fresh lime for the moment something is alive, active or new.
Proportion on a typical screen
Lime should never cover more than a few percent of a screen. If you can see it from across the room, there is too much.
Neutrals
Status. Always with a word, never colour alone
Category tiles
Purple for people and leads, pink for content, yellow for money, blue for files and sync, lime for done. Tiles help scanning; they never stand in for status.
Approved pairings
Never set Lime text on white or sage: it drops to about 1.3 : 1.
Inter, tightly set, with tabular figures
One family does everything. Inter at 400, 500 and 600 keeps the product legible at Shopify density, and tabular figures keep every rupee lined up. JetBrains Mono is reserved for codes, IDs and tokens.
Inter · -apple-system, Segoe UI, sans-serif
Indian digit grouping, two decimals for invoices and none for summaries. Mono for invoice numbers, codes and API keys.
Compact but breathable
A 4px rhythm. Tight inside components, generous between them. Page padding is 18px top and 24px sides on desktop, 14px on phones, with 150px clear at the bottom of every phone screen for the island.
Spacing steps
Radii
Inputs, buttons
Cards
Desktop sheet
Phone sheet
Actions, badges
Borders before shadows. Shadows are reserved for things that float: sheets, the island, toasts and popovers.
Line icons, letter tiles, real work
Stroke icons on a 24px grid at 1.9–2px, rounded caps, in the current text colour. No emoji. Third-party brands appear as letter tiles, never as their logos. Photography is the client's actual work, shown uncropped and untinted.
The four-point star is Cora AI's symbol. Use it only where the AI acts or can be asked: the AI panel, Ask Cora, AI-generated content.
The core kit
One primary action per view, as a dark pill. Everything else steps down from there.
Primary is Ink. Secondary is white with an input-border ring. Lime buttons appear only on dark surfaces such as AI insight banners. Destructive actions name the thing they destroy.
Detail slides up from the bottom and fills the work area
Side drawers are retired. Records, editors and forms open as a sheet that rises from the bottom of the working area, keeping the sidebar and top bar visible. Its width is whatever the working area is, so it grows and shrinks when the AI panel opens, and its layout reflows with it.
- Desktop: 8px from the work area's sides, 16px from its top, 16px top corners, a 32% Night scrim, rising over 240ms on the calm ease.
- Header 56px: close, title with meta, secondary actions, then the primary pill.
- Responsive inside: a record sheet lays out as main column plus 320px side cards when it is wider than 860px, and stacks below that. Forms cap at 720px and center.
- Phone: covers header and island, 22px top corners, a drag handle, and the actions in a sticky footer.
- Small questions stay small: delete and discard confirmations are a centred 420px dialog on desktop and a short sheet on phones.
Design for the phone first
Studio owners run Cora between shoots, on a phone, often one-handed. A screen isn't finished until it passes every check below at 390px.
- No horizontal scroll on any screen. Wide content becomes cards, wraps, or moves into a sheet.
- Touch targets at least 44px. Inputs at 16px text so iOS doesn't zoom.
- Tabs become a section picker that opens a sheet, or a segmented control for three or fewer.
- Kanban becomes a stage picker plus one column. Calendars become an agenda list.
- Sticky actions sit above the island, never under it. Leave 150px clear at the bottom of the scroll.
- Nested screens push in with a back row at the top. Settings read like grouped inset lists.
- KPI rows become a 2-up grid. Long names truncate with an ellipsis; numbers never wrap.
- Toasts rise from above the island; filters live in a sheet behind one Filters button.
Speak like a sharp studio manager
Short, specific, warm. Cora names the client, the amount and the next step. It never apologises for the software and never says "OK".
Buttons say what happens
Errors say how to fix it
Money and dates are explicit
The AI reports, you decide
| Thing | Write | Not |
|---|---|---|
| Case | Sentence case: Add new lead | Title Case: Add New Lead |
| Currency | ₹3,40,000 (Indian grouping) | ₹340,000 · Rs. 3.4L in tables |
| Dates | Oct 30, 2026 · Today, 6:02 pm | 30/10/26 · 18:02 |
| Phone | +91 98200 12345 | 9820012345 |
| People | Dravya R. · initials DR | user_01 · Admin1 |
| Product name | Cora, Cora AI, Ask Cora | CORA in sentences · the bot |
From design system v1 to the new product UI
The earlier Cora Design System was monochrome zinc with no brand colour. The redesign keeps its rules on states, focus and accessibility, and replaces its look.
| Area | v1 (zinc) | v2 (this book) |
|---|---|---|
| Ground | Cream #fbfaf7 workspace | Sage #f5f6f1 page, white cards |
| Primary action | Zinc-950, no brand colour | Forest ink #0c1f14 pill |
| Accent | None | Lime #c8f07a, on Ink only |
| Chrome | Light sidebar | Night #070606 sidebar and phone header |
| Drawers | 448px right drawer on desktop | Bottom sheet filling the work area, dynamic width |
| Mobile nav | Not defined | Uniform header plus five-tab island with Ask Cora |
| Card radius | 16px | 14px cards, 16px sheets, 22px phone sheets |
| Kept | 44px targets, 2px focus ring, status always labelled, no emoji, sentence case, tabular figures, reduced-motion support | |
Cora brand book v2.0 · Oct 30, 2026 · Built from the Cora product redesign canvas. Switch to Template at the top to reuse this structure for another brand.