CritBeat
Design system
1. Color
Twelve colors. Every one has a job. If a screen needs a color that is not here, the screen is wrong, not the palette.
Surface
Where things sit
Paper #FBF9F1
Sidebar and page frame. The rail everything hangs off.
White #FFFFFF
The main field, cards, inputs, the team read panel. Where the work sits.
Ash #EEF0F3
Empty beat cells. The absence of a submission.
Mist #F4F4F4
Resting fill for form fields. Added in code; not in the Figma palette.
Ink
What you read and press
Ink #111111
All primary text, primary buttons, filled beat cells, the wordmark.
Border #949494
Borders of fields, buttons, chips, and controls. Lightest grey that still clears WCAG 3:1 against white.
Line #D4D4D4
Borders and rules of cards, panels, menus, dialogs, and tables. Darker than Ash, lighter than Border.
Grey #666666
Secondary text: dates, helper copy, breadcrumb trail, column labels. Kept in code; Border is too light to read.
Signal
The three colors that mean something
Pink #FF4D9D
The lead’s read and flags. The one accent that says look here. Never decorative.
Yellow #FFD60A
Selected nav, highlights, member-side warmth. Means this is where you are.
Red #FC262E
Something is wrong, or something is rated. Error text, the missed-deadline beat cell, and filled rating dots. Everywhere else it stays text only; if it shows up more than that on a screen, the screen is shouting.
Green #1A9E4A
It worked: saved, sent, connected. Text only. Added in code; not in the Figma palette.
How the palette reads in a beat row
Ash is a beat that was submitted. Ink is the low one worth reading first. A dash is no submission yet. Pink appears once, on the flag, and nowhere else in the row.
2. Type
Figtree, two weights. Bold carries structure, Light carries reading. If you need a third weight, you need a different layout.
Display
Figtree Bold 64/83
Page title, once per screen
AI Product Studio
Heading 1
Figtree Bold 48/62
Panel titles, the team read
Check-in 6 of 14
Heading 2
Figtree Bold 32/42
Section titles inside a screen
Overview
Heading 3
Figtree Bold 20/26
Question prompts, card titles
What did you make this week?
Body large
Figtree Light 18/26
Lead paragraphs, larger reading text
Rebuilt the onboarding flow after Tuesday’s review.
Body
Figtree Light 16/21
Members’ answers, leads’ notes, all reading text
Rebuilt the onboarding flow in Figma after Tuesday’s review. Started a mood board for a brand refresh.
Label
Figtree Bold 14/18
Eyebrows, column headers, chips. Sentence case, never all caps
Team Nova · Week 6
Caption
Figtree Light 14/19
Metadata, timestamps, helper text
Submitted by Priya for the team · 2 days late
Button
Figtree Bold 15/19
Button and CTA labels, sentence case
Rules
- Sentence case everywhere, including labels and buttons.
- Line height is 130% across the scale. Do not tighten display.
- Grey is for metadata only. If a member has to read it to answer, it is Ink.
- No italics. Emphasis comes from weight or from a chip, not from slanting.
3. Spacing and layout
8px base. One content width. A sidebar that never moves.
Spacing scale
xs
4px
sm
8px
md
12px
lg
16px
xl
24px
2xl
32px
3xl
40px
4xl
48px
5xl
64px
lg (16) inside components, xl (24) between components, 4xl (48) between sections. Anything else needs a reason in the layer name.
Layout
Content 1024
Everything reads here. Tables scroll inside it, never past it.
Canvas
1440 wide, 128 top bar with the logo, sidebar 200 below it, main 1240
Content width
1024, centered in main with 56 side margin
Columns
3 equal columns inside content, 24 gutter. Split to 2 or 1 as needed
Cards
White on white, 12 radius, 1px Line stroke, xl (24) padding
4. Components
Nine components. Each one is on a real screen today. States shown only where the state changes what a person does next.
Button
Square corners, always. Primary for the one action on a screen. Secondary for the way out. Never two primaries side by side.
Input
Label above, helper below. Error copy says what to do, not what went wrong.
Confidence 1 to 5
One tap per person, private. The number never shows on the member side after submit.
Upload
Drop zone with the file types spelled out. No icon needed.
Beat cell
One beat per team per week. Ash means submitted, Ink means the low one to read first, a dash means nothing yet. Yellow is the column you are looking at. Red means the deadline passed with nothing.
Movement chip
Per team, against their own last week. Never a rank. Only one is pink and it is the one that asks for the lead’s time.
Evidence tag
The reasons behind a flag, in plain words. Grey on Ash so they read as facts, not alarms.
Nav item
Sidebar only. Bold, and Grey until it's where you are: then Ink on a square Yellow band across the sidebar's full width. Nothing else in the sidebar is colored.
Breadcrumb
Grey trail, Ink current page. Reads Dashboard, then the project, then deeper.
Card
White on white, 12 radius, 1px Line stroke, xl (24) padding.
What did you make this week?
Rebuilt the onboarding flow in Figma after Tuesday’s review.
5. Voice
CritBeat talks like a good project lead. Direct, specific, on your side. It never sounds like a report card.
Rules
- Sentence case, always
- Buttons, labels, chips, column headers, error copy. If it is text on the screen, it is sentence case.
- Name the move, not the mood
- Say what happened and what to do next. Scope drift, no test since kickoff, late 2 days. Never at risk, never struggling.
- Members see their team’s result
- The beat and the read show on the member side too, for every check-in the team turned in. Flags and movement stay on the lead’s side.
- Asking for feedback is not a signal
- A team requesting help is doing the work. The system flags submission, completeness and quality only.
- Short beats complete
- One line where one line will do. Helper copy is a sentence, not a paragraph.
How we name states
Movement is against a team’s own last week. Chart vocabulary, never a leaderboard.
Climbing
Beat went up from last week
Holding steady
Same beat as last week
New entry
First submission from this team
Needs a listen
Beat dropped, or two signals stacked. Read this one first
Three pairs
Flag on the lead’s read
Don’t
Team Nova is at risk and falling behind.
Do
Team Nova · needs a listen. Scope drift, no test since kickoff.
Confirmation after a member submits
Don’t
Your submission has been received. Score: 3/5.
Do
Thanks, Team Nova. Check-in 6 is in. The leads read it before Tuesday.
Empty state, no submission yet
Don’t
No data available.
Do
Nothing from Team Kora yet. Due Friday 5pm.
6. Logo
A monogram and a wordmark, drawn from the logo file in public/brand. The C listens, the B answers. Ink or White, nothing else.
On paper
Default. Ink lockup on the app background.
On ink
Dark surfaces, splash, app icon background.
On yellow
Marketing only. Never inside the product.
Clear space
Keep the height of the B clear on every side. Nothing inside the dashed line but the logo.
Minimum size
Monogram alone at 24px and below, for favicons and app icons. Full lockup never under 120px wide.
Site logo
One size on every page: 115px tall from lg up, 62px below. Page headers, the app sidebar, and sign-in all use it.
What not to do
- Do not recolor it. Ink or White. Pink, Yellow and Red are for the interface, not the mark.
- Do not set the wordmark in any other weight or font. Figtree Bold, as drawn.
- Do not stretch, rotate or add a shadow. If it needs help standing out, change the background, not the mark.
- Do not put the monogram inside a circle or a badge. The rings already are the shape.